From d80d254a479781826dcd177eaf3fe922fc42214f Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 10:15:07 -0700 Subject: [PATCH 1/5] enh: fix people cards on landing and volunteer pages --- _sass/minimal-mistakes/_pyos-grid.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index fc782808..5a276d97 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -93,6 +93,13 @@ $colors: ( } } +// Home page and volunteer page new contributors section - auto-responsive +.entries-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc($small/4), 1fr)); + grid-gap: 8px; +} + .grid-item { background: #f9f9f9; border: 1px solid #ddd; From 4c2fc6c648fc4e58ddc9f1b42a8825e3526161a7 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 10:22:35 -0700 Subject: [PATCH 2/5] enh: card size --- _sass/minimal-mistakes/_pyos-grid.scss | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 5a276d97..d2e49969 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -95,10 +95,27 @@ $colors: ( // Home page and volunteer page new contributors section - auto-responsive .entries-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc($small/4), 1fr)); - grid-gap: 8px; -} + display: grid; + grid-gap: 8px; + grid-template-columns: 1fr; // Mobile: 1 column + + > * { + max-width: 280px; // Adjust this value + width: 100%; + } + + @media (min-width: 640px) { + grid-template-columns: repeat(2, 1fr); // Small: 2 columns + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, 1fr); // Medium: 3 columns + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, 1fr); // Large: 4 columns + } + } .grid-item { background: #f9f9f9; From c3e9aea556b391bcb36d37e35f1cf10c8f63f779 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 11:02:50 -0700 Subject: [PATCH 3/5] enh(refactor): refactor styles to separate concerns and use variables --- _includes/package-grid.html | 6 +++++ _pages/home.md | 2 +- _pages/python-packages.md | 4 +-- _sass/minimal-mistakes/_pyos-grid.scss | 26 +++++++++++++----- _sass/minimal-mistakes/_pyos-isotope.scss | 33 +++++++++++++---------- 5 files changed, 47 insertions(+), 24 deletions(-) diff --git a/_includes/package-grid.html b/_includes/package-grid.html index 98ea2a9c..de65396c 100644 --- a/_includes/package-grid.html +++ b/_includes/package-grid.html @@ -1,6 +1,12 @@ +{% assign use_isotope = include.isotope | default: false %} + +{% if use_isotope %}
+{% else %} +
+{% endif %}

