Merge pull request open-neuromorphic#245 from neural-loop/design-adjustments

Design adjustments - taming text

Author: neural-loop

assets/scss/_mixins.scss

@@ -0,0 +1,18 @@
+@mixin styled-link($base-color, $hover-color, $dark-base-color, $dark-hover-color) {
+  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;
+  text-decoration-color: $base-color !important;
+
+  &:hover {
+    text-decoration-color: $hover-color !important;
+  }
+
+  .dark & {
+    text-decoration-color: $dark-base-color !important;
+    &:hover {
+      text-decoration-color: $dark-hover-color !important;
+    }
+  }
+}

assets/scss/_typography-custom.scss

@@ -41,23 +41,18 @@ nav#TableOfContents {
   a {
     @apply block rounded-md text-sm transition-all duration-200 ease-in-out;
     padding: 0.4rem 0.75rem;
-    color: theme('colors.light');
     text-decoration: none !important;
-    font-weight: 500 !important;
     border-left: 3px solid transparent;
     line-height: 1.4;
 
     &:hover {
       background-color: theme('colors.body');
-      color: var(--color-primary-new);
       border-left-color: theme('colors.border');
     }
   }
 
   li.active > a {
-    color: var(--color-primary-new) !important;
     background-color: rgba(102, 126, 234, 0.1); // Tint of primary color
-    font-weight: 600 !important;
     border-left-color: var(--color-primary-new);
   }
 
@@ -71,17 +66,14 @@ nav#TableOfContents {
 .dark {
   nav#TableOfContents {
     a {
-      color: theme('colors.darkmode.light');
 
       &:hover {
         background-color: rgba(255, 255, 255, 0.05);
-        color: theme('colors.darkmode.primary');
         border-left-color: theme('colors.darkmode.border');
       }
     }
 
     li.active > a {
-      color: theme('colors.darkmode.primary') !important;
       background-color: rgba(188, 251, 255, 0.1); // Tint of dark primary
       border-left-color: theme('colors.darkmode.primary');
     }
@@ -119,43 +111,18 @@ a {
   overflow-wrap: break-word;
 }
 
-.content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))),
-section a:not(.breadcrumb-link-parent, .social-link-container) { // Exclude social link containers
-  text-decoration-color: #d7c7e3;
-  text-decoration-thickness: 0.115em;
-  text-underline-offset: 2.6px;
-  text-decoration-line: underline;
-  font-weight: 550 !important;
-  transition: text-decoration-color 0.3s ease-in-out;
-}
-
-.content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover),
-section a:not(.breadcrumb-link-parent, .social-link-container):hover {
-  text-decoration-color: #200435;
-}
-
-// New rules for social links
-section a.social-link-container {
-  text-decoration-line: none !important; // Remove underline from the container <a>
-  font-weight: 550 !important;
-}
-
-section a.social-link-container .social-link-text {
-  text-decoration-line: underline;
-  text-decoration-color: #d7c7e3;
-  text-decoration-thickness: 0.115em;
-  text-underline-offset: 2.6px;
-  transition: text-decoration-color 0.3s ease-in-out;
-}
-
-section a.social-link-container:hover .social-link-text {
-  text-decoration-color: #200435;
+.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) {
+  font-weight: inherit;
+  color: inherit !important;
+  @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
+  &.social-link-container { text-decoration-line: none !important; }
 }
 
 
 h1 a, h2 a, h3 a, h4 a, h5 a {
   text-decoration: none !important;
-  font-weight: 550 !important;
+  font-weight: inherit !important;
 }
 
 .social-icons a {
@@ -167,29 +134,18 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #FFF;
   }
 
