From 49749b39789ae365419aae32677c3cbd00ab49bc Mon Sep 17 00:00:00 2001 From: Jordan Herzstein Date: Thu, 7 Mar 2024 00:23:51 -0500 Subject: [PATCH] Changed style.css --- public/css/style.css | 137 ++++++++++++++++++++++--------- themes/jugo/static/css/style.css | 137 ++++++++++++++++++++++--------- 2 files changed, 196 insertions(+), 78 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index d33656b..3214ceb 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,14 +1,76 @@ -html{ - background-color: #21252B; - color:#dcdfe4; - margin: auto; +:root { + --dark-color-bg: #21252B; + --dark-color-fg: #282c34; + --dark-color-txt: #dcdfe4; + --dark-color-h1: #61afef; + --dark-color-h2:#56b6c2; + --dark-color-a: #e06c75; + --dark-color-a-hover: #c678dd; + + --light-color-bg: #f9f5d7; + --light-color-fg:#f2e5bc; + --light-color-txt: black; + --light-color-h1: #9e5010; + --light-color-h1: #e04c75; + --light-color-h2: #a9493d; + --light-color-h2: #e06c75; + --light-color-a: #1f938a; + --light-color-a-hover: #398722; + + --color-bg: var(--dark-color-bg); + --color-fg: var(--dark-color-fg); + --color-txt: var(--dark-color-txt); + --color-h1: var(--dark-color-h1); + --color-h2:var(--dark-color-h2); + --color-a: var(--dark-color-a); + --color-a-hover: var(--dark-color-a-hover); + + --monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace; } +.dark { + --color-bg: var(--dark-color-bg); + --color-fg: var(--dark-color-fg); + --color-txt: var(--dark-color-txt); + --color-h1: var(--dark-color-h1); + --color-h2:var(--dark-color-h2); + --color-a: var(--dark-color-a); + --color-a-hover: var(--dark-color-a-hover); -body { - font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +.light { + --color-bg: var(--light-color-bg); + --color-fg: var(--light-color-fg); + --color-txt: var(--light-color-txt); + --color-h1: var(--light-color-h1); + --color-h2:var(--light-color-h2); + --color-a: var(--light-color-a); + --color-a-hover: var(--light-color-a-hover); +} +.theme-switch:checked ~ :root { + height: 100px; + width: 100px; + --color-txt: var(--light-color-txt); + --color-bg: var(--light-color-bg); + --color-fg: var(--light-color-fg); + --color-h1: var(--light-color-h1); + --color-h2:var(--light-color-h2); + --color-a: var(--light-color-a); +} - --monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace; +.theme-switch { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + + +body { + font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + background:var(--color-bg); + color:var(--color-txt); } @@ -18,7 +80,7 @@ body { margin-left: auto; margin-right: auto; border: 1px solid ; - background-color: #282c34; + background:var(--color-fg); } .menu-nav ul { @@ -45,7 +107,7 @@ body { margin-bottom: 2em; padding: 15px; border: 1px solid ; - background-color: #282c34; + background:var(--color-fg); } /* #282c34, #e06c75, #98c379, #e5c07b, #61afef, #c678dd, #56b6c2, #dcdfe4, @@ -65,15 +127,15 @@ body { h1 { line-height: 1.2; - color: #61afef; + color: var(--color-h1); font-size: 2.3em; text-align:center; } h2 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); a { - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .075em; font:var(--monospace); @@ -85,22 +147,24 @@ h2 { } } -/* .content__body > h3:img::nth-of-type(1) { */ -.inline-header { - float: left; - margin-right: 0.25em; - width: 30px; -} h3 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); } h4 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); } +/* .content__body > h3:img::nth-of-type(1) { */ +.inline-header { + float: left; + margin-right: 0.25em; + width: 30px; +} + + .content__body > p:first-of-type::first-letter { font-size: 3.0em; @@ -109,23 +173,17 @@ h4 { float: left; } -.header { - border: 0.5px solid; - max-width: 340px; - margin: auto; - align: center; -} .current-page { text-decoration: underline; } -pre code { - background-color: #21252B; +pre { + background-color: var(--color-bg); border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); word-wrap: break-word; padding: 1em; white-space: pre-wrap; @@ -135,7 +193,7 @@ pre code { code { - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .075em; font:var(--monospace); @@ -144,13 +202,13 @@ code { a:hover{ transition: color .15s ease-in; - color:#c678dd !important; + color:var(--color-a-hover) !important; text-decoration: underline; text-underline-position: under; } -a{ - color:#e06c75; +a { + color:var(--color-a); text-decoration: none; } @@ -171,9 +229,9 @@ br { .post__summary { border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); padding: .575em; - overflow: scroll; + overflow: hidden; max-width: 730px; width: auto; box-sizing:border-box; @@ -183,7 +241,8 @@ br { font:var(--monospace); max-width: 650px; width: auto; - box-sizing:border-box; + box-sizing: border-box; + overflow-x: auto; } .tags-list { @@ -206,10 +265,10 @@ br { .ox-hugo-toc{ font-size: 0.9em; - background-color: #21252B; + background-color: var(--color-bg); border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); width: 300px; height: auto; box-sizing: border-box; @@ -220,7 +279,7 @@ br { } .tags{ - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .15em; margin-left: .3em; diff --git a/themes/jugo/static/css/style.css b/themes/jugo/static/css/style.css index d33656b..3214ceb 100644 --- a/themes/jugo/static/css/style.css +++ b/themes/jugo/static/css/style.css @@ -1,14 +1,76 @@ -html{ - background-color: #21252B; - color:#dcdfe4; - margin: auto; +:root { + --dark-color-bg: #21252B; + --dark-color-fg: #282c34; + --dark-color-txt: #dcdfe4; + --dark-color-h1: #61afef; + --dark-color-h2:#56b6c2; + --dark-color-a: #e06c75; + --dark-color-a-hover: #c678dd; + + --light-color-bg: #f9f5d7; + --light-color-fg:#f2e5bc; + --light-color-txt: black; + --light-color-h1: #9e5010; + --light-color-h1: #e04c75; + --light-color-h2: #a9493d; + --light-color-h2: #e06c75; + --light-color-a: #1f938a; + --light-color-a-hover: #398722; + + --color-bg: var(--dark-color-bg); + --color-fg: var(--dark-color-fg); + --color-txt: var(--dark-color-txt); + --color-h1: var(--dark-color-h1); + --color-h2:var(--dark-color-h2); + --color-a: var(--dark-color-a); + --color-a-hover: var(--dark-color-a-hover); + + --monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace; } +.dark { + --color-bg: var(--dark-color-bg); + --color-fg: var(--dark-color-fg); + --color-txt: var(--dark-color-txt); + --color-h1: var(--dark-color-h1); + --color-h2:var(--dark-color-h2); + --color-a: var(--dark-color-a); + --color-a-hover: var(--dark-color-a-hover); -body { - font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +.light { + --color-bg: var(--light-color-bg); + --color-fg: var(--light-color-fg); + --color-txt: var(--light-color-txt); + --color-h1: var(--light-color-h1); + --color-h2:var(--light-color-h2); + --color-a: var(--light-color-a); + --color-a-hover: var(--light-color-a-hover); +} +.theme-switch:checked ~ :root { + height: 100px; + width: 100px; + --color-txt: var(--light-color-txt); + --color-bg: var(--light-color-bg); + --color-fg: var(--light-color-fg); + --color-h1: var(--light-color-h1); + --color-h2:var(--light-color-h2); + --color-a: var(--light-color-a); +} - --monospace: 16px/1.5 "Lucida Console", Monaco, "Consolas", monospace; +.theme-switch { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} + + +body { + font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + background:var(--color-bg); + color:var(--color-txt); } @@ -18,7 +80,7 @@ body { margin-left: auto; margin-right: auto; border: 1px solid ; - background-color: #282c34; + background:var(--color-fg); } .menu-nav ul { @@ -45,7 +107,7 @@ body { margin-bottom: 2em; padding: 15px; border: 1px solid ; - background-color: #282c34; + background:var(--color-fg); } /* #282c34, #e06c75, #98c379, #e5c07b, #61afef, #c678dd, #56b6c2, #dcdfe4, @@ -65,15 +127,15 @@ body { h1 { line-height: 1.2; - color: #61afef; + color: var(--color-h1); font-size: 2.3em; text-align:center; } h2 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); a { - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .075em; font:var(--monospace); @@ -85,22 +147,24 @@ h2 { } } -/* .content__body > h3:img::nth-of-type(1) { */ -.inline-header { - float: left; - margin-right: 0.25em; - width: 30px; -} h3 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); } h4 { line-height: 1.2; - color: #56b6c2; + color:var(--color-h2); } +/* .content__body > h3:img::nth-of-type(1) { */ +.inline-header { + float: left; + margin-right: 0.25em; + width: 30px; +} + + .content__body > p:first-of-type::first-letter { font-size: 3.0em; @@ -109,23 +173,17 @@ h4 { float: left; } -.header { - border: 0.5px solid; - max-width: 340px; - margin: auto; - align: center; -} .current-page { text-decoration: underline; } -pre code { - background-color: #21252B; +pre { + background-color: var(--color-bg); border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); word-wrap: break-word; padding: 1em; white-space: pre-wrap; @@ -135,7 +193,7 @@ pre code { code { - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .075em; font:var(--monospace); @@ -144,13 +202,13 @@ code { a:hover{ transition: color .15s ease-in; - color:#c678dd !important; + color:var(--color-a-hover) !important; text-decoration: underline; text-underline-position: under; } -a{ - color:#e06c75; +a { + color:var(--color-a); text-decoration: none; } @@ -171,9 +229,9 @@ br { .post__summary { border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); padding: .575em; - overflow: scroll; + overflow: hidden; max-width: 730px; width: auto; box-sizing:border-box; @@ -183,7 +241,8 @@ br { font:var(--monospace); max-width: 650px; width: auto; - box-sizing:border-box; + box-sizing: border-box; + overflow-x: auto; } .tags-list { @@ -206,10 +265,10 @@ br { .ox-hugo-toc{ font-size: 0.9em; - background-color: #21252B; + background-color: var(--color-bg); border: 1px solid ; border-radius: .35em; - box-shadow: 4px 4px #dcdfe4; + box-shadow: 4px 4px var(--color-txt); width: 300px; height: auto; box-sizing: border-box; @@ -220,7 +279,7 @@ br { } .tags{ - background-color: #21252B; + background-color: var(--color-bg); border-radius: .35em; padding: .15em; margin-left: .3em;