majorly refactor SCSS and pray nothing breaks

.stylelintrc

@@ -23,5 +23,8 @@
     "selector-no-qualifying-type": null,
     "shorthand-property-no-redundant-values": null
   },
-  "ignoreFiles": ["assets/**/vendor/**"]
+  "ignoreFiles": [
+    "assets/**/vendor/**",
+    "public/**"
+  ]
 }

assets/js/src/counter.js

@@ -11,7 +11,7 @@ const canonical = document.head.querySelector("link[rel='canonical']");
 // page must have both span#meta-hits and canonical URL to enter
 if (wrapper && canonical) {
   // javascript is enabled so show the loading indicator
-  wrapper.style.display = "inline-block";
+  wrapper.style.display = "inline-flex";
 
   // get path and strip beginning and ending forward slash
   const slug = urlParse(canonical.href).pathname.replace(/^\/|\/$/g, "");
@@ -26,13 +26,13 @@ if (wrapper && canonical) {
         wrapper.title = hitsComma + " " + hitsPlural;
 
         // finally inject the hits...
-        const counter = document.getElementById("hit-counter");
+        const counter = document.getElementById("meta-hits-counter");
         if (counter) {
           counter.appendChild(document.createTextNode(hitsComma));
         }
 
         // ...and hide the loading spinner
-        const spinner = document.getElementById("hit-spinner");
+        const spinner = document.getElementById("meta-hits-loading");
         if (spinner) {
           spinner.style.display = "none";
         }

assets/js/src/projects.js

@@ -18,48 +18,54 @@ if (wrapper) {
     <a class="repo-name" href="${repo.url}" target="_blank" rel="noopener">${repo.name}</a>
 
     ${repo.description ? html`<p class="repo-description">${repo.description}</p>` : null}
-    ${repo.language
-      ? html`<div class="repo-meta">
-          <span
-            class="repo-language-color"
-            style="background-color: ${ifDefined(repo.language.color)}"
-          ></span>
-          <span>${repo.language.name}</span>
-        </div>`
-      : null}
-    ${repo.stars > 0
-      ? html`<div
-          class="repo-meta"
-          title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
-        >
-          <svg viewBox="0 0 16 16" height="16" width="16">
-            <path
-              fill-rule="evenodd"
-              d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
-            ></path>
-          </svg>
-          <span>${numeral(repo.stars).format("0,0")}</span>
-        </div>`
-      : null}
-    ${repo.forks > 0
-      ? html`<div
-          class="repo-meta"
-          title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
-        >
-          <svg viewBox="0 0 16 16" height="16" width="16">
-            <path
-              fill-rule="evenodd"
-              d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
-            ></path>
-          </svg>
-          <span>${numeral(repo.forks).format("0,0")}</span>
-        </div>`
-      : null}
 
-    <div class="repo-meta" title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}">
+    <div class="repo-meta">
-      <span>
+      ${repo.language
-        Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
+        ? html`<div class="repo-meta-item">
-      </span>
+            <span
+              class="repo-language-color"
+              style="background-color: ${ifDefined(repo.language.color)}"
+            ></span>
+            <span>${repo.language.name}</span>
+          </div>`
+        : null}
+      ${repo.stars > 0
+        ? html`<div
+            class="repo-meta-item"
+            title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
+          >
+            <svg viewBox="0 0 16 16" height="16" width="16">
+              <path
+                fill-rule="evenodd"
+                d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
+              ></path>
+            </svg>
+            <span>${numeral(repo.stars).format("0,0")}</span>
+          </div>`
+        : null}
+      ${repo.forks > 0
+        ? html`<div
+            class="repo-meta-item"
+            title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
+          >
+            <svg viewBox="0 0 16 16" height="16" width="16">
+              <path
+                fill-rule="evenodd"
+                d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
+              ></path>
+            </svg>
+            <span>${numeral(repo.forks).format("0,0")}</span>
+          </div>`
+        : null}
+
+      <div
+        class="repo-meta-item"
+        title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}"
+      >
+        <span>
+          Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
+        </span>
+      </div>
     </div>
   `;
 

assets/sass/components/_content.scss

@@ -6,7 +6,20 @@ div#content {
   letter-spacing: -0.004em;
   line-height: 1.7;
 
-  h1,
+  b,
+  strong {
+    letter-spacing: 0.008em; // not sure why the discrepancy between weights
+  }
+
+  blockquote {
+    margin-left: 0;
+    padding-left: 1.5em;
+    border-left: 3px solid;
+
+    @include themes.themed(color, "medium-dark");
+    @include themes.themed(border-color, "links");
+  }
+
   h2,
   h3,
   h4 {
@@ -14,8 +27,34 @@ div#content {
     margin-bottom: 0.5em;
     letter-spacing: 0.001em;
     line-height: 1.5;
+
+    // AnchorJS styles
+    a.anchorjs-link {
+      display: inline-block;
+      margin-left: 0.25em;
+      padding: 0 0.5em 0 0.25em;
+      background: none;
+      opacity: 0;
+      font-weight: 300;
+      line-height: 1;
+
+      &::before {
+        content: "\0023"; // pound sign
+      }
+
+      @include themes.themed(color, "medium-light");
+
+      &:hover {
+        @include themes.themed(color, "links");
+      }
+    }
+
+    &:hover > a.anchorjs-link {
+      opacity: 1; // '#' link appears on hover over entire sub-heading line
+    }
   }
 
+  // special bottom border for H2s
   h2 {
     padding-bottom: 0.25em;
     border-bottom: 1px solid;
@@ -56,33 +95,12 @@ div#content {
     }
   }
 
-  // AnchorJS styles
+  hr {
-  h2,
+    margin: 1.5em auto;
-  h3,
+    height: 2px;
-  h4 {
+    border: 0;
-    a.anchorjs-link {
-      display: inline-block;
-      margin-left: 0.25em;
-      padding: 0 0.5em 0 0.25em;
-      background: none;
-      opacity: 0;
-      font-weight: 300;
-      line-height: 1;
 
-      &::before {
+    @include themes.themed(background-color, "light");
-        content: "\0023"; // pound sign
-      }
-
-      @include themes.themed(color, "medium-light");
-
-      &:hover {
-        @include themes.themed(color, "links");
-      }
-    }
-
-    &:hover > a.anchorjs-link {
-      opacity: 1; // '#' link appears on hover over entire sub-heading line
-    }
   }
 }
 

assets/sass/components/_footer.scss

@@ -15,7 +15,7 @@ footer {
     @include themes.themed(color, "medium-dark");
   }
 
-  div.row {
+  div.footer-row {
     display: flex;
     width: 100%;
     max-width: settings.$max-width;
@@ -26,7 +26,7 @@ footer {
   }
 
   // underline View Source link
-  a#source {
+  a#footer-view-source {
     padding-bottom: 2px;
     border-bottom: 1px solid;
 
@@ -40,7 +40,7 @@ footer {
     padding: 1em 1.25em 0 1.25em;
 
     // stack columns on left instead of flexboxing across
-    div.row {
+    div.footer-row {
       display: block;
       line-height: 2;
     }

assets/sass/components/_global.scss

@@ -55,13 +55,8 @@ pre,
   }
 }
 
-// stretch background for entire width of content area
+a {
-main {
+  text-decoration: none;
-  width: 100%;
-  padding: 0 1.5em;
-
-  @include themes.themed(color, "text");
-  @include themes.themed(background-color, "background-inner");
 }
 
 // this is what's extended by different layouts (in ../pages)
@@ -71,53 +66,53 @@ div.layout {
   display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
 }
 
-a {
+// stretch background for entire width of content area
-  text-decoration: none;
+main {
-  background-position: 0% 100%;
+  width: 100%;
-  background-repeat: no-repeat;
+  padding: 0 1.5em;
-  background-size: 0% settings.$link-underline-size;
-  padding-bottom: settings.$link-underline-size;
 
-  @include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
+  @include themes.themed(color, "text");
+  @include themes.themed(background-color, "background-inner");
 
-  // cool link underlines (via messy SCSS hacking):
+  a {
-  // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
+    background-position: 0% 100%;
-  @each $theme, $map in themes.$themes {
+    background-repeat: no-repeat;
-    @at-root body.#{$theme} #{&} {
+    background-size: 0% settings.$link-underline-size;
-      background-image: underline-hack(map-get($map, "links"));
+    padding-bottom: settings.$link-underline-size;
+
+    @include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
+
+    // cool link underlines (via messy SCSS hacking):
+    // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
+    @each $theme, $map in themes.$themes {
+      @at-root body.#{$theme} #{&} {
+        background-image: underline-hack(map-get($map, "links"));
+      }
+    }
+
+    &:hover {
+      background-size: 100% settings.$link-underline-size;
+    }
+
+    // set an anchor's class to `no-underline` to disable all of this
+    &.no-underline {
+      background: none !important;
+      padding-bottom: 0;
     }
   }
 
-  &:hover {
+  // page titles
-    background-size: 100% settings.$link-underline-size;
+  h1 {
+    margin-top: 0;
+    letter-spacing: -0.005em;
+
+    a {
+      // disable fancy underline without `.no-underline`
+      color: inherit !important;
+      background: none !important;
+      padding-bottom: 0;
+    }
   }
-
-  &.no-underline {
-    background: none !important;
-    padding-bottom: 0;
-  }
-}
-
-b,
-strong {
-  letter-spacing: 0.008em; // not sure why the discrepancy between weights
-}
-
-blockquote {
-  margin-left: 0;
-  padding-left: 1.5em;
-  border-left: 3px solid;
-
-  @include themes.themed(color, "medium-dark");
-  @include themes.themed(border-color, "links");
-}
-
-hr {
-  margin: 1.5em auto;
-  height: 2px;
-  border: 0;
-
-  @include themes.themed(background-color, "light");
 }
 
 // make SVG twemojis relative to surrounding text

assets/sass/components/_header.scss

@@ -17,22 +17,23 @@ header {
     align-items: center;
     justify-content: space-between;
 
-    a#logo {
+    a#header-logo {
       display: flex;
       align-items: center;
 
       @include themes.themed(color, "medium-dark");
 
-      img#selfie {
+      img#header-selfie {
         width: 50px;
         height: 50px;
         border: 1px solid;
         border-radius: 50%;
+        user-select: none;
 
         @include themes.themed(border-color, "light");
       }
 
-      span#name {
+      span#header-name {
         margin: 0 0.6em;
         font-size: 1.25em;
         font-weight: 500;
@@ -42,7 +43,7 @@ header {
       &:hover {
         @include themes.themed(color, "links");
 
-        img#selfie {
+        img#header-selfie {
           opacity: 0.9;
         }
       }
@@ -57,11 +58,10 @@ header {
       padding: 0;
 
       li {
-        text-align: right;
         margin-left: 1.75em;
 
         a {
-          display: inline-block;
+          display: inline-flex;
           will-change: transform;
 
           @include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
@@ -72,16 +72,21 @@ header {
             @include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
           }
 
-          span.icon {
+          span {
-            font-size: 1.3em;
+            align-self: center;
-            vertical-align: -0.085em;
-          }
 
-          span.text {
+            &.header-menu-icon {
-            font-size: 0.95em;
+              font-size: 1.3em;
-            font-weight: 500;
+              vertical-align: -0.085em;
-            letter-spacing: -0.002em;
+              user-select: none;
-            margin-left: 0.65em;
+            }
+
+            &.header-menu-text {
+              font-size: 0.95em;
+              font-weight: 500;
+              letter-spacing: -0.002em;
+              margin-left: 0.65em;
+            }
           }
         }
 
@@ -121,36 +126,36 @@ header {
     padding: 0.5em 1.25em;
 
     nav {
-      a#logo {
+      a#header-logo {
-        img#selfie {
+        img#header-selfie {
           width: 70px;
           height: 70px;
         }
 
-        span#name {
+        span#header-name {
           display: none;
         }
 
         &:hover {
-          img#selfie {
+          img#header-selfie {
             opacity: 1;
           }
         }
       }
 
-      ul {
+      ul.header-menu {
         font-size: 1.6em;
 
         li {
           margin-left: 1.15em;
 
-          a {
+          a.header-menu-item {
-            span.icon {
+            span.header-menu-icon {
               font-size: 0.9em;
             }
 
             // hide text next to emojis on mobile
-            span.text {
+            span.header-menu-text {
               display: none;
             }
 

assets/sass/pages/_etc.scss

@@ -4,13 +4,7 @@ div.layout-etc {
   padding-bottom: 1.5em;
 
   h1 {
-    margin-top: 0;
     text-align: center;
-    letter-spacing: -0.005em;
-
-    a {
-      color: inherit;
-    }
   }
 }
 

assets/sass/pages/_list.scss

@@ -5,7 +5,7 @@ div.layout-list {
   padding-top: 1.5em;
   padding-bottom: 0.25em;
 
-  section.year {
+  section.list-section-year {
     font-size: 1.05em;
 
     h2 {
@@ -28,7 +28,7 @@ div.layout-list {
       line-height: 1.75;
       margin-bottom: 1em;
 
-      div.date {
+      div.list-item-date {
         width: 5.25em;
         flex-shrink: 0;
 
@@ -48,7 +48,7 @@ div.layout-list {
     padding-top: 1em;
     padding-bottom: 0;
 
-    section.year {
+    section.list-section-year {
       font-size: 1em;
 
       h2 {

assets/sass/pages/_projects.scss

@@ -6,14 +6,8 @@ div.layout-projects {
   padding-bottom: 0.75em;
 
   h1 {
-    margin-top: 0;
     margin-bottom: 0.4em;
     text-align: center;
-    letter-spacing: -0.005em;
-
-    a {
-      color: inherit;
-    }
   }
 
   div#content > p {
@@ -62,28 +56,34 @@ div.layout-projects {
       }
 
       div.repo-meta {
-        display: inline-block;
+        display: flex;
-        margin-right: 1.2em;
+        flex-wrap: wrap;
-        font-size: 0.925em;
 
-        @include themes.themed(color, "medium");
+        div.repo-meta-item {
-
-        svg {
           display: inline-block;
-          position: relative;
+          align-self: baseline;
-          top: 0.25em;
+          margin-right: 1.5em;
-          margin-right: 0.2em;
+          font-size: 0.925em;
-          fill: currentColor;
-        }
 
-        span.repo-language-color {
+          @include themes.themed(color, "medium");
-          display: inline-block;
+
-          width: 1.2em;
+          svg {
-          height: 1.2em;
+            display: inline-block;
-          border-radius: 50%;
+            position: relative;
-          position: relative;
+            top: 0.25em;
-          top: 0.235em;
+            margin-right: 0.2em;
-          margin-right: 0.2em;
+            fill: currentColor;
+          }
+
+          span.repo-language-color {
+            display: inline-block;
+            width: 1.2em;
+            height: 1.2em;
+            border-radius: 50%;
+            position: relative;
+            top: 0.235em;
+            margin-right: 0.2em;
+          }
         }
       }
     }

assets/sass/pages/_single.scss

@@ -6,26 +6,37 @@ div.layout-single {
   padding-bottom: 1em;
 
   div#meta {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.3em;
     font-size: 0.825em;
     line-height: 2.3;
     letter-spacing: 0.04em;
-    margin-top: 0.3em;
 
     @include themes.themed(color, "medium");
 
     a {
       color: inherit;
+
+      // disable fancy underline without `.no-underline`
+      background: none !important;
+      padding-bottom: 0;
     }
 
     > div {
-      display: inline-block;
+      display: inline-flex;
-      margin-right: 1.25em;
+      margin-right: 1.6em;
       white-space: nowrap;
 
-      img.emoji {
+      span.meta-icon {
-        margin-right: 0.25em;
+        margin-right: 0.4em;
-        vertical-align: -0.22em;
+        user-select: none;
-        cursor: inherit;
+
+        img.emoji {
+          margin-right: 0.25em;
+          vertical-align: -0.22em;
+          cursor: inherit;
+        }
       }
 
       &:last-of-type {
@@ -33,13 +44,22 @@ div.layout-single {
       }
     }
 
+    div#meta-date,
+    div#meta-edit {
+      a {
+        display: inline-flex;
+      }
+    }
+
     div#meta-tags {
       white-space: normal;
+      display: inline-flex;
+      flex-wrap: wrap;
 
-      span {
+      span.meta-tag {
         text-transform: lowercase;
         white-space: nowrap;
-        margin-right: 0.4em;
+        margin-right: 0.75em;
 
         &::before {
           content: "#"; // cosmetically hashtagify tags
@@ -54,7 +74,7 @@ div.layout-single {
       }
     }
 
-    div#hit-spinner {
+    div#meta-hits-loading {
       display: inline-block;
       width: 20px;
 
@@ -73,10 +93,6 @@ div.layout-single {
     line-height: 1.3;
     font-weight: 700;
     letter-spacing: -0.006em;
-
-    a {
-      color: inherit;
-    }
   }
 }
 

assets/sass/pages/_videos.scss

@@ -5,15 +5,6 @@ div.layout-video {
   padding: 1.5em 0;
   text-align: center;
 
-  h1 {
-    margin-top: 0;
-    letter-spacing: -0.005em;
-
-    a {
-      color: inherit;
-    }
-  }
-
   p {
     font-size: 0.85em;
     letter-spacing: -0.005em;

content/previously/index.md

@@ -29,16 +29,15 @@ css: |
   div#content span.limegreen {
     color: #32cd32;
   }
-  header nav a#logo span#name {
+  header nav a#header-logo span#header-name {
     font-size: 1.5em;
     font-weight: 700 !important;
   }
-  header nav ul li a span.text {
+  header nav ul li a span.header-menu-text {
-    font-size: 1.05em;
+    font-size: 1.1em;
-    line-height: 1.05;
     font-weight: 700 !important;
   }
-  footer div#copyright, footer div#poweredby {
+  footer div.footer-row div {
     font-size: 1.1em;
   }
 ---

layouts/_default/etc.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div class="layout layout-etc">
-  <h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+  <h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
 
   <div id="content">
     {{ .Content }}

layouts/_default/list.html

@@ -2,14 +2,14 @@
 <div class="layout layout-list">
   {{- with .Pages }}
   {{- range .GroupByDate "2006" }}
-  <section class="year">
+  <section class="list-section-year">
     <h2>{{ .Key }}</h2>
     <ul>
     {{- with .Pages }}
     {{- range . }}
       <li>
-        <div class="date">{{ .Date.Format "Jan 2" }}</div>
+        <div class="list-item-date">{{ .Date.Format "Jan 2" }}</div>
-        <div class="title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></div>
+        <div class="list-item-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></div>
       </li>
     {{- end }}
     {{- end }}

layouts/_default/projects.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div class="layout layout-projects">
-  <h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+  <h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
 
   <div id="content">
     <div id="loading-spinner" class="loading"><div></div><div></div><div></div></div>

layouts/_default/single.html

@@ -3,29 +3,39 @@
   <article>
     <div id="meta">
       <div id="meta-date">
-        <a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">📅 {{ .Date.Format "January 2, 2006" }}</a>
+        <a href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">
+          <span class="meta-icon">📅</span>
+          <span>{{ .Date.Format "January 2, 2006" }}</span>
+        </a>
       </div>
 
       {{ with .Params.tags }}
       <div id="meta-tags">
-        🏷️&nbsp;{{ range first 5 . }}<span>{{ . }}</span> {{ end }}
+        <span class="meta-icon">🏷️</span>
+        {{ range first 5 . }}
+          <span class="meta-tag">{{ . }}</span>
+        {{ end }}
       </div>
       {{ end }}
 
       {{ with .Scratch.Get "sourceURL" }}
       <div id="meta-edit">
-        <a class="no-underline" href="{{ . | safeURL }}" title="Edit this post on GitHub" target="_blank" rel="noopener">✏️ Improve This Post</a>
+        <a href="{{ . | safeURL }}" title="Edit this post on GitHub" target="_blank" rel="noopener">
+          <span class="meta-icon">✏️</span>
+          <span>Improve This Post</span>
+        </a>
       </div>
       {{ end }}
 
       {{ if eq hugo.Environment "production" }}
       <div id="meta-hits" style="display: none;">
-        👀&nbsp;<div id="hit-spinner" class="loading"><div></div><div></div><div></div></div><span id="hit-counter"></span>
+        <span class="meta-icon">👀</span>
+        <div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div><span id="meta-hits-counter"></span>
       </div>
       {{ end }}
     </div>
 
-    <h1 class="title"><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <h1 class="title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
 
     <div id="content">
       {{ .Content }}

layouts/_default/video.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div class="layout layout-video">
-  <h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+  <h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
 
   <video
     {{ with .Resources.GetMatch "thumb.*" }}poster="{{ .Permalink }}"{{ end }}
@@ -14,6 +14,8 @@
     <p>Your browser doesn't support HTML5 video. {{ with .Resources.GetMatch "*.mp4" }}<a href="{{ .Permalink }}">Click here to view the raw .mp4 video.</a>{{ end }}</p>
   </video>
 
-  {{ .Content }}
+  <div id="content">
+    {{ .Content }}
+  </div>
 </div>
 {{ end }}

layouts/partials/page/footer.html

@@ -1,6 +1,6 @@
 <footer>
-  <div class="row">
+  <div class="footer-row">
-    <div id="copyright">Content <a class="no-underline" href="{{ "license/" | absURL }}"{{ with .Site.Params.license.nameLong }} title="{{ . }}"{{ end }}>licensed under {{ .Site.Params.license.name }}</a>, {{ with .Site.Params.license.copyrightFirstYear }}<a class="no-underline" href="{{ "previously/" | absURL }}" title="Previously on...">{{ . }} &ndash;</a>{{ end }} {{ now.Format "2006" }}.</div>
+    <div id="footer-copyright">Content <a href="{{ "license/" | absURL }}"{{ with .Site.Params.license.nameLong }} title="{{ . }}"{{ end }}>licensed under {{ .Site.Params.license.name }}</a>, {{ with .Site.Params.license.copyrightFirstYear }}<a href="{{ "previously/" | absURL }}" title="Previously on...">{{ . }} &ndash;</a>{{ end }} {{ now.Format "2006" }}.</div>
-    <div id="poweredby">Made with <span class="beat">❤️</span> and <a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Hugo</a>. {{ with .Scratch.Get "sourceURL" }}<a class="no-underline" href="{{ . | safeURL }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener">View source.</a>{{ end }}</div>
+    <div id="footer-powered-by">Made with <span class="beat">❤️</span> and <a href="https://gohugo.io/" title="Powered by Hugo" target="_blank" rel="noopener">Hugo</a>. {{ with .Scratch.Get "sourceURL" }}<a href="{{ . | safeURL }}" title="View Source on GitHub" id="footer-view-source" target="_blank" rel="noopener">View source.</a>{{ end }}</div>
   </div>
 </footer>

layouts/partials/page/header.html

@@ -1,17 +1,24 @@
 <header>
   <nav>
-    <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
+    <a href="{{ .Site.BaseURL }}" id="header-logo" rel="me author" aria-label="{{ .Site.Title }}">
       {{ with partial "functions/webpack" (dict "context" . "src" "images/tiny-selfie.jpg") }}
-        <img id="selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
+        <img id="header-selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
       {{ end }}
 
-      <span id="name">{{ .Site.Title }}</span>
+      <span id="header-name">{{ .Site.Title }}</span>
     </a>
-    <ul>
+    <ul id="header-menu">
       {{- range .Site.Menus.main }}
-      <li><a class="no-underline" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}><span class="icon">{{ .Pre }}</span><span class="text">{{ .Name }}</span></a></li>
+      <li>
+        <a class="header-menu-item" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}>
+          <span class="header-menu-icon">{{ .Pre }}</span>
+          <span class="header-menu-text">{{ .Name }}</span>
+        </a>
+      </li>
       {{- end }}
-      <li><button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button></li>
+      <li>
+        <button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button>
+      </li>
     </ul>
   </nav>
 </header>

package.json

@@ -14,7 +14,6 @@
     "url": "https://github.com/jakejarvis/jarv.is.git"
   },
   "type": "module",
-  "exports": "./assets/js/index.js",
   "main": "./assets/js/index.js",
   "scripts": {
     "build": "gulp",
@@ -110,7 +109,7 @@
     "stylelint-scss": "~3.21.0",
     "terser": "^5.9.0",
     "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.54.0",
+    "webpack": "^5.55.1",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.3.0"

yarn.lock

@@ -3470,9 +3470,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.846:
-  version "1.3.851"
+  version "1.3.853"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.851.tgz#457846fce94d5de25511570435a94f1a622203ac"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.853.tgz#f3ed1d31f092cb3a17af188bca6c6a3ec91c3e82"
-  integrity sha512-Ak970eGtRSoHTaJkoDjdkeXYetbwm5Bl9pN/nPOQ3QzLfw1EWRjReOlWUra6o58SVgxfpwOT9U2P1BUXoJ57dw==
+  integrity sha512-W4U8n+U8I5/SUaFcqZgbKRmYZwcyEIQVBDf+j5QQK6xChjXnQD+wj248eGR9X4u+dDmDR//8vIfbu4PrdBBIoQ==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3539,9 +3539,9 @@ error-ex@^1.2.0, error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
-  version "1.18.6"
+  version "1.18.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.7.tgz#122daaa523d0a10b0f1be8ed4ce1ee68330c5bb2"
-  integrity sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==
+  integrity sha512-uFG1gyVX91tZIiDWNmPsL8XNpiCk/6tkB7MZphoSJflS4w+KgWyQ2gjCVDnsPxFAo9WjRXG3eqONNYdfbJjAtw==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
@@ -6880,9 +6880,9 @@ nanocolors@^0.1.12, nanocolors@^0.1.5:
   integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
 
 nanocolors@^0.2.2, nanocolors@^0.2.6, nanocolors@^0.2.8:
-  version "0.2.11"
+  version "0.2.12"
-  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.11.tgz#f2573e6872f1b70067423fc68bbc9d0de2f3bbee"
+  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
-  integrity sha512-83ttyvfJj66dKMadWfBkEUOEDFfRc8FpzTJvh1MySR/pzWFmFikTQZGOV6kHZRz7yR/heiQ1y/MHBBN5P/e7WQ==
+  integrity sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==
 
 nanoid@^3.1.25:
   version "3.1.28"
@@ -10413,10 +10413,10 @@ webpack-sources@^3.2.0:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.1.tgz#251a7d9720d75ada1469ca07dbb62f3641a05b6d"
   integrity sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==
 
-webpack@^5.54.0:
+webpack@^5.55.1:
-  version "5.54.0"
+  version "5.55.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.54.0.tgz#629f0cd14c7a4340af758a3c7cef25c50670ae4d"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.55.1.tgz#426ebe54c15fa57f7b242590f65fd182382b5998"
-  integrity sha512-MAVKJMsIUotOQKzFOmN8ZkmMlj7BOyjDU6t1lomW9dWOme5WTStzGa3HMLdV1KYD1AiFETGsznL4LMSvj4tukw==
+  integrity sha512-EYp9lwaOOAs+AA/KviNZ7bQiITHm4bXQvyTPewD2+f5YGjv6sfiClm40yeX5FgBMxh5bxcB6LryiFoP09B97Ug==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.50"