adjust nav + featured post styling

- transparent nav on homepage
- do not crop post cover images
- show featured post images w/out titles

featured.hbs

@@ -62,7 +62,7 @@ into the {body} of the default.hbs template --}}
                     <div class="m-featured-slider__list__item swiper-slide">
                       <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
                         <div class="m-featured-article__picture">
-                          {{#if feature_image}}
+                          {{!-- {{#if feature_image}}
                             <style>
                               #featured-bg-{{id}} {
                                 background-image: url({{img_url feature_image size='l'}});
@@ -74,6 +74,18 @@ into the {body} of the default.hbs template --}}
                               }
                             </style>
                             <div id="featured-bg-{{id}}"></div>
+                          {{/if}} --}}
+                          {{#if feature_image}}
+                            <img
+                              srcset="
+                                {{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="l"}} 1000w,
+                                {{img_url feature_image size="xl"}} 2000w
+                              "
+                              sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
+                              src="{{img_url feature_image size="l"}}"
+                            />
                           {{/if}}
                         </div>
                         {{#if primary_tag}}

src/sass/pyv.scss

@@ -1,5 +1,11 @@
 /* wrap content in columns on desktop */
-@media only screen and (min-width: 64rem) {
+@include respond-to("medium") {
+  .columns .kg-image-card img {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+}
+@include respond-to("large") {
   .columns {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -24,12 +30,6 @@
     gap: 24px;
   }
 }
-@media only screen and (min-width: 48rem) {
-  .columns .kg-image-card img {
-    width: 100% !important;
-    margin: 0 !important;
-  }
-}
 .columns.no-gap > :not(:last-child) ul {
   margin-bottom: 0;
 }
@@ -63,33 +63,73 @@ html:not([data-theme]) {
   --titles-color: white;
 }
 
-/* transparent nav on homepage */
+/* transparent nav on homepage until scroll */
-.home-template .m-header {
+.home-template {
-  &,
+  .in-mobile-topbar {
-  & .m-nav__right::before {
+    --titles-color: white;
-    background: transparent;
   }
-  .m-logo__image-light {
+  .m-header {
+    &,
+    .m-nav__right::before {
+      transition: background 200ms;
+    }
+    /* prefer :not() to default to transparent onload */
+    &:not(.headroom--not-top) {
+      &,
+      .m-nav__right::before {
+        background: transparent;
+      }
+      .m-logo__image-light {
+        display: none;
+      }
+      .m-logo__image-dark {
+        display: block;
+      }
+      @include respond-to("medium") {
+        --titles-color: white;
+      }
+    }
+  }
+}
+
+/* disable fade down animation on nav */
+.m-header {
+  --show-fade-animation: 0;
+}
+
+/* hide nav shadow if at top of content */
+.m-header.headroom--top {
+  box-shadow: none !important;
+}
+
+/* sticky nav to avoid overlap with page cover */
+body:not(.home-template) {
+  .m-hero {
+    margin-top: 50px;
+  }
+  @include respond-to("medium") {
+    .m-header {
+      position: sticky;
+    }
+    .m-hero {
+      margin-top: 0;
+      &:not(.post-template .m-hero.with-picture) {
+        padding-top: 75px;
+      }
+    }
+  }
+}
+
+/* add "Home" to nav on mobile */
+@include respond-to("medium") {
+  .m-menu .nav-home {
     display: none;
   }
-  .m-logo__image-dark {
-    display: block;
-  }
-}
-@media only screen and (min-width: 48rem) {
-  .home-template .m-header {
-    --titles-color: white;
-  }
-}
-@media only screen and (max-width: 48rem) {
-  .home-template .in-mobile-topbar {
-    --titles-color: white;
-  }
 }
 
 /* concat primary & secondary nav on mobile */
-@media only screen and (min-width: 48rem) {
+.m-nav__left .m-secondary-menu {
-  .m-nav__left .m-secondary-menu {
+  @include respond-to("medium") {
     display: none;
   }
 }
@@ -116,44 +156,72 @@ html:not([data-theme]) {
   position: absolute;
   bottom: -1.3px;
   left: 0;
-  width: 150%;
   overflow: hidden;
   z-index: 1;
+  width: 200%;
   & svg {
     position: relative;
     display: block;
     width: calc(100% + 1.3px);
-    height: 100px;
+    height: 50px;
     transform: rotateY(180deg);
   }
   & path {
     fill: var(--background-color);
   }
-}
+  @include respond-to("medium") {
-@media only screen and (min-width: 48rem) {
+    width: 150%;
-  .with-wave-separator .m-hero.with-picture {
-    height: 500px;
-  }
-  .with-wave-separator .m-hero__content {
-    margin-bottom: 80px;
-  }
-  .with-wave-separator.with-custom-cta .m-hero__content {
-    margin-bottom: 100px;
-  }
-}
-@media only screen and (max-width: 48rem) {
-  .m-hero__waves {
-    width: 200%;
     & svg {
-      height: 50px;
+      height: 100px;
     }
   }
-  .with-wave-separator.with-custom-cta .m-hero__content {
+}
+.with-wave-separator {
+  &.with-custom-cta .m-hero__content {
     margin-bottom: 25px;
   }
+  @include respond-to("medium") {
+    .m-hero.with-picture {
+      height: 500px;
+    }
+    .m-hero__content {
+      margin-bottom: 80px;
+    }
+    &.with-custom-cta .m-hero__content {
+      margin-bottom: 100px;
+    }
+  }
 }
 
-/* expand + shrink post cards to fill space */
+/* featured post cards with images: avoid cropping + hide titles */
+.m-featured-article:not(.no-picture) {
+  .m-featured-article__picture {
+    background-color: transparent;
+    position: static;
+    display: flex;
+    img {
+      width: 100%;
+      height: 100%;
+      margin: auto;
+      object-fit: cover;
+    }
+  }
+  & > a {
+    position: absolute;
+    top: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    .m-featured-article__title {
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      margin-bottom: -1px;
+    }
+  }
+}
+
+/* resize post cards to fill horizontal space */
 .l-post-content {
   min-height: auto !important;
 }
@@ -165,7 +233,7 @@ html:not([data-theme]) {
 .m-article-card__info .m-article-card__info-link {
   padding-top: 25px !important;
 }
-@media only screen and (min-width: 64rem) {
+@include respond-to("large") {
   .l-grid > :nth-child(3n of .m-article-card):last-child {
     width: calc(66.66666% - 40px);
   }
@@ -233,21 +301,43 @@ html:not([data-theme]) {
   transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
 }
 .kg-button-card a:focus .paypal-btn {
-  box-shadow: 2px 0 0 2px white;
-  margin-right: -24px;
-  padding-right: 21px;
   width: 113.94px;
+  height: 38px;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  padding-right: 21px;
+  margin-right: -24px;
+  margin-bottom: -13px;
+  border-radius: 5px;
 }
 
-/* page cover readability */
+/* page cover sizing + readability */
 .m-hero-title.bigger,
-.m-hero-description.bigger,
+.m-hero-description.bigger {
-.m-featured-article__title {
   text-shadow: 1px 1px 1px black;
 }
-.m-hero__picture img,
+
-.m-featured-article__picture > [id] {
+/* show full covers in posts (no cropping) */
-  filter: blur(1px);
+.post-template .m-hero.with-picture {
+  padding: 0;
+  min-height: initial;
+  height: max-content;
+  background: transparent;
+  .m-hero__picture {
+    position: static;
+    height: max-content;
+    img {
+      height: max-content;
+      -o-object-fit: initial;
+      object-fit: initial;
+      @include respond-to("large") {
+        border-radius: 16px;
+        margin-top: 40px;
+        max-height: 40vh;
+        width: auto;
+      }
+    }
+  }
 }
 
 /* pad table titles */