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