better media integration

layouts/partials/profile.html

@@ -1,11 +1,11 @@
 <main id="profile">
     <div>
         <a href="/">
-            <img id='profilephoto' loading="lazy" src="{{.Site.Data.details.profilephoto}}">
+            <img id='profilephoto' loading="lazy" src="{{.Site.Params.default_img}}">
              </a>
         <div id="profile-details">
-            <a href="/"><h1>{{.Site.Data.details.name}}</h1></a>
-            <p>{{.Site.Data.details.bio}}</p>
+            <a href="/"><h1>{{.Site.Title}}</h1></a>
+            <p>{{.Site.Params.subtitle}}</p>
             {{ if .Site.Data.details.links }}
         <div id="profile-links">
                 {{range .Site.Data.details.links}}

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/video.html

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

static/css/theme.css

@@ -1,20 +1,21 @@
 body{
-    --theme-color-primary: white;
+    --theme-color-primary: rgba(255, 255, 255, 0.9);
     --theme-color-secondary: black;
-    --theme-color-accent: #076cc5;
+    --theme-accent: #8c5c09;
 }
 @media screen and (prefers-color-scheme:dark){
     body{
-        --theme-color-primary:black;
+        --theme-color-primary:rgba(0, 0, 0, 0.9);
         --theme-color-secondary:white;
-
+        --theme-accent: #42c0ff;
     }
-
 }
 
 body{
-    color:var(--theme-secondary-color);
-    background-color: var(--theme-primary-color);
+    color:var(--theme-color-secondary);
+    background-color: var(--theme-color-primary);
+    background-image: url(/res/bg5.png);
+    background-size: 15vh;
     display:flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -29,7 +30,7 @@ body{
 }
 
 .spacer{
-    width:3vw;
+    width:10vw;
 }
 
 a,a:visited,hr{
@@ -51,6 +52,9 @@ audio{
     max-width:100%;
     max-height: 30vh;
     margin:1.5rem;
+}
+#profile img {
+
 }
 audio{
     width:80%;
@@ -90,19 +94,23 @@ audio{
 .post{
     width:100%;
     word-wrap: break-word;
+    margin-bottom:1rem;
+}
+.post h2{
+    margin-top:0;
 }
-
 
 #profilephoto{
     margin:1rem;
     max-width: 10rem;
+    border-radius: 50%;
+    border: 0.5rem solid var(--theme-accent);
 }
 section{
     width: 100%;
 }
 #profile>nav,
 #profile>div{
-    width:100%;
     display:flex;
     flex-direction: row;
     align-items: flex-start;
@@ -125,11 +133,18 @@ nav>a{
 }
 
 
-article{
+article,main > div,main>nav{
     display:flex;
     flex-direction: column;
     align-items: center;
-    width:100%;
+    padding:1rem;
+    background-color: var(--theme-color-primary);
+    color: var(--theme-color-secondary);
+    border:0.25rem solid var(--theme-accent);
+    backdrop-filter: blur(0.1rem);
+    border-radius: 1rem;
+    margin-bottom:1.5rem;
+    width:90%;
 }
 
 article p,
@@ -138,7 +153,7 @@ article ul,
 article ol,
 article table{
     text-align: left;
-    width:100%;
+    width:90%;
 }
 article img{
     
@@ -190,3 +205,6 @@ audio{
         width:100%;
     }
 }
+
+
+