enh: fix donate button and clean up style bugs (#777)

* enh: clean up top nav

* enh: final css cleanup

* enh: alignment in donate button

Author: lwasser

_includes/masthead.html

@@ -36,6 +36,14 @@
             </ul>
           </li>
         {% elsif alink.is_button %}
+          {% if site.search == true %}
+          <li>
+            <button class="search__toggle" type="button">
+              <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
+              <i class="fas fa-search"></i>
+            </button>
+          </li>
+          {% endif %}
           <li>
             <a href="{{ alink.url }}" class="btn btn--primary donate-btn" target="_blank" rel="noopener noreferrer">
               {{ alink.title }}
@@ -51,13 +59,6 @@
       {% endfor %}
     </ul>
 
-    {% if site.search == true %}
-        <button class="search__toggle" type="button">
-        <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
-        <i class="fas fa-search"></i>
-      </button>
-    {% endif %}
-
     <ul class="hidden-links hidden"></ul>
     <!-- Burger button  - span class for screen readers-->
     <button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">

_includes/package-grid.html

@@ -1,4 +1,5 @@
 {% assign use_isotope = include.isotope | default: false %}
+{% assign is_feature = include.feature %}
 
 {% if use_isotope %}
 <div class="element-item package-card {% for aCategory in apackage.categories %}
@@ -41,6 +42,7 @@ <h3 class="package-card__title" itemprop="name">
       {{ apackage.package_description | markdownify }}
     </div>
 
+    {% unless is_feature %} HI there
     <ul class="package-card__links">
       <li><a href="{{ apackage.repository_link }}" rel="permalink"><i class="fab fa-github" aria-hidden="true"></i> View Code</a></li>
       {% if apackage.gh_meta.documentation %}
@@ -57,5 +59,6 @@ <h3 class="package-card__title" itemprop="name">
         <li class="package-card__archived"><i class="fa-solid fa-box-archive" aria-hidden="true"></i> Archived</li>
       {% endif %}
     </ul>
+    {% endunless %}
   </div>
 </div>

_pages/about-peer-review.md

@@ -157,8 +157,8 @@ We are deeply grateful for those served on our editorial board previously!
 {% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %}
 
 <div class="grid">
-  {% for apackage in packages_sorted limit:4 %}
-    {% include package-grid.html %}
+  {% for apackage in packages_sorted limit:3 %}
+    {% include package-grid.html feature=true %}
   {% endfor %}
 </div>
 

_pages/home.md

@@ -136,7 +136,7 @@ peer-review:
 
 <div class="packages-grid">
   {% for apackage in packages_sorted limit:3 %}
-    {% include package-grid.html %}
+    {% include package-grid.html feature=true %}
   {% endfor %}
 </div>
 

_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,19 +23,23 @@ 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;
 
     & > * {
       margin: auto;
     }
 
+    .nav__links {
+      margin: 0;
+    }
+
     a {
       text-decoration: none;
     }
@@ -63,19 +68,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 +108,80 @@ For styling of menu contents, see _pyos-dropdown.scss
   font-size: .8em;
   color: $nav-font-color;
 }
+
+/*
+==========================================================================
+NAVIGATION LINKS STYLING
+==========================================================================
+*/
+
+/* Donate button and search in navigation */
+.nav__links {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+
+  li {
+    display: flex;
+    align-items: center;
+  }
+
+  .search__toggle {
+    margin-left: 0 !important;
+    margin-right: 0.75em !important;
+    padding: 14px 12px;
+    background: transparent;
+    border: none;
+    color: $nav-font-color;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    height: 100%;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: $pyos-darkpurple;
+    }
+
+    i {
+      font-size: 1em;
+    }
+  }
+
+  .donate-btn {
+    margin-left: 0;
+    padding: 0.5em 0.75em;
+    font-size: 0.8em;
+    font-weight: 500;
+    white-space: nowrap;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: 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;
+
+    &: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;
+    }
+
+    @include breakpoint($medium) {
+      margin-left: 0;
+    }
+
+    @media (max-width: $medium) {
+      margin-left: 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-grid.scss

@@ -176,7 +176,7 @@ $colors: (
     }
   }
 
-// Home page packages section - fixed breakpoints
+// Home page packages section - fixed breakpoints (max 3 columns for better spacing)
 .packages-grid {
   display: grid;
   grid-gap: 10px;
@@ -187,11 +187,45 @@ $colors: (
   }
 
   @media (min-width: $medium) {
-    grid-template-columns: repeat(3, 1fr); // Medium: 3 columns
+    grid-template-columns: repeat(3, 1fr); // Medium and above: 3 columns (max)
   }
 
-  @media (min-width: $large) {
-    grid-template-columns: repeat(4, 1fr); // Large: 4 columns
+  // Feature package cards - compact display
+  .package-card {
+    .package-card__content {
+      padding: 1.25em;
+    }
+
+    .package-card__title {
+      font-size: 1.5em;
+    }
+
+    .package-card__meta {
+      font-size: 0.75em;
+    }
+
+    .package-card__description p {
+      font-size: 1.1em;
+      line-height: 1.5em;
+    }
+  }
+}
+
+.grid .package-card {
+  .package-card__content {
+    padding: 1.25em;
+  }
+
+  .package-card__title {
+    font-size: 1.0375em;
+  }
+
+  .package-card__meta {
+    font-size: 0.75em;
+  }
+
+  .package-card__description {
+    font-size: 0.8125em;
   }
 }
 
@@ -286,16 +320,20 @@ $colors: (
   .grid-item {
     display: flex;
     flex-direction: column;
-    background: $pyos-mediumpurple;
-    border: 1px solid #ddd;
+    background: transparent;
+    border: none;
     border-radius: 8px;
-    overflow: hidden;
+    overflow: visible;
     padding: 0;
   }
 
+  .cards.highlight {
+    margin: 0 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+  }
 
-  div>div {
-    padding:0;
+  div > div {
+    padding: 0;
   }
 }
 
@@ -304,6 +342,7 @@ $colors: (
   display: flex;
   flex-direction: column;
   height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
 
   .cards__image {
     max-height: 200px;
@@ -322,6 +361,7 @@ $colors: (
 
   &:hover {
     cursor: default;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); // Maintain shadow on hover (override base .cards hover shadow)
   }
 
   .card-body {

_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;
-    }
-  }
-}