From 59ce56460c130f4ef1bc83d2dc333be322ad7bae Mon Sep 17 00:00:00 2001 From: Gabriel Date: Sat, 25 Nov 2023 17:16:22 -0500 Subject: [PATCH] update theme --- layouts/index.html | 25 +++----- static/css/theme.css | 148 +++++++++++++++++++++++++------------------ 2 files changed, 95 insertions(+), 78 deletions(-) diff --git a/layouts/index.html b/layouts/index.html index 75420f8..c45fda6 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,20 +1,15 @@ - {{partial "head" .}} - - {{partial "spritesheet" .}} - {{partial "header" .}} -
- {{ if .Content}} -
{{.Content}}
- {{end}} +{{partial "head" .}} -
- {{range .Site.RegularPages | first 3}} - {{partial "post" .}} + + {{partial "spritesheet" .}} {{partial "header" .}} +
+ {{ if .Content}} +
{{.Content}}
{{end}} -
-
- {{partial "footer" .}} - + + {{partial "footer" .}} + + \ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index 22f966b..aaa1b69 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -18,34 +18,33 @@ body { --theme-color-primary: rgb(0, 0, 0); --theme-color-secondary: white; --theme-accent: #1291e5; - } } header, footer { - font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-size:16px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 16px; min-width: min-content; - width:20vw; + width: 20vw; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: nowrap; - padding:15px; + padding: 15px; text-align: center; } main { - display:flex; + display: flex; flex-direction: column; align-items: center; width: 60vw; max-width: 60vw; - padding-left:1rem; - padding-right:1rem; + padding-left: 1rem; + padding-right: 1rem; } nav { @@ -58,46 +57,43 @@ nav { nav>* { margin: 1rem; text-align: center; - } + nav a { text-decoration: none; } - @media screen and (orientation:portrait) { body { - font-size:20px; + font-size: 20px; flex-direction: column; } - header, footer { width: 100vw; max-width: unset; - min-height:unset; + min-height: unset; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; - padding:5px; + padding: 5px; } - - nav{ + nav { flex-direction: row; justify-content: center; - width:100%; + width: 100%; flex-wrap: wrap; } main { max-width: unset; - width:95vw; + width: 100vw; align-items: center; - margin:5px; + margin: 0px; + padding: 0; } - } svg { @@ -116,26 +112,25 @@ video, iframe, audio { width: max-content; - height:max-content; + height: max-content; max-width: 90%; max-height: 100%; } + article img, article video, article iframe, -article audio{ - margin:15px; +article audio { + margin: 15px; } - iframe { width: 100%; height: 60vh; } - -.gallery img{ - margin:1px; +.gallery img { + margin: 1px; } .gif { @@ -149,7 +144,7 @@ iframe { align-items: center; justify-content: center; overflow: hidden; - width:100%; + width: 100%; max-width: 100%; } @@ -157,9 +152,11 @@ iframe { max-width: 25vw; max-height: 20vw; } -.image-container{ - overflow:hidden; + +.image-container { + overflow: hidden; } + .image-container a { height: 100%; } @@ -168,25 +165,29 @@ iframe { max-height: 100%; } +.image-container .caption { + width: fit-content; +} + .gallery>img { max-width: 600px; max-height: 400px; } - - -.tag-list{ - display:flex; +.tag-list { + display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; 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 { @@ -199,7 +200,7 @@ div { align-items: center; justify-content: center; flex-direction: row; - text-align:center; + text-align: center; } article { @@ -209,7 +210,7 @@ article { width: 60rem; max-width: 100%; font-size: 20px; - font-family:Verdana, Geneva, Tahoma, sans-serif; + font-family: Verdana, Geneva, Tahoma, sans-serif; } article img { @@ -227,6 +228,10 @@ article h2 { text-align: left; } +article ul { + margin: 0; +} + article .highlight { width: 100%; align-items: flex-start; @@ -237,7 +242,11 @@ article .highlight pre { text-align: left; } -article h1 {} +@media screen and (orientation:portrait) { + article { + max-width: 90vw; + } +} .posts { display: flex; @@ -255,12 +264,11 @@ article h1 {} margin: 1rem; padding: 25px; border-radius: 25px; - font-size:18px; - width:360px; + font-size: 18px; + width: 360px; } -.post>* { -} +.post>* {} .post h2 { text-align: center; @@ -272,13 +280,15 @@ article h1 {} background-size: contain; background-repeat: no-repeat; } -.post-tags{ - max-width:80%; - display:flex; + +.post-tags { + max-width: 80%; + display: flex; flex-direction: row; flex-wrap: wrap; - font-size:12px; + font-size: 12px; } + .post-tags a { margin: 2px; } @@ -293,34 +303,46 @@ article h1 {} background-color: transparent !important; } - h3 { margin: 0; } -hr{ - color:var(--theme-accent); - width:100%; - margin:0; - margin-top:1rem; - margin-bottom:1rem; - max-width:95vw; +hr { + color: var(--theme-accent); + width: 100%; + margin: 0; + margin-top: 1rem; + margin-bottom: 1rem; + max-width: 80vw; } blockquote { border-left: 5px solid var(--theme-accent); padding-left: 15px; - width:80%; + width: 80%; } -code{ + +code { font-family: monospace; - color:var(--theme-accent); - white-space:break-spaces; + color: var(--theme-accent); + white-space: break-spaces; word-wrap: normal; } + article pre { - width:100%; + width: 100%; } -.footnotes{ + +.footnotes { 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); } \ No newline at end of file