enh(cleanup): Fix landing page cards and cleanup footer and styles (#774)

* enh: fix people cards on landing and volunteer pages

* enh: card size

* enh(refactor): refactor styles to separate concerns and use variables

* enh: remove socials we don't use

* enh: remove theme styles and cleanup footer

Author: lwasser

_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"

_includes/author-profile.html

@@ -56,14 +56,6 @@ <h3 class="author__name p-name" itemprop="name">
         </li>
       {% endif %}
 
-      {% if author.keybase %}
-        <li>
-          <a href="https://keybase.io/{{ author.keybase }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
-            <i class="fab fa-fw fa-keybase" aria-hidden="true"></i><span class="label">Keybase</span>
-          </a>
-        </li>
-      {% endif %}
-
       {% if author.twitter %}
         <li>
           <a href="https://twitter.com/{{ author.twitter }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
@@ -88,14 +80,6 @@ <h3 class="author__name p-name" itemprop="name">
         </li>
       {% endif %}
 
-      {% if author.xing %}
-        <li>
-          <a href="https://www.xing.com/profile/{{ author.xing }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
-            <i class="fab fa-fw fa-xing-square" aria-hidden="true"></i><span class="label">XING</span>
-          </a>
-        </li>
-      {% endif %}
-
       {% if author.instagram %}
         <li>
           <a href="https://instagram.com/{{ author.instagram }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
@@ -112,14 +96,6 @@ <h3 class="author__name p-name" itemprop="name">
         </li>
       {% endif %}
 
-      {% if author.bitbucket %}
-        <li>
-          <a href="https://bitbucket.org/{{ author.bitbucket }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
-            <i class="fab fa-fw fa-bitbucket" aria-hidden="true"></i><span class="label">Bitbucket</span>
-          </a>
-        </li>
-      {% endif %}
-
       {% if author.github %}
         <li>
           <a href="https://github.com/{{ author.github }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
@@ -152,14 +128,6 @@ <h3 class="author__name p-name" itemprop="name">
         </li>
       {% endif %}
 
-      {% if author.dribbble %}
-        <li>
-          <a href="https://dribbble.com/{{ author.dribbble }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
-            <i class="fab fa-fw fa-dribbble" aria-hidden="true"></i><span class="label">Dribbble</span>
-          </a>
-        </li>
-      {% endif %}
-
       {% if author.pinterest %}
         <li>
           <a href="https://www.pinterest.com/{{ author.pinterest }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
@@ -168,14 +136,6 @@ <h3 class="author__name p-name" itemprop="name">
         </li>
       {% endif %}
 
-      {% if author.foursquare %}
-        <li>
-          <a href="https://foursquare.com/{{ author.foursquare }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
-            <i class="fab fa-fw fa-foursquare" aria-hidden="true"></i><span class="label">Foursquare</span>
-          </a>
-        </li>
-      {% endif %}
-
       {% if author.steam %}
         <li>
           <a href="https://steamcommunity.com/id/{{ author.steam }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">

_includes/footer.html

@@ -23,10 +23,9 @@
   </div>
 
   <div class="page__footer-copyright">
-    <p>pyOpenSci is a fiscally sponsored project of <a href="https://communityinitiatives.org/" target="_blank">Community Initiatives</a>, a registered 501(c)3 non-profit organization based in California, USA.
-      pyOpenSci is grateful for support from the <a href="https://sloan.org/" target="_blank">Sloan Foundation</a> and the <a href="https://chanzuckerberg.com/" target="_blank">Chan Zuckerberg Initiative</a>.
-    </p>
     <p>pyOpensci is dedicated to creating a welcoming, supportive and diverse community around the open source Python tools that drive open science. Our <a href="https://www.pyopensci.org/handbook/CODE_OF_CONDUCT.html" target="_blank">Code of Conduct</a> defines expected behavior and guidelines that help create such a community.
+    pyOpenSci is a fiscally sponsored project of <a href="https://communityinitiatives.org/" target="_blank">Community Initiatives</a>, a registered 501(c)3 non-profit organization based in California, USA.
+      pyOpenSci is grateful for support from the <a href="https://sloan.org/" target="_blank">Sloan Foundation</a> and the <a href="https://chanzuckerberg.com/" target="_blank">Chan Zuckerberg Initiative</a>.
     </p>
 
     &copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}</div>

_includes/package-grid.html

@@ -1,6 +1,12 @@
+{% assign use_isotope = include.isotope | default: false %}
+
+{% if use_isotope %}
 <div class="element-item package-card {% for aCategory in apackage.categories %}
 {{ aCategory }}
 {% endfor %}" data-category="data">
+{% else %}
+<div class="package-card">
+{% endif %}
   <div class="package-card__content">
     <h3 class="package-card__title" itemprop="name">
       {{ apackage.package_name }}

_pages/home.md

@@ -134,7 +134,7 @@ peer-review:
 
 {% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %}
 
-<div class="grid">
+<div class="packages-grid">
   {% for apackage in packages_sorted limit:3 %}
     {% include package-grid.html %}
   {% endfor %}

_pages/python-packages.md

@@ -51,7 +51,7 @@ To view packages affiliated with our partner communities that are a part of ourp
   <div class="grid-sizer"></div>
 {% for apackage in packages_sorted %}
   {% if apackage.active == true %}
-    {% include package-grid.html %}
+    {% include package-grid.html isotope=true %}
   {% endif %}
 {% endfor %}
 </div>
@@ -65,7 +65,7 @@ Archived packages are packages that have successfully completed [pyOpenSci's sof
   <div class="grid-sizer"></div>
 {% for apackage in packages_sorted %}
   {% if apackage.active == false %}
-    {% include package-grid.html %}
+    {% include package-grid.html isotope=true %}
   {% endif %}
 {% endfor %}
 </div>

_sass/minimal-mistakes/_footer.scss

@@ -17,6 +17,7 @@
   background-color: darken($pyos-deeppurple, 8%);
   font-size: 0.85rem;
   line-height: 1.3rem;
+  font-family: "Poppins", $sans-serif;
 
   footer {
     @include clearfix;
@@ -50,11 +51,14 @@
 }
 
 .page__footer-copyright {
-  font-family: $global-font-family;
+  font-family: "Poppins", $sans-serif;
   font-size: $type-size-6;
+  padding: 1em;
+  max-width: 900px;
+  margin: 0 auto;
 
   p {
-    margin: 0
+    margin: 0 0 0.5em 0;
   }
 }
 
@@ -63,15 +67,15 @@
     margin: 0;
     padding: 0;
     list-style-type: none;
+    text-align: center;
   }
 
   li {
     display: inline-block;
     padding-top: 5px;
     padding-bottom: 5px;
-    font-family: $sans-serif-narrow;
+    font-family: "Poppins", $sans-serif;
     font-size: $type-size-5;
-    text-transform: uppercase;
   }
 
   li + li:before {
@@ -81,67 +85,49 @@
 
   a {
     padding-right: 10px;
-    font-weight: bold;
+    font-weight: normal;
   }
+}
 
-  .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);
   }
 }

_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);
       }
     }
@@ -93,6 +100,35 @@ $colors: (
     }
   }
 
+// Home page and volunteer page new contributors section - auto-responsive
+.entries-grid {
+    display: grid;
+    grid-gap: 8px;
+    grid-template-columns: 1fr; // Mobile: 1 column
+
+    > * {
+        max-width: 280px;
+        width: 100%;
+      }
+
+    @media (min-width: $small) {
+      grid-template-columns: repeat(2, 1fr); // Small: 2 columns
+    }
+
+    @media (min-width: $medium) {
+      grid-template-columns: repeat(3, 1fr); // Medium: 3 columns
+    }
+
+    @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;
@@ -430,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;
@@ -484,7 +534,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 {
@@ -507,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 {