From c0e2512a9bcb4d7fc193f7f92c6c2f8d238c8d91 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 17:03:45 -0700 Subject: [PATCH 1/3] enh: clean up top nav --- _sass/minimal-mistakes/_masthead.scss | 64 ++++++++++++++++++++-- _sass/minimal-mistakes/_pyos-dropdown.scss | 4 +- _sass/minimal-mistakes/_pyos-main.scss | 35 ------------ 3 files changed, 61 insertions(+), 42 deletions(-) diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss index 7b8d7d05..47241999 100644 --- a/_sass/minimal-mistakes/_masthead.scss +++ b/_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,6 +64,14 @@ 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; @@ -70,12 +79,13 @@ For styling of menu contents, see _pyos-dropdown.scss 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; + } + } +} diff --git a/_sass/minimal-mistakes/_pyos-dropdown.scss b/_sass/minimal-mistakes/_pyos-dropdown.scss index 5bf116a3..354446f8 100644 --- a/_sass/minimal-mistakes/_pyos-dropdown.scss +++ b/_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; } diff --git a/_sass/minimal-mistakes/_pyos-main.scss b/_sass/minimal-mistakes/_pyos-main.scss index b64051ca..62eb25ea 100644 --- a/_sass/minimal-mistakes/_pyos-main.scss +++ b/_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; - } - } -} From d17f79a7db6f1ac54fbb17f5ea3610855526c3c5 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 17:41:29 -0700 Subject: [PATCH 2/3] enh: final css cleanup --- _includes/package-grid.html | 3 ++ _pages/about-peer-review.md | 4 +- _pages/home.md | 2 +- _sass/minimal-mistakes/_pyos-grid.scss | 58 ++++++++++++++++++++++---- 4 files changed, 55 insertions(+), 12 deletions(-) diff --git a/_includes/package-grid.html b/_includes/package-grid.html index de65396c..6b7d4192 100644 --- a/_includes/package-grid.html +++ b/_includes/package-grid.html @@ -1,4 +1,5 @@ {% assign use_isotope = include.isotope | default: false %} +{% assign is_feature = include.feature %} {% if use_isotope %}
{{ apackage.package_description | markdownify }}
+ {% unless is_feature %} HI there + {% endunless %} diff --git a/_pages/about-peer-review.md b/_pages/about-peer-review.md index 2a34278d..2e46fd5e 100644 --- a/_pages/about-peer-review.md +++ b/_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 %}
- {% 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 %}
diff --git a/_pages/home.md b/_pages/home.md index 55f588a0..bba8827f 100644 --- a/_pages/home.md +++ b/_pages/home.md @@ -136,7 +136,7 @@ peer-review:
{% for apackage in packages_sorted limit:3 %} - {% include package-grid.html %} + {% include package-grid.html feature=true %} {% endfor %}
diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 4969a723..7404e8a2 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_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 { From 4b9b55ba03165efc356439ffe4906dda3d79115b Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 17:54:11 -0700 Subject: [PATCH 3/3] enh: alignment in donate button --- _includes/masthead.html | 15 ++++---- _sass/minimal-mistakes/_masthead.scss | 53 +++++++++++++++++++++++---- 2 files changed, 53 insertions(+), 15 deletions(-) diff --git a/_includes/masthead.html b/_includes/masthead.html index 90b4e9fb..5c161c9e 100644 --- a/_includes/masthead.html +++ b/_includes/masthead.html @@ -36,6 +36,14 @@ {% elsif alink.is_button %} + {% if site.search == true %} +
  • + +
    • + {% endif %}