From 356b3fe7c489ed429060a89f52ae5497fdcffcd7 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Tue, 7 Mar 2023 02:00:03 -0500 Subject: [PATCH] major overhaul, should much more refined. --- layouts/404.html | 288 +--------------------- layouts/_default/baseof.html | 11 - layouts/_default/list.html | 293 +--------------------- layouts/_default/single.html | 286 +-------------------- layouts/index.html | 287 +--------------------- layouts/partials/footer.html | 6 +- layouts/partials/header.html | 18 +- layouts/partials/nav.html | 8 +- layouts/partials/spritesheet.html | 396 ++++++++++++++++++++++++++++++ static/css/theme.css | 250 ++++++++++++------- static/js/multimedia.js | 0 11 files changed, 579 insertions(+), 1264 deletions(-) delete mode 100644 layouts/_default/baseof.html create mode 100644 layouts/partials/spritesheet.html create mode 100644 static/js/multimedia.js diff --git a/layouts/404.html b/layouts/404.html index a021e01..cc5dfb0 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,292 +1,8 @@ {{partial "head" .}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {{partial "spritesheet" .}} {{partial "header" .}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html deleted file mode 100644 index 5f8e2ec..0000000 --- a/layouts/_default/baseof.html +++ /dev/null @@ -1,11 +0,0 @@ - - - {{- partial "head.html" . -}} - - {{- partial "header.html" . -}} -
- {{- block "main" . }}{{- end }} -
- {{- partial "footer.html" . -}} - - diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 90b2b83..229b2b2 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -2,304 +2,19 @@ {{partial "head" .}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {{partial "spritesheet" .}} {{partial "header" .}}
{{ if .Content}}
{{.Content}}
{{end}} -
-
+
{{range .Pages}} {{partial "post" .}} {{end}} +
-
-
+ {{partial "footer" .}} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e9ff294..eaa0df2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,291 +2,7 @@ {{partial "head" .}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {{partial "spritesheet" .}} {{partial "header" .}}
{{ if .Content}} diff --git a/layouts/index.html b/layouts/index.html index 0d7c1df..00181bd 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,298 +2,13 @@ {{partial "head" .}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {{partial "spritesheet" .}} {{partial "header" .}}
{{ if .Content}}
{{.Content}}
{{end}}
-
{{partial "footer" .}} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a9cfa16..d810759 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,7 @@ \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9a3a75d..3fcb296 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,23 +1,7 @@
-

{{.Site.Title}}

+

{{.Site.Title}}

 {{partial "nav" .}} - -
- Subscribe via RSS - {{ if .Site.Params.rss}} - - - - - - {{else}} - - - - - - {{end}}
\ No newline at end of file diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index d995ce8..fb37f33 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,9 +1,11 @@ + +

RSS

+ diff --git a/layouts/partials/spritesheet.html b/layouts/partials/spritesheet.html new file mode 100644 index 0000000..9badba3 --- /dev/null +++ b/layouts/partials/spritesheet.html @@ -0,0 +1,396 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Prev + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + B + + + + + + + + + + + + + + + + + + + + + + + + + @ + + + + + + + + Next + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index 793f0d6..c0fe9ba 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -7,11 +7,92 @@ body { margin: 0; width: 100vw; display: flex; + align-items: flex-start; + flex-direction: row; + justify-content: space-evenly; + font-size: 18px; +} + +@media screen and (prefers-color-scheme:dark) { + body { + --theme-color-primary: rgb(0, 0, 0); + --theme-color-secondary: white; + --theme-accent: #1291e5; + + } +} + +header, +footer { + font-size:16px; + min-width: min-content; + width:20vw; + margin: 0; + display: flex; flex-direction: column; align-items: center; - justify-content: space-around; - flex-wrap: wrap; - font-size: 18px; + justify-content: flex-start; + flex-wrap: nowrap; + padding:5px; +} + +main { + display:flex; + flex-direction: column; + align-items: center; + width: 60vw; + max-width: 60vw; +} + +nav { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +nav>* { + margin: 1rem; + text-align: center; + +} +nav a { + text-decoration: none; +} + + +@media screen and (orientation:portrait) { + body { + font-size:20px; + flex-direction: column; + } + + header, + footer { + width: 100vw; + max-width: unset; + min-height:unset; + margin: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + padding:5px; + } + + nav{ + flex-direction: row; + justify-content: center; + width:100%; + flex-wrap: wrap; + } + main { + max-width: unset; + width:100%; + align-items: center; + } + } svg { @@ -25,27 +106,13 @@ a:hover { color: var(--theme-accent); } -hr { - width: 100%; - color: var(--theme-accent); - margin-top:25px; - margin-bottom:25px; -} - -@media screen and (prefers-color-scheme:dark) { - body { - --theme-color-primary: rgb(0, 0, 0); - --theme-color-secondary: white; - --theme-accent: #1291e5; - - } -} iframe { - width:100%; - min-height:25rem; - height:25vw; + width: 100%; + min-height: 25rem; + height: 25vw; } + img, video, iframe, @@ -53,57 +120,56 @@ audio { max-width: 90vw; max-height: 100%; } + .gif { - max-height:50vh; + max-height: 50vh; } + .gallery { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; - overflow:hidden; - max-width:95%; + overflow: hidden; + width:100%; + max-width: 100%; } -.gallery >*{ - max-width:25vw; - max-height:20vw; +.gallery>* { + max-width: 25vw; + max-height: 20vw; } - -.image-container a{ - height:100%; +.image-container{ + overflow:hidden; } -.image-container img{ - max-height:100%; +.image-container a { + height: 100%; } -.gallery > img{ - max-width:600px; - max-height:400px; +.image-container img { + max-height: 100%; } +.gallery>img { + max-width: 600px; + max-height: 400px; +} -header, -footer { - width: 100vw; - margin: 0; - display: flex; + + +.tag-list{ + display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; - justify-content: space-around; + justify-content: space-evenly; } - -nav { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; +.tag-link{ + margin:3px; } - -nav>* { - margin: 1rem; +.tag-link:hover{ + color:var(--theme-color-secondary) } .icon { @@ -116,21 +182,20 @@ div { align-items: center; justify-content: center; flex-direction: row; - flex-wrap: wrap; + text-align:center; } article { display: flex; flex-direction: column; align-items: center; - width: 100%; - padding-left:10px; - padding-right:10px; - max-width: 60rem; - font-size:24px; + width: 60rem; + max-width: 100%; + font-size: 20px; } + article img { - max-width:90%; + max-width: 90%; } article p, @@ -143,12 +208,14 @@ article h2 { width: 100%; text-align: left; } -article .highlight{ - width:100%; + +article .highlight { + width: 100%; align-items: flex-start; } -article .highlight pre{ - width:100%; + +article .highlight pre { + width: 100%; text-align: left; } @@ -166,35 +233,34 @@ article h1 {} .post { flex-direction: row; flex-wrap: wrap; - display:flex; + display: flex; align-items: center; - margin:1rem; - background-color:#151515; - border:2px solid #252525; - padding:25px; - border-radius:25px; - max-width: 90vw; + margin: 1rem; + padding: 25px; + border-radius: 25px; + font-size:14px; } -.post>*{ - margin:15px; +.post>* { + margin: 15px; } -.post h2{ + +.post h2 { text-align: center; } -.post p{ + +.post p,.post h2 { max-width: 460px; } -.post-image{ - width:25rem; - height:15rem; + +.post-image { + height: 15rem; background-position: top center; background-size: contain; background-repeat: no-repeat; } -@media screen and (orientation:portrait){ - .post-image{} -} + +@media screen and (orientation:portrait) {} .post-tags a { margin: 5px; @@ -210,16 +276,28 @@ article h1 {} background-color: transparent !important; } -article .gallery{ - width: 80vw; - max-width: 90vw; + +h3 { + margin: 0; } -h3{ - margin:0; +article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after { + content: "↗️"; + font-size: 20px; + margin: 5px; + text-decoration: none; } -article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {content:"↗️";font-size:20px;margin:5px;text-decoration: none;} -.image-container a::after, .liberapay-container a::after{ - content: "" !important;margin:0 !important;font-size:0; + +.image-container a::after, a::after { + content: "" !important; + margin: 0 !important; + font-size: 0; } +hr{ + color:var(--theme-accent); + width:100%; + margin:0; + margin-top:1rem; + margin-bottom:1rem; +} \ No newline at end of file diff --git a/static/js/multimedia.js b/static/js/multimedia.js new file mode 100644 index 0000000..e69de29