-  .content :is(:where(a):not(:where([class~="not-prose"], [class~="btn"], [class~="not-prose"] *))),
-  section a:not(.breadcrumb-link-parent, .social-link-container) { // Exclude social link containers
-    color: #bcfbff !important;
-    text-decoration-color: #288b8c;
-  }
-
-  .content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover),
-  section a:not(.breadcrumb-link-parent, .social-link-container):hover {
-    text-decoration-color: #bcfbff !important;
-  }
-  
-  // New rules for dark mode social links
-  .dark section a.social-link-container {
-      color: #bcfbff !important;
-  }
+.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;
+}
 
-  .dark section a.social-link-container .social-link-text {
-      text-decoration-color: #288b8c;
-  }
-  
-  .dark section a.social-link-container:hover .social-link-text {
-      text-decoration-color: #bcfbff !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;
@@ -205,37 +161,16 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
   .social-icons a {
     color: #000 !important;
   }
-  
-  .author-card-compact {
-    h4 a {
-      color: #bcfbff !important;
-      text-decoration-color: #288b8c !important;
 
-      &:hover {
-        text-decoration-color: #bcfbff !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 {
-    @apply text-lg font-semibold;
-    a {
-      color: #200435 !important;
-      text-decoration-line: underline !important;
-      text-decoration-color: #d7c7e3 !important;
-      text-decoration-thickness: 0.115em !important;
-      text-underline-offset: 2.6px !important;
-      font-weight: 550 !important;
-      transition: text-decoration-color 0.3s ease-in-out;
-
-      &:hover {
-        text-decoration-color: #200435 !important;
-      }
-    }
-  }
-
   .role-compact {
     @apply text-sm text-text dark:text-darkmode-text mt-1;
   }
@@ -256,24 +191,12 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
     }
   }
 }
-// New rules for contributor page social links
-.contributor-socials a {
-  text-decoration: none !important; 
-  font-weight: normal !important;
-  color: #444444; 
-  transition: color 0.2s ease-in-out;
-
-  &:hover {
-    color: #121212; 
-  }
+// --- Breadcrumb Links ---
+a.breadcrumb-link-parent {
+  text-decoration-line: none !important;
 }
-
-.dark .contributor-socials a {
-  color: #B4AFB6; 
-  
-  &:hover {
-    color: #bcfbff; 
-  }
+.breadcrumb-link-text {
+   @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
 }
 
 .image-attribution-caption {
@@ -300,7 +223,4 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
       }
     }
   }
-}
-
-// NOTE: We no longer need a separate .dark rule for this,
-// as the dark semi-transparent background works well in both light and dark modes.
+}

assets/scss/base.scss

@@ -14,7 +14,7 @@ h3,
 h4,
 h5,
 h6 {
-  @apply font-secondary text-dark dark:text-darkmode-dark font-bold leading-tight;
+  @apply font-secondary text-dark dark:text-darkmode-dark font-semibold leading-tight;
 }
 
 h1,
@@ -47,10 +47,6 @@ h6,
   @apply text-h6 font-medium;
 }
 
