presentable?

layouts/partials/metadata.html

@@ -3,15 +3,16 @@
             {{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
             <img src="{{$author.image}}" style="max-width:10rem;border-radius:5rem;">
             <h2>{{$author.name}}</h2>
-            <p>Date: {{.Date | time.Format "Jan 02 2006"}}</p>
+            <p>Published: {{.Date | time.Format "Jan 02 2006"}}</p>
         </div>
         <div>
-
-        <h3>Tags:</h3>
+        <h2>Tags</h2>
+        <div id="tags">
             {{ range (.GetTerms "tags")}}
             <a href="{{.Permalink}}">{{.LinkTitle}}</a>
             {{end}}
         </div>
         </div>
+    </div>
 
 </div>

layouts/partials/sidebar.html

@@ -1,8 +1,8 @@
 
-
+<div class="section-heading">
     <h2>Recent Content</h2>
+</div>
 {{range first 3 .Site.RegularPages}}
-
 <section class="recent">
     <a href="{{.Permalink}}">
         {{if .Params.video}}
@@ -19,11 +19,10 @@
     </div>
 </section>
 {{end}}
-
-<hr>
-
 {{if .Site.Data.details.featured}}
+<div class="section-heading">
     <h2>Featured</h2>
+</div>
 {{ range .Site.Data.details.featured}}
 <section class="featured">
         <a href="{{.href}}">

static/css/theme.css

@@ -2,7 +2,7 @@ body {
     line-height: 1.25;
     --theme-color-primary: white;
     --theme-color-secondary: black;
-    --theme-color-accent: #1d7fd4;
+    --theme-color-accent: #076cc5;
     --theme-color-accent-transparent: #1d7fd444;
     --theme-color-accent2: #0852a5;
     --theme-color-accent2-transparent: #ebb71644;
@@ -17,6 +17,7 @@ body {
     align-items: center;
     color: var(--theme-color-secondary);
     background-color: var(--theme-color-primary);
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
 
 .background-photo {
@@ -48,18 +49,18 @@ p {
 }
 
 a {
-    color: var(--theme-color-accent2);
+    color: var(--theme-color-accent);
 }
 
 a:visited {
-    color: var(--theme-color-accent2);
+    color: var(--theme-color-accent);
 }
 
 hr {
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
-    color: var(--theme-color-accent2);
+    color: var(--theme-color-accent);
 }
 
 main,aside {
@@ -71,10 +72,13 @@ main,aside {
     padding:1rem;
     max-width:90vw;
 }
+main>section{
+    margin:1rem;
+}
 main{
 
-    padding-left:10%;
-    padding-right:10%;
+    padding-left:5rem;
+    padding-right:5rem;
 }
 #main-content{
     min-width:30vw;
@@ -112,6 +116,8 @@ audio {
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
+    font-size: 1.25rem;
+
 }
 
 .metadata>div {
@@ -167,10 +173,6 @@ section {
     display:flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    padding: 1.25rem;
-    border-radius: 1rem;
 }
 
 article {
@@ -181,6 +183,8 @@ article {
     flex-direction: column;
     align-items: center;
     font-size:2.25rem;
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+    max-width:60rem;
 }
 
 blockquote {
@@ -298,17 +302,22 @@ aside .listing img{
 
 #sidebar {
   padding-top:0;
-  margin-top:3rem;
-  border:0.25rem solid var(--theme-color-accent);
+  border:0.5rem solid var(--theme-color-accent);
+  border-radius: 1rem;
   align-items: flex-start;
 }
 
 .recent *,
 .featured *{
-    margin:0;
+    margin:0.25rem;
     padding:0;
     text-align: left;
 }
+.recent p,
+.featured p{
+    min-width: 20vw;
+    
+}
 .recent img,
 .featured img,
 .recent video,
@@ -368,11 +377,18 @@ aside .listing img{
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
+    padding:1rem;
 }
 .featured a,.recent a{
     width:initial;
 }
 
+.section-heading{
+    background-color: var(--theme-color-accent);
+    color: var(--theme-color-primary);
+    width: 100%;
+}
+
 
 @media screen and (orientation:portrait){
     main{
@@ -385,3 +401,16 @@ aside .listing img{
     }
 }
 
+#tags{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+#tags>*{
+    margin:1rem;
+    background-color: var(--theme-color-accent);
+    color:var(--theme-color-primary);
+    border-radius: 1.5rem;
+    padding:1.5rem;
+    font-weight: bolder;
+}