New banner image Easter egg on mobile

assets/scss/_media.scss

@@ -1,19 +1,27 @@
 // media queries
 
-@media only screen and (max-width: $screen-mobile) {
+@media only screen and (max-width: $screen-laptop) {
-    section#author {
+    main {
-        align-items: center;
+        article {
-        flex-direction: column;
+            p,
-        span {
+            ul,
-            display: block;
+            h3,
-            padding-bottom: 0.5vmax;
+            h4,
+            section,
+            blockquote {
+                width: min(60vmax, 100%); // increase the column width a bit
+            }
+            h2 {
+                margin: 2vmax 5vmin 1vmax;
+            }
+            h3 {
+                margin: 2vmax 0 1vmax;
+            }
         }
     }
     #toc {
-        display: none;
+        right: -50vw;
-    }
+        width: 50vw;
-    .hidden-mobile {
-        display: none;
     }
 }
 
@@ -72,10 +80,26 @@
     }
 }
 
-@media only screen and (max-width: $screen-laptop) {
+@media only screen and (max-width: $screen-mobile) {
+    section#author {
+        align-items: center;
+        flex-direction: column;
+        span {
+            display: block;
+            padding-bottom: 0.5vmax;
+        }
+    }
     #toc {
-        right: -50vw;
+        display: none;
-        width: 50vw;
+    }
+    .hidden-mobile {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: $screen-narrow) {
+    main aside img#banner {
+        display: block;
     }
 }
 

assets/scss/main.scss

@@ -135,6 +135,12 @@ main {
         margin: 0 7.5vmin max(2vmax, 1rem);
         text-align: center;
 
+        img#banner {
+            display: none; // only showing this on phones
+            margin: 0 -6vmin 10vmin;
+            width: calc(100% + 12vmin);
+        }
+
         h1 {
             color: var(--text-color-title);
             font-family: $font-family-title;

content/posts/20-07-09-facebook.md

@@ -5,6 +5,7 @@ author: Andrew Gioia
 slug: "facebook"
 date: 2020-07-09
 publishdate: 2020-07-14
+banner: post-cover.png
 images:
     - posts/facebook/post-cover.png
 description: Of all the very rational reasons to boycott Facebook or any commercial social media platform, that "its support of free speech" has taken hold is alarming. "Private companies can do whatever they want" is problematic for many reasons, and here it's being used unfairly as a sword to compel Facebook to govern certain types of speech on its platform. This is a huge mistake with irrevocable damage, and if free speech as a moral guideline doesn't persuade you then the realities of voluntarily privatizing "truth arbitration" absolutely should.

content/posts/20-08-11-mozilla.md

@@ -5,6 +5,7 @@ author: Andrew Gioia
 slug: "mozilla"
 date: 2020-08-14
 publishdate: 2020-08-14
+banner: post-cover.png
 images:
     - posts/mozilla/post-cover.png
 description: I love Mozilla, I love its mission, and I love its core product, Firefox. It absolutely sucks as a business though, and its current trajectory is insolvency. Mozilla needs to focus on Firefox and core technologies, sell privacy-first software as a service, and bring back technical leadership if it truly wants to execute on its mission.

layouts/_default/single.html

@@ -6,6 +6,9 @@
 
 <main id="post" aria-role="main">
     <aside>
+        {{ with (.Params.banner) }}
+        <img src="{{ . }}" id="banner">
+        {{ end }}
         <h1>
             {{ .Title }}
         </h1>