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>
{{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>

View file

@ -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>

View file

@ -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>

View file

@ -1,35 +1,39 @@
<main id="profile">
<div>
<a href="/">
<img id='profilephoto' src="{{.Site.Data.details.profilephoto}}">
<img id='profilephoto' loading="lazy" src="{{.Site.Data.details.profilephoto}}">
</a>
<div>
<h1><a href="/">{{.Site.Data.details.name}}</a></h1>
<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}}
</div>
</div>
{{ if .Site.Data.details.links }}
<div>
<div id="profile-links">
{{range .Site.Data.details.links}}
<a href="{{.linkurl}}">{{.linkname}}</a><br>
{{end}}
</div>
{{end}}
<hr>
</div>
</div>
{{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>

View file

@ -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"}}'

View file

@ -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,
@ -138,3 +153,40 @@ blockquote {
.gallery{
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%;
}
}