fix: fonts are pretty

Author: lwasser

_includes/head/custom.html

@@ -1,5 +1,9 @@
 <!-- custom head content-->
 <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Itim&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" async fetchpriority="high">
+<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
 <!-- Matomo -->
 <script type="text/javascript">
   var _paq = window._paq = window._paq || [];

_pages/how-to-submit-package.md

@@ -27,8 +27,8 @@ You’ve created a Python package—now what? How do you ensure it follows best
 
 
 <figure>
-  <source srcset="{{ page.url | relative_url }}/images/peer-review/pyos-joss-peer-review.webp" type="image/webp">
-    <img src="{{ page.url | relative_url }}/images/peer-review/pyos-joss-peer-review.png" alt="A flowchart showing how a package submitted to pyOpenSci can also be fast-tracked for JOSS publication.">
+  <source srcset="{{ '/images/peer-review/pyos-joss-peer-review.webp' | relative_url }}" type="image/webp">
+    <img src="{{ '/images/peer-review/pyos-joss-peer-review.png' | relative_url }}" alt="A flowchart showing how a package submitted to pyOpenSci can also be fast-tracked for JOSS publication.">
   <figcaption>
        Packages accepted into pyOpenSci can also be published in JOSS through a streamlined process.
 
@@ -106,7 +106,7 @@ Once your have determined that you package it in scope and meets our core packag
 4. **Complete the issue form** and submit it
 
 <figure>
-    <img src="{{ page.url | relative_url }}/images/peer-review/peer-review-submit-issue.gif" style="max-width:100%" alt="Animated gif showing how to find the GitHub issue submission process for peer review.">
+    <img src="{{ '/images/peer-review/peer-review-submit-issue.gif' | relative_url }}" style="max-width:100%" alt="Animated gif showing how to find the GitHub issue submission process for peer review.">
     <figcaption>
       More....
     </figcaption>
@@ -149,7 +149,7 @@ There are **three submission types** that you can select from:
 
 <div class="notice notice--info" markdown="1">
 
-### Need help with your Python package?
+**Need help with your Python package?**
 
 If you need help getting your package ready for review, you can submit a help request here, and someone will be assigned to help you. This is a great way to get guidance on topics like [continuous integration](https://www.pyopensci.org/python-package-guide/tests/tests-ci.html#run-tests-with-continuous-integration), [testing](https://www.pyopensci.org/python-package-guide/#tests), and [full documentation](https://www.pyopensci.org/python-package-guide/#documentation), all of which are required for a package to be accepted into [the pyOpenSci ecosystem](https://www.pyopensci.org/python-packages.html). You can also learn more about each of these processes in [the pyOpenSci Package Guide](https://www.pyopensci.org/python-package-guide/).
 
@@ -209,8 +209,8 @@ If your package is associated with an existing community please check below:
 ```
 
 <figure>
-  <source srcset="{{ page.url | relative_url }}/images/peer-review/pyos-partnerships-peer-review.webp" type="image/webp">
-    <img src="{{ page.url | relative_url }}/images/peer-review/pyos-partnerships-peer-review.png" alt="A flowchart showing how a package submitted to pyOpenSci can also be fast-tracked for JOSS publication." style="width: 70%;  display: block; margin: 0 auto;">
+  <source srcset="{{ '/images/peer-review/pyos-partnerships-peer-review.webp' | relative_url }}" type="image/webp">
+    <img src="{{ '/images/peer-review/pyos-partnerships-peer-review.png' | relative_url }}" alt="A flowchart showing how a package submitted to pyOpenSci can also be fast-tracked for JOSS publication." style="width: 70%;  display: block; margin: 0 auto;">
   <figcaption>
        Packages accepted into pyOpenSci can also be published in JOSS through a streamlined process.
 

_sass/minimal-mistakes/_base.scss

@@ -3,7 +3,7 @@
    ========================================================================== */
 
    html {
-    /* Sticky footer fix */
+    /* sticky footer fix */
     position: relative;
     min-height: 100%;
   }
@@ -14,16 +14,16 @@
     color: $text-color;
     font-family: $global-font-family;
     line-height: 1.6;
-    font-weight: $weight-3;
-    font-size: 1rem;
+    weight: $weight-3;
+    font-size: 1em;
 
     &.overflow--hidden {
       /* when primary navigation is visible, the content in the background won't scroll */
       overflow: hidden;
     }
   }
 
-  strong {font-weight:$semibold-weight}
+  strong {font-weight:$bold-weight}
   ul li {margin-bottom: 0}
 
   h1,
@@ -35,43 +35,49 @@
     margin: 3.5rem 0 1rem 0;
     line-height: 1.2;
     color: #542668;
+    text-wrap: pretty;
   }
-
-  // Use poppins for subheaders
-  h2, h3, h4, h5, h6 {
+  // All fonts h2 and lower are poppins
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: $header-font-family;
-    font-weight: $bold-weight;
-    letter-spacing: -.03em;
-    max-width: $medium;
   }
 
   h1 {
     margin-top: 0;
     font-size: $h-size-1;
-    font-weight: 400 !important;
-    font-family: $title-font-family;
+    font-weight: 200 !important;
+    font-family: $header-font;
   }
 
   h2 {
     font-size: $h-size-2;
-
-    &:first-of-type {
-      //margin-top: 1rem!important;
-    }
+    padding-bottom: 0.2em;
+    margin-bottom: 1rem;
+    margin-top: 3rem;
+    font-weight: $semibold-weight; //600
+    line-height: 1.1;
+    letter-spacing: -0.03em;
   }
 
   h3 {
     font-size: $h-size-3;
+    font-weight: $semibold-weight;
     line-height: 1.1em;
     margin-top: 2.7em;
   }
 
   h4 {
     font-size: $h-size-4;
+    font-weight: $semibold-weight;
   }
 
   h5 {
     font-size: $h-size-5;
+    font-weight: $semibold-weight;
   }
 
   h6 {
@@ -85,6 +91,7 @@
 
   p {
     margin-bottom: 1.3em;
+    text-wrap: pretty;
   }
 
   u,
@@ -233,159 +240,6 @@
       }
   blockquote.highlight-quote.purple:after{
       color: $pyos-mediumpurple;
-    }
-  }
-
-
-  @include breakpoint('max-width: #$mobile') {
-    padding: 0;
-    //font-size: 2rem;
-  }
-}
-
-// for some reason i have to manually override here
-blockquote.highlight-quote.magenta:after{
-    color: $pyos-magenta;
-    }
-blockquote.highlight-quote.purple:after{
-    color: $pyos-mediumpurple;
-    }
-
-/* links */
-
-a {
-  text-underline-offset: .1em;
-  text-decoration-color: rgba($text-color, 0.7);
-  text-decoration: underline;
-
-
-  &:focus {
-    @extend %tab-focus;
-  }
-
-  &:visited {
-    color: $link-color-visited;
-  }
-
-  &:hover {
-    color: $link-color-hover;
-    outline: 0;
-    text-decoration: none !important;
-    text-decoration-line: none !important;
-    transition: color 0.3s ease, text-decoration-color 0.3s ease;
-  }
-}
-
-/* buttons */
-
-button:focus {
-  @extend %tab-focus;
-}
-
-/* code */
-
-tt,
-code,
-kbd,
-samp,
-pre {
-  font-family: $monospace;
-  font-weight: $weight-5;
-  font-size: 1em;
-}
-
-
-
-
-kbd {
-    background-color: $kbd-color-background;
-    color: $kbd-color-text;
-    border-radius: 0.25rem;
-    box-shadow: 0 2px 0 1px $kbd-color-border;
-    line-height: 1;
-    font-size: .75em;
-    padding: .15em .25em;
-
-    &:hover {
-         box-shadow: 0 1px 0 0.5px $kbd-color-border;
-         top: 1px;
-  }
-}
-
-pre {
-  overflow-x: auto; /* add scrollbars to wide code blocks*/
-}
-
-/* horizontal rule */
-
-hr {
-  display: block;
-  margin: 1em 0;
-  border: 0;
-  border-top: 1px solid $border-color;
-}
-
-/* lists */
-
-ul,
-ol {
-  margin-bottom: 1.9em;
-  font-weight: $weight-3;
-}
-ul li,
-ol li {
-  margin-bottom: 0.3em;
-  font-size: $type-size-5;
-  list-style: 1.4em;
-}
-
-ul li::marker {
-    color: #9C939F;  /* Change bullet color */
-}
-
-li ul,
-li ol {
-  margin-top: 0.5em;
-}
-
-/*
-   Media and embeds
-   ========================================================================== */
-
-/* Figures and images */
-
-figure {
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: justify;
-  justify-content: space-between;
-  -webkit-box-align: start;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  margin: 2em 0;
-
-  img,
-  iframe,
-  .fluid-width-video-wrapper {
-    margin-bottom: 1em;
-  }
-
-  img {
-    width: 100%;
-    border-radius: $border-radius;
-    -webkit-transition: $global-transition;
-    transition: $global-transition;
-  }
-
-  > a {
-    display: block;
-  }
-
-  &.half {
-    > a,
-    > img {
-      @include breakpoint($small) {
-        width: calc(50% - 0.5em);
       }
 
   /* links */
@@ -569,9 +423,8 @@ figure {
     overflow: hidden;
   }
 
-  /*
-     Navigation lists
-     ========================================================================== */
+  /*  Navigation lists */
+
 
   nav {
     ul {

_sass/minimal-mistakes/_page.scss

@@ -82,19 +82,12 @@
     }
   }
 
-  // in our flowing layout the title should be max width
-  .page__content .pyos-section h2 {
-    max-width: 100%;
-
-  }
   .page__lead {
-    font-family: $header-font; //poppins
+    font-family: $global-font-family;
     font-size: $type-size-5;
     font-weight: $weight-3;
   }
 
-
-
   .page__content {
     figure {
       max-width: 35rem;
@@ -107,11 +100,6 @@
       font-weight: $weight-4;
     }
 
-    h2 {
-      margin-bottom: 2.0rem;
-      margin-top: 4.1rem;
-    }
-
     h1,
     h2,
     h3,
@@ -139,7 +127,7 @@
     p,
     dl {
       font-size: $type-size-5;
-      line-height: 1.6rem;
+      line-height: 1.5em;
     }
 
     /* paragraph indents */
@@ -607,11 +595,6 @@
     }
   }
 
-  .layout--splash .page__content h2 {
-    width: 100%;
-    max-width: 100%;
-  }
-
   /* Media queries */
 
   @media screen and (max-width: 768px) {
@@ -650,7 +633,10 @@
     .feature__item {
       width: 95%!important;
     }
-
+    .cards {
+      margin-right: auto!important;
+      margin-left: auto!important;
+    }
 
     .wide__p_text {
       max-width: 90%!important;
@@ -664,10 +650,7 @@
 
   /* max 480 px */
   @media screen and (max-width: 480px) {
-    body {
+    body{
       font-size: 1.4em;
     }
-    #main {
-      padding: 0 .6rem;
-    }
   }