feat(nav): primary nav design shifts to blocks with per section colors

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.5.0",
+      "version": "1.6.0",
       "license": "MIT",
       "dependencies": {
         "minisearch": "^7.1.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/assets/styles/base/index.css

@@ -239,13 +239,14 @@ a {
   transition: color var(--transition-duration-default) var(--transition-ease-in-out),
     text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
 
-  img {
+  img:not(.icon) {
     border: var(--border-default);
     filter: var(--filter-image-default);
     transition: filter var(--transition-duration-default) var(--transition-ease-in-out);
   }
 
-  svg {
+  svg,
+  .icon {
     transform: var(--transform-icon-default);
   }
 
@@ -266,7 +267,7 @@ a {
     color: var(--link-color-hover);
     text-underline-offset: var(--underline-offset-hover);
 
-    img {
+    img:not(.icon) {
       filter: var(--filter-image-light);
 
       @media (prefers-color-scheme: dark) {
@@ -274,7 +275,8 @@ a {
       }
     }
 
-    svg {
+    svg,
+    .icon {
       transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
       transform: var(--transform-icon-tilt);
     }

src/assets/styles/components/buttons.css

@@ -4,23 +4,31 @@
 button:not([data-modal-button]),
 .button {
   appearance: none;
-  border: 2px solid var(--accent-color);
+  border: 2px solid var(--section-color, var(--accent-color));
-  border-radius: var(--border-radius-full);
+  border-radius: var(--border-radius-slight);
   padding: var(--spacing-xs) var(--spacing-md);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
+  line-height: var(--line-height-md);
+  text-align: center;
+  text-decoration: none;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   color: var(--text-color-inverted);
-  background-color: var(--accent-color);
+  background-color: var(--section-color, var(--accent-color));
-  transition: color var(--transition-duration-default) var(--transition-ease-in-out);
 
   &:not(.active):is(:hover, :active, :focus, :focus-within) {
     background-color: var(--accent-color-hover);
     border: 2px solid var(--accent-color-hover);
     transition:
+      font-size var(--transition-duration-default) var(--transition-ease-in-out),
       background-color var(--transition-duration-default) var(--transition-ease-in-out),
-      border var(--transition-duration-default) var(--transition-ease-in-out),
+      border var(--transition-duration-default) var(--transition-ease-in-out);
-      color var(--transition-duration-default) var(--transition-ease-in-out);
+  }
+
+  &.active {
+    background: transparent;
+    color: var(--accent-color);
   }
 }

src/assets/styles/components/header.css

@@ -19,9 +19,6 @@
 
     img {
       max-width: calc(var(--sizing-3xl) * 1.25);
-      transform: var(--transform-icon-default);
-      border: none;
-      filter: none;
     }
 
     span {
@@ -40,9 +37,4 @@
       }
     }
   }
-
-  h1 a:is(:hover, :focus, :active) img {
-    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
-    transform: var(--transform-icon-tilt);
-  }
 }

src/assets/styles/components/nav.css

@@ -21,6 +21,12 @@ nav {
 
   &.primary {
     margin-top: var(--spacing-base);
+    display: grid;
+    grid-template-columns: var(--grid-columns-three);
+
+    @media screen and (min-width: 768px) {
+      grid-template-columns: var(--grid-columns-six);
+    }
   }
 
   &.icons {

src/includes/layout/header.liquid

@@ -1,5 +1,5 @@
 {%- capture headerContent -%}
-  <img src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %}" alt"{{ globals.site_name }}" />
+  <img class="icon" src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %}" alt"{{ globals.site_name }}" />
   <span>Cory</span> <span>Dransfeldt</span>
 {%- endcapture -%}
 <section class="main-title">
@@ -20,5 +20,4 @@
   page:page,
   nav:nav.primary
   class:"primary"
-  separator:true
 %}

src/includes/nav/link.liquid

@@ -1,8 +1,12 @@
 {%- assign categoryUrl = link.permalink | downcase -%}
 {%- assign isHttp = categoryUrl contains "http" -%}
 {%- if categoryUrl | isLinkActive:page.url -%}
+{%- capture linkClass -%}
+  {%- if link.section -%}button{%- endif -%}
+  {%- if link.icon -%}icon{%- endif -%}
+{%- endcapture -%}
   <span
-    class="active {{ link.class }}"
+    class="active {{ linkClass }}"
     aria-current="page"
   >
     {%- if link.icon -%}
@@ -14,7 +18,7 @@
   </span>
 {%- else -%}
   <a
-    class="{% if link.section %}{{ link.section | downcase }} {% endif %}{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}{{ link.class }}"
+    class="{% if link.section %}{{ link.section | downcase }} button {% endif %}{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}"
     href="{{ categoryUrl }}"
     {% if isHttp -%} rel="me" {%- endif %}
     title="{{ link.title }}"