Merge pull request #266 from neural-loop/main

Various updates

Author: neural-loop

assets/scss/_mixins.scss

@@ -2,7 +2,7 @@
   text-decoration-line: underline !important;
   text-decoration-thickness: 0.115em !important;
   text-underline-offset: 2.6px !important;
-  transition: text-decoration-color 0.3s ease-in-out;
+  transition: text-decoration-color 0.3s ease-in-out, color 0.3s ease-in-out;
   text-decoration-color: $base-color !important;
 
   &:hover {

assets/scss/_typography-custom.scss

@@ -1,5 +1,11 @@
 // assets/scss/_typography-custom.scss
 
+// Define link colors as variables
+$link-underline-color: #d7c7e3;
+$link-underline-hover-color: #200435;
+$dark-link-underline-color: #288b8c;
+$dark-link-underline-hover-color: #bcfbff;
+
 // Gradient text class
 .gradient-text {
     background: linear-gradient(135deg, var(--color-primary-new) 0%, var(--color-secondary-new) 100%);
@@ -111,15 +117,23 @@ a {
   overflow-wrap: break-word;
 }
 
+// REFACTORED: Centralized Link Styling
 .styled-link,
 .content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .btn))),
-section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
+section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon, .no-style),
+section a.social-link-container .social-link-text,
+.breadcrumb-link-text,
+.author-card-compact h4 a,
+.hardware-card-wide-link h3 {
   font-weight: inherit;
   color: inherit !important;
-  @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-  &.social-link-container { text-decoration-line: none !important; }
+  @include styled-link($link-underline-color, $link-underline-hover-color, $dark-link-underline-color, $dark-link-underline-hover-color);
 }
 
+// Container for hardware card link, which contains the h3 we want styled
+.hardware-card-wide-link {
+  text-decoration: none !important;
+}
 
 h1 a, h2 a, h3 a, h4 a, h5 a {
   text-decoration: none !important;
@@ -135,19 +149,6 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #FFF;
   }
 
-.dark .content :is(:where(a):not(:where([class~="not-prose"], [class~="btn"], [class~="not-prose"] *))),
-.dark section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
-    color: inherit !important;
-}
-
-// --- Social Link Text (within a container) ---
-section a.social-link-container .social-link-text {
-    @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-}
-.dark section a.social-link-container {
-    color: #bcfbff !important;
-}
-
   h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #ffffff !important;
   }
@@ -163,14 +164,9 @@ section a.social-link-container .social-link-text {
     color: #000 !important;
   }
 
-// --- Author Card Compact Links ---
-.author-card-compact h4 a {
-  @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-  color: #200435 !important;
-  .dark & {
-    color: #bcfbff !important;
+  .author-card-compact h4 a {
+      color: #bcfbff !important;
   }
-}
 
   .role-compact {
     @apply text-sm text-text dark:text-darkmode-text mt-1;
@@ -196,9 +192,6 @@ section a.social-link-container .social-link-text {
 a.breadcrumb-link-parent {
   text-decoration-line: none !important;
 }
-.breadcrumb-link-text {
-   @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-}
 
 .image-attribution-caption {
   // Positioning for the container div

assets/scss/buttons.scss

@@ -56,28 +56,12 @@
     border-color: color-mix(in srgb, var(--color-primary-new) 85%, black);
   }
 }
-// No specific dark mode override for .btn-primary if var(--color-primary-new) and white text
-// provide sufficient contrast on dark backgrounds. If a different dark mode appearance
-// for this specific button is needed, it can be added like:
-// .dark .btn-primary {
-//   background-color: var(--some-dark-mode-primary-variant);
-//   color: var(--some-dark-mode-text-for-primary-button);
-// }
 
 // Standard .btn-outline-primary (redefined to match .btn-new-outline for consistency)
 // Used by some components like event-card's "Learn More".
 .btn-outline-primary {
-  @apply border-2 font-semibold py-3 px-6 rounded-lg transition-all duration-300 ease-in-out inline-block text-center;
-  color: var(--color-primary-new);
-  border-color: var(--color-primary-new);
-  background-color: transparent;
-  &:hover {
-    background-color: var(--color-primary-new);
-    @apply text-white;
-  }
+  @extend .btn-new-outline;
 }
-// Dark mode for .btn-outline-primary can also be specified here if needed,
-// similar to .btn-primary. For now, relies on var(--color-primary-new).
 
 // Utility button style
 .btn-details-mini {

assets/scss/components/_breadcrumbs.scss

@@ -1,29 +1,8 @@
 // Breadcrumb specific styling
-// Remove underline from the <a> tag itself in breadcrumbs
+// This file can now be simplified as the core styling is handled by the main stylesheet.
+// We just need to ensure the parent <a> doesn't get an underline itself.
 a.breadcrumb-link-parent {
-  text-decoration-line: none !important; // Remove general underline from the <a> container
+  text-decoration-line: none !important;
 }
 
-// Apply underline only to the inner span
-.breadcrumb-link-text {
-  text-decoration-line: underline;
-  text-decoration-color: #d7c7e3; // Match general link style
-  text-decoration-thickness: 0.115em; // Match general link style
-  text-underline-offset: 2.6px; // Match general link style
-  transition: text-decoration-color 0.3s ease-in-out;
-}
-
-// Hover effect for the inner span, triggered by hovering the parent <a>
-a.breadcrumb-link-parent:hover .breadcrumb-link-text {
-  text-decoration-color: #200435; // Match general link hover style
-}
-
-// Dark mode for breadcrumb link text span
-.dark .breadcrumb-link-text {
-  text-decoration-color: #288b8c; // Match dark mode general link style
-}
-
-.dark a.breadcrumb-link-parent:hover .breadcrumb-link-text {
-  text-decoration-color: #bcfbff !important; // Match dark mode general link hover style
-}
-// End of Breadcrumb specific styling
+// The .breadcrumb-link-text will be automatically styled by the rules in _typography-custom.scss

assets/scss/components/_contributor-timeline.scss

@@ -0,0 +1,50 @@
+// assets/scss/components/_contributor-timeline.scss
+
+.contributor-timeline {
+  @apply relative pl-8;
+
+  // The vertical timeline bar
+  &::before {
+    content: '';
+    @apply absolute top-0 left-[0.3rem] w-0.5 h-full bg-border dark:bg-darkmode-border;
+  }
+}
+
+// New style for the year marker
+.timeline-year {
+  @apply relative h-12; // Height to space out the years
+
+  span {
+    @apply absolute bg-body dark:bg-darkmode-body px-3 py-0.5 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 rounded-full z-10;
+    // Center on the timeline bar (left: 0.3rem; width: w-0.5 which is 0.125rem). Center = 0.3 + (0.125/2) = 0.3625rem
+    left: calc(0.3rem + (0.125rem / 2));
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+
+.timeline-item {
+  @apply relative mb-8;
+
+  // The dot on the timeline
+  &::before {
+    content: '';
+    @apply absolute -left-[2.1rem] top-1.5 w-4 h-4 rounded-full border-4 border-body dark:border-darkmode-body;
+    background-color: var(--color-primary-new);
+  }
+
+  // Remove bottom margin on the last item for a clean finish
+  &:last-child {
+    @apply mb-0;
+  }
+}
+
+.timeline-item-content {
+  @apply p-5 rounded-lg bg-theme-light dark:bg-darkmode-theme-light shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out;
+}
+
+.timeline-item-badge {
+  // Removed mb-2 as layout is now controlled by flexbox
+  @apply inline-block bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 text-xs font-semibold px-2 py-0.5 rounded-full;
+}

assets/scss/components/_hardware-card-wide.scss

@@ -4,41 +4,12 @@
   text-decoration: none !important;
 
   // Apply a subtle transition to the card for transform and shadow changes.
-  // This addresses the "gradual and subtle" hover effect.
   @apply transition-all duration-300 ease-in-out;
 
   // On hover, lift the card slightly and increase its shadow for a modern feel.
   &:hover {
     @apply transform shadow-lg;
   }
 
-  // Target the h3 title specifically.
-  h3 {
-    // Apply the site's default underline style.
-    text-decoration-line: underline;
-    text-decoration-color: #d7c7e3; // Initial underline color
-    text-decoration-thickness: 0.115em;
-    text-underline-offset: 2.6px;
-    
-    // Animate ONLY the underline color for a smooth transition.
-    transition: text-decoration-color 0.3s ease-in-out;
-  }
-
-  // When the card is hovered, change the h3's underline color.
-  &:hover h3 {
-    text-decoration-color: #200435; // Hover underline color
-  }
-}
-
-// Dark mode styles for the card's hover state.
-.dark .hardware-card-wide-link {
-  // On hover in dark mode...
-  &:hover h3 {
-    text-decoration-color: #bcfbff !important; // Dark mode hover underline color
-  }
-
-  // Define the base underline color for the title in dark mode.
-  h3 {
-    text-decoration-color: #288b8c;
-  }
+  // The h3 title inside will be styled automatically by the rules in _typography-custom.scss
 }

assets/scss/components/_session-card.scss

@@ -20,7 +20,6 @@
   @import "utilities";
 }
 
-@import "social-share";
 @import "images";
 
 
@@ -42,6 +41,7 @@
 @import "components/hardware-card-wide"; // Add this line
 
 @import "components/og-preview";
+@import "components/contributor-timeline";
 // Import new custom typography and buttons
-@import "components/mega-menu"; // Add this line
+@import "components/mega-menu";
 @import "typography-custom";