From c3e09727a63349d839391b7faf0fc9293d4e42af Mon Sep 17 00:00:00 2001
From: Brandon Rozek <rozekbrandon@gmail.com>
Date: Sun, 8 May 2022 18:02:35 -0400
Subject: [PATCH] Refactored template code

---
 assets/css/markdown-dark.css                  |  48 +--
 assets/css/markdown.css                       | 282 +++++++++---------
 assets/css/style.css                          |  13 +-
 layouts/_default/list.html                    |  12 +-
 layouts/_default/list.json                    |   3 +-
 layouts/_default/single.html                  |  20 +-
 layouts/blog/baseof.html                      |   7 -
 layouts/blog/list.html                        |  39 +--
 layouts/blog/list.json                        |  10 -
 layouts/blog/single.html                      | 109 +++----
 layouts/feed/list.html                        |  51 ++--
 layouts/partials/date.html                    |  14 +
 layouts/partials/reading_time.html            |   8 +
 layouts/partials/search.html                  |  16 +
 .../tags_list_all.html}                       |   9 +-
 layouts/partials/tags_list_page.html          |  11 +
 layouts/partials/webmentions.html             |  11 +
 layouts/shortcodes/displayToots.html          |  26 +-
 layouts/tags/list.html                        |  26 +-
 layouts/tags/terms.html                       |  12 +-
 20 files changed, 332 insertions(+), 395 deletions(-)
 delete mode 100644 layouts/blog/baseof.html
 delete mode 100644 layouts/blog/list.json
 create mode 100644 layouts/partials/date.html
 create mode 100644 layouts/partials/reading_time.html
 create mode 100644 layouts/partials/search.html
 rename layouts/{blog/terms.html => partials/tags_list_all.html} (58%)
 create mode 100644 layouts/partials/tags_list_page.html
 create mode 100644 layouts/partials/webmentions.html

diff --git a/assets/css/markdown-dark.css b/assets/css/markdown-dark.css
index 2d08216..e58141d 100644
--- a/assets/css/markdown-dark.css
+++ b/assets/css/markdown-dark.css
@@ -1,21 +1,21 @@
-#contentBody img {
+main .e-content img {
   box-shadow: none;
 }
 
-#contentBody hr {
+main .e-content hr {
   border-bottom: 1px solid #201d1a;
 }
 
-#contentBody hr {
+main .e-content hr {
   background-color: #1e1b17;
 }
 
-#contentBody blockquote {
+main .e-content blockquote {
   color: #958c82;
   border-left: 0.25em solid #201d1a;
 }
 
-#contentBody kbd {
+main .e-content kbd {
   color: #bbb2a9;
   background-color: #050403;
   border: solid 1px #39342e;
@@ -23,56 +23,56 @@
   box-shadow: none;
 }
 
-#contentBody h1 .octicon-link,
-#contentBody h2 .octicon-link,
-#contentBody h3 .octicon-link,
-#contentBody h4 .octicon-link,
-#contentBody h5 .octicon-link,
-#contentBody h6 .octicon-link {
+main .e-content h1 .octicon-link,
+main .e-content h2 .octicon-link,
+main .e-content h3 .octicon-link,
+main .e-content h4 .octicon-link,
+main .e-content h5 .octicon-link,
+main .e-content h6 .octicon-link {
   color: #e4e0dc;
 }
 
-#contentBody h1 {
+main .e-content h1 {
   border-bottom: 1px solid #363636;
 }
 
-#contentBody h2 {
+main .e-content h2 {
   border-bottom: 1px solid #363636;
 }
 
 
-#contentBody h6 {
+main .e-content h6 {
   font-size: 0.85em;
   color: #958c82;
 }
 
-#contentBody table th,
-#contentBody table td {
+main .e-content table th,
+main .e-content table td {
   padding: 6px 13px;
   border: 1px solid #363636;
   background-color: #090909;
 }
 
-#contentBody img {
+main .e-content img {
   background-color: #090909;
 }
 
 
-#contentBody code {
+main .e-content code {
   background-color: #090909;
 }
 
-#contentBody .highlight pre,
-#contentBody pre {
+main .e-content .highlight pre,
+main .e-content pre {
   background-color: #090909;
 }
 
-#contentBody .full-commit .btn-outline:not(:disabled):hover {
+main .e-content .full-commit .btn-outline:not(:disabled):hover {
   color: #005cc5;
   border-color: #005cc5;
 }
 
-#contentBody kbd {
+main .e-content kbd {
   color: #bbb2a9;
   background-color: #050403;
   border: solid 1px #2e2a25;
@@ -80,10 +80,10 @@
   box-shadow: none;
 }
 
-#contentBody :checked+.radio-label {
+main .e-content :checked+.radio-label {
   border-color: #0366d6;
 }
 
