From dedcdb7dec35f61ad2bda08ec4aee7a5ad4c0b55 Mon Sep 17 00:00:00 2001
From: Gabriel <gabriel@libresolutions.network>
Date: Thu, 15 Sep 2022 17:12:31 -0400
Subject: [PATCH] major style changes

---
 layouts/_default/list.html    |   7 +-
 layouts/index.html            |   6 +-
 layouts/partials/post.html    |  16 +++-
 layouts/partials/profile.html |  44 ++++++-----
 layouts/shortcodes/image.html |   2 +-
 static/css/theme.css          | 138 +++++++++++++++++++++++-----------
 6 files changed, 142 insertions(+), 71 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 183147d..afcda8e 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,12 +2,17 @@
 <html>
     {{partial "head" .}}
     <body>
+
+        <div class="spacer"></div>
             {{partial "profile" .}}
+
+        <div class="spacer"></div>
             <aside id="posts">
             {{range .Pages}}
                 {{partial "post" .}}
-                <hr>
             {{end}}
         </aside>
+
+        <div class="spacer"></div>
     </body>
 </html>
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 7b0cb8a..1e2c0dc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,12 +2,14 @@
 <html>
     {{partial "head" .}}
     <body>
+        <div class="spacer"></div>
         {{partial "profile" .}}
+        <div class="spacer"></div>
         <aside id="posts">
-                {{range first 10 .Site.RegularPages}}
+                {{range first 4 .Site.RegularPages}}
                 {{partial "post" .}}
-                <hr>
             {{end}}
         </aside>
+        <div class="spacer"></div>
     </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 37b3ddf..b0dcd10 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -3,14 +3,22 @@
 {{if .Date }}
 <p>{{.Date  | time.Format "Jan 02 2006"}}</p>
 {{end}}
-{{if .Params.video}}<video controls autoplay muted loop><source src="{{.Params.video}}"></video>
+{{if .Params.video}}<video controls loop preload="none"><source src="{{.Params.video}}"></video>
 {{else}}
-{{if .Params.audio}}<audio controls><source src="{{.Params.audio}}"></audio>
+{{if .Params.audio}}<audio controls preload="none"><source src="{{.Params.audio}}"></audio>
 {{else}}
-{{if .Params.image}}<img src="{{.Params.image}}">
+{{if .Params.image}}<img loading="lazy" src="{{.Params.image}}">
 {{end}}
 {{end}}
 {{end}}
-
 <p>{{.Summary}}</p>
+{{ if .GetTerms "tags" }}
+<div class="post-tags">
+
+    <span>Tags:</span>
+    {{range .GetTerms "tags" }}
+<a href="{{.Permalink}}">{{.LinkTitle}}</a>
+{{end}}
+</div>
+{{end}}
 </article>
\ No newline at end of file
diff --git a/layouts/partials/profile.html b/layouts/partials/profile.html
index b3aecc5..a0a53b3 100644
--- a/layouts/partials/profile.html
+++ b/layouts/partials/profile.html
@@ -1,35 +1,39 @@
 <main id="profile">
     <div>
         <a href="/">
-       <img id='profilephoto' src="{{.Site.Data.details.profilephoto}}">
-        </a>
-        <div>
-            <h1><a href="/">{{.Site.Data.details.name}}</a></h1>
+            <img id='profilephoto' loading="lazy" src="{{.Site.Data.details.profilephoto}}">
+             </a>
+        <div id="profile-details">
+            <a href="/"><h1>{{.Site.Data.details.name}}</h1></a>
             <p>{{.Site.Data.details.bio}}</p>
-        {{if .Site.Data.details.contact}}
-        {{range .Site.Data.details.contact}}
-            <a href="{{.value}}">{{.name}}</a>
-        {{end}}
-{{end}}
+            {{ if .Site.Data.details.links }}
+        <div id="profile-links">
+                {{range .Site.Data.details.links}}
+                <a href="{{.linkurl}}">{{.linkname}}</a><br>
+                {{end}}
         </div>
+        {{end}}
+        </div>
+
+        
+
+
     </div>
-    {{ if .Site.Data.details.links }}
-    <div>
-            {{range .Site.Data.details.links}}
-            <a href="{{.linkurl}}">{{.linkname}}</a><br>
-            {{end}}
-    </div>
-    {{end}}
-    <hr>
+    
     {{partial "nav" .}}
