[chore] simplify about dropdown (#96)

Author: johnlarkin1

_config.yml

@@ -27,14 +27,8 @@ projects: # Projects dropdown links (external)
   - {name: 'Walk in the Parquet', link: 'https://www.walkintheparquet.com/'}
 
 about_links: # About dropdown links
-  - name: 'General'
-    link: '/about/'
-  - name: 'Interactive'
-    items:
-      - name: 'Timeline Explorer'
-        link: '/assets/html/larkin-mcp/john-larkin-timeline.html'
-      - name: 'Full Profile'
-        link: '/assets/html/larkin-mcp/john-larkin-profile.html'
+  - {name: 'General', link: '/about/'}
+  - {name: 'Timeline', link: '/assets/html/larkin-mcp/john-larkin-timeline.html'}
 
 tagline: >
   My personal coding blog and thought journal.

_sass/layout/_nav.scss

@@ -1,17 +1,3 @@
-// ============================================
-// Mobile Menu Staggered Reveal Animation
-// ============================================
-@keyframes menuItemReveal {
-  from {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .header {
   background-color: $dark-bg;
   color: $dark-text;
@@ -84,173 +70,67 @@
   width: 100%;
   height: auto;
   background: $dark-bg;
-
-  // Staggered reveal - only during initial opening animation
-  // Uses a separate class to avoid re-triggering on accordion toggle
-  &.js--animating {
-    .header__link,
-    .header__dropdown {
-      opacity: 0;
-      animation: menuItemReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-
-      // Staggered delays for each menu item
-      @for $i from 1 through 8 {
-        &:nth-child(#{$i}) {
-          animation-delay: #{0.03 + ($i * 0.05)}s;
-        }
-      }
-    }
-  }
 }
 
 .header__link {
   color: $dark-text;
-  padding: 1rem 0;
-  border-top: 1px solid rgba($dark-border, 0.6);
-  font-size: 1.05rem;
-  letter-spacing: 0.01em;
-  transition: background-color 0.15s ease;
-
-  // First item has no top border
-  &:first-child {
-    border-top: none;
-  }
-
-  // Subtle active/tap state for mobile
-  &:active {
-    background-color: rgba(255, 255, 255, 0.04);
-  }
+  padding: .938rem 0;
+  border-top: 1px solid $dark-border;
 
   // Reset button styles when Contact is a button
   &[type="button"],
   &:is(button) {
     background: none;
     border: none;
-    border-top: 1px solid rgba($dark-border, 0.6);
+    border-top: 1px solid $dark-border;
     font-family: inherit;
-    font-size: 1.05rem;
+    font-size: inherit;
     cursor: pointer;
     display: flex;
     align-items: center;
-    width: 100%;
-    text-align: left;
   }
 }
 
-// Projects Dropdown - Mobile Styles (Collapsible Accordion)
+// Projects Dropdown - Mobile Styles
 .header__dropdown {
-  border-top: 1px solid rgba($dark-border, 0.6);
-
-  // Accordion open state
-  &.is-open {
-    .header__dropdown-chevron {
-      transform: rotate(180deg);
-    }
-
-    .header__dropdown-menu {
-      max-height: 250px;
-      opacity: 1;
-    }
-  }
+  border-top: 1px solid $dark-border;
 }
 
 .header__dropdown-trigger {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
-  padding: 1rem 0;
-  width: 100%;
-  font-size: 1.05rem;
-  letter-spacing: 0.01em;
-  transition: background-color 0.15s ease;
-  color: $dark-text;
-  // Reset button styles
-  background: none;
-  border: none;
-  font-family: inherit;
-  text-align: left;
-
-  &:active {
-    background-color: rgba(255, 255, 255, 0.04);
-  }
 }
 
 .header__dropdown-chevron {
-  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-  margin-left: auto;
+  transition: transform 0.2s ease-in-out;
 }
 
 .header__dropdown-menu {
   display: flex;
   flex-direction: column;
   padding-left: 1rem;
-  // Collapsed by default on mobile
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-              opacity 0.25s ease;
 }
 
 .header__dropdown-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: $dark-text;
-  padding: 0.85rem 0;
-  border-top: 1px solid rgba($dark-border, 0.4);
-  font-size: 0.95rem;
-  transition: color 0.15s ease, background-color 0.15s ease;
-
-  &:first-child {
-    border-top: none;
-  }
+  padding: 0.75rem 0;
+  border-top: 1px solid $dark-border;
+  font-size: 0.9rem;
 
-  &:active {
-    background-color: rgba(255, 255, 255, 0.04);
+  &:hover {
     color: $link-color;
   }
 }
 
 .header__external-icon {
-  opacity: 0.5;
+  opacity: 0.6;
   flex-shrink: 0;
   margin-left: 0.5rem;
-  transition: opacity 0.15s ease;
-
-  .header__dropdown-item:active & {
-    opacity: 0.8;
-  }
-}
-
-// Nested dropdown submenu (for About > Timeline)
-.header__dropdown-submenu {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid rgba($dark-border, 0.4);
-  padding-top: 0.5rem;
-  margin-top: 0.25rem;
-
-  &:first-child {
-    border-top: none;
-    padding-top: 0;
-    margin-top: 0;
-  }
-}
-
-.header__dropdown-label {
-  color: rgba($dark-text, 0.5);
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0.5rem 0;
-}
-
-.header__dropdown-item--nested {
-  padding-left: 0.75rem;
-  font-size: 0.9rem;
 }
 
 .header__toggle {
@@ -303,15 +183,13 @@
   width: 0;
   height: 0;
   opacity: 0;
-  background-color: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  background-color: rgba(0, 0 , 0, .75);
   z-index: 2;
-  transition: opacity 0.4s ease;
+  transition: opacity 1s ease 0.1s;
 
   &.--open {
     width: 100%;
-    height: 100%;
+    height: 120%;
     opacity: 1;
   }
 }
@@ -429,9 +307,6 @@
   }
 
   .header__dropdown-menu {
-    // Reset mobile accordion styles for desktop
-    max-height: none;
-    overflow: visible;
     position: absolute;
     top: 100%;
     left: 0;
@@ -459,27 +334,6 @@
     }
   }
 
-  // Desktop nested submenu styles
-  .header__dropdown-submenu {
-    border-top: 1px solid rgba($dark-border, 0.3);
-    margin: 0.25rem 0;
-    padding: 0.25rem 0;
-
-    &:first-child {
-      border-top: none;
-      margin-top: 0;
-      padding-top: 0;
-    }
-  }
-
-  .header__dropdown-label {
-    padding: 0.5rem 1rem 0.25rem;
-  }
-
-  .header__dropdown-item--nested {
-    padding-left: 1.5rem;
-    font-size: 0.875rem;
-  }
 }
 
 // Keyboard shortcut badges in nav