major style changes

This commit is contained in:
Gabriel 2022-09-15 17:12:31 -04:00
parent c4f36998ec
commit dedcdb7dec
6 changed files with 142 additions and 71 deletions

View file

@ -2,12 +2,17 @@
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body> <body>
<div class="spacer"></div>
{{partial "profile" .}} {{partial "profile" .}}
<div class="spacer"></div>
<aside id="posts"> <aside id="posts">
{{range .Pages}} {{range .Pages}}
{{partial "post" .}} {{partial "post" .}}
<hr>
{{end}} {{end}}
</aside> </aside>
<div class="spacer"></div>
</body> </body>
</html> </html>

View file

@ -2,12 +2,14 @@
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body> <body>
<div class="spacer"></div>
{{partial "profile" .}} {{partial "profile" .}}
<div class="spacer"></div>
<aside id="posts"> <aside id="posts">
{{range first 10 .Site.RegularPages}} {{range first 4 .Site.RegularPages}}
{{partial "post" .}} {{partial "post" .}}
<hr>
{{end}} {{end}}
</aside> </aside>
<div class="spacer"></div>
</body> </body>
</html> </html>

View file

@ -3,14 +3,22 @@
{{if .Date }} {{if .Date }}
<p>{{.Date | time.Format "Jan 02 2006"}}</p> <p>{{.Date | time.Format "Jan 02 2006"}}</p>
{{end}} {{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}} {{else}}
{{if .Params.audio}}<audio controls><source src="{{.Params.audio}}"></audio> {{if .Params.audio}}<audio controls preload="none"><source src="{{.Params.audio}}"></audio>
{{else}} {{else}}
{{if .Params.image}}<img src="{{.Params.image}}"> {{if .Params.image}}<img loading="lazy" src="{{.Params.image}}">
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
<p>{{.Summary}}</p> <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> </article>

View file

@ -1,35 +1,39 @@
<main id="profile"> <main id="profile">
<div> <div>
<a href="/"> <a href="/">
<img id='profilephoto' src="{{.Site.Data.details.profilephoto}}"> <img id='profilephoto' loading="lazy" src="{{.Site.Data.details.profilephoto}}">
</a> </a>
<div> <div id="profile-details">
<h1><a href="/">{{.Site.Data.details.name}}</a></h1> <a href="/"><h1>{{.Site.Data.details.name}}</h1></a>
<p>{{.Site.Data.details.bio}}</p> <p>{{.Site.Data.details.bio}}</p>
{{if .Site.Data.details.contact}} {{ if .Site.Data.details.links }}
{{range .Site.Data.details.contact}} <div id="profile-links">
<a href="{{.value}}">{{.name}}</a> {{range .Site.Data.details.links}}
{{end}} <a href="{{.linkurl}}">{{.linkname}}</a><br>
{{end}} {{end}}
</div> </div>
{{end}}
</div>
</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" .}} {{partial "nav" .}}
<hr>
{{ if .Content}} {{ if .Content}}
<article> <article>
{{.Content}} {{.Content}}
</article> </article>
<hr>
{{end}} {{end}}
{{ if .GetTerms "tags" }}
<div class="post-tags">
<span>Tags:</span>
{{range .GetTerms "tags" }}
<a href="{{.Permalink}}">{{.LinkTitle}}</a>
{{end}}
</div>
{{end}}
<div> <div>
<p><a href="https://codeberg.org/gabe/Valor">Valor</a> made by <a href="https://gabe.rocks">Gabriel</a></p> <p><a href="https://codeberg.org/gabe/Valor">Valor</a> made by <a href="https://gabe.rocks">Gabriel</a></p>
</div> </div>

View file

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

View file

@ -1,9 +1,18 @@
body{ body{
--theme-primary-color:black; --theme-color-primary: white;
--theme-secondary-color: white; --theme-color-secondary: black;
--theme-accent:rgb(29, 148, 196); --theme-color-accent: #076cc5;
--theme-accent2:gold; }
--theme-accent3:black; @media screen and (prefers-color-scheme:dark){
body{
--theme-color-primary:black;
--theme-color-secondary:white;
}
}
body{
color:var(--theme-secondary-color); color:var(--theme-secondary-color);
background-color: var(--theme-primary-color); background-color: var(--theme-primary-color);
display:flex; display:flex;
@ -11,17 +20,20 @@ body{
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: flex-start; align-items: flex-start;
justify-content: space-evenly; justify-content: space-evenly;
width:100vw; width:100%;
margin:0; margin:0;
padding:0; padding-left:0.25rem;
padding-top:1rem;
overflow-x: hidden; overflow-x: hidden;
padding-top:1.5rem;
font-weight: 500; font-weight: 500;
} }
.spacer{
width:3vw;
}
a,a:visited,hr{ a,a:visited,hr{
color:var(--theme-accent2); color:var(--theme-accent);
} }
@ -44,36 +56,49 @@ audio{
width:80%; width:80%;
} }
#profile{ #profile{
padding:1.5rem;
margin-bottom:1rem; margin-bottom:1rem;
min-width: 20vw; width: fit-content;
max-width:90vw; max-width: 80rem;
flex-shrink: none;
} }
#profile-details{
#posts{
padding:1.5rem;
margin-bottom:1rem;
min-width: 20vw;
}
#posts{
width:40vw;
}
.post{
padding:1rem;
}
#post>img
#profile{
display:flex; display:flex;
flex-direction: column; 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{ #profilephoto{
margin:1rem; margin:1rem;
max-width: 10rem; max-width: 10rem;
}
section{
width: 100%;
} }
#profile>nav, #profile>nav,
#profile>div{ #profile>div{
@ -94,27 +119,17 @@ nav{
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
justify-content:space-evenly; justify-content:space-evenly;
flex-wrap: wrap;
} }
nav>a{ nav>a{
} }
@media screen and (orientation: portrait){
body{
flex-direction: column;
align-items: center;
font-size:1rem;
}
#profile,#posts{
width:85%;
padding:5%;
}
}
article{ article{
display:flex; display:flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width:100%;
} }
article p, article p,
@ -137,4 +152,41 @@ blockquote {
.gallery{ .gallery{
max-width:40vw; max-width:40vw;
} }
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%;
}
}