-    <hr>
     {{ if .Content}}
     <article>
         {{.Content}}
     </article>
-    <hr>
     {{end}}
-
+    {{ if .GetTerms "tags" }}
+    <div class="post-tags">
+        <span>Tags:</span>
+        {{range .GetTerms "tags" }}
+    <a href="{{.Permalink}}">{{.LinkTitle}}</a>
+    {{end}}
+    </div>
+    {{end}}
     <div>
         <p><a href="https://codeberg.org/gabe/Valor">Valor</a> made by <a href="https://gabe.rocks">Gabriel</a></p>
     </div>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 60c0c88..31abec8 100644
--- a/layouts/shortcodes/image.html
+++ b/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"}}'
diff --git a/static/css/theme.css b/static/css/theme.css
index 634179f..4b4efd7 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1,9 +1,18 @@
 body{
-    --theme-primary-color:black;
-    --theme-secondary-color: white;
-    --theme-accent:rgb(29, 148, 196);
-    --theme-accent2:gold;
-    --theme-accent3:black;
+    --theme-color-primary: white;
+    --theme-color-secondary: black;
+    --theme-color-accent: #076cc5;
+}
+@media screen and (prefers-color-scheme:dark){
+    body{
+        --theme-color-primary:black;
+        --theme-color-secondary:white;
+
+    }
+
+}
+
+body{
     color:var(--theme-secondary-color);
     background-color: var(--theme-primary-color);
     display:flex;
@@ -11,17 +20,20 @@ body{
     flex-wrap: nowrap;
     align-items: flex-start;
     justify-content: space-evenly;
-    width:100vw;
+    width:100%;
     margin:0;
-    padding:0;
+    padding-left:0.25rem;
+    padding-top:1rem;
     overflow-x: hidden;
-    padding-top:1.5rem;
     font-weight: 500;
 }
 
+.spacer{
+    width:3vw;
+}
 
 a,a:visited,hr{
-    color:var(--theme-accent2);
+    color:var(--theme-accent);
 }
 
 
@@ -44,36 +56,49 @@ audio{
     width:80%;
 }
 #profile{
-    padding:1.5rem;
     margin-bottom:1rem;
-    min-width: 20vw;
-    max-width:90vw;
+    width: fit-content;
+    max-width: 80rem;
+    flex-shrink: none;
     
 }
-
-#posts{
-    padding:1.5rem;
-    margin-bottom:1rem;
-    min-width: 20vw;
-
-}
-#posts{
-width:40vw;
-}
-.post{
-    padding:1rem;
-}
-
-#post>img
-#profile{
+#profile-details{
     display:flex;
     flex-direction: column;
+    align-items: center;
 }
+#profile-links{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+}
+#profile-links>a{
+    margin:0.5rem;
+}
+
+#posts{
+    margin-bottom:1rem;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 40rem;
+
+}
+.post{
+    width:100%;
+    word-wrap: break-word;
+}
+
+
 #profilephoto{
     margin:1rem;
     max-width: 10rem;
-    
-    
+}
+section{
+    width: 100%;
 }
 #profile>nav,
 #profile>div{
@@ -94,27 +119,17 @@ nav{
     flex-direction: row;
     align-items: baseline;
     justify-content:space-evenly;
+    flex-wrap: wrap;
 }
 nav>a{
 }
 
-@media screen and (orientation: portrait){
-    body{
-        flex-direction: column;
-        align-items: center;
-
-    font-size:1rem;
-    }
-    #profile,#posts{
-        width:85%;
-        padding:5%;
-    }
-}
 
 article{
     display:flex;
     flex-direction: column;
     align-items: center;
+    width:100%;
 }
 
 article p,
@@ -137,4 +152,41 @@ blockquote {
 
 .gallery{
     max-width:40vw;
-}
\ No newline at end of file
+}
+
+audio{
+    padding:1rem;
+}
+
+.post-tags{
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    width:80%;
+    font-weight: bolder;
+    font-size:1.25rem
+}
+@media screen and (orientation: portrait){
+    body{
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: none;
+        padding:0;
+        font-size:1rem;
+    }
+    #profile,#posts{
+        width:90%;
+        max-width: 90vw;
+        
+    }
+
+    #profile a>img{
+        display:flex;
+        flex-direction: column;
+        align-items: center;
+        width:100%;
+    }
+}