add site name to title, sort featured by date

- flexbox button styling
- default to white nav text + icons for contrast until theme loads
- center hero images
- add shadow to hero text
- make iframes fullwidth b4 script runs

default.hbs

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     {{!-- Base Meta --}}
-    <title>{{meta_title}}</title>
+		<title>{{^is "home"}}{{meta_title}} - {{/is}}{{@site.title}}</title>
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

featured.hbs

@@ -54,7 +54,7 @@ into the {body} of the default.hbs template --}}
         </div>
         {{!-- pyv --}}
         <div class="l-grid centered">
-          {{#get "posts" filter="featured:true" include="authors,tags" as |featured|}}
+          {{#get "posts" filter="featured:true" include="authors,tags" order="published_at asc" as |featured|}}
             {{#if featured}}
               <div class="m-featured-slider swiper js-featured-slider">
                 <div class="m-featured-slider__list swiper-wrapper">

src/sass/pyv.scss

@@ -2,19 +2,27 @@
 @media only screen and (min-width: 64rem) {
   .columns {
     display: grid;
-    grid-gap: 24px;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .columns:not(.no-gap) {
+    grid-gap: 24px;
+  }
   .columns > *:empty {
-    display: contents;
+    display: none;
   }
-  .columns > .kg-image-card:first-child {
+  .columns > :is(.kg-embed-card, .kg-image-card) {
+    &:nth-child(2n - 1 of :not(:empty)) {
       padding-top: 0;
-    & + p,
-    & + * > p:first-child {
-      margin-top: -8px;
+      // & + p,
+      // & + * > p:first-child {
+      //   margin-top: -8px;
+      // }
     }
   }
+  .buttons {
+    display: flex;
+    gap: 24px;
+  }
 }
 @media only screen and (min-width: 48rem) {
   .columns .kg-image-card img {
@@ -22,7 +30,9 @@
     margin: 0 !important;
   }
 }
-.columns > * > h3:first-child,
+.columns.no-gap > :not(:last-child) ul {
+  margin-bottom: 0;
+}
 .columns > * > .kg-embed-card + h3,
 .columns > * > .kg-image-card + h3,
 .columns > * > .kg-audio-card + h3 {
@@ -31,6 +41,7 @@
     margin-bottom: 1em;
   }
 }
+.columns > * > h3:first-child + p,
 .columns > * > .kg-embed-card + h3,
 .columns > * > .kg-image-card + h3 {
   margin-top: -40px;
@@ -38,11 +49,18 @@
 .columns > * > .kg-embed-card + .kg-embed-card {
   margin-top: -50px;
 }
+.buttons .kg-button-card a {
+  width: 100%;
+}
+.kg-button-card {
+  padding: 0 !important;
+}
 
-/* default to light mode site icon until load is complete */
+/* default to white nav text + icons for contrast until theme loads */
 html:not([data-theme]) {
-  --toggle-darkmode-button-display-moon: block;
-  --toggle-darkmode-button-display-sun: none;
+  --toggle-darkmode-button-display-moon: none;
+  --toggle-darkmode-button-display-sun: block;
+  --titles-color: white;
 }
 
 /* concat primary & secondary nav on mobile */
@@ -69,12 +87,24 @@ html:not([data-theme]) {
   }
 }
 
+/* center hero images */
+@media only screen and (min-width: 48rem) {
+  .m-hero__picture img {
+    margin-top: 67px;
+  }
+}
+@media only screen and (max-width: 48rem) {
+  .m-hero__picture img {
+    margin-top: 50px;
+  }
+}
+
 /* add wave shape divider to homepage */
 .m-hero__waves {
   position: absolute;
-  bottom: -2px;
+  bottom: -1.3px;
   left: 0;
-  width: 100%;
+  width: 150%;
   overflow: hidden;
   z-index: 1;
   & svg {
@@ -154,8 +184,8 @@ html:not([data-theme]) {
   height: 22px !important;
   padding: 0 7px;
   width: auto !important;
-  right: 25px !important;
-  top: 31px !important;
+  right: 11.2px !important;
+  top: 14px !important;
 }
 .m-article-card__featured span,
 .m-featured-article__ribbon span {
@@ -198,10 +228,26 @@ html:not([data-theme]) {
 }
 
 /* page cover readability */
+.m-hero-title.bigger,
+.m-hero-description.bigger {
+  text-shadow: 1px 1px 1px black;
+}
 .m-hero__picture img {
   filter: blur(2px);
 }
 
+/* pad table titles */
+.l-post-content table th {
+  padding: 0 10px;
+}
+
+/* default full width iframes */
+.l-post-content iframe {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}
+
 /* hide "recent articles" and "tags" modal trigger */
 .js-submenu-option {
   display: none;
@@ -211,7 +257,6 @@ html:not([data-theme]) {
 }
 
 /* restyle audio cards: rounder + more compact */
-.m-header,
 .kg-audio-card {
   box-shadow: 0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
 }