From c69769b83849ccde1094ea958b3bcc4e3a462cb7 Mon Sep 17 00:00:00 2001 From: Nickiel12 Date: Sat, 18 Nov 2023 21:06:25 -0800 Subject: [PATCH] switched to variable based colors --- themes/NSP/layouts/partials/head.html | 4 +- themes/NSP/static/catppuccin.css | 68 +++++++++++++++++++++++++++ themes/NSP/static/dark_mode.css | 68 --------------------------- themes/NSP/static/light_mode.css | 60 ----------------------- themes/NSP/static/sunset_mode.css | 66 -------------------------- themes/NSP/static/variables.css | 38 +++++++++++++++ 6 files changed, 107 insertions(+), 197 deletions(-) delete mode 100644 themes/NSP/static/dark_mode.css delete mode 100644 themes/NSP/static/light_mode.css delete mode 100644 themes/NSP/static/sunset_mode.css create mode 100644 themes/NSP/static/variables.css diff --git a/themes/NSP/layouts/partials/head.html b/themes/NSP/layouts/partials/head.html index fcce1e0..83f4d09 100644 --- a/themes/NSP/layouts/partials/head.html +++ b/themes/NSP/layouts/partials/head.html @@ -4,8 +4,6 @@ - - - + {{ partialCached "head/css.html" . }} {{ partialCached "head/js.html" . }} diff --git a/themes/NSP/static/catppuccin.css b/themes/NSP/static/catppuccin.css index 6a7b4c0..d198dd2 100644 --- a/themes/NSP/static/catppuccin.css +++ b/themes/NSP/static/catppuccin.css @@ -313,3 +313,71 @@ --ctp-mocha-crust-rgb: rgb(17, 17, 27); --ctp-mocha-crust-hsl: hsl(240, 23%, 9%); } + + +code { + background-color: transparent; +} +code > span { + background-color: transparent; +} +code > span > span { + background-color: transparent; +} +code > span > span > span { + background-color: transparent; +} +pre.darkmode { + background: var(--bg); + border: 1px solid #ddd; + color: var(--code-default); + page-break-inside: avoid; + font-family: monospace; + font-size: 15px; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1em 1.5em; + display: block; + word-wrap: break-word; +} + + +main { + color: var(--text-color); + background-color: var(--bg); +} + +a { + color: var(--a); +} + +p { + color: var(--text-color); +} +h1, h2, h3, h4, h5, h6 { + color: var(--header-color); +} + +.nav-list { + background-color: var(--navbar-bg); +} +.nav-list a { + color: var(--navbar-a); +} +.nav-list a:hover { + color: var(--navbar-a-hover); +} +.nav-dropdown { + color: var(--navbar-a); +} +.nav-dropdown:hover { + color: var(--navbar-a-hover); +} +.nav-dropdown-content { + background-color: var(--navbar-bg); +} +.nav-dropdown-content a { + color: var(--navbar-a); +} diff --git a/themes/NSP/static/dark_mode.css b/themes/NSP/static/dark_mode.css deleted file mode 100644 index f20a45b..0000000 --- a/themes/NSP/static/dark_mode.css +++ /dev/null @@ -1,68 +0,0 @@ - - p.darkmode { - color: var(--ctp-mocha-text); -} - -main.darkmode { - background-color: var(--ctp-mocha-base); - color: var(--ctp-mocha-text); - } - -.darkmode { - background-color: var(--ctp-mocha-base); -} - -.darkmode a { - color: var(--ctp-mocha-peach); -} - -code.darkmode { - background-color: transparent; -} -code.darkmode > span { - background-color: transparent; -} -code.darkmode > span > span { - background-color: transparent; -} -code.darkmode > span > span > span { - background-color: transparent; -} -pre.darkmode { - background: var(--ctp-mocha-crust); - border: 1px solid #ddd; - color: var(--ctp-mocha-sky); - page-break-inside: avoid; - font-family: monospace; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; - display: block; - word-wrap: break-word; -} - -h1.darkmode, h2.darkmode, h3.darkmode, h4.darkmode, h5.darkmode, h6.darkmode { - color: var(--ctp-mocha-sapphire); -} - -.nav-list.darkmode a { - color: var(--ctp-mocha-crust); -} -.nav-list.darkmode a:hover { - color: var(--ctp-mocha-text); -} -.nav-list.darkmode { - background-color: var(--ctp-mocha-mauve); -} -.nav-dropdown.darkmode { - color: var(--ctp-mocha-crust); -} -.nav-dropdown.darkmode:hover { - color: var(--ctp-mocha-text); -} -.nav-dropdown-content.darkmode { - background-color: var(--ctp-mocha-mauve); -} diff --git a/themes/NSP/static/light_mode.css b/themes/NSP/static/light_mode.css deleted file mode 100644 index 228e45e..0000000 --- a/themes/NSP/static/light_mode.css +++ /dev/null @@ -1,60 +0,0 @@ - - -.lightmode p { - color: var(--ctp-latte-text); -} - -.lightmode { - background-color: var(--ctp-latte-base); -} - -.lightmode a { - color: var(--ctp-latte-peach); -} - -code.lightmode { - background-color: transparent; -} -code.lightmode > span { - background-color: transparent; -} -code.lightmode > span > span { - background-color: transparent; -} -code.lightmode > span > span > span { - background-color: transparent; -} -pre.lightmode { - background: var(--ctp-latte-crust); - border: 1px solid #ddd; - color: var(--ctp-latte-sky); - page-break-inside: avoid; - font-family: monospace; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; - display: block; - word-wrap: break-word; -} - -h1.lightmode, h2.lightmode, h3.lightmode, h4.lightmode, h5.lightmode, h6.lightmode { - color: var(--ctp-latte-sapphire); -} -.nav-list.lightmode a { - color: var(--ctp-latte-crust); -} -.nav-list.lightmode { - background-color: var(--ctp-latte-mauve); -} -.nav-dropdown.lightmode { - color: var(--ctp-latte-crust); -} -.nav-dropdown-content.lightmode { - background-color: var(--ctp-latte-mauve); -} -.nav-dropdown-content.lightmode a { - color: var(--ctp-latte-crust); -} diff --git a/themes/NSP/static/sunset_mode.css b/themes/NSP/static/sunset_mode.css deleted file mode 100644 index 037ee37..0000000 --- a/themes/NSP/static/sunset_mode.css +++ /dev/null @@ -1,66 +0,0 @@ - -p.sunsetmode { - color: var(--ctp-frappe-text); -} - -main.sunsetmode { - color: var(--ctp-frappe-text); -} - -.sunsetmode { - background-color: var(--ctp-frappe-base); -} - -.sunsetmode a { - color: var(--ctp-frappe-peach); -} - -code.sunsetmode { - background-color: transparent; -} -code.sunsetmode > span { - background-color: transparent; -} -code.sunsetmode > span > span { - background-color: transparent; -} -code.sunsetmode > span > span > span { - background-color: transparent; -} -pre.sunsetmode { - background: var(--ctp-frappe-crust); - border: 1px solid #ddd; - color: var(--ctp-frappe-sky); - page-break-inside: avoid; - font-family: monospace; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; - display: block; - word-wrap: break-word; -} - -h1.sunsetmode, h2.sunsetmode, h3.sunsetmode, h4.sunsetmode, h5.sunsetmode, h6.sunsetmode { - color: var(--ctp-frappe-sapphire); -} -.nav-list.sunsetmode a { - color: var(--ctp-frappe-crust); -} -.nav-list.sunsetmode a:hover { - color: var(--ctp-frappe-text); -} -.nav-list.sunsetmode { - background-color: var(--ctp-frappe-mauve); -} -.nav-dropdown.sunsetmode { - color: var(--ctp-frappe-crust); -} -.nav-dropdown.sunsetmode:hover { - color: var(--ctp-frappe-text); -} -.nav-dropdown-content.sunsetmode { - background-color: var(--ctp-frappe-mauve); -} diff --git a/themes/NSP/static/variables.css b/themes/NSP/static/variables.css new file mode 100644 index 0000000..52a022e --- /dev/null +++ b/themes/NSP/static/variables.css @@ -0,0 +1,38 @@ +body.darkmode { + --bg: var(--ctp-mocha-base); + --a: var(--ctp-mocha-peach); + --text-color: var(--ctp-mocha-text); + --code-default: var(--ctp-mocha-sky); + --header-color: var(--ctp-mocha-sapphire); + --navbar-bg: var(--ctp-mocha-mauve); + --navbar-a: var(--ctp-mocha-crust); + --navbar-a-hover: var(--ctp-mocha-text); + + background-color: var(--bg); +} + +body.lightmode { + --bg: var(--ctp-latte-base); + --a: var(--ctp-latte-peach); + --text-color: var(--ctp-latte-text); + --code-default: var(--ctp-latte-sky); + --header-color: var(--ctp-latte-sapphire); + --navbar-bg: var(--ctp-latte-mauve); + --navbar-a: var(--ctp-latte-crust); + --navbar-a-hover: var(--ctp-latte-crust); + + background-color: var(--bg); +} + +body.sunsetmode { + --bg: var(--ctp-frappe-base); + --a: var(--ctp-frappe-peach); + --text-color: var(--ctp-frappe-text); + --code-default: var(--ctp-frappe-sky); + --header-color: var(--ctp-frappe-sapphire); + --navbar-bg: var(--ctp-frappe-mauve); + --navbar-a: var(--ctp-frappe-crust); + --navbar-a-hover: var(--ctp-frappe-text); + + background-color: var(--bg); +}