-#contentBody hr {
+main .e-content hr {
   border-bottom-color: #111;
 }
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index d55bc25..9a0788f 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -1,82 +1,82 @@
-#contentBody a {
+main .e-content a {
   background-color: transparent;
 }
 
-#contentBody a:active,
-#contentBody a:hover {
+main .e-content a:active,
+main .e-content a:hover {
   outline-width: 0;
 }
 
-#contentBody strong {
+main .e-content strong {
   font-weight: inherit;
 }
 
-#contentBody strong {
+main .e-content strong {
   font-weight: bolder;
 }
 
-#contentBody h1 {
+main .e-content h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 
-#contentBody img {
+main .e-content img {
   border-style: none;
   box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
 }
 
-#contentBody code,
-#contentBody kbd,
-#contentBody pre {
+main .e-content code,
+main .e-content kbd,
+main .e-content pre {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 
-#contentBody hr {
+main .e-content hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }
 
-#contentBody input {
+main .e-content input {
   font: inherit;
   margin: 0;
 }
 
-#contentBody input {
+main .e-content input {
   overflow: visible;
 }
 
-#contentBody [type="checkbox"] {
+main .e-content [type="checkbox"] {
   box-sizing: border-box;
   padding: 0;
 }
 
-#contentBody * {
+main .e-content * {
   box-sizing: border-box;
 }
 
-#contentBody input {
+main .e-content input {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
 }
 
-#contentBody a {
+main .e-content a {
   /* color: #0366d6; */
   /* text-decoration: none; */
   text-decoration: underline;
 }
 
-#contentBody a:hover {
+main .e-content a:hover {
   text-decoration: underline;
 }
 
-#contentBody strong {
+main .e-content strong {
   font-weight: 600;
 }
 
-#contentBody hr {
+main .e-content hr {
   height: 0;
   margin: 15px 0;
   overflow: hidden;
@@ -85,190 +85,190 @@
   border-bottom: 1px solid #dfe2e5;
 }
 
-#contentBody hr::before {
+main .e-content hr::before {
   display: table;
   content: "";
 }
 
-#contentBody hr::after {
+main .e-content hr::after {
   display: table;
   clear: both;
   content: "";
 }
 
-#contentBody table {
+main .e-content table {
   border-spacing: 0;
   border-collapse: collapse;
 }
 
-#contentBody td,
-#contentBody th {
+main .e-content td,
+main .e-content th {
   padding: 0;
 }
 
-#contentBody h1,
-#contentBody h2,
-#contentBody h3,
-#contentBody h4,
-#contentBody h5,
-#contentBody h6 {
+main .e-content h1,
+main .e-content h2,
+main .e-content h3,
+main .e-content h4,
+main .e-content h5,
+main .e-content h6 {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#contentBody h1 {
+main .e-content h1 {
   font-size: 32px;
   font-weight: 600;
 }
 
-#contentBody h2 {
+main .e-content h2 {
   font-size: 24px;
   font-weight: 600;
 }
 
-#contentBody h3 {
+main .e-content h3 {
   font-size: 20px;
   font-weight: 600;
 }
 
-#contentBody h4 {
+main .e-content h4 {
   font-size: 16px;
   font-weight: 600;
 }
 
-#contentBody h5 {
+main .e-content h5 {
   font-size: 14px;
   font-weight: 600;
 }
 
-#contentBody h6 {
+main .e-content h6 {
   font-size: 12px;
   font-weight: 600;
 }
 
-#contentBody p {
+main .e-content p {
   margin-top: 0;
   margin-bottom: 10px;
 }
 
-#contentBody blockquote {
+main .e-content blockquote {
   margin: 0;
 }
 
-#contentBody ul,
-#contentBody ol {
+main .e-content ul,
+main .e-content ol {
   padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#contentBody ol ol,
-#contentBody ul ol {
+main .e-content ol ol,
+main .e-content ul ol {
   list-style-type: lower-roman;
 }
 
-#contentBody ul ul ol,
-#contentBody ul ol ol,
-#contentBody ol ul ol,
-#contentBody ol ol ol {
+main .e-content ul ul ol,
+main .e-content ul ol ol,
+main .e-content ol ul ol,
+main .e-content ol ol ol {
   list-style-type: lower-alpha;
 }
 
-#contentBody dd {
+main .e-content dd {
   margin-left: 0;
 }
 
-#contentBody code {
+main .e-content code {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: 12px;
 }
 
-#contentBody pre {
+main .e-content pre {
   margin-top: 0;
   margin-bottom: 0;
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: 12px;
 }
 
-#contentBody .octicon {
+main .e-content .octicon {
   vertical-align: text-bottom;
 }
 
-#contentBody .pl-0 {
+main .e-content .pl-0 {
   padding-left: 0 !important;
 }
 
-#contentBody .pl-1 {
+main .e-content .pl-1 {
   padding-left: 4px !important;
 }
 
-#contentBody .pl-2 {
+main .e-content .pl-2 {
   padding-left: 8px !important;
 }
 
-#contentBody .pl-3 {
+main .e-content .pl-3 {
   padding-left: 16px !important;
 }
 
-#contentBody .pl-4 {
+main .e-content .pl-4 {
   padding-left: 24px !important;
 }
 
-#contentBody .pl-5 {
+main .e-content .pl-5 {
   padding-left: 32px !important;
 }
 
-#contentBody .pl-6 {
+main .e-content .pl-6 {
   padding-left: 40px !important;
 }
 
-#contentBody::before {
+main .e-content::before {
   display: table;
   content: "";
 }
 
-#contentBody::after {
+main .e-content::after {
   display: table;
   clear: both;
   content: "";
 }
 
-#contentBody>*:first-child {
+main .e-content>*:first-child {
   margin-top: 0 !important;
 }
 
-#contentBody>*:last-child {
+main .e-content>*:last-child {
   margin-bottom: 0 !important;
 }
 
-#contentBody a:not([href]) {
+main .e-content a:not([href]) {
   color: inherit;
   text-decoration: none;
 }
 
-#contentBody .anchor {
+main .e-content .anchor {
   float: left;
   padding-right: 4px;
   margin-left: -20px;
   line-height: 1;
 }
 
-#contentBody .anchor:focus {
+main .e-content .anchor:focus {
   outline: none;
 }
 
-#contentBody p,
-#contentBody blockquote,
-#contentBody ul,
-#contentBody ol,
-#contentBody dl,
-#contentBody table,
-#contentBody pre {
+main .e-content p,
+main .e-content blockquote,
+main .e-content ul,
+main .e-content ol,
+main .e-content dl,
+main .e-content table,
+main .e-content pre {
   margin-top: 0;
   margin-bottom: 16px;
 }
 
-#contentBody hr {
+main .e-content hr {
   height: 0.25em;
   padding: 0;
   margin: 24px 0;
@@ -276,21 +276,21 @@
   border: 0;
 }
 
-#contentBody blockquote {
+main .e-content blockquote {
   padding: 0 1em;
   color: #6a737d;
   border-left: 0.25em solid #dfe2e5;
 }
 
-#contentBody blockquote>:first-child {
+main .e-content blockquote>:first-child {
   margin-top: 0;
 }
 
-#contentBody blockquote>:last-child {
+main .e-content blockquote>:last-child {
   margin-bottom: 0;
 }
 
-#contentBody kbd {
+main .e-content kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 11px;
@@ -304,106 +304,106 @@
   box-shadow: inset 0 -1px 0 #959da5;
 }
 
-#contentBody h1,
-#contentBody h2,
-#contentBody h3,
-#contentBody h4,
-#contentBody h5,
-#contentBody h6 {
+main .e-content h1,
+main .e-content h2,
+main .e-content h3,
+main .e-content h4,
+main .e-content h5,
+main .e-content h6 {
   margin-top: 24px;
   margin-bottom: 16px;
   font-weight: 600;
   line-height: 1.25;
 }
 
-#contentBody h1 .octicon-link,
-#contentBody h2 .octicon-link,
-#contentBody h3 .octicon-link,
-#contentBody h4 .octicon-link,
-#contentBody h5 .octicon-link,
-#contentBody h6 .octicon-link {
+main .e-content h1 .octicon-link,
+main .e-content h2 .octicon-link,
+main .e-content h3 .octicon-link,
+main .e-content h4 .octicon-link,
+main .e-content h5 .octicon-link,
+main .e-content h6 .octicon-link {
   color: #1b1f23;
   vertical-align: middle;
   visibility: hidden;
 }
 
-#contentBody h1:hover .anchor,
-#contentBody h2:hover .anchor,
-#contentBody h3:hover .anchor,
-#contentBody h4:hover .anchor,
-#contentBody h5:hover .anchor,
-#contentBody h6:hover .anchor {
+main .e-content h1:hover .anchor,
+main .e-content h2:hover .anchor,
+main .e-content h3:hover .anchor,
+main .e-content h4:hover .anchor,
+main .e-content h5:hover .anchor,
+main .e-content h6:hover .anchor {
   text-decoration: none;
 }
 
-#contentBody h1:hover .anchor .octicon-link,
-#contentBody h2:hover .anchor .octicon-link,
-#contentBody h3:hover .anchor .octicon-link,
-#contentBody h4:hover .anchor .octicon-link,
-#contentBody h5:hover .anchor .octicon-link,
-#contentBody h6:hover .anchor .octicon-link {
+main .e-content h1:hover .anchor .octicon-link,
+main .e-content h2:hover .anchor .octicon-link,
+main .e-content h3:hover .anchor .octicon-link,
+main .e-content h4:hover .anchor .octicon-link,
+main .e-content h5:hover .anchor .octicon-link,
+main .e-content h6:hover .anchor .octicon-link {
   visibility: visible;
 }
 
-#contentBody h1 {
+main .e-content h1 {
   padding-bottom: 0.3em;
   font-size: 2em;
   border-bottom: 1px solid #c9c9c9;
 }
 
-#contentBody h2 {
+main .e-content h2 {
   padding-bottom: 0.3em;
   font-size: 1.5em;
   border-bottom: 1px solid #c9c9c9;
 }
 
-#contentBody h3 {
+main .e-content h3 {
   font-size: 1.25em;
 }
 
-#contentBody h4 {
+main .e-content h4 {
   font-size: 1em;
 }
 
-#contentBody h5 {
+main .e-content h5 {
   font-size: 0.875em;
 }
 
-#contentBody h6 {
+main .e-content h6 {
   font-size: 0.85em;
   color: #6a737d;
 }
 
-#contentBody ul,
-#contentBody ol {
+main .e-content ul,
+main .e-content ol {
   padding-left: 2em;
 }
 
-#contentBody ul ul,
-#contentBody ul ol,
-#contentBody ol ol,
-#contentBody ol ul {
+main .e-content ul ul,
+main .e-content ul ol,
+main .e-content ol ol,
+main .e-content ol ul {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#contentBody li {
+main .e-content li {
   word-wrap: break-all;
 }
 
-#contentBody li>p {
+main .e-content li>p {
   margin-top: 16px;
 }
 
-#contentBody li+li {
+main .e-content li+li {
   margin-top: 0.25em;
 }
 
-#contentBody dl {
+main .e-content dl {
   padding: 0;
 }
 
-#contentBody dl dt {
+main .e-content dl dt {
   padding: 0;
   margin-top: 16px;
   font-size: 1em;
@@ -411,43 +411,43 @@
   font-weight: 600;
 }
 
-#contentBody dl dd {
+main .e-content dl dd {
   padding: 0 16px;
   margin-bottom: 16px;
 }
 
-#contentBody table {
+main .e-content table {
   display: block;
   width: 100%;
   overflow: auto;
 }
 
-#contentBody table th {
+main .e-content table th {
   font-weight: 600;
 }
 
-#contentBody table th,
-#contentBody table td {
+main .e-content table th,
+main .e-content table td {
   padding: 6px 13px;
   border: 1px solid #c9c9c9;
   background-color: #f6f6f6;
 }
 
-#contentBody img {
+main .e-content img {
   max-width: 100%;
   box-sizing: content-box;
   background-color: #f6f6f6;
 }
 
-#contentBody img[align=right] {
+main .e-content img[align=right] {
   padding-left: 20px;
 }
 
-#contentBody img[align=left] {
+main .e-content img[align=left] {
   padding-right: 20px;
 }
 
-#contentBody code {
+main .e-content code {
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
@@ -455,11 +455,11 @@
   border-radius: 3px;
 }
 
-#contentBody pre {
+main .e-content pre {
   word-wrap: normal;
 }
 
-#contentBody pre>code {
+main .e-content pre>code {
   padding: 0;
   margin: 0;
   font-size: 100%;
@@ -469,17 +469,17 @@
   border: 0;
 }
 
-#contentBody .highlight {
+main .e-content .highlight {
   margin-bottom: 16px;
 }
 
-#contentBody .highlight pre {
+main .e-content .highlight pre {
   margin-bottom: 0;
   word-break: normal;
 }
 
-#contentBody .highlight pre,
-#contentBody pre {
+main .e-content .highlight pre,
+main .e-content pre {
   padding: 16px;
   overflow: auto;
   font-size: 85%;
@@ -487,7 +487,7 @@
   background-color: #f6f6f6;
 }
 
-#contentBody pre code {
+main .e-content pre code {
   display: inline;
   max-width: auto;
   padding: 0;
@@ -499,12 +499,12 @@
   border: 0;
 }
 
-#contentBody .full-commit .btn-outline:not(:disabled):hover {
+main .e-content .full-commit .btn-outline:not(:disabled):hover {
   color: #005cc5;
   border-color: #005cc5;
 }
 
-#contentBody kbd {
+main .e-content kbd {
   display: inline-block;
   padding: 3px 5px;
   font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -518,25 +518,25 @@
   box-shadow: inset 0 -1px 0 #c6cbd1;
 }
 
-#contentBody :checked+.radio-label {
+main .e-content :checked+.radio-label {
   position: relative;
   z-index: 1;
   border-color: #0366d6;
 }
 
-#contentBody .task-list-item {
+main .e-content .task-list-item {
   list-style-type: none;
 }
 
-#contentBody .task-list-item+.task-list-item {
+main .e-content .task-list-item+.task-list-item {
   margin-top: 3px;
 }
 
-#contentBody .task-list-item input {
+main .e-content .task-list-item input {
   margin: 0 0.2em 0.25em -1.6em;
   vertical-align: middle;
 }
 
-#contentBody hr {
+main .e-content hr {
   border-bottom-color: #eee;
 }
diff --git a/assets/css/style.css b/assets/css/style.css
index 250655b..147be63 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -97,6 +97,8 @@ a:active {
 
 main {
   padding: 20px 10px;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 mark {
@@ -245,13 +247,16 @@ mark {
 }
 
 /* Page */
-#contentBody {
-  max-width: 800px;
-  margin: 0 auto;
-  /* padding: 20px 10px; */
+main .e-content {
   text-align: left;
 }
 
+main .e-content h2 {
+  padding-bottom: .3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid #c9c9c9;
+}
+
 
 /*
 ** Home Page
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 4c31d1e..4a687c0 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,10 +1,12 @@
-{{ define "main"}}
+{{ define "main" }}
   {{ partial "header.html" . }}
   <!-- content -->
-  <main>
-  <div id="contentBody">
-    {{ .Content }}
-  </div>
+  <main class="h-entry">
+    {{ .Scratch.Set "beforeDateString" "Published on "}}
+    {{ partial "date.html" . }}
+    <div class="e-content">
+      {{ .Content }}
+    </div>
   </main>
   {{ partial "footer.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/list.json b/layouts/_default/list.json
index 0fa510c..0f88195 100644
--- a/layouts/_default/list.json
+++ b/layouts/_default/list.json
@@ -3,7 +3,8 @@
         "ref": "{{ $page.Permalink }}",
         "title": {{ $page.Title | jsonify }},
         "section": "{{ $page.Section }}",
+        "tags": {{ $page.Params.tags | jsonify }},
         "date" : {{ $page.Date.Format "2006.01.02" | jsonify }},
         "body": {{ $page.Plain | jsonify }}
     }
-{{ end }}]
+{{ end }}]
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f350917..119b7f8 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,24 +1,10 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-  {{ if not .Date.IsZero }}
-  <!-- date -->
-  {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
-  <p class="date">{{ .Date.Format $singlePageDateFormat }}</p>
-  {{ end }}
-  <!-- tags -->
-  <div id="tags">
-    <ul>
-      {{ range .Param "tags" }}
-        {{ $name := . }}
-        {{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
-          <li><a href="{{ .Permalink }}">{{ $name }}</a></li>
-        {{ end }}
-      {{ end }}
-    </ul>
-  </div>
+  {{ partial "date.html" . }}
+  {{ partial "tags_list_page.html" . }}
   <!-- content -->
-  <div id="contentBody">
+  <div class="e-content">
     {{ .Content }}
   </div>
   </main>
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
deleted file mode 100644
index 0ab5755..0000000
--- a/layouts/blog/baseof.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-  {{ partial "head.html" . }}
-  <body>
-    {{ block "main" . }}{{ end }}
-  </body>
-</html>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 04d4096..34b49f7 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -1,42 +1,21 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-  <!-- search box -->
-  <div id="searchBox">
-    <input type="text" id="searchBoxInput" placeholder="Search..." />
-    <img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
-  </div>
-  <!-- search results -->
-  <div id="searchResults"></div>
-  <!-- tags -->
-  <div id="tags">
-    <ul>
-      {{ range .Site.Taxonomies.tags.ByCount }}
-        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
-      {{ end }}
-    </ul>
-  </div>
+  {{ partial "search.html" . }}
+  {{ partial "tags_list_all.html" . }}
   <!-- contents -->
   <div id="contentsList">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
     {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
-    {{ if (ne $index 0) }}
-    <hr class="separator">
-    {{ end }}
-    <p class="date">{{ .Key }}</p>
-    {{ range .Pages }}
-      <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
-    {{ end }}
+      {{ if (ne $index 0) }}
+        <hr class="separator">
+      {{ end }}
+      <p class="date">{{ .Key }}</p>
+      {{ range .Pages }}
+        <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
+      {{ end }}
     {{ end }}
   </div>
   </main>
   {{ partial "footer.html" . }}
-  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
-  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
-  {{ $lunr := resources.Get "js/lunr.js" }}
-  {{ $search := resources.Get "js/search.js" }}
-  <script src="{{ $jquery.Permalink }}"></script>
-  <script src="{{ $mark.Permalink }}"></script>
-  <script src="{{ $lunr.Permalink }}"></script>
-  <script src="{{ $search.Permalink }}"></script>
 {{ end }}
diff --git a/layouts/blog/list.json b/layouts/blog/list.json
deleted file mode 100644
index dc748c1..0000000
--- a/layouts/blog/list.json
+++ /dev/null
@@ -1,10 +0,0 @@
-[{{ range $index, $page := .Pages }}{{ if ne $index 0 }},{{ end }}
-    {
-        "ref": "{{ $page.Permalink }}",
-        "title": {{ $page.Title | jsonify }},
-        "section": "{{ $page.Section }}",
-        "tags": {{ $page.Params.tags | jsonify }},
-        "date" : {{ $page.Date.Format "2006.01.02" | jsonify }},
-        "body": {{ $page.Plain | jsonify }}
-    }
-{{ end }}]
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 107d04b..202dfa0 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -1,76 +1,41 @@
 {{ define "main"}}
+{{ .Scratch.Set "customTitleHeaderSet" true }}
+{{ .Scratch.Set "customTitleHeader" "Blog" }}
+{{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
+{{ partial "header.html" . }}
+<main>
   <article class="h-entry">
-  {{ .Scratch.Set "customTitleHeaderSet" true }}
-  {{ .Scratch.Set "customTitleHeader" "Blog" }}
-  {{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
-  {{ partial "header.html" . }}
-  <main>
-  <h1 class='title'>{{ .Title }}</h1>
-  <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
-  <!-- date -->
-  {{ if not .Date.IsZero }}
-  {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
-  {{ $pubdate := .Date.Format $singlePageDateFormat }}
-  <p class="date">Published on <time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ $pubdate }}</time></p>
-  {{- if .Lastmod }}
-    {{- $lastmod := .Lastmod.Format $singlePageDateFormat }}
-    {{- if ne $lastmod $pubdate }}
-    <p class="date-updated">Updated on <time class='dt-updated' datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ $lastmod }}</time></p>
-    {{- end }}
-  {{ end }}
-  {{ end }}
-  {{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
-  {{ if gt $readTime 60 }}
-  <p>
-    Reading Time:
-    {{ math.Ceil (div $readTime 60) }} minutes.
-  </p>
-  {{ end }}
-  <!-- tags -->
-  <div id="tags">
-    <ul>
-      {{ range .Param "tags" }}
-        {{ $name := . }}
-        {{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
-          <li><a class="p-category" href="{{ .Permalink }}">{{ $name }}</a></li>
-        {{ end }}
-      {{ end }}
-    </ul>
-  </div>
-  <!-- content -->
-  <div id="contentBody" class="e-content">
-    {{ .Content }}
-  </div>
+    <h1 class='title'>{{ .Title }}</h1>
+    <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
+    {{ .Scratch.Set "beforeDateString" "Published on "}}
+    {{ partial "date.html" . }}
+    {{ partial "reading_time.html" . }}
+    {{ partial "tags_list_page.html" . }}
+    <!-- content -->
+    <div class="e-content">
+      {{ .Content }}
+    </div>
   </article>
-  <!-- Webmentions -->
-  <div id="webmentions"></div>
-  <form method="post" action="https://webmention.io/brandonrozek.com/webmention">
-    <p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
-    <input type="url" name="source" id="webmention-source">
-    <input type="hidden" name="target" value="{{ .Permalink }}">
-    <button type="submit">Ping!</button>
-  </form>
-  </main>
-  {{ $webmentionjs := resources.Get "js/webmention.min.js" }}
-  <script src="{{ $webmentionjs.Permalink }}" async></script>
-  <!-- Metadata -->
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "NewsArticle",
-      "headline": "{{ .Title }}",
-      "image": [
-        "{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}"
-       ],
-      "datePublished": "{{ .Date.Format "2006-01-02" }}",
-      "author": [{
-          "@type": "Person",
-          "name": "{{ .Site.Params.Author }}",
-          "url": "{{ .Site.BaseURL }}",
-          "email": "mailto://{{ .Site.Params.email }}",
-          "image": "{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}"
-        }]
-    }
-    </script>
-  {{ partial "footer.html" . }}
+  {{ partial "webmentions.html" . }}
+</main>
+<!-- Metadata -->
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "NewsArticle",
+    "headline": "{{ .Title }}",
+    "image": [
+      "{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}"
+     ],
+    "datePublished": "{{ .Date.Format "2006-01-02" }}",
+    "author": [{
+        "@type": "Person",
+        "name": "{{ .Site.Params.Author }}",
+        "url": "{{ .Site.BaseURL }}",
+        "email": "mailto://{{ .Site.Params.email }}",
+        "image": "{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}"
+      }]
+  }
+  </script>
+{{ partial "footer.html" . }}
 {{ end }}
diff --git a/layouts/feed/list.html b/layouts/feed/list.html
index 2d86195..8e66e2a 100644
--- a/layouts/feed/list.html
+++ b/layouts/feed/list.html
@@ -1,41 +1,24 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-  <!-- search box -->
-  <div id="searchBox">
-    <input type="text" id="searchBoxInput" placeholder="Search..." />
-    <img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
-  </div>
-  <!-- search results -->
-  <div id="searchResults"></div>
-  <!-- contents -->
-  <div id="feedList">
-    {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
-    {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
-    {{ range .Pages }}
-      <article class="h-entry">
-        <h2 class='title p-name'>{{ .Title }}</h2>
-          <!-- date -->
-          {{ if not .Date.IsZero }}
-          {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
-          <p class="date"><time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ .Date.Format $singlePageDateFormat }}</time></p>
+    {{ partial "search.html" . }}
+    <!-- contents -->
+    <div id="feedList">
+      {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
+      {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
+      {{ range .Pages }}
+        <article class="h-entry">
+          <h2 class='title p-name'>{{ .Title }}</h2>
+          {{ .Scratch.Set "noDateUpdate" true }}
+          {{ partial "date.html" . }}
           <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
-          {{ end }}
-        <div id="contentBody" class="e-content">
-          {{ .Content }}
-        </div>
-      </article>
-    {{ end }}
-    {{ end }}
-  </div>
+          <div class="e-content">
+            {{ .Content }}
+          </div>
+        </article>
+      {{ end }}
+      {{ end }}
+    </div>
   </main>
   {{ partial "footer.html" . }}
-  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
-  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
-  {{ $lunr := resources.Get "js/lunr.js" }}
-  {{ $search := resources.Get "js/search.js" }}
-  <script src="{{ $jquery.Permalink }}"></script>
-  <script src="{{ $mark.Permalink }}"></script>
-  <script src="{{ $lunr.Permalink }}"></script>
-  <script src="{{ $search.Permalink }}"></script>
 {{ end }}
diff --git a/layouts/partials/date.html b/layouts/partials/date.html
new file mode 100644
index 0000000..af3ee66
--- /dev/null
+++ b/layouts/partials/date.html
@@ -0,0 +1,14 @@
+{{ if not .Date.IsZero }}
+    {{ $publishString := .Scratch.Get "beforeDateString" }}
+    {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
+    {{ $pubdate := .Date.Format $singlePageDateFormat }}
+
+    <p class="date">{{ $publishString }}<time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ $pubdate }}</time></p>
+
+    {{- if and (not (.Scratch.Get "noDateUpdate")) .Lastmod }}
+        {{- $lastmod := .Lastmod.Format $singlePageDateFormat }}
+        {{- if ne $lastmod $pubdate }}
+            <p class="date-updated">Updated on <time class='dt-updated' datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ $lastmod }}</time></p>
+        {{- end }}
+    {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/reading_time.html b/layouts/partials/reading_time.html
new file mode 100644
index 0000000..3f5f0e1
--- /dev/null
+++ b/layouts/partials/reading_time.html
@@ -0,0 +1,8 @@
+<!-- Reading Time -->
+{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
+{{ if gt $readTime 60 }}
+<p>
+  Reading Time:
+  {{ math.Ceil (div $readTime 60) }} minutes.
+</p>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
new file mode 100644
index 0000000..982ee54
--- /dev/null
+++ b/layouts/partials/search.html
@@ -0,0 +1,16 @@
+  <!-- search box -->
+  <div id="searchBox">
+    <input type="text" id="searchBoxInput" placeholder="Search..." />
+    <img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
+  </div>
+  <!-- search results -->
+  <div id="searchResults"></div>
+
+  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
+  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
+  {{ $lunr := resources.Get "js/lunr.js" }}
+  {{ $search := resources.Get "js/search.js" }}
+  <script src="{{ $jquery.Permalink }}"></script>
+  <script src="{{ $mark.Permalink }}"></script>
+  <script src="{{ $lunr.Permalink }}"></script>
+  <script src="{{ $search.Permalink }}"></script>
\ No newline at end of file
diff --git a/layouts/blog/terms.html b/layouts/partials/tags_list_all.html
similarity index 58%
rename from layouts/blog/terms.html
rename to layouts/partials/tags_list_all.html
index 04dd169..4385c74 100644
--- a/layouts/blog/terms.html
+++ b/layouts/partials/tags_list_all.html
@@ -1,7 +1,3 @@
-{{ define "main"}}
-  {{ partial "header.html" }}
-  <h1>{{ .Title }}</h1>
-  <main>
   <!-- tags -->
   <div id="tags">
     <ul>
@@ -9,7 +5,4 @@
         <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
       {{ end }}
     </ul>
-  </div>
-  </main>
-  {{ partial "footer.html" . }}
-{{ end }}
+  </div>
\ No newline at end of file
diff --git a/layouts/partials/tags_list_page.html b/layouts/partials/tags_list_page.html
new file mode 100644
index 0000000..994a684
--- /dev/null
+++ b/layouts/partials/tags_list_page.html
@@ -0,0 +1,11 @@
+<!-- List the tags that apply to this page -->
+<div id="tags">
+  <ul>
+    {{ range .Param "tags" }}
+      {{ $name := . }}
+      {{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
+        <li><a href="{{ .Permalink }}">{{ $name }}</a></li>
+      {{ end }}
+    {{ end }}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/webmentions.html b/layouts/partials/webmentions.html
new file mode 100644
index 0000000..3397bf8
--- /dev/null
+++ b/layouts/partials/webmentions.html
@@ -0,0 +1,11 @@
+<!-- Webmentions -->
+<div id="webmentions"></div>
+<form method="post" action="https://webmention.io/brandonrozek.com/webmention">
+  <p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
+  <input type="url" name="source" id="webmention-source">
+  <input type="hidden" name="target" value="{{ .Permalink }}">
+  <button type="submit">Ping!</button>
+</form>
+</main>
+{{ $webmentionjs := resources.Get "js/webmention.min.js" }}
+<script src="{{ $webmentionjs.Permalink }}" async></script>
\ No newline at end of file
diff --git a/layouts/shortcodes/displayToots.html b/layouts/shortcodes/displayToots.html
index f59333f..804a800 100644
--- a/layouts/shortcodes/displayToots.html
+++ b/layouts/shortcodes/displayToots.html
@@ -4,34 +4,38 @@
 <style>
     .toot {
         margin-bottom: 2rem;
+        padding: 15px;
+        border: 1px solid #656565;
+        border-radius: 10px;
+    }
+    .toot .date {
+        vertical-align: top;
+        margin-bottom: 0;
     }
     .toot .e-content img {
         display: inline-block;
+        border: 2px solid black;
     }
 
     .toot .e-content p:first-of-type {
         display: inline-block;
     }
-
-
 </style>
 
 {{ range sort $dataJ "created_at" "desc" }}
 {{ if ne .content "" }}
 <article class="toot h-entry">
-<div>
     <div class="e-content">
         <img width=50 src="{{ .account.avatar }}"/>
-        <p class="date">Published on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p>
+        <p class="date">Tooted on <time class="dt-published" datetime='{{ .created_at }}'>{{ dateFormat "January 2, 2006 15:04" (time .created_at) }}</time></p>
         {{ .content | safeHTML }}
     </div>
-</div>
-<div class=".toot-social">
-<span><i class='fas fa-share'></i> {{ .replies_count }} </span>
-<span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span>
-<span><i class='fas fa-star'></i> {{ .favourites_count }} </span>
-<span>| Source: <a href="{{ .url }}">{{ .url }}</a></span>
-</div>
+    <div class=".toot-social">
+        <span><i class='fas fa-share'></i> {{ .replies_count }} </span>
+        <span><i class='fas fa-retweet'></i> {{ .reblogs_count }} </span>
+        <span><i class='fas fa-star'></i> {{ .favourites_count }} </span>
+        <span>| Source: <a href="{{ .url }}">{{ .url }}</a></span>
+    </div>
 </article>
 {{ end }}
 {{ end }}
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 77fd00f..28ddf3a 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -1,20 +1,8 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
-  <!-- search box -->
-  <div id="searchBox">
-    <input type="text" id="searchBoxInput" placeholder="Search..." />
-    <img id="searchBoxIcon" src="{{ .Site.BaseURL }}/img/search.png" />
-  </div>
-  <!-- search results -->
-  <div id="searchResults"></div>
-  <!-- tags -->
-  <div id="tags">
-    <ul>
-      {{ range .Site.Taxonomies.tags.ByCount }}
-        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
-      {{ end }}
-    </ul>
-  </div>
+  <main>
+  {{ partial "search.html" . }}
+  {{ partial "tags_list_all.html" . }}
   <!-- contents -->
   <div id="contentsList">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
@@ -28,11 +16,5 @@
     {{ end }}
     {{ end }}
   </div>
-  {{ partial "footer.html" . }}
-  {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
-  {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
-  {{ $lunr := resources.Get "js/lunr.js" }}
-  {{ $search := resources.Get "js/search.js" }}
-  {{ $js := slice $jquery $mark $lunr $search | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint }}
-  <script src="{{ $js.Permalink }}"></script>
+  </main>
 {{ end }}
diff --git a/layouts/tags/terms.html b/layouts/tags/terms.html
index e729689..c764368 100644
--- a/layouts/tags/terms.html
+++ b/layouts/tags/terms.html
@@ -1,13 +1,7 @@
 {{ define "main"}}
-  <h1>{{ .Title }}</h1>
   {{ partial "header.html" . }}
-  <!-- tags -->
-  <div id="tags">
-    <ul>
-      {{ range .Site.Taxonomies.tags.ByCount }}
-        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
-      {{ end }}
-    </ul>
-  </div>
+  <main>
+    {{ partial "tags_list_all.html" . }}
+  </main>
   {{ partial "footer.html" . }}
 {{ end }}