From 2589d388f193fa5cf59d8728e0ea20a69311e1ab Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel@bitbadger.solutions>
Date: Thu, 26 May 2022 16:28:57 -0400
Subject: [PATCH] Tweak mobile layout for bit badger / tech blog

- Fix "manage permalink" showing for new posts
- Tweak admin mobile layout
---
 src/MyWebLog/appsettings.json                 |  2 +-
 src/MyWebLog/themes/admin/layout.liquid       |  2 +-
 src/MyWebLog/themes/admin/log-on.liquid       |  6 +-
 src/MyWebLog/themes/admin/post-edit.liquid    |  2 +-
 .../themes/admin/tag-mapping-edit.liquid      |  6 +-
 src/MyWebLog/themes/admin/user-edit.liquid    | 12 +--
 .../themes/bit-badger/solution-page.liquid    |  1 -
 src/MyWebLog/themes/tech-blog/layout.liquid   |  7 +-
 .../themes/tech-blog/single-post.liquid       | 35 +++----
 .../wwwroot/themes/bit-badger/style.css       | 65 ++++++++-----
 .../wwwroot/themes/tech-blog/style.css        | 93 +++++++++++--------
 11 files changed, 131 insertions(+), 100 deletions(-)
diff --git a/src/MyWebLog/appsettings.json b/src/MyWebLog/appsettings.json
index 491cff4..cd32ad5 100644
--- a/src/MyWebLog/appsettings.json
+++ b/src/MyWebLog/appsettings.json
@@ -3,7 +3,7 @@
     "hostname": "data02.bitbadger.solutions",
     "database": "myWebLog_dev"
   },
-  "Generator": "myWebLog 2.0-alpha13",
+  "Generator": "myWebLog 2.0-alpha14",
   "Logging": {
     "LogLevel": {
       "MyWebLog.Handlers": "Debug"
diff --git a/src/MyWebLog/themes/admin/layout.liquid b/src/MyWebLog/themes/admin/layout.liquid
index c7c6b70..f03e8f0 100644
--- a/src/MyWebLog/themes/admin/layout.liquid
+++ b/src/MyWebLog/themes/admin/layout.liquid
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width; initial-scale=1">
     <meta name="generator" content="{{ generator }}">
     <title>{{ page_title | escape }} &laquo; Admin &laquo; {{ web_log.name | escape }}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
diff --git a/src/MyWebLog/themes/admin/log-on.liquid b/src/MyWebLog/themes/admin/log-on.liquid
index 504bd52..5452859 100644
--- a/src/MyWebLog/themes/admin/log-on.liquid
+++ b/src/MyWebLog/themes/admin/log-on.liquid
@@ -6,14 +6,14 @@
       <input type="hidden" name="returnTo" value="{{ model.return_to.value }}">
     {% endif %}
     <div class="container">
-      <div class="row pb-3">
-        <div class="col col-md-6 col-lg-4 offset-lg-2">
+      <div class="row">
+        <div class="col-12 col-md-6 col-lg-4 offset-lg-2 pb-3">
           <div class="form-floating">
             <input type="email" id="email" name="emailAddress" class="form-control" autofocus required>
             <label for="email">E-mail Address</label>
           </div>
         </div>
-        <div class="col col-md-6 col-lg-4">
+        <div class="col-12 col-md-6 col-lg-4 pb-3">
           <div class="form-floating">
             <input type="password" id="password" name="password" class="form-control" required>
             <label for="password">Password</label>
diff --git a/src/MyWebLog/themes/admin/post-edit.liquid b/src/MyWebLog/themes/admin/post-edit.liquid
index 043c7cd..38a6787 100644
--- a/src/MyWebLog/themes/admin/post-edit.liquid
+++ b/src/MyWebLog/themes/admin/post-edit.liquid
@@ -15,7 +15,7 @@
             <input type="text" name="permalink" id="permalink" class="form-control" placeholder="Permalink" required
                    value="{{ model.permalink }}">
             <label for="permalink">Permalink</label>
-            {%- if model.page_id != "new" %}
+            {%- if model.post_id != "new" %}
               {%- capture perm_edit %}admin/post/{{ model.post_id }}/permalinks{% endcapture -%}
               <span class="form-text"><a href="{{ perm_edit | relative_link }}">Manage Permalinks</a></span>
             {% endif -%}
diff --git a/src/MyWebLog/themes/admin/tag-mapping-edit.liquid b/src/MyWebLog/themes/admin/tag-mapping-edit.liquid
index af98b0b..93724e8 100644
--- a/src/MyWebLog/themes/admin/tag-mapping-edit.liquid
+++ b/src/MyWebLog/themes/admin/tag-mapping-edit.liquid
@@ -10,14 +10,14 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col-6 col-lg-4 pb-3">
+        <div class="col-12 col-md-6 col-lg-4 offset-lg-2 pb-3">
           <div class="form-floating">
             <input type="text" name="tag" id="tag" class="form-control" placeholder="Tag" autofocus required
                    value="{{ model.tag }}">
             <label for="tag">Tag</label>
           </div>
         </div>
-        <div class="col-6 col-lg-4 pb-3">
+        <div class="col-12 col-md-6 col-lg-4 pb-3">
           <div class="form-floating">
             <input type="text" name="urlValue" id="urlValue" class="form-control" placeholder="URL Value" required
                    value="{{ model.url_value }}">
@@ -26,7 +26,7 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col">
+        <div class="col text-center">
           <button type="submit" class="btn btn-primary">Save Changes</button>
         </div>
       </div>
diff --git a/src/MyWebLog/themes/admin/user-edit.liquid b/src/MyWebLog/themes/admin/user-edit.liquid
index b82908e..a06623e 100644
--- a/src/MyWebLog/themes/admin/user-edit.liquid
+++ b/src/MyWebLog/themes/admin/user-edit.liquid
@@ -4,21 +4,21 @@
     <input type="hidden" name="{{ csrf.form_field_name }}" value="{{ csrf.request_token }}">
     <div class="container">
       <div class="row mb-3">
-        <div class="col-6 col-lg-4 pb-3">
+        <div class="col-12 col-md-6 col-lg-4 pb-3">
           <div class="form-floating">
             <input type="text" name="firstName" id="firstName" class="form-control" autofocus required
                    placeholder="First" value="{{ model.first_name }}">
             <label for="firstName">First Name</label>
           </div>
         </div>
-        <div class="col-6 col-lg-4 pb-3">
+        <div class="col-12 col-md-6 col-lg-4 pb-3">
           <div class="form-floating">
             <input type="text" name="lastName" id="lastName" class="form-control" required
                    placeholder="Last" value="{{ model.last_name }}">
             <label for="lastName">Last Name</label>
           </div>
         </div>
-        <div class="col-6 col-lg-4 pb-3">
+        <div class="col-12 col-md-6 col-lg-4 pb-3">
           <div class="form-floating">
             <input type="text" name="preferredName" id="preferredName" class="form-control" required
                    placeholder="Preferred" value="{{ model.preferred_name }}">
@@ -36,14 +36,14 @@
               </div>
             </div>
             <div class="row">
-              <div class="col">
+              <div class="col-12 col-md-6 pb-3">
                 <div class="form-floating">
                   <input type="password" name="newPassword" id="newPassword" class="form-control"
                          placeholder="Password">
                   <label for="newPassword">New Password</label>
                 </div>
               </div>
-              <div class="col">
+              <div class="col-12 col-md-6 pb-3">
                 <div class="form-floating">
                   <input type="password" name="newPasswordConfirm" id="newPasswordConfirm" class="form-control"
                          placeholder="Confirm">
@@ -55,7 +55,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col mb-3">
+        <div class="col text-center mb-3">
           <button type="submit" class="btn btn-primary">Save Changes</button>
         </div>
       </div>
diff --git a/src/MyWebLog/themes/bit-badger/solution-page.liquid b/src/MyWebLog/themes/bit-badger/solution-page.liquid
index b4a9a31..dcbd48f 100644
--- a/src/MyWebLog/themes/bit-badger/solution-page.liquid
+++ b/src/MyWebLog/themes/bit-badger/solution-page.liquid
@@ -18,7 +18,6 @@
 <div class="app-info">
   <article class="content">
     <aside>
-      <span>&nbsp;</span>
       <img src="/themes/{{ web_log.theme_path }}/screenshots/{{ page.permalink | split: "/" | last }}.png"
            alt="Screen shot of {{ page.title | escape }}">
     </aside>
diff --git a/src/MyWebLog/themes/tech-blog/layout.liquid b/src/MyWebLog/themes/tech-blog/layout.liquid
index db76556..999634f 100644
--- a/src/MyWebLog/themes/tech-blog/layout.liquid
+++ b/src/MyWebLog/themes/tech-blog/layout.liquid
@@ -44,9 +44,9 @@
       </div>
     </header>
     <div class="content-wrapper">
-      <div id="content" role="main">
+      <main class="content" role="main">
         {{ content }}
-      </div>
+      </main>
       <aside class="blog-sidebar">
         <div>
           <div class="sidebar-head">Linux Resources</div>
@@ -69,7 +69,8 @@
     <footer>
       <span>
         A production of
-        <a href="https://bitbadger.solutions" title="Bit Badger Solutions" target="_blank" rel="noopener">
+        <a href="https://bitbadger.solutions" title="Bit Badger Solutions" target="_blank" rel="noopener"
+           class="no-wrap">
           Bit Badger Solutions
         </a>
       </span>
diff --git a/src/MyWebLog/themes/tech-blog/single-post.liquid b/src/MyWebLog/themes/tech-blog/single-post.liquid
index 0986894..ff3c468 100644
--- a/src/MyWebLog/themes/tech-blog/single-post.liquid
+++ b/src/MyWebLog/themes/tech-blog/single-post.liquid
@@ -1,24 +1,25 @@
 {%- assign post = model.posts | first -%}
 <article class="auto">
   <h1 class="entry-title">
-    {{ post.title }}<br>
-    <span class="entry-meta">
-      Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }}
-      at {{ post.published_on | date: "h:mm tt" | downcase }}
-      {%- assign cat_count = post.category_ids | size -%}
-      {%- if cat_count > 0 %}
-        <br>
-        <small>
-          Categorized under
-          {% for cat_id in post.category_ids -%}
-            {%- assign cat = categories | where: "id", cat_id | first -%}
-            <a href="{{ cat | category_link }}" title="Categorized under {{ cat.name | strip_html | escape }}"
-               rel="tag">{{ cat.name }}</a>{% unless forloop.last %}, {% endunless %}
-          {%- endfor %}
-        </small>
-      {%- endif %}
-    </span>
+    {{ post.title }}
   </h1>
+  <p class="entry-meta">
+    Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }}
+    at {{ post.published_on | date: "h:mm tt" | downcase }}
+  </p>
+  {%- assign cat_count = post.category_ids | size -%}
+  {%- if cat_count > 0 %}
+    <p class="entry-meta">
+      <small>
+        Categorized under
+        {% for cat_id in post.category_ids -%}
+          {%- assign cat = categories | where: "id", cat_id | first -%}
+          <a href="{{ cat | category_link }}" title="Categorized under {{ cat.name | strip_html | escape }}"
+             rel="tag">{{ cat.name }}</a>{% unless forloop.last %}, {% endunless %}
+        {%- endfor %}
+      </small>
+    </p>
+  {%- endif %}
   <div class="entry-content">{{ post.text }}</div>
   <div class="entry-footer">
     {%- assign tag_count = post.tags | size -%}
diff --git a/src/MyWebLog/wwwroot/themes/bit-badger/style.css b/src/MyWebLog/wwwroot/themes/bit-badger/style.css
index 76ff447..e606a80 100644
--- a/src/MyWebLog/wwwroot/themes/bit-badger/style.css
+++ b/src/MyWebLog/wwwroot/themes/bit-badger/style.css
@@ -1,17 +1,24 @@
+:root {
+  --heading-fonts: Oswald, "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  --accent-color: navy;
+  --app-color: maroon;
+  --edge-color: lightgray;
+  --bkg-color: #fffafa;
+}
 html {
-  background-color: lightgray;
+  background-color: var(--edge-color);
 }
 body {
   margin: 0;
-  font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
-  background-color: #FFFAFA;
+  font-family: Raleway, "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  background-color: var(--bkg-color);
 }
 a {
-  color: navy;
+  color: var(--accent-color);
   text-decoration: none;
 }
 a:hover {
-  border-bottom: dotted 1px navy;
+  border-bottom: dotted 1px var(--accent-color);
 }
 a img {
   border: 0;
@@ -20,7 +27,7 @@ acronym {
   border-bottom: dotted 1px black;
 }
 header, h1, h2, h3, .footer-by a {
-  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--heading-fonts);
 }
 h1 {
   text-align: center;
@@ -28,7 +35,6 @@ h1 {
   font-size: 2rem;
 }
 h1.project-title {
-  margin-top: 0;
   line-height: 1.2;
 }
 h2 {
@@ -38,9 +44,13 @@ h3 {
   margin: 1rem 0;
 }
 h2, h3 {
-  border-bottom: solid 2px navy;
+  border-bottom: solid 2px var(--accent-color);
+  width: 95%;
 }
-@media all and (min-width:40rem) {
+@media all and (min-width: 40rem) {
+  h1 {
+    margin: 0 0 1.4rem 0;
+  }
   h2, h3 {
     width: 80%;
   }
@@ -75,6 +85,7 @@ div[style="color:#DADADA;background-color:#1E1E1E;"] {
 }
 .content {
   font-size: 1.1rem;
+  padding: 0 .5rem;
 }
 .auto {
   margin: 0 auto;
@@ -82,6 +93,7 @@ div[style="color:#DADADA;background-color:#1E1E1E;"] {
 @media all and (min-width: 68rem) {
   .content {
     width: 66rem;
+    padding: 0 1rem;
   }
 }
 .hdr {
@@ -96,7 +108,7 @@ div[style="color:#DADADA;background-color:#1E1E1E;"] {
   padding-right: 5px;
 }
 ul {
-  padding-left: 40px;
+  padding-left: 1.5rem;
 }
 li {
   list-style-type: disc;
@@ -116,7 +128,7 @@ abbr[title] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
+  background-image: linear-gradient(to bottom, var(--edge-color), var(--bkg-color));
 }
 .site-header a, .site-header a:visited {
   color: black;
@@ -140,7 +152,7 @@ abbr[title] {
   width: 50px;
   height: 50px;
 }
-@media all and (max-width:40rem) {
+@media all and (max-width: 40rem) {
   .site-header {
     height: auto;
     flex-direction: column;
@@ -168,7 +180,7 @@ abbr[title] {
 }
 .app-sidebar {
   text-align: center;
-  border-top: dotted 1px lightgray;
+  border-top: dotted 1px var(--edge-color);
   padding-top: 1rem;
   font-size: .9rem;
   display: flex;
@@ -189,7 +201,7 @@ abbr[title] {
   .app-sidebar {
     width: 12rem;
     border-top: none;
-    border-left: dotted 1px lightgray;
+    border-left: dotted 1px var(--edge-color);
     padding-top: 0;
     padding-left: 2rem;
     flex-direction: column;
@@ -203,12 +215,12 @@ abbr[title] {
   font-family: sans-serif;
 }
 .app-sidebar-head {
-  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--heading-fonts);
   font-weight: bold;
-  color: maroon;
+  color: var(--app-color);
   margin-bottom: .8rem;
   padding: 3px 12px;
-  border-bottom: solid 2px lightgray;
+  border-bottom: solid 2px var(--edge-color);
   font-size: 1rem;
 }
 .app-sidebar-name, .app-sidebar-description {
@@ -222,26 +234,31 @@ abbr[title] {
 }
 /* All solution page */
 .app-name {
-  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--heading-fonts);
   font-size: 1.3rem;
   font-weight: bold;
-  color: maroon;
+  color: var(--app-color);
 }
 /* Individual solution pages */
 h1.solution-header {
-  line-height: 1.6rem;
+  line-height: 1;
 }
 .app-info aside {
   float: right;
   background-color: #FFFAFA;
+  padding-left: .5rem;
 }
-.app-info aside > span {
-  padding-left: .75rem;
+@media all and (max-width: 40rem) {
+  .app-info aside {
+    float: none;
+    text-align: center;
+    padding-left: 0;
+  }
 }
 .app-info aside > img {
   overflow: hidden;
   border: dotted 1px darkgray;
-  border-radius: 10px;
+  border-radius: .5rem;
 }
 .tech-stack p {
   margin-bottom: 0;
@@ -284,7 +301,7 @@ footer {
   font-size: 1rem;
   color: black;
   clear: both;
-  background-image: linear-gradient(to bottom, #FFFAFA, lightgray);
+  background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color));
 }
 footer a:link, footer a:visited {
   color: black;
diff --git a/src/MyWebLog/wwwroot/themes/tech-blog/style.css b/src/MyWebLog/wwwroot/themes/tech-blog/style.css
index 5be04d8..ab8ac9f 100644
--- a/src/MyWebLog/wwwroot/themes/tech-blog/style.css
+++ b/src/MyWebLog/wwwroot/themes/tech-blog/style.css
@@ -6,12 +6,21 @@
   font-weight: normal;
   font-style: normal;
 }
+:root {
+  --heading-fonts: Oswald, "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  --body-fonts: Raleway, "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  --code-fonts: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --accent-color: navy;
+  --app-color: maroon;
+  --edge-color: lightgray;
+  --bkg-color: #fffafa;
+}
 html {
   background-color: lightgray;
   scroll-behavior: smooth;
 }
 body, .entry-meta {
-  font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--body-fonts);
 }
 body {
   margin: 0;
@@ -22,7 +31,7 @@ a {
   text-decoration: none;
 }
 a:hover {
-  border-bottom: dotted 1px navy;
+  border-bottom: dotted 1px var(--accent-color);
 }
 a img {
   border:0;
@@ -32,7 +41,7 @@ acronym {
   text-decoration: none;
 }
 header, h1, h2, h3, footer a, .home-lead a, .highlight {
-  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--heading-fonts);
 }
 h1 {
   text-align: center;
@@ -46,9 +55,10 @@ h3 {
   margin: 1rem 0;
 }
 h2, h3 {
-  border-bottom: solid 2px navy;
+  border-bottom: solid 2px var(--accent-color);
+  width: 95%;
 }
-@media all and (min-width:40rem) {
+@media all and (min-width: 40rem) {
   h2, h3 {
     width: 80%;
   }
@@ -57,7 +67,7 @@ p {
   margin: 1rem 0;
 }
 code, pre {
-  font-family: "JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-family: var(--code-fonts);
   font-size: 80%;
 }
 code {
@@ -78,8 +88,7 @@ pre > code {
 div[style="color:#DADADA;background-color:#1E1E1E;"] {
   background-color: unset !important;
 }
-#content {
-  margin: 0 1rem;
+.content {
   font-size: 1.1rem;
 }
 .auto {
@@ -99,10 +108,10 @@ div[style="color:#DADADA;background-color:#1E1E1E;"] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(lightgray), to(#FFFAFA));
-  background-image: -webkit-linear-gradient(top, lightgray, #FFFAFA);
-  background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
-  background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--edge-color)), to(var(--bkg-color)));
+  background-image: -webkit-linear-gradient(top, var(--edge-color), var(--bkg-color));
+  background-image: -moz-linear-gradient(top, var(--edge-color), var(--bkg-color));
+  background-image: linear-gradient(to bottom, var(--edge-color), var(--bkg-color));
 }
 .site-header a:link, .site-header a:visited {
   color: black;
@@ -126,7 +135,7 @@ div[style="color:#DADADA;background-color:#1E1E1E;"] {
   width: 50px;
   height: 50px;
 }
-@media all and (max-width:40rem) {
+@media all and (max-width: 40rem) {
   .site-header {
     height: auto;
     flex-direction: column;
@@ -161,10 +170,10 @@ footer {
 	font-size: 1rem;
 	color: black;
 	clear: both;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFAFA), to(lightgray));
-  background-image: -webkit-linear-gradient(top, #FFFAFA, lightgray);
-  background-image: -moz-linear-gradient(top, #FFFAFA, lightgray);
-  background-image: linear-gradient(to bottom, #FFFAFA, lightgray);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bkg-color)), to(var(--edge-color)));
+  background-image: -webkit-linear-gradient(top, var(--bkg-color), var(--edge-color));
+  background-image: -moz-linear-gradient(top, var(--bkg-color), var(--edge-color));
+  background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color));
 }
 footer a:link, footer a:visited {
 	color: black;
@@ -174,14 +183,14 @@ footer a:link, footer a:visited {
 	padding-right: 5px;
 }
 ul {
-	padding-left: 40px;
+	padding-left: 1.5rem;
 }
 li {
 	list-style-type: disc;
 }
 
 .content-wrapper {
-  margin: 0 1rem;
+  padding: 0 .5rem;
 }
 @media all and (min-width: 80rem) {
   .content-wrapper {
@@ -191,22 +200,25 @@ li {
     align-items: flex-start;
     justify-content: space-around;
   }
+  .content {
+    margin-right: 1rem;
+  }
 }
 .home-title {
   text-align: left;
   line-height: 2rem;
 }
 .home-lead {
-  font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--body-fonts);
   font-size: 1.2rem;
 }
 .home-break {
   width: 80%;
-  border: dotted 1px lightgray;
+  border: dotted 1px var(--edge-color);
   border-bottom: 0;
 }
 .blog-sidebar {
-  border-top: dotted 1px lightgray;
+  border-top: dotted 1px var(--edge-color);
   padding-top: 1rem;
   font-size: 1rem;
   display: flex;
@@ -214,7 +226,7 @@ li {
   justify-content: space-around;
 }
 .blog-sidebar ul {
-  padding-left: 1rem;
+  padding-left: 0;
 }
 .blog-sidebar > ul {
   padding: 0;
@@ -235,12 +247,12 @@ li {
 @media all and (min-width: 80rem) {
   .blog-sidebar {
     min-width: 12rem;
-    max-width: 16rem;
+    max-width: 14rem;
     border-top: none;
-    border-left: dotted 1px lightgray;
+    border-left: dotted 1px var(--edge-color);
     padding-top: 0;
-    padding-left: 2rem;
-    margin: 0;
+    padding-left: 1rem;
+    margin: 0 0 0 1rem;
     flex-direction: column;
   }
 }
@@ -250,12 +262,12 @@ li {
 }
 .sidebar-head {
   text-align: center;
-  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: var(--heading-fonts);
   font-weight: bold;
-  color: maroon;
+  color: var(--app-color);
   margin-bottom: .8rem;
   padding: 3px 12px;
-  border-bottom: solid 2px lightgray;
+  border-bottom: solid 2px var(--edge-color);
   font-size: 1rem;
 }
 .app-sidebar-name, .app-sidebar-description {
@@ -268,7 +280,6 @@ li {
   padding-bottom: .6rem;
 }
 
-
 .content {
   font-size: 1.1rem;
 }
@@ -278,19 +289,19 @@ li {
 .auto > div {
   max-width: 66rem;
 }
-@media all and (min-width: 68rem) {
-  .content {
-    width: 66rem;
-  }
-}
 .entry-title {
-  line-height: 1.5rem;
+  line-height: 1;
 }
 .entry-meta {
   font-size: 1rem;
+  text-align: center;
+  font-weight: bold;
+  margin: 0 0 .5rem 0;
+}
+.entry-content {
+  margin-top: 1.5rem;
 }
 .cat-list-count {
-  padding-left: .3rem;
   font-size: .8rem;
 }
 .cat-list-count:before {
@@ -305,7 +316,9 @@ li {
   justify-content: space-between;
   padding-top: 1.5rem;
 }
-
+.no-wrap {
+  white-space: nowrap;
+}
 figure.highlight {
   background-color: #F8F8F8;
 }
@@ -335,7 +348,7 @@ figure.highlight td.code pre div.line:after {
 }
 figure.highlight pre div.line,
 figure.highlight pre div.line > * {
-  font-family: Consolas,"Courier New",Courier,monospace !important;
+  font-family: var(--code-fonts);
 }
 figure.highlight {
   display: block;
