[SKIP] Horrible css + js to toggle tag list display on phones

Fixes #16

_sass/main.scss

@@ -128,6 +128,10 @@ body {
 	font-family: ui-rounded;
 }
 
+.tag-toggle {
+    display: none;
+}
+
 // fixing various settings for mobile devices
 @media only screen and (max-width: 600px) {
 
@@ -170,6 +174,20 @@ body {
 		padding-right: 0;
 	}
 
+    .tag-toggle {
+        display: inline-block;
+        font-weight: normal;
+        color: var(--link-color);
+    }
+
+    .tag-toggle-hide {
+        display: none;
+    }
+
+    .tag-links {
+        display: none;
+    }
+
 	.footer {
 		margin-left: 0;
 		margin-right: 0;

index.html

@@ -17,11 +17,33 @@ <h3>{{ site.posts | size }} articles on many different topics!</h3>
 
 <!-- Print tags with links -->
 <h3>Tags:
+  <span class="tag-toggle" id="tag-toggle" onclick="tagToggle()">...+...</span>
+  <div id="tag-links" class="tag-links">
 	{% for tag in tags%}
 	<a href="/tags/{{tag}}.html">{{tag}}</a>&nbsp;
 	{% endfor %}
+  </div>
 </h3>
 
+<!-- Simple script for tag functionality on mobile units -->
+<script>
+  function tagToggle() {
+      // probably better ways. I'm lazy af
+      const activePattern = "...+...";
+      const links = document.getElementById("tag-links");
+      const toggleBtn = document.getElementById("tag-toggle");
+      const isActive = activePattern === toggleBtn.innerHTML;
+      if (isActive) {
+          toggleBtn.innerHTML = "...-...";
+          links.style = "display: inline-block;";
+      }
+      else {
+          toggleBtn.innerHTML = activePattern;
+          links.style = "display: none;";
+      }
+  }
+</script>
+
 <hr />
 
 <!-- Posts  -->