Tweaks

assets/css/styles.css

@@ -41,7 +41,7 @@ p code {
 
 p code, pre { border-radius: 4px; }
 
-#tag-cloud { max-width: 250px; }
+#tag-cloud { max-width: 250px; font-family: monospace; }
 #contents-list>.toc-list {
   max-width: 250px;
   overflow: hidden;
@@ -51,11 +51,17 @@ p code, pre { border-radius: 4px; }
 @media (min-width: 1200px) {
   #contents-list>.toc-list, #tag-cloud  {
     display: block;
-    top: 100px;
+    top: 150px;
   }
   #tag-cloud {
     -webkit-transition: opacity .5s, visibility .5s;
     transition: opacity .5s, visibility .5s;
+    /* font properties for tag cloud */
+    font-size: 14px;
+    line-height: 1;
+  }
+  #tag-cloud span {
+    font-size: larger;
   }
 }
 @media (min-width: 1330px) { #contents-list>.toc-list { max-width: 300px; right: 3rem;}}
@@ -131,6 +137,10 @@ table tr th, table tr td {
     color: var(--main-color);
     margin-left: -1em;
 }
+hr {
+  border: 0 none;
+  border-top: 1px solid var(--main-color);
+}
 
 /* embedded subscribe form styling - outside the theme */
 .mc-field-group {
@@ -143,6 +153,10 @@ table tr th, table tr td {
   height: 1.5rem;
   margin-left: 0.5rem;
   padding: 0 0.5rem;
+  background-color: var(--code-background-color);
+  /* border: 1px solid var(--secondary-color); */
+  border: 0 none;
+  color: var(--body-text-color);
 }
 
 #mc-embedded-subscribe {
@@ -214,26 +228,25 @@ label#switch_mode::after {
   transition: 0s color;
 }
 
-.post-tags {
-  /* margin-left: 0.2rem; */
-}
-
 .post-tags i.svg-icon {
   position: relative;
   top: 4px;
 }
 
-.post-tags a.link {
+.post-tags a.link,
+#tag-cloud a {
   text-decoration: none;
-  font-size: small;
   font-weight: 800;
   line-height: 1;
   display: inline-block;
   padding: 4px 2px;
-  color: var(--body-text-color);
   border-bottom: 1px solid var(--background-color);
 }
 
+.post-tags a.link {
+  color: var(--body-text-color);
+}
+
 .post-tags a.link:hover {
   border-bottom: 1px solid var(--generic-link-color);
 }
@@ -280,12 +293,22 @@ main>p {
   line-height: 1.67rem;
 }
 
-ul.list {
+section.post-content {
+  position: relative;
+}
+
+section.connect {
+  border: 1px solid rgba(0,0,0,0.01);
+}
+
+ul.list,
+section.connect {
   margin-top: 4rem;
   position: relative;
 }
 
-ul.list::before {
+ul.list::before,
+section.connect::before {
   position: absolute;
   content: "";
   top: -2rem;
@@ -303,3 +326,20 @@ ul.list::before {
 
 /* scrolling */
 html { scroll-behavior: smooth; }
+
+/* tocbot style overrides */
+.toc-link {
+  padding: 0 0.3rem;
+  font-size: 14px;
+  background-color: var(--background-color);
+}
+.is-active-link {
+  font-weight: 400 !important;
+  background-color: var(--secondary-color);
+  transition: background-color 200ms ease-in-out;
+  /* source-ordering issue: had to use !important because tocbot styles
+  load last and take precedence over these otherwise */
+}
+.list-pages a {
+  border-bottom: none;
+}

assets/css/variables.css

@@ -32,4 +32,5 @@ html.dark {
   --code-background-color: #666;
   --tag-background-color: #000;
   --generic-link-color: var(--main-color);
+  --secondary-color: var(--main-color);
 }

layouts/_default/list.html

@@ -11,4 +11,5 @@ <h1 class="f2 fw6 heading-font">{{ .Title }}</h1>
 <div class="pagination tc db fixed-l bottom-2-l right-2-l mb3 mb0-l">
 {{ partial "back-to-top.html" . }}
 </div>
+{{ partial "tag_cloud.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -1,20 +1,25 @@
 {{ define "main" }}
 <main class="center mv4 content-width ph3">
-  <div class="f3 fw6 heading-color heading-font post-title">{{ .Title }}</div>
-  <p class="silver f6 mt1 mb4 post-meta">
-    {{ if not .Date.IsZero }}<time>{{ .Date.Format "02 Jan 2006" }}</time> {{ end }}
-    {{ if .Params.draft }} | <strong>draft</strong>{{ end }}
-    {{ if or .Params.tags .Params.categories .Params.series }} | {{ end }}
-    {{ if isset .Params "categories" }}
-    categories: [ {{ range .Params.categories }}<a href='{{ "/categories/" | relLangURL }}{{ . | urlize }}' class="link silver">{{ . }}</a> {{ end }} ]
-    {{ end }}
-    {{ if isset .Params "tags" }}
-    <span class="post-tags"> {{ range .Params.tags }}<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}' class="link silver">{{ . }}</a> {{ end }} </span>
-    {{ end }}
-  </p>
-  <div class="lh-copy post-content">{{ .Content }}</div>
-  {{ partial "twitter" $.Site }}
-  {{ partial "mail-chimp" . }}
+  <section class="post-content mb4">
+    <div class="f3 fw6 heading-color heading-font post-title">{{ .Title }}</div>
+    <p class="silver f6 mt1 mb4 post-meta">
+      {{ if not .Date.IsZero }}<time>{{ .Date.Format "02 Jan 2006" }}</time> {{ end }}
+      {{ if .Params.draft }} | <strong>draft</strong>{{ end }}
+      {{ if or .Params.tags .Params.categories .Params.series }} | {{ end }}
+      {{ if isset .Params "categories" }}
+      categories: [ {{ range .Params.categories }}<a href='{{ "/categories/" | relLangURL }}{{ . | urlize }}' class="link silver">{{ . }}</a> {{ end }} ]
+      {{ end }}
+      {{ if isset .Params "tags" }}
+      <span class="post-tags"> {{ range .Params.tags }}<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}' class="link silver">{{ . }}</a> {{ end }} </span>
+      {{ end }}
+    </p>
+    <div class="lh-copy post-content">{{ .Content }}</div>
+  </section>
+
+  <section class="connect">
+    {{ partial "twitter" $.Site }}
+    {{ partial "mail-chimp" . }}
+  </section>
 </main>
 {{ partial "table-of-contents" . }}
 

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer class="content-width mt0 mt5-l mb4 f6 center ph3 gray tc tl-l">
-    <hr class="dn db-l ml0-l gray w3"><br>
+    <hr class="db-l ml0-l w3 bg-transparent"><br>
     {{ partial "indieweb.html" .Site }}
     Powered by <a href="https://gohugo.io/" target="_blank" class="link gray dim">Hugo</a>, based on the <a href="https://github.com/punchagan/er" target="_blank" class="link gray dim">Er</a> theme. <br>
     {{ with .Site.Copyright }}{{ . }}{{end}}

layouts/partials/tag_cloud.html

@@ -2,7 +2,7 @@
 {{ if .Site.Params.showTagCloud | default true }}
 <div class="dn tr fixed right-2" id="tag-cloud">
     <i class="svg-icon svg-icon--fill"><svg><use xlink:href="/images/icons.svg#icon-tag" /></svg></i>
-    tags <br>
+    <span class="dib mb2">tags</span> <br>
     {{ range first $maxtags .Site.Taxonomies.tags.ByCount }}
     <a class="silver no-underline" href="{{ "/tags/" | relLangURL }}{{ .Name | urlize }}">{{ .Name }}</a></li>
   {{ end }}