minor changes

layouts/_default/list.html

@@ -18,7 +18,7 @@
                 <section class="listing">
                     <div>
                         {{ if .Params.video}}
-                        <video autoplay muted>
+                        <video controls>
                             <source src="{{.Params.video}}">
                         </video>
                     {{else}}

layouts/_default/single.html

@@ -11,6 +11,7 @@
                     {{.Content}}
                 </section>
                 {{ if .Params.author}}
+                <hr>
                 <section>
                     {{partial "metadata" .}}
                 </section>

layouts/partials/metadata.html

@@ -1,15 +1,17 @@
 <div class="metadata">
         <div>
             {{$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>
         </div>
-        <h4>Tags:</h4>
-        <ul>
+        <div>
+
+        <h3>Tags:</h3>
             {{ range (.GetTerms "tags")}}
-            <a href="{{.Permalink}}"><li>{{.LinkTitle}}</li></a>
+            <a href="{{.Permalink}}">{{.LinkTitle}}</a>
             {{end}}
-        </ul>
+        </div>
     </div>
 
 </div>

static/css/theme.css

@@ -65,13 +65,17 @@ hr {
 
 main,aside {
     padding:2.5rem;
-    max-width:80rem;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-evenly;
     padding:1rem;
+    max-width:90vw;
+}
+main{
 
+    padding-left:10%;
+    padding-right:10%;
 }
 .listing {
     width: 100%;
@@ -110,6 +114,9 @@ audio {
 
 .metadata>div {
     margin: 1rem;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .metadata p {
@@ -161,12 +168,10 @@ section {
     margin-bottom: 0.5rem;
     padding: 1.25rem;
     border-radius: 1rem;
-    min-width: 30vw;
     font-size:125%;
 }
 
 article {
-    min-width: 30rem;
     background-color: #000015b6;
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -176,14 +181,13 @@ article {
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    padding-left:10%;
-    padding-right:10%;
+    font-size:115%;
 }
 
 blockquote {
     margin-left: 10%;
-    padding-left: 5%;
+    padding-left: 2.5rem;
+    width:80%;
     border-left: 0.5rem solid var(--theme-color-accent2);
     font-style: italic;
 }
@@ -198,6 +202,14 @@ article ul {
 article>a {
     text-align: center;
 }
+article h2,h1{
+    font-size:150%;
+    width:100%;
+    text-align: center;
+}
+h1{
+    font-size:175%;
+}
 
 article h3,
 section h3,
@@ -212,13 +224,17 @@ article h3 {
     text-decoration: underline;
 }
 
-article img,
+article img{
+    align-self: center;
+    max-width: 80%;
+    max-height: 50vh;
+
+}
 article video,
 article iframe {
     align-self: center;
     max-width: 60rem;
     width: 80%;
-    min-height: fit-content;
 }
 article iframe{
     height:30rem;
@@ -228,6 +244,7 @@ article>section>a{
     display:flex;
     flex-direction: column;
     align-items: center;
+    width:100%;
 }
 
 
@@ -252,10 +269,12 @@ video{
     flex-direction: row;
     flex-wrap: nowrap;
     padding:1.5%;
-    justify-content: center;
+    justify-content: flex-start;
     text-decoration: none;
     text-align: left;
-    max-width: 80%;
+}
+.link-preview>div{
+    margin:1rem;
 }
 .link-preview>img{
     max-width: 20%;
@@ -280,24 +299,21 @@ aside .listing img{
   padding-top:0;
   margin:2rem;  
   margin-top:3rem;
+  align-items: flex-start;
 }
-.recent,.featured{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
+
 .recent *,
 .featured *{
     margin:0;
     padding:0;
+    font-size:100%;
+    text-align: left;
 }
 .recent img,
 .featured img,
 .recent video,
 .featured video{
-    max-width:20rem;
-    max-height:10rem;
+    max-width: 20rem;
     margin:1rem;
 }
 
@@ -342,21 +358,30 @@ aside .listing img{
         border:none;
         box-shadow: none;
         padding:0;
-        max-width:100vw;
+        max-width:90vw;
     }
-    main{
-        max-width:100vw;
-
-    }
-
 }
 
-
+.recent,.featured{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+.featured a,.recent a{
+    width:initial;
+}
 
 
 @media screen and (orientation:portrait){
     main{
         flex-direction: column;
+        align-items: center;
+    }
+    .recent,.featured{
+        flex-direction: column;
+        align-items: center;
     }
 }