-b,
-strong {
-  @apply font-semibold;
-}
 
 code {
   @apply after:border-none;
@@ -59,3 +55,4 @@ code {
 blockquote > p {
   @apply my-0 #{!important};
 }
+

assets/scss/components.scss

@@ -46,7 +46,7 @@ main {
   @apply prose-h1:text-h2-sm md:prose-h1:text-h2; // Markdown '#' will be like a global H2
   @apply prose-h2:text-h3-sm md:prose-h2:text-h3; // Markdown '##' will be like a global H3
   @apply prose-h3:text-h4;                       // Markdown '###' will be like a global H4
-  @apply prose-h4:text-h5;                       // Markdown '####' will be like a global H5
+  @apply prose-h4:text-h5;                       // Markdown '#####' will be like a global H5
   @apply prose-h5:text-h6;                       // Markdown '#####' will be like a global H6
   @apply prose-h6:text-base prose-h6:font-semibold; // Markdown '######' will be base size, bold
 
@@ -56,7 +56,7 @@ main {
 
   blockquote {
     @apply bg-white dark:bg-darkmode-theme-light rounded-xl p-6 shadow-md transition-all duration-300 ease-in-out not-italic;
-    @apply font-secondary text-xl text-dark dark:text-darkmode-light; // Text styling for blockquote
+    @apply font-primary text-xl text-dark dark:text-darkmode-light; // Text styling for blockquote
     border-left: 4px solid var(--color-accent-new); // Pink left border like news-card
     border-top: none; // Remove other prose borders
     border-right: none;
@@ -85,8 +85,12 @@ main {
 
   @apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
   @apply prose-code:px-1;
-  @apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
-  @apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
+
+  strong {
+    color: inherit;
+    font-weight: 550;
+  }
+  @apply prose-a:underline hover:prose-a:text-primary hover:prose-a:dark:text-darkmode-primary;
   @apply prose-li:text-text prose-li:dark:text-darkmode-text;
   @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
   @apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
@@ -96,4 +100,4 @@ main {
   .btn {
     @apply dark:hover:text-dark no-underline hover:text-white #{!important};
   }
-}
+}

assets/scss/components/_og-preview.scss

@@ -47,7 +47,8 @@
 }
 
 .social-icon {
-  @apply text-white text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
+  @apply text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
+  color: white;
   background: rgba(0,0,0, 0.6);
   backdrop-filter: blur(2px);
   border-radius: 50%;

assets/scss/main.scss

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "mixins";
+
 @layer base {
   @import "base";
   @import "fonts";

content/blog/strategic-vision-open-neuromorphic/index.md

@@ -6,8 +6,6 @@ image_attribution:
   text: "Photo by"
   author: "Casey Horner"
   url: "https://unsplash.com/photos/fireworks-pXZxuXmpsNo"
-aliases:
-  - /blog/vision
 draft: false
 date: 2025-06-11
 showTableOfContents: true

generate_context.py

@@ -209,6 +209,7 @@ def generate_header(mode: str, checkpoint_file: Path | None = None, with_public_
 9.  Provide Code with focus toward with minimal commenting
 10. dont include {{{{/* comments */}}}}, every time it confuses hugo and causes errors
 11. If we are copying or moving files, provide the bash command to accomplish this
+12. We don't need to make backups of files before big edits - there is sufficient rollback capability in dev environment
 """
     if mode == "diff":
         checkpoint_ts_str = "ERROR: Checkpoint file missing!"

layouts/_default/_markup/render-link.html

@@ -11,6 +11,6 @@
   >
   {{- .Text | safeHTML -}}
   {{- if and $isExternal (not (in (string $class) "btn")) (not (in (string $class) "breadcrumb-link-parent")) (not (in (string $class) "social-link-container")) -}}
-    {{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block align-baseline ml-1 h-[0.8em] w-[0.8em]") -}}
+    {{- partial "icon.html" (dict "style" "solid" "name" "arrow-up-right-from-square" "class" "inline-block  ml-[.5] pb-[.4]" "width" "1em" "height" "0.7em") -}}
   {{- end -}}
-</a>
+</a>

layouts/partials/icon.html

@@ -1,11 +1,13 @@
 {{- $style := .style | default "solid" -}}
 {{- $name := .name -}}
 {{- $class := .class | default "" -}}
+{{- $width := .width | default "1em" -}}
+{{- $height := .height | default "1em" -}}
 
 {{- if $name -}}
-<svg class="icon icon-{{ $name }} {{ $class }}" fill="currentColor" aria-hidden="true" role="img" style="display: inline-block; vertical-align: -0.125em; width: 1em; height: 1em;">
+<svg class="icon icon-{{ $name }} {{ $class }}" fill="currentColor" aria-hidden="true" role="img" style="display: inline-block; vertical-align: middle; width: {{ $width }}; height: {{ $height }};">
   <use xlink:href="#icon-{{ $style }}-{{ $name }}"></use>
 </svg>
 {{- else -}}
   {{- warnf "Icon partial called without a 'name'." -}}
-{{- end -}}
+{{- end -}}