gabriel/valor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update theme

Browse source
This commit is contained in:
Gabriel 2023-11-25 17:16:22 -05:00
parent 546ffecaf1
commit 59ce56460c
2 changed files with 95 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
layouts/index.html
View file

@ -1,20 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{partial "head" .}} {{partial "head" .}}
<body>
{{partial "spritesheet" .}}
{{partial "header" .}}
<main>
{{ if .Content}}
<article>{{.Content}}</article>
{{end}}
<div class="posts"> <body>
{{range .Site.RegularPages | first 3}} {{partial "spritesheet" .}} {{partial "header" .}}
{{partial "post" .}} <main>
{{ if .Content}}
<article>{{.Content}}</article>
{{end}} {{end}}
</div> </main>
</main> {{partial "footer" .}}
{{partial "footer" .}} </body>
</body>
</html> </html>

148
static/css/theme.css
View file

@ -18,34 +18,33 @@ body {
--theme-color-primary: rgb(0, 0, 0); --theme-color-primary: rgb(0, 0, 0);
--theme-color-secondary: white; --theme-color-secondary: white;
--theme-accent: #1291e5; --theme-accent: #1291e5;
} }
} }
header, header,
footer { footer {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:16px; font-size: 16px;
min-width: min-content; min-width: min-content;
width:20vw; width: 20vw;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
padding:15px; padding: 15px;
text-align: center; text-align: center;
} }
main { main {
display:flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 60vw; width: 60vw;
max-width: 60vw; max-width: 60vw;
padding-left:1rem; padding-left: 1rem;
padding-right:1rem; padding-right: 1rem;
} }
nav { nav {
@ -58,46 +57,43 @@ nav {
nav>* { nav>* {
margin: 1rem; margin: 1rem;
text-align: center; text-align: center;
} }
nav a { nav a {
text-decoration: none; text-decoration: none;
} }
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
body { body {
font-size:20px; font-size: 20px;
flex-direction: column; flex-direction: column;
} }
header, header,
footer { footer {
width: 100vw; width: 100vw;
max-width: unset; max-width: unset;
min-height:unset; min-height: unset;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
padding:5px; padding: 5px;
} }
nav {
nav{
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width:100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
} }
main { main {
max-width: unset; max-width: unset;
width:95vw; width: 100vw;
align-items: center; align-items: center;
margin:5px; margin: 0px;
padding: 0;
} }
} }
svg { svg {
@ -116,26 +112,25 @@ video,
iframe, iframe,
audio { audio {
width: max-content; width: max-content;
height:max-content; height: max-content;
max-width: 90%; max-width: 90%;
max-height: 100%; max-height: 100%;
} }
article img, article img,
article video, article video,
article iframe, article iframe,
article audio{ article audio {
margin:15px; margin: 15px;
} }
iframe { iframe {
width: 100%; width: 100%;
height: 60vh; height: 60vh;
} }
.gallery img {
.gallery img{ margin: 1px;
margin:1px;
} }
.gif { .gif {
@ -149,7 +144,7 @@ iframe {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
width:100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
@ -157,9 +152,11 @@ iframe {
max-width: 25vw; max-width: 25vw;
max-height: 20vw; max-height: 20vw;
} }
.image-container{
overflow:hidden; .image-container {
overflow: hidden;
} }
.image-container a { .image-container a {
height: 100%; height: 100%;
} }
@ -168,25 +165,29 @@ iframe {
max-height: 100%; max-height: 100%;
} }
.image-container .caption {
width: fit-content;
}
.gallery>img { .gallery>img {
max-width: 600px; max-width: 600px;
max-height: 400px; max-height: 400px;
} }
.tag-list {
display: flex;
.tag-list{
display:flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
.tag-link{
margin:3px; .tag-link {
margin: 3px;
} }
.tag-link:hover{
color:var(--theme-color-secondary) .tag-link:hover {
color: var(--theme-color-secondary)
} }
.icon { .icon {
@ -199,7 +200,7 @@ div {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
text-align:center; text-align: center;
} }
article { article {
@ -209,7 +210,7 @@ article {
width: 60rem; width: 60rem;
max-width: 100%; max-width: 100%;
font-size: 20px; font-size: 20px;
font-family:Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
} }
article img { article img {
@ -227,6 +228,10 @@ article h2 {
text-align: left; text-align: left;
} }
article ul {
margin: 0;
}
article .highlight { article .highlight {
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
@ -237,7 +242,11 @@ article .highlight pre {
text-align: left; text-align: left;
} }
article h1 {} @media screen and (orientation:portrait) {
article {
max-width: 90vw;
}
}
.posts { .posts {
display: flex; display: flex;
@ -255,12 +264,11 @@ article h1 {}
margin: 1rem; margin: 1rem;
padding: 25px; padding: 25px;
border-radius: 25px; border-radius: 25px;
font-size:18px; font-size: 18px;
width:360px; width: 360px;
} }
.post>* { .post>* {}
}
.post h2 { .post h2 {
text-align: center; text-align: center;
@ -272,13 +280,15 @@ article h1 {}
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.post-tags{
max-width:80%; .post-tags {
display:flex; max-width: 80%;
display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
font-size:12px; font-size: 12px;
} }
.post-tags a { .post-tags a {
margin: 2px; margin: 2px;
} }
@ -293,34 +303,46 @@ article h1 {}
background-color: transparent !important; background-color: transparent !important;
} }
h3 { h3 {
margin: 0; margin: 0;
} }
hr{ hr {
color:var(--theme-accent); color: var(--theme-accent);
width:100%; width: 100%;
margin:0; margin: 0;
margin-top:1rem; margin-top: 1rem;
margin-bottom:1rem; margin-bottom: 1rem;
max-width:95vw; max-width: 80vw;
} }
blockquote { blockquote {
border-left: 5px solid var(--theme-accent); border-left: 5px solid var(--theme-accent);
padding-left: 15px; padding-left: 15px;
width:80%; width: 80%;
} }
code{
code {
font-family: monospace; font-family: monospace;
color:var(--theme-accent); color: var(--theme-accent);
white-space:break-spaces; white-space: break-spaces;
word-wrap: normal; word-wrap: normal;
} }
article pre { article pre {
width:100%; width: 100%;
} }
.footnotes{
.footnotes {
flex-direction: column; flex-direction: column;
} }
button {
padding: 10px;
border-radius: 10px;
font-weight: bolder;
font-size: unset;
background-color: var(--theme-accent);
color: var(--theme-color-secondary);
border-color: var(--theme-accent);
}