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%;
+ }
+}