{{ apackage.package_name }} diff --git a/_pages/home.md b/_pages/home.md index 2155844e..55f588a0 100644 --- a/_pages/home.md +++ b/_pages/home.md @@ -134,7 +134,7 @@ peer-review: {% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %} -
+
{% for apackage in packages_sorted limit:3 %} {% include package-grid.html %} {% endfor %} diff --git a/_pages/python-packages.md b/_pages/python-packages.md index 2d201139..c7ce89b1 100644 --- a/_pages/python-packages.md +++ b/_pages/python-packages.md @@ -51,7 +51,7 @@ To view packages affiliated with our partner communities that are a part of ourp
{% for apackage in packages_sorted %} {% if apackage.active == true %} - {% include package-grid.html %} + {% include package-grid.html isotope=true %} {% endif %} {% endfor %}
@@ -65,7 +65,7 @@ Archived packages are packages that have successfully completed [pyOpenSci's sof
{% for apackage in packages_sorted %} {% if apackage.active == false %} - {% include package-grid.html %} + {% include package-grid.html isotope=true %} {% endif %} {% endfor %}
diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index d2e49969..6f0ede93 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -24,6 +24,13 @@ $colors: ( // Include the mixin //@include generate-color-styles($colors); +// Shared mixin for auto-responsive grid behavior +@mixin responsive-grid($min-width, $gap: 8px) { + display: grid; + grid-gap: $gap; + grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr)); +} + .clearfix::after { content: ""; display: table; @@ -53,10 +60,10 @@ $colors: ( &.advisory-council-grid { grid-template-columns: repeat(4, 1fr); grid-gap: 8px; - @media screen and (max-width: 1199px) { + @media screen and (max-width: $x-large) { grid-template-columns: repeat(3, 1fr); } - @media screen and (max-width: 768px) { + @media screen and (max-width: $medium) { grid-template-columns: repeat(2, 1fr); } } @@ -100,23 +107,28 @@ $colors: ( grid-template-columns: 1fr; // Mobile: 1 column > * { - max-width: 280px; // Adjust this value + max-width: 280px; width: 100%; } - @media (min-width: 640px) { + @media (min-width: $small) { grid-template-columns: repeat(2, 1fr); // Small: 2 columns } - @media (min-width: 768px) { + @media (min-width: $medium) { grid-template-columns: repeat(3, 1fr); // Medium: 3 columns } - @media (min-width: 1024px) { + @media (min-width: $large) { grid-template-columns: repeat(4, 1fr); // Large: 4 columns } } +// Home page packages section - auto-responsive +.packages-grid { + @include responsive-grid(350px, 10px); +} + .grid-item { background: #f9f9f9; border: 1px solid #ddd; @@ -508,7 +520,7 @@ $colors: ( /* max 480 px */ - @media screen and (max-width: 480px) { + @media screen and (max-width: $mobile) { // large buttons are disproportionately large // Elements outside of notice blocks such as the blog page .blog__grid { diff --git a/_sass/minimal-mistakes/_pyos-isotope.scss b/_sass/minimal-mistakes/_pyos-isotope.scss index f41fd407..b85567de 100644 --- a/_sass/minimal-mistakes/_pyos-isotope.scss +++ b/_sass/minimal-mistakes/_pyos-isotope.scss @@ -159,13 +159,8 @@ input[type="text"] { /* ---- Package Cards - Separate concerns ---- */ -.element-item.package-card { - margin: 8px; - padding: 0; - overflow: visible; - // Account for 8px margins on each side (16px total) - width: calc(#{$package-column-width} - 16px); - +// Base package card styles - apply to all package cards (isotope and grid) +.package-card { .package-card__content { background: #fff; border: 1px solid #e0e0e0; @@ -274,24 +269,34 @@ input[type="text"] { } } -// Responsive adjustments for package cards -@media screen and (max-width: 1199px) { +// Isotope-specific styles - width and margin for isotope layout +.element-item.package-card { + margin: 8px; + padding: 0; + overflow: visible; + // Account for 8px margins on each side (16px total) + width: calc(#{$package-column-width} - 16px); +} + +// Responsive adjustments for isotope package cards (width only) +@media screen and (max-width: $x-large) { .element-item.package-card { width: calc(#{$package-column-width} - 16px); } } -@media screen and (max-width: 768px) { +@media screen and (max-width: $medium) { .element-item.package-card { width: calc(50% - 16px); + } - .package-card__content { - padding: 1.25em; - } + // Responsive padding for all package cards + .package-card .package-card__content { + padding: 1.25em; } } -@media screen and (max-width: 480px) { +@media screen and (max-width: $mobile) { .element-item.package-card { width: 100%; margin-left: 0; From fc5bfd9a7625353632cc910d85123c688582e72f Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 11:26:45 -0700 Subject: [PATCH 4/5] enh: remove socials we don't use --- _data/ui-text.yml | 2 +- _includes/author-profile.html | 40 ----------- _includes/footer.html | 4 +- _sass/minimal-mistakes/_footer.scss | 94 +++++++++++--------------- _sass/minimal-mistakes/_pyos-grid.scss | 21 +++++- _sass/minimal-mistakes/_pyos-main.scss | 9 --- _sass/minimal-mistakes/_utilities.scss | 81 +--------------------- _sass/minimal-mistakes/_variables.scss | 6 -- 8 files changed, 64 insertions(+), 193 deletions(-) diff --git a/_data/ui-text.yml b/_data/ui-text.yml index 634b9f5d..09cec56b 100644 --- a/_data/ui-text.yml +++ b/_data/ui-text.yml @@ -23,7 +23,7 @@ en: &DEFAULT_EN comments_title : "Comments" more_label : "Learn more" related_label : "You may also enjoy" - follow_label : "Connect:" + follow_label : "" feed_label : "Feed" powered_by : "Powered by" website_label : "Website" diff --git a/_includes/author-profile.html b/_includes/author-profile.html index e256ec7d..64efd406 100644 --- a/_includes/author-profile.html +++ b/_includes/author-profile.html @@ -56,14 +56,6 @@

{% endif %} - {% if author.keybase %} -
  • - - Keybase - -
  • - {% endif %} - {% if author.twitter %}
  • @@ -88,14 +80,6 @@

  • {% endif %} - {% if author.xing %} -
  • - - XING - -
  • - {% endif %} - {% if author.instagram %}
  • @@ -112,14 +96,6 @@

  • {% endif %} - {% if author.bitbucket %} -
  • - - Bitbucket - -
  • - {% endif %} - {% if author.github %}
  • @@ -152,14 +128,6 @@

  • {% endif %} - {% if author.dribbble %} -
  • - - Dribbble - -
  • - {% endif %} - {% if author.pinterest %}
  • @@ -168,14 +136,6 @@

  • {% endif %} - {% if author.foursquare %} -
  • - - Foursquare - -
  • - {% endif %} - {% if author.steam %}
  • diff --git a/_includes/footer.html b/_includes/footer.html index 5e87af14..ad239623 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -23,11 +23,11 @@
  • diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss index 9b04b30b..1fc0a5a7 100644 --- a/_sass/minimal-mistakes/_footer.scss +++ b/_sass/minimal-mistakes/_footer.scss @@ -83,65 +83,47 @@ padding-right: 10px; font-weight: bold; } +} - .social-icons { - a { - white-space: nowrap; - } +// Footer social icons - consolidated styles with higher specificity +.page__footer .page__footer-follow .social-icons, +.page__footer-follow .social-icons { + a { + white-space: nowrap; + color: rgba($pyos-white, 0.9); + text-decoration: none; - i { - font-size: 0.85em; - margin-right: 0.3em; + &:hover { + color: $pyos-white; + text-decoration: underline; } + } - // Override all brand colors to be white with grey mixed in - .fas, - .fab, - .far, - .fal, - .fa-behance, - .fa-behance-square, - .fa-bitbucket, - .fa-dribbble, - .fa-dribble-square, - .fa-facebook, - .fa-facebook-square, - .fa-facebook-f, - .fa-flickr, - .fa-foursquare, - .fa-github, - .fa-github-alt, - .fa-github-square, - .fa-gitlab, - .fa-instagram, - .fa-keybase, - .fa-lastfm, - .fa-lastfm-square, - .fa-linkedin, - .fa-linkedin-in, - .fa-mastodon, - .fa-mastodon-square, - .fa-pinterest, - .fa-pinterest-p, - .fa-pinterest-square, - .fa-reddit, - .fa-rss, - .fa-rss-square, - .fa-soundcloud, - .fa-stack-exchange, - .fa-stack-overflow, - .fa-tumblr, - .fa-tumblr-square, - .fa-twitter, - .fa-twitter-square, - .fa-vimeo, - .fa-vimeo-square, - .fa-vimeo-v, - .fa-vine, - .fa-youtube, - .fa-xing, - .fa-xing-square { - color: rgba($pyos-white, 0.85) !important; - } + i, + .fas, + .fab, + .far, + .fal { + font-size: 0.75em; + margin-right: 0.3em; + color: rgba($pyos-white, 0.85); + } + + // Override all brand colors to be white - higher specificity without !important + .fa-github, + .fa-github-alt, + .fa-github-square, + .fa-gitlab, + .fa-linkedin, + .fa-linkedin-in, + .fa-mastodon, + .fa-mastodon-square, + .fa-reddit, + .fa-rss, + .fa-rss-square, + .fa-stack-exchange, + .fa-stack-overflow, + .fa-youtube { + color: rgba($pyos-white, 0.85); } } diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 6f0ede93..fdcb4461 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -466,10 +466,24 @@ $colors: ( } .contrib_org,.ppl_social { - font-size: 1rem; + font-size: 0.875rem; font-weight:normal; margin-bottom: 0!important; } + + // Social links in people cards + .ppl_social { + a { + margin-right: 10px; + text-decoration: none !important; + } + + // Font Awesome icons inherit font-size from parent + .fa-brands, + .fa-solid { + font-size: inherit; + } + } .package_description { font-size: .95rem; line-height: 1.5rem; @@ -543,6 +557,11 @@ $colors: ( } } + // Responsive social links in people cards + .ppl_social { + font-size: .9em !important; + } + // the home page has this grid in a notice block .notice { .card-body p, .card-body h2 { diff --git a/_sass/minimal-mistakes/_pyos-main.scss b/_sass/minimal-mistakes/_pyos-main.scss index f2009337..ae6a4d3b 100644 --- a/_sass/minimal-mistakes/_pyos-main.scss +++ b/_sass/minimal-mistakes/_pyos-main.scss @@ -16,11 +16,6 @@ img { padding-right: 2em; } -.ppl_social a { - margin-right: 10px; - text-decoration: none !important; -} - .grid.people { grid-gap: 60px; } @@ -127,10 +122,6 @@ h2.clearall { // font-size: 1.3em; // } - .contrib_org, .ppl_social { - font-size: .9em !important; - } - .card-body { & .btn { diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss index c6343f33..0d7780eb 100644 --- a/_sass/minimal-mistakes/_utilities.scss +++ b/_sass/minimal-mistakes/_utilities.scss @@ -216,8 +216,9 @@ body:hover .visually-hidden button { } /* social icons*/ - -.social-icons { +// General social icons - for author profiles and other non-footer contexts +// Footer styles are handled separately in _footer.scss with higher specificity +.author__urls.social-icons { .fas, .fab, .far, @@ -225,34 +226,6 @@ body:hover .visually-hidden button { color: $text-color; } - .fa-behance, - .fa-behance-square { - color: $behance-color; - } - - .fa-bitbucket { - color: $bitbucket-color; - } - - .fa-dribbble, - .fa-dribble-square { - color: $dribbble-color; - } - - .fa-facebook, - .fa-facebook-square, - .fa-facebook-f { - color: $facebook-color; - } - - .fa-flickr { - color: $flickr-color; - } - - .fa-foursquare { - color: $foursquare-color; - } - .fa-github, .fa-github-alt, .fa-github-square { @@ -263,19 +236,6 @@ body:hover .visually-hidden button { color: $gitlab-color; } - .fa-instagram { - color: $instagram-color; - } - - .fa-keybase { - color: $keybase-color; - } - - .fa-lastfm, - .fa-lastfm-square { - color: $lastfm-color; - } - .fa-linkedin, .fa-linkedin-in { color: $linkedin-color; @@ -286,12 +246,6 @@ body:hover .visually-hidden button { color: $mastodon-color; } - .fa-pinterest, - .fa-pinterest-p, - .fa-pinterest-square { - color: $pinterest-color; - } - .fa-reddit { color: $reddit-color; } @@ -301,43 +255,14 @@ body:hover .visually-hidden button { color: $rss-color; } - .fa-soundcloud { - color: $soundcloud-color; - } - .fa-stack-exchange, .fa-stack-overflow { color: $stackoverflow-color; } - .fa-tumblr, - .fa-tumblr-square { - color: $tumblr-color; - } - - .fa-twitter, - .fa-twitter-square { - color: $twitter-color; - } - - .fa-vimeo, - .fa-vimeo-square, - .fa-vimeo-v { - color: $vimeo-color; - } - - .fa-vine { - color: $vine-color; - } - .fa-youtube { color: $youtube-color; } - - .fa-xing, - .fa-xing-square { - color: $xing-color; - } } /* diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 771c5c56..137689c9 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -129,16 +129,11 @@ $yiq-contrasted-threshold: 175 !default; $yiq-debug: false !default; /* brands */ -$behance-color: #1769ff !default; -$bitbucket-color: #205081 !default; -$dribbble-color: #ea4c89 !default; $facebook-color: #3b5998 !default; $flickr-color: #ff0084 !default; -$foursquare-color: #0072b1 !default; $github-color: #171516 !default; $gitlab-color: #e24329 !default; $instagram-color: #517fa4 !default; -$keybase-color: #ef7639 !default; $lastfm-color: #d51007 !default; $linkedin-color: #007bb6 !default; $mastodon-color: #2b90d9 !default; @@ -152,7 +147,6 @@ $twitter-color: #55acee !default; $vimeo-color: #1ab7ea !default; $vine-color: #00bf8f !default; $youtube-color: #bb0000 !default; -$xing-color: #006567 !default; /* links */ // Note that the link color is mixed with info-color here From 9434fc77d8dcb00f0386a51a520f828fa528d5ac Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Fri, 19 Dec 2025 11:33:51 -0700 Subject: [PATCH 5/5] enh: remove theme styles and cleanup footer --- _includes/footer.html | 3 +- _sass/minimal-mistakes/_footer.scss | 14 +++-- _sass/minimal-mistakes/skins/_air.scss | 23 ------- _sass/minimal-mistakes/skins/_aqua.scss | 34 ---------- _sass/minimal-mistakes/skins/_contrast.scss | 52 --------------- _sass/minimal-mistakes/skins/_dark.scss | 30 --------- _sass/minimal-mistakes/skins/_dirt.scss | 33 ---------- _sass/minimal-mistakes/skins/_mint.scss | 24 ------- _sass/minimal-mistakes/skins/_neon.scss | 63 ------------------- _sass/minimal-mistakes/skins/_plum.scss | 70 --------------------- _sass/minimal-mistakes/skins/_sunrise.scss | 49 --------------- 11 files changed, 10 insertions(+), 385 deletions(-) delete mode 100644 _sass/minimal-mistakes/skins/_air.scss delete mode 100644 _sass/minimal-mistakes/skins/_aqua.scss delete mode 100644 _sass/minimal-mistakes/skins/_contrast.scss delete mode 100644 _sass/minimal-mistakes/skins/_dark.scss delete mode 100644 _sass/minimal-mistakes/skins/_dirt.scss delete mode 100644 _sass/minimal-mistakes/skins/_mint.scss delete mode 100644 _sass/minimal-mistakes/skins/_neon.scss delete mode 100644 _sass/minimal-mistakes/skins/_plum.scss delete mode 100644 _sass/minimal-mistakes/skins/_sunrise.scss diff --git a/_includes/footer.html b/_includes/footer.html index ad239623..036b2ba0 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -24,8 +24,7 @@