majorly refactor SCSS and pray nothing breaks

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="title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></div>
+        <div class="list-item-date">{{ .Date.Format "Jan 2" }}</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 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="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 class="footer-row">
+    <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="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>