enh: clean up top nav

Author: lwasser

_sass/minimal-mistakes/_masthead.scss

@@ -2,14 +2,15 @@
 ==========================================================================
 MASTHEAD
 
-Layout of the top-level items within the masthead.
-For styling of menu contents, see _pyos-dropdown.scss
+Layout and styling of the top-level items within the masthead.
+For dropdown menu functionality, see _pyos-dropdown.scss
 ==========================================================================
 */
 
 .masthead {
   position: relative;
   border-bottom: 1px solid $border-color;
+  padding-bottom: 0.15rem; // Add space below navigation to prevent overlap
   -webkit-animation: $intro-transition;
   animation: $intro-transition;
   -webkit-animation-delay: 0.15s;
@@ -22,13 +23,13 @@ For styling of menu contents, see _pyos-dropdown.scss
     margin: auto;
     padding: 0 1em;
     max-width: 100%;
-    height: 3rem;
+    height: 4rem; // Increased from 3rem to accommodate taller logo
     display: flex;
     justify-content: space-between;
     font-family: $sans-serif-narrow;
     position: relative;
     align-items: stretch;
-    min-height: 2em;
+    min-height: 3rem; // Increased from 2em to ensure adequate height
     background: #fff;
 
     & > * {
@@ -63,19 +64,28 @@ For styling of menu contents, see _pyos-dropdown.scss
   justify-content: center;
   align-items: center;
   padding: 0.5em 0;
+  margin-bottom: 0; // Ensure no extra margin causing overlap
+  flex-shrink: 0; // Prevent logo from shrinking in flexbox
+  flex-grow: 0; // Prevent logo from growing in flexbox
+
+  // Responsive adjustments for mobile
+  @media (max-width: $medium) {
+    padding: 0.25em 0; // Reduce padding on mobile but keep logo size
+  }
 
   &::after {
     display: none;
   }
 
   img {
     object-fit: contain;
-    height: 2.5em;
+    height: 2.5rem; // Use rem instead of em for consistent size across breakpoints
     width: auto;
     margin: 0;
     display: block;
     box-shadow: none;
     align-self: center;
+    max-height: 2.5rem; // Ensure it never exceeds this size
   }
 }
 
@@ -94,3 +104,47 @@ For styling of menu contents, see _pyos-dropdown.scss
   font-size: .8em;
   color: $nav-font-color;
 }
+
+/*
+==========================================================================
+NAVIGATION LINKS STYLING
+==========================================================================
+*/
+
+/* Donate button in navigation */
+.nav__links {
+  .donate-btn {
+    margin-left: 0.75em;
+    margin-top: 0.5em;
+    padding: 0.25em 0.5em;
+    font-size: 0.8em;
+    white-space: nowrap;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    height: auto;
+    line-height: 1.3;
+    border: 1px solid $pyos-darkpurple;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    transition: box-shadow 0.3s ease, transform 0.2s ease, color 0.3s ease;
+    background-color: $pyos-darkpurple;
+    color: $pyos-white !important; // override because the rest of the nav is dark
+
+    &:hover {
+      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
+      transform: translateY(-1px);
+      color: $pyos-lightpurple !important; // subtle light purple on hover
+    }
+
+    @include breakpoint($medium) {
+      margin-left: 1em;
+    }
+
+    @media (max-width: $medium) {
+      margin-left: 0;
+      margin-top: 0;
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}

_sass/minimal-mistakes/_pyos-dropdown.scss

@@ -314,8 +314,8 @@
   color: $pyos-white;
 }
 
-@media screen and (max-width: $medium) {
-  /* Hide horizontal drop down links at 48em / 768px */
+@media screen and (max-width: $large) {
+  /* Hide horizontal drop down links at $large / 1024px (closest to 1026px) */
   .nav__links {
     display: none;
   }

_sass/minimal-mistakes/_pyos-main.scss

@@ -156,38 +156,3 @@ h2.clearall {
     padding-left: 1em;
   }
 }
-
-/* Donate button in navigation */
-.nav__links {
-  .donate-btn {
-    margin-left: 0.75em;
-    margin-top: 0.5em;
-    padding: 0.25em 0.5em;
-    font-size: 0.8em;
-    white-space: nowrap;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    height: auto;
-    line-height: 1.3;
-    border: 1px solid $pyos-darkpurple;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-    transition: box-shadow 0.3s ease, transform 0.2s ease;
-
-    &:hover {
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
-      transform: translateY(-1px);
-    }
-
-    @include breakpoint($medium) {
-      margin-left: 1em;
-    }
-
-    @media (max-width: $medium) {
-      margin-left: 0;
-      margin-top: 0;
-      width: 100%;
-      justify-content: center;
-    }
-  }
-}