feat(css): upgrade responsive styles throughout

Author: lwasser

_includes/feature_row_pyos

@@ -4,11 +4,13 @@
   {% assign feature_row = page.feature_row %}
 {% endif %}
 
-<div class="grid col-3">
+<div class="feature-grid">
+
   {% for f in feature_row %}
+  <div class="grid-item">
     <div class="cards highlight">
       {% if f.image_path %}
-      <div class="cards__image">
+      <div class="cards-image">
         <img src="{{ f.image_path | relative_url }}"
              alt="{% if f.alt %}{{ f.alt }}{% endif %}">
         {% if f.image_caption %}
@@ -17,23 +19,22 @@
       </div>
     {% endif %}
       <div class="card-body">
-        <div>
           {% if f.title %}
             <h2 class="card-title">{{ f.title }}</h2>
           {% endif %}
 
           {% if f.excerpt %}
-            <div class="archive__item-excerpt">
+            <div class="card-content">
               {{ f.excerpt | markdownify }}
             </div>
           {% endif %}
-
-          {% if f.url %}
-            <p><a href="{{ f.url | relative_url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
-          {% endif %}
-        </div>
+          <div class="card-footer">
+            {% if f.url %}
+              <a href="{{ f.url | relative_url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a>
+            {% endif %}
+          </div>
       </div>
     </div>
+  </div>
   {% endfor %}
-
 </div>

_includes/pyos-blockquote.html

@@ -7,5 +7,6 @@
     {% if include.author %}<strong>~{{ include.author }}{% endif %}</strong>{%
     if include.event %}, <em>{{ include.event }}</em>{% endif %}
   </footer>
+  <div class="end"></div>
   {% endif %}
 </blockquote>

_pages/home.md

@@ -29,14 +29,14 @@ peer-review:
     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 More About Our Community Partners"
+    btn_label: "> Learn About Community Partners"
     btn_class: btn--inverse
   - image_path: images/python-packaging-guide.png
     title: "Simplifying Packaging"
     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: "We are creating a beginner-friendly, **community-driven Python packaging guide**. Our guide is reviewed by members of the Python Packaging Authority, maintainers of core packaging tools and members of the scientific Python community. It recommends best practices for you to follow when creating a Python package."
     url: https://www.pyopensci.org/python-package-guide/
-    btn_label: "> Check out our Python packaging guide"
+    btn_label: "> Read our packaging guide"
     btn_class: btn--inverse
 ---
 
@@ -86,14 +86,14 @@ peer-review:
 <!-- pull blog posts not events -->
 {% assign blog_posts = site.posts |  where_exp: "item", "item.categories contains 'blog-post'" %}
 
-<div class="notice-highlight" markdown="1">
+<div class="notice notice-highlight" markdown="1">
 ## Recent blog posts & updates
 
-<div class="grid col-3">
+<div class="grid">
   {% for post in blog_posts limit:3 %}
 
   <div class="cards">
-  <h3 ><a href="{{ site.baseurl }}{{ post.url}}" rel="permalink">{{ post.title }}</a></h3>
+  <h3 class="card-title"><a href="{{ site.baseurl }}{{ post.url}}" rel="permalink">{{ post.title }}</a></h3>
 
     <div>
         <p>{{ post.excerpt | markdownify }}</p>

_posts/2019-10-26-pyos-min-mistakes-theme.md

@@ -117,13 +117,16 @@ You can also adjust the width inline:
 
 ### Figure -- align right
 
-And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
+Below is a right aligned image
 
 <figure class="align-right">
   <img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
   <figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
 </figure>
 
+
+And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
+
 The html looks like this:
 
 
@@ -184,23 +187,53 @@ The image below should extend outside of the parent container on right.
 > meaningful progress.
 {: .highlight-quote }
 
+
+### Quotes using include files
+
 You can also create blockquotes using include files.
 Below is a green and magenta version of the same quote
 
-```
+````html
+{% raw %}
 {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight magenta" %}
-```
+{% endraw %}
+````
 
 {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight magenta" %}
 
+```markdown
+{% raw %}
+{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight purple" %}
+{% endraw %}
+```
+
+{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight purple" %}
+
 The default color for the quotes is the pyos teal green.
 
 ```
+{% raw %}
 {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %}
+{% endraw %}
 ```
 
 {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %}
 
+### Quotes in notice blocks
+
+```
+<div class="notice">
+{% raw %}
+{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %}
+{% endraw %}
+</div>
+```
+
+<div class="notice">
+{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %}
+
+</div>
+
 ## Buttons
 
 Make any link standout more when applying the `.btn .btn--primary` classes.

_posts/2024-08-30-pyopensci-monumental-growth-2024.md

@@ -216,8 +216,7 @@ I will leave web and social media growth, which have also shown extraordinary gr
 
 The success of our packaging guide has been remarkable, thanks to the tremendous input and feedback from the community. What began as a simple guide has evolved into a collaborative project, with enthusiastic participation from contributors worldwide.
 
-> @leahawasser @pyOpenSci clicking through and eventually found myself looking at "what is a python package" [www.pyopensci.org] and involuntarily performed a standing ovation. bookmarked it as an example of great docs for an incredibly complex subject with many meanings in many different contexts
-{: .highlight-quote }
+{% include pyos-blockquote.html quote="@leahawasser @pyOpenSci clicking through and eventually found myself looking at 'what is a Python package' and involuntarily performed a standing ovation. bookmarked it as an example of great docs for an incredibly complex subject with many meanings in many different contexts" author="Mastodon Toot" class="highlight" %}
 
 [View toot on mastodon](https://circumstances.run/@hipsterelectron/112557545629456885)
 

_sass/minimal-mistakes/_base.scss

@@ -15,6 +15,7 @@ body {
   font-family: $global-font-family;
   line-height: 1.6;
   weight: $weight-3;
+  font-size: 1em;
 
   &.overflow--hidden {
     /* when primary navigation is visible, the content in the background won't scroll */
@@ -131,62 +132,81 @@ blockquote {
   }
 }
 
+%quote-style {
+  font-weight: bold;
+  font-size: 100px;
+  color: $pyos-teal;
+  line-height: 0;
+}
+
 /* Block quote with bigger quotes*/
 blockquote.highlight-quote {
   border: none;
   font-family: Georgia, "Times New Roman", Times, serif;
-  margin-bottom: 130px;
-  margin-top: 110px;
-  padding: 0 80px 0 30px;
-  max-width: 35rem;
+  margin-top: 6rem;
+  margin-bottom: 4rem;
+  padding: 0 2rem;
+  max-width: $medium;
 
   footer {
-    text-align: left;
     font-style: italic;
     font-weight: 500;
     text-align: right;
   }
 
+  &:after{
+    @extend %quote-style;
+    position: absolute;
+    content: close-quote;
+    right: 4rem;
+    margin-top:2rem;
+  }
+  & > div.end {
+    position: relative;
+  }
+
+  & > div.end:after {
+    @extend %quote-style;
+    content: close-quote;
+    position: absolute;
+    right: 0;
+    margin-top:2.8rem;
+  }
+
   p {
-    font-size: 21px;
+    font-size: 1.3rem;
     position: relative;
-    margin-bottom: 10px;
-
-    &:before,
-    &:after {
-      font-weight: bold;
-      font-size: 100px;
-      color: $pyos-teal;
-      line-height: 0;
-    }
+    margin-bottom: 0.63rem;
 
     &:before {
+      @extend %quote-style;
       position: absolute;
       content: open-quote;
       left: 0;
       top: -20px;
     }
-
-    &:after {
-      content: close-quote;
-      position: absolute;
-      right: 0;
-      bottom: -80px;
-    }
   }
-  // Success class (magenta)
-  &.magenta p {
-    &:before,
-    &:after {
+
+  &.magenta {
+    & > div.end:after,
+    p:before,
+    p:after {
       color: $pyos-magenta;
     }
   }
-  &.purple p {
-    &:before,
-    &:after {
+
+  &.purple {
+    & > div.end:after,
+    p:before,
+    p:after {
       color: $pyos-mediumpurple;
     }
   }
+
+  @include breakpoint('max-width: #$mobile') {
+    padding: 0;
+    //font-size: 2rem;
+  }
 }
 
 /* links */

_sass/minimal-mistakes/_mixins.scss

@@ -90,3 +90,11 @@
   background-color: $background-color;
   color: yiq-contrast-color($background-color, $dark, $light, $threshold);
 }
+
+
+// breakpoint max width mixin
+@mixin breakpoint-max-width($max-width) {
+  @media screen and (max-width: #{$max-width}) {
+    @content;
+  }
+}

_sass/minimal-mistakes/_navigation.scss

@@ -514,6 +514,7 @@
   border-radius: $border-radius;
   -webkit-box-shadow: $box-shadow;
   box-shadow: $box-shadow;
+  max-width: $medium;
 
   .nav__title {
     color: #fff;
@@ -527,22 +528,24 @@
   .active a {
     @include yiq-contrasted($active-color);
   }
-}
 
-ul.toc__menu li ul li a {
-  font-size: 1.2em;
+  @include breakpoint($large) {
+    max-width: $medium;
+    font-size: $type-size-4;
+  }
 }
 
+
 // Force the sub menu in a toctree to be the same size as the main menu
 .toc__menu {
   margin: 0;
   padding: 0;
   width: 100%;
   list-style: none;
-  font-size: $type-size-6;
+  font-size: $type-size-5;
 
   @include breakpoint($large) {
-    font-size: $type-size-7;
+    font-size: $type-size-6;
   }
 
   a {
@@ -565,7 +568,6 @@ ul.toc__menu li ul li a {
 
   li ul li ul > li a {
     padding-left: 1.75rem;
-    font-size: 1.2em;
   }
 
   li ul li ul li ul > li a {