Add webp to feature items

Author: lwasser

_includes/feature_row_pyos

@@ -11,11 +11,16 @@
     <div class="cards highlight">
       {% if f.image_path %}
       <div class="cards-image">
-        <img src="{{ f.image_path | relative_url }}"
-             alt="{% if f.alt %}{{ f.alt }}{% endif %}">
-        {% if f.image_caption %}
-          <span class="archive__item-caption">{{ f.image_caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
-        {% endif %}
+        <picture>
+          <source srcset="{{ f.image_path | replace: '.png', '.webp' | relative_url }}" type="image/webp">
+          <img src="{{ f.image_path | relative_url }}"
+               alt="{% if f.alt %}{{ f.alt }}{% endif %}">
+          {% if f.image_caption %}
+          <figcaption>
+            <span class="archive__item-caption">{{ f.image_caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
+          </figcaption>
+          {% endif %}
+        </picture>
       </div>
     {% endif %}
       <div class="card-body">

_pages/home.md

@@ -17,36 +17,40 @@ header:
 mission:
   - excerpt: "pyOpenSci broadens participation in scientific open source by breaking down social and technical barriers. Join our global community."
 peer-review:
-  - image_path: images/software-peer-review.png
+  - image_path: images/homepage-graphics/software-peer-review.png
     alt: "Light purple image that says software Peer Review. On the image is a woman at a laptop with a pyOpenSci logo on it and a cup of coffee next to her. There is a very light flower in the bottom right hand corner. "
-    title: "Python Software Peer Review"
-    excerpt: "We offer peer review of Python software to increase the quality, usability and long term maintenance of the open source tools that drive open science. [JOSS accepts our review as theirs](https://www.pyopensci.org/software-peer-review/partners/joss.html) so you can get the benefits of pyOpenSci and JOSS through one review."
-    url: https://www.pyopensci.org/software-peer-review/about/benefits.html
-    btn_label: "> Learn more about the benefits of peer review."
-    btn_class: btn--inverse
-  - image_path: images/community-partnerships.png
+    title: "We Run Software Peer Review"
+    excerpt: "We review Python packages and software with the goal of helping scientists build better, discoverable and usable software. <br><br>
+
+    Your package can also be published in JOSS through our review process. <br>
+
+    <i class='fa-solid fa-check-double'></i> Submit a package today for review today. <br>
+    <i class='fa-solid fa-check-double'></i> Apply to become a reviewer. <br>
+    "
+  - image_path: images/homepage-graphics/community-partnerships.png
     alt: "Light purple image with a bunch from different backgrounds of stick figure people in a slightly darker color. The text on the image at the top says Community Partnerships"
-    title: "Community Partnerships"
-    excerpt: "We partner with domain-specific scientific Python communities such as [Pangeo](https://www.pyopensci.org/software-peer-review/partners/pangeo.html) who want to review affiliated packages. Through this collaboration, we develop community-specific standards that are used in our reviews to evaluate whether a package meets affiliation requirements. This removes the need for communities to develop their own peer review process."
-    url: https://www.pyopensci.org/partners.html
-    btn_label: "> Learn About Community Partners"
-    btn_class: btn--inverse
+    title: "We Build Community Partnerships"
+    excerpt: "
+      We [partner with open source communities](https://www.pyopensci.org/partners.html) to share resources and processes such as Peer review. <br><br>
+
+      Learn more about our partnerships with: <br>
+
+      <i class='fa-solid fa-handshake'></i> [JOSS](https://www.pyopensci.org/software-peer-review/partners/joss.html) <br>
+      <i class='fa-solid fa-handshake'></i> [Astropy](https://www.pyopensci.org/software-peer-review/partners/astropy.html) <br>
+      "
   - image_path: images/homepage-graphics/simple-python-packaging-header.png
     title: "We Break Down Python Packaging Painpoints"
     alt: Light purple image that says python packaging guide and below it says simplifying python packaging. The background is a grey laptop with a hand looking down at the laptop the above.
     excerpt: "
 
-      Check out our beginner-friendly:
+      Check out our beginner-friendly: <br>
 
-      [Python Package Tutorials](https://www.pyopensci.org/python-package-guide/tutorials/intro.html)<br>
+      <i class='fa-solid fa-book-open'></i> [Python Package Tutorials](https://www.pyopensci.org/python-package-guide/tutorials/intro.html) <br>
 
-      [Python packaging ecosystem overview](https://www.pyopensci.org/python-package-guide) <br><br>
+      <i class='fa-solid fa-book-open'></i> [Python package guide](https://www.pyopensci.org/python-package-guide) <br><br>
 
       All of our resources are co-developed with the broader Python community and reviewed by beginner to expert Pythonistas to ensure the material is accessible for all.
       "
-    # url: https://www.pyopensci.org/python-package-guide/
-    # btn_label: "> Read our packaging guide"
-    # btn_class: btn--inverse
 ---
 
 {% include feature_row id="mission" type="center" %}
@@ -55,7 +59,7 @@ peer-review:
 
 {% include feature_row_pyos id="peer-review"%}
 
-## Building Diverse Community Around Python Scientific Software
+## Broadening participation in scientific open source
 
 <div class="feature__wrapper" markdown="1">
    <div class="feature__item--left">
@@ -64,10 +68,14 @@ peer-review:
             <img src="/images/people/pyopensci-sprint-pycon-2023.png" alt="Image showing 3 people working at 2 computers during a spring at pyCon USA 2023.">
          </div>
          <div class="archive__item-body">
-            <h2 class="archive__item-title">Peer review mentorship program</h2>
+            <h3 class="archive__item-title">You don't need to be an expert to get involved </h3>
             <div class="archive__item-excerpt">
                <p>
-               We are building diverse community around the scientific packages that drive open science. We recruit and support editors and reviewers from different backgrounds and gender-identities in each review that we perform.
+               Are you new to software peer review but you want to get involved? We've got you!
+
+               We offer support and mentorship to new reviewers completing their first review.
+
+               All reviewers don't need to be python package experts. We welcome reviewers that focus on software accessibility and usability.
                </p>
                <p>
               Are you new to peer review?

_sass/minimal-mistakes/_buttons.scss

@@ -11,7 +11,7 @@
   display: inline-block;
   margin-bottom: 0.25em;
   padding: 0.5em 1em;
-  font-family: $sans-serif;
+  font-family: $header-font; // poppins for buttons and headers
   font-size: $type-size-5;
   font-weight: 500;
   text-align: center;
@@ -95,3 +95,15 @@
     font-size: $type-size-7;
   }
 }
+
+
+  /* max 480 px */
+  @media screen and (max-width: 480px) {
+    // large buttons are disproportionately large
+    a.btn.btn--large {
+      line-height: 1.1;
+      padding: .5rem;
+      width: 90%;
+      font-size: 1.5rem!important;
+    }
+  }

_sass/minimal-mistakes/_notices.scss

@@ -187,7 +187,11 @@
 /* max 480 px */
 @media screen and (max-width: 480px) {
   .notice {
-    padding: .5em;
+    padding: .2em;
+
+    h2 {
+      padding: .1em .2em
+    }
   }
 
   blockquote.highlight-quote>div.end:after {

_sass/minimal-mistakes/_page.scss

@@ -88,7 +88,7 @@
 
   }
   .page__lead {
-    font-family: $global-font-family;
+    font-family: $header-font; //poppins
     font-size: $type-size-5;
     font-weight: $weight-3;
   }
@@ -607,6 +607,11 @@
     }
   }
 
+  .layout--splash .page__content h2 {
+    width: 100%;
+    max-width: 100%;
+  }
+
   /* Media queries */
 
   @media screen and (max-width: 768px) {
@@ -645,10 +650,7 @@
     .feature__item {
       width: 95%!important;
     }
-    .cards {
-      margin-right: auto!important;
-      margin-left: auto!important;
-    }
+
 
     .wide__p_text {
       max-width: 90%!important;
@@ -662,7 +664,10 @@
 
   /* max 480 px */
   @media screen and (max-width: 480px) {
-    body{
+    body {
       font-size: 1.4em;
     }
+    #main {
+      padding: 0 .6rem;
+    }
   }

_sass/minimal-mistakes/_pyos-cards.scss

@@ -1,3 +1,8 @@
+.cards-image figure {
+  margin: 0;
+}
+
+
 .tutorial {
     font-size: 1em;
 

_sass/minimal-mistakes/_pyos-dropdown.scss

@@ -37,10 +37,10 @@
   @media (max-width: $medium-wide) {
     gap: 0.5em;
   }
+}
 
-  /* Upon click the menu should turn into a vertical stacked menu with a soft
-  drop shadow */
-  &.vertical {
+/* NAVIGATION MOBILE vertical stacked menu with a soft drop shadow */
+  .nav__links.vertical {
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -81,6 +81,7 @@
         text-align: left;
         display: block;
         padding: 1em 0;
+
       }
 
       .dropdown-content {
@@ -91,7 +92,6 @@
       }
     }
   }
-}
 
 /* down arrow works better with ascii vs font awesome */
 .downBtn {
@@ -115,7 +115,7 @@
     color: $nav-font-color;
     height: 100%;
     background-color: inherit;
-    font-family: inherit;
+    font-family: $header-font; //poppins ;
     margin: 0;
     line-height: 1em;
   }

_sass/minimal-mistakes/_pyos-grid.scss

@@ -139,20 +139,17 @@ $colors: (
 // Cards are also used to style the isotope layout
 // do not adjust the display or structure of the cards element.
 /* Package cards splash */
+
 .cards {
   top: 0px;
   position: relative;
   background-color: #fcfbf5;
-  border-radius: 4px;
   text-decoration: none;
   z-index: 0;
   overflow: hidden;
-  border: 1px solid #ccc;
   font-size: .8em;
-
-  @include breakpoint-max-width(480px) {
-    padding: 2em;
-  }
+  margin-right: auto!important;
+  margin-left: auto!important;
 
   &__image {
     max-height: calc($small / 3);
@@ -369,7 +366,7 @@ $colors: (
       min-height: 6rem;
       display: flex;
       align-items: center; /* Vertically center the title */
-      padding: 0 15px;
+      padding: 0 1rem;
     }
 
     .card-excerpt{
@@ -424,3 +421,62 @@ $colors: (
       grid-auto-flow: unset;
     }
   }
+
+
+
+
+  /* max 480 px */
+  @media screen and (max-width: 480px) {
+    // large buttons are disproportionately large
+    // Elements outside of notice blocks such as the blog page
+    .blog__grid {
+      h3.card__title-container {
+        padding: 0;
+      }
+      .card-excerpt p {
+        line-height: 1.8rem;
+      }
+      .card__bkg .card__title-container {
+        padding: 0;
+      }
+
+      h3.card-title {
+        font-size: 1rem;
+      }
+      .card-bkg {
+        padding:0;
+        margin:0;
+      }
+    }
+
+    // the home page has this grid in a notice block
+    .notice {
+      .card-body p, .card-body h2 {
+        line-height: 1.1;
+        padding: 0rem 1rem;
+        font-size: .9rem;
+      }
+
+      .blog__grid {
+        font-size: 1.3em;
+        grid-template-columns: repeat(auto-fill, minmax(95%, 1fr))!important;
+        grid-auto-rows: 0fr!important;
+        grid-column-gap: 7px;
+        grid-row-gap: 1rem!important;
+        margin-bottom: 5rem;
+        padding: 0;
+
+        .card-body {
+          font-size: .95rem;
+        }
+        .cards {
+          margin: 0 0! important;
+        }
+
+        & a {
+          font-size: 1.3em;
+        }
+      }
+
+    }
+}

_sass/minimal-mistakes/_pyos-main.scss

@@ -110,26 +110,10 @@ h2.clearall {
   .back-to-top {
     font-size: 1.2em!important;
   }
-  .blog__grid {
-    font-size: 1.3em;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 0fr))!important;
-    grid-auto-rows: 0fr!important;
-    grid-column-gap: 7px;
-    grid-row-gap: 0px!important;
-    margin-bottom: 20px;
-
-    & a {
-      font-size: 1.3em;
-
-    }
-  }
 
   .card-body {
     padding: 0!important;
   }
-  .card-title {
-    margin-top: 1em!important;
-  }
 
   .grid {
     font-size: 1.2em;
@@ -169,7 +153,7 @@ h2.clearall {
 
     & .archive__item-excerpt {
       padding:0;
-      font-size: .8em;
+      font-size: .7rem;
 
     }
   }

_sass/minimal-mistakes/_variables.scss

@@ -26,7 +26,7 @@ $indent-var: 2em !default;
 /* system typefaces */
 $serif: Georgia, Times, serif !default;
 $sans-serif:
-  "Poppins",
+  "Nunito Sans",
   -apple-system,
   BlinkMacSystemFont,
   "Helvetica Neue",