majorly refactor SCSS and pray nothing breaks

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 }}