better media integration

layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header>
-    <img src="{{.Site.Data.details.logo}}">
+    <img src="{{.Site.Params.default_img}}">
     <div>
     <h1>{{.Site.Title }}</h1>
     <i>{{.Site.Params.subtitle}}</i>

layouts/shortcodes/audio.html

@@ -1,3 +1,3 @@
-<audio controls>
+<audio controls preload="false">
     <source src='{{.Get "src" }}'>
 </audio>

layouts/shortcodes/gif.html

@@ -0,0 +1,4 @@
+<video autoplay muted loop preload="true">
+    <source src='{{.Get "src" }}'>
+    <source src='{{.Get 0 }}'>
+</video>

layouts/shortcodes/image.html

@@ -1,7 +1,7 @@
 {{ if .Get "href"}}
 <a href='{{.Get "href"}}'>
 {{end}}
-<img 
+<img loading="lazy"
 src='{{.Get "src"}}' 
 {{if .Get "alt"}}
  alt='{{.Get "alt"}}'

layouts/shortcodes/video.html

@@ -1,3 +1,3 @@
-<video {{if .Get "autoplay"}}autoplay muted loop{{else}}controls {{end}}>
+<video {{if .Get "autoplay"}}autoplay muted loop preload="true"{{else}}controls preload="false"{{end}}>
     <source src='{{.Get "src" }}'>
 </video>

static/css/theme.css

@@ -152,7 +152,6 @@ header {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-evenly;
-    bottom: 0;
     font-size:1.25rem
 }
 
@@ -173,7 +172,12 @@ section {
     flex-direction: column;
     align-items: center;
 }
-
+h1{
+    font-size:200%;
+}
+h2{
+    font-size:150%;
+}
 article {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -181,7 +185,6 @@ article {
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-size:1.5rem;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
     max-width:80rem;
 }
@@ -409,3 +412,17 @@ aside .listing img{
     padding:1.5rem;
     font-weight: bolder;
 }
+
+.gallery{
+    width:90%;
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+
+}
+.gallery>*{
+    margin:0.1rem;
+    border:1px solid var(--theme-color-accent);
+}