Update header styles for image-less posts

maxx1128 · May 24, 2024 · 2492e54 · 2492e54
1 parent 9f7451e
commit 2492e54
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 19 deletions.
diff --git a/_includes/layouts/base.liquid b/_includes/layouts/base.liquid
@@ -9,8 +9,18 @@
 
     {% include nav.liquid %}
 
+    {{ image }}
+
     <header class="poke-border--text">
-      {% include topHeader.liquid %}
+      {% unless layout contains "post.liquid" %}
+        {% assign isPage = true %}
+      {% else %}
+        {% assign isPage = false %}
+      {% endunless %}
+
+      {% include topHeader.liquid
+        isPage: isPage
+      %}
 
       {% if layout contains "page.liquid" %}
         {% include pageHeader.liquid %}
@@ -21,9 +31,9 @@
 
     <main
       class='
-      {% unless main-hide-slant == true %}
+      {% if layout contains "page.liquid" or image %}
         slant-top-left bg-mono-white poke-border--text slant-bottom-padding
-      {% endunless %}'>
+      {% endif %}'>
       {{ content | safe }}
     </main>
 

diff --git a/_includes/postHeader.liquid b/_includes/postHeader.liquid
@@ -1,39 +1,82 @@
 {% assign banner_image = metadata.post.imagePath | append: image %}
+{% assign postHasImage = true %}
 
-<div class="header header--post poke-color--text flex flex-column-reverse xl--flex-row flex-justify-end poke-background--bg {% if image %}poke-background--screen{% endif %} {% if no-min-image-height %}header--with-no-min-height{% endif %}">
-  <div class="header__text header__text--post flex flex-column xl--flex-justify-center xl--my-6 py-4 resp-max-width my-6 slant-top-padding slant-bottom-padding">
-    <div class="my-6">
+{% if image %}
+  <div class="header header--post poke-color--text flex flex-column-reverse xl--flex-row flex-justify-end poke-background--bg poke-background--screen {% if no-min-image-height %}header--with-no-min-height{% endif %}">
+    <div class="header__text header__text--post flex flex-column xl--flex-justify-center xl--my-6 py-4 resp-max-width my-6 slant-top-padding slant-bottom-padding">
+      <div class="my-6">
+        <div class="flex flex-justify-between mb-auto xl--mb-0">
+          <small class="block mb-2 font-weight-bold">
+            {{ date | toUTCString }}
+          </small>
+
+          <span class="hidden-md-down">
+            {% include tagList
+            tags: tags
+            rightAlign: true %}
+          </span>
+        </div>
+
+        <h1 class="flex flex-column sm--flex-row flex-align-start sm--flex-align-center flex-gap-4 sm--flex-gap-6 mt-2 mb-0">
+          {% if link.url and link.title %}
+            {% include externalIcon.liquid
+            width: "75px",
+            height: "75px" %}
+          {% endif %}
+
+          {{ title | replace: " - Maxwell Antonucci", "" }}
+        </h1>
+
+        {% if excerpt %}
+          <p class="my-0 mt-4 text-small font-weight-light">
+            {{ excerpt }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="header__image-wrapper absolute">
+      <div class="header__image-gradient"></div>
+
+      <img
+        alt=""
+        src="{{ banner_image }}"
+        class="header__large-image flex-item" />
+    </div>
+  </div>
+{% else %}
+  {% assign postHasImage = true %}
+  <div class="header__text--no-image flex flex-column-reverse xl--flex-row flex-justify-end poke-background--bg poke-color--text poke-border--text my-2">
+    <div class="flex flex-column xl--flex-justify-center resp-max-width py-5">
       <div class="flex flex-justify-between mb-auto xl--mb-0">
         <small class="block mb-2 font-weight-bold">
           {{ date | toUTCString }}
         </small>
 
         <span class="hidden-md-down">
           {% include tagList
-           tags: tags
-           rightAlign: true %}
+          tags: tags
+          rightAlign: true %}
         </span>
       </div>
 
-      <h1 class="flex flex-column sm--flex-row flex-align-start sm--flex-align-center flex-gap-4 sm--flex-gap-6 mt-2 mb-0">
+      <h1 class="flex flex-column sm--flex-row flex-align-start sm--flex-align-center flex-gap-4 sm--flex-gap-6 my-0 text-h2 mt-4 mb-4">
         {% if link.url and link.title %}
           {% include externalIcon.liquid
-           width: "75px",
-           height: "75px" %}
+          width: "75px",
+          height: "75px" %}
         {% endif %}
 
         {{ title | replace: " - Maxwell Antonucci", "" }}
       </h1>
 
       {% if excerpt %}
-        <p class="my-0 mt-4 text-small font-weight-light">
+        <p class="my-0 mt-2 text-small font-weight-light">
           {{ excerpt }}
         </p>
       {% endif %}
     </div>
-  </div>
 
-  {% if image %}
     <div class="header__image-wrapper absolute">
       <div class="header__image-gradient"></div>
 
@@ -42,5 +85,5 @@
         src="{{ banner_image }}"
         class="header__large-image flex-item" />
     </div>
-  {% endif %}
-</div>
+  </div>
+{% endif %}
diff --git a/_includes/topHeader.liquid b/_includes/topHeader.liquid
@@ -1,4 +1,4 @@
-<div class="top-header slant-bottom-left bg-mono-white border-primary-base">
+<div class="top-header {% if image or isPage %}slant-bottom-left{% endif %} bg-mono-white border-primary-base">
   <div class="resp-max-width py-2 flex flex-row flex-justify-between flex-gap-4">
     <div class="flex flex-column flex-align-start">
       <p class="my-0 mr-4 text-h6 font-weight-header">

diff --git a/_sass/_components/_header.scss b/_sass/_components/_header.scss
@@ -36,6 +36,11 @@
   }
 }
 
+.header__text--no-image {
+  border-width: spacing(border) 0;
+  border-style: solid;
+}
+
 .header {
   background-position: center;
   background-size: cover;

diff --git a/posts/2024-05-10-accessibilty-presidential-websites.md b/posts/2024-05-10-accessibilty-presidential-websites.md
@@ -1,5 +1,5 @@
 ---
-title: "Do Presidential Websites Care About Web Accessibility?"
+title: "Presidents and Web Accessibility?"
 date: "2024-05-10"
 tags: ["web accessibility"]
 link:

diff --git a/serviceworker.js b/serviceworker.js
@@ -1,4 +1,4 @@
-const version = 'V2.11',
+const version = 'V2.12',
   staticCacheName = `${version}staticfiles`
 
 addEventListener('install', (installEvent) => {