Fix/contribute dark mode code styling

frontend/css/contribute.css

@@ -18,11 +18,20 @@ body {
   --light-parchment: #fff8e7;
   --charcoal-dark: #2c2c2c;
   --text-secondary: #5a5a5a;
-
+  --code-bg: #f8f9fa;
+  --code-border: #e0e0e0;
+  --code-text: #2c2c2c;
+  --code-comment: #6a737d;
   --shadow-main: 0 8px 32px rgba(0, 0, 0, 0.12);
   --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.18);
 }
 
+body.dark-mode {
+  --code-bg: #1e1e1e;      /* Soft dark gray background */
+  --code-border: #333333; /* Subtle border */
+  --code-text: #e6e6e6;    /* Light readable text */
+  --code-comment: #9ca3af; /* Muted gray for comments */
+}
 
 body {
   font-family: "Crimson Text", Georgia, serif;
@@ -34,9 +43,6 @@ body {
   color: var(--charcoal-dark);
 }
 
-
-
-
 main {
   margin-top: 0;
   padding-top: 0;
@@ -640,22 +646,8 @@ body.dark-mode li {
   color: #cccccc;
 }
 
-/* Code blocks remain readable */
-body.dark-mode .code-block,
-body.dark-mode pre {
-  background-color: #ffffff;
-  color: #333333;
-  border-color: #e0e0e0;
-}
-
-body.dark-mode code {
-  background-color: #ffffff;
-  color: #333333;
-}
-
-/* Best Practices Section Proper Styling */
-
-.practices-section {
+/* Best practices section stays light */
+body.dark-mode .practices-container {
   background-color: #ffffff;
 }
 

frontend/css/contributors.css

@@ -118,24 +118,6 @@ body.dark-mode .contributors-section p {
   flex: 0 0 auto;
 }
 
-.contributor-github {
-  width: 42px;
-  height: 42px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  color: var(--deep-navy);
-  background: rgb(255 255 255 / 90%);
-  border: 1px solid rgb(212 175 55 / 24%);
-  transition: transform 0.2s ease, background 0.2s ease;
-}
-
-.contributor-github:hover {
-  transform: scale(1.06);
-  background: rgb(255 248 231 / 95%);
-}
 .contributor-card {
   background: linear-gradient(
     180deg,
@@ -149,8 +131,10 @@ body.dark-mode .contributors-section p {
     inset 0 1px 0 rgb(255 255 255 / 60%);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1.5rem;
   max-width: 360px;
+  min-height: 140px;
   margin: 0 auto;
   position: relative;
 
@@ -180,9 +164,10 @@ body.dark-mode .contributors-section p {
 
 .contributor-main {
   flex: 1;
+  max-width: 100px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
 }
 
 .contributor-name {
@@ -240,29 +225,10 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-actions {
-
   flex-shrink: 0;
-}
-
-.contributor-github {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: #1a2433;
-  background: #f9f9f9;
-  border: 1.5px solid #d4af37;
-  box-shadow: 0 2px 6px rgb(0 0 0 / 0.07);
-  transition: all 0.25s ease;
-  cursor: pointer;
-}
-
-.contributor-github:hover {
-  background: #fff8dc;
-  transform: scale(1.12);
-  box-shadow: 0 4px 10px rgb(212 175 55 / 0.5);
 }
 
 /* Skeleton loading */
@@ -764,20 +730,6 @@ body.dark-mode .contributors-section p {
   }
 }
 
-/* Card refinement */
-.contributor-card {
-  padding: 1.5rem 1.55rem 1.35rem;
-  border-radius: 20px;
-  background: linear-gradient(
-    180deg,
-   #dfc981fb,
-    rgb(255 255 255 / 88%)
-  );
-  box-shadow:
-    0 12px 30px rgb(0 0 0 / 8%),
-    inset 0 1px 0 rgb(255 255 255 / 60%);
-}
-
 /* Hover feels lighter */
 .contributor-card:hover {
   transform: translateY(-5px);
@@ -862,21 +814,6 @@ body.dark-mode .contributors-section p {
   color: var(--text-secondary);
 }
 
-/* GitHub action button */
-.contributor-github {
-  width: 44px;
-  height: 44px;
-  background: linear-gradient(
-    180deg,
-    rgb(255 255 255 / 95%),
-    rgb(248 248 248 / 90%)
-  );
-}
-
-.contributor-github:hover {
-  background: rgb(255 250 235);
-}
-
 /* Mobile tuning */
 @media (max-width: 720px) {
   .contributors-grid {
@@ -916,13 +853,6 @@ body.dark-mode .contributors-section p {
   text-overflow: ellipsis;    
 }
 
-.contributor-actions {
-  flex-shrink: 0;  
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-}
-
 /* Animation trigger */
 .contributor-card.is-visible {
     opacity: 1;
@@ -1006,16 +936,29 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-github {
-    font-size: 1.5rem;
-    color: #1b263b;
-    transition: color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.3rem;
+  text-decoration: none;
+
+  background: #ffffff;
+  border: 2px solid #d4af37;
+  color: #1b263b;
+
+  transition: all 0.25s ease;
+  flex-shrink: 0;
 }
 
 .contributor-github:hover {
-    color: #d4af37; /* Gold */
+  transform: scale(1.1);
+  background: #fff8dc;
+  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
 }
 
 /* =========================================
@@ -1092,11 +1035,13 @@ body.dark-mode .contributor-chip.is-bot {
 }
 
 body.dark-mode .contributor-github {
-    color: #e0e0e0 !important; /* White/Light Grey Icon */
+  background: #1f2937;
+  border-color: #d4af37;
+  color: #f9fafb;
 }
 
 body.dark-mode .contributor-github:hover {
-    color: #d4af37 !important; /* Gold on Hover */
+  background: #2a2f3a;
 }
 
 /* Skeleton Dark Mode */