From 28d1ea21350640ff5da7412b7e096cc09f7cb567 Mon Sep 17 00:00:00 2001
From: David Luevano Alvarado <david@luevano.xyz>
Date: Sun, 6 Jun 2021 06:59:20 -0600
Subject: refactor css and theme switcher
---
static/css/dark.css | 138 -----------------------------------
static/css/light.css | 138 -----------------------------------
static/css/nordtheme.css | 183 -----------------------------------------------
static/css/style.css | 62 ++++++----------
static/css/theme.css | 179 +++++++++++++++++++++++++++++++++++++++++++++
5 files changed, 201 insertions(+), 499 deletions(-)
delete mode 100644 static/css/dark.css
delete mode 100644 static/css/light.css
delete mode 100644 static/css/nordtheme.css
create mode 100644 static/css/theme.css
(limited to 'static/css')
diff --git a/static/css/dark.css b/static/css/dark.css
deleted file mode 100644
index 31b025a..0000000
--- a/static/css/dark.css
+++ /dev/null
@@ -1,138 +0,0 @@
-@import './nordtheme.css';
-
-:root {
- --bg: var(--color3);
- --body-bg: var(--color0);
- --navitem-bg: var(--color1);
- --navitem-bg-hl: var(--color2);
-
- --fg: var(--color4);
- --fg-hl: var(--color5);
-
- --link: var(--color15);
- --link-hl: var(--color10);
- --navitem-link: var(--color8);
- --navitem-link-hl: var(--color7);
-
- --fg-acc1: var(--color11);
- --fg-acc2: var(--color12);
- --fg-acc3: var(--color13);
- --fg-acc4: var(--color14);
- --fg-acc5: var(--color15);
-
- --switch-bg: var(--color3);
- --switch-slider: var(--color0);
- --switch-toggled-bg: var(--color10);
- --switch-ol: var(--color4);
- --switch-moon: var(--color3);
- --switch-sun: var(--color13);
-
- --code-border: var(--fg);
-}
-
-/* general */
-a {
- color: var(--link);
-}
-
-a:hover {
- color: var(--link-hl);
-}
-
-h1 {
- color: var(--fg-acc1);
-}
-
-h2 {
- color: var(--fg-acc2);
-}
-
-h3 {
- color: var(--fg-acc3);
-}
-
-h4 {
- color: var(--fg-acc4);
-}
-
-h5 {
- color: var(--fg-acc5);
-}
-
-body {
- background: var(--bg);
- color: var(--fg);
-}
-
-main {
- background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-pre, code {
- border-radius: 5px;
- border: 1px solid var(--code-border);
-}
-
-/* nav bar */
-body > header {
- background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-nav li {
- background: var(--navitem-bg);
-}
-
-nav a {
- color: var(--navitem-link);
-}
-
-nav li:hover {
- background: var(--navitem-bg-hl);
- color: var(--fg-hl);
-}
-
-nav li:hover > a {
- color: var(--navitem-link-hl);
-}
-
-
-/* footer */
-body > footer {
- background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
-}
-
-
-/* image gallery (not really being used rn) */
-div.gallery {
- border: 1px solid var(--fg-hl);
-}
-
-div.gallery:hover {
- border: var(--fg-acc5);
-}
-
-
-/* switch */
-.slider {
- background-color: var(--switch-bg);
-}
-
-.theme-switch-container i.fa-moon {
- color: var(--switch-moon);
-}
-
-.theme-switch-container i.fa-sun {
- color: var(--switch-sun);
-}
-
-.slider:before {
- background-color: var(--switch-slider);
-}
-
-.switch input:checked + .slider {
- background-color: var(--switch-toggled-bg);
-}
-
-.switch input:focus + .slider {
- box-shadow: 0 0 0.1em var(--switch-ol);
-}
diff --git a/static/css/light.css b/static/css/light.css
deleted file mode 100644
index 0b1456c..0000000
--- a/static/css/light.css
+++ /dev/null
@@ -1,138 +0,0 @@
-@import './nordtheme.css';
-
-:root {
- --bg: var(--color5);
- --body-bg: var(--color4);
- --navitem-bg: var(--color9);
- --navitem-bg-hl: var(--color10);
-
- --fg: var(--color3);
- --fg-hl: var(--color0);
-
- --link: var(--color15);
- --link-hl: var(--color7);
- --navitem-link: var(--color8);
- --navitem-link-hl: var(--color7);
-
- --fg-acc1: var(--color11);
- --fg-acc2: var(--color12);
- --fg-acc3: var(--color13);
- --fg-acc4: var(--color14);
- --fg-acc5: var(--color15);
-
- --switch-bg: var(--color3);
- --switch-slider: var(--color4);
- --switch-toggled-bg: var(--color10);
- --switch-ol: var(--color0);
- --switch-moon: var(--color3);
- --switch-sun: var(--color13);
-
- --code-border: var(--fg);
-}
-
-/* general */
-a {
- color: var(--link);
-}
-
-a:hover {
- color: var(--link-hl);
-}
-
-h1 {
- color: var(--fg-acc1);
-}
-
-h2 {
- color: var(--fg-acc2);
-}
-
-h3 {
- color: var(--fg-acc3);
-}
-
-h4 {
- color: var(--fg-acc4);
-}
-
-h5 {
- color: var(--fg-acc5);
-}
-
-body {
- background: var(--bg);
- color: var(--fg);
-}
-
-pre, code {
- border-radius: 5px;
- border: 1px solid var(--code-border);
-}
-
-main {
- background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-/* nav bar */
-body > header {
- background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
-}
-
-nav li {
- background: var(--navitem-bg);
-}
-
-nav a {
- color: var(--navitem-link);
-}
-
-nav li:hover {
- background: var(--navitem-bg-hl);
- color: var(--fg-hl);
-}
-
-nav li:hover > a {
- color: var(--navitem-link-hl);
-}
-
-
-/* footer */
-body > footer {
- background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
-}
-
-
-/* image gallery (not really being used rn) */
-div.gallery {
- border: 1px solid var(--fg-hl);
-}
-
-div.gallery:hover {
- border: var(--fg-acc5);
-}
-
-
-/* switch */
-.slider {
- background-color: var(--switch-bg);
-}
-
-.theme-switch-container i.fa-moon {
- color: var(--switch-moon);
-}
-
-.theme-switch-container i.fa-sun {
- color: var(--switch-sun);
-}
-
-.slider:before {
- background-color: var(--switch-slider);
-}
-
-.switch input:checked + .slider {
- background-color: var(--switch-toggled-bg);
-}
-
-.switch input:focus + .slider {
- box-shadow: 0 0 0.1em var(--switch-ol);
-}
diff --git a/static/css/nordtheme.css b/static/css/nordtheme.css
deleted file mode 100644
index 00d524b..0000000
--- a/static/css/nordtheme.css
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
- * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
- * Copyright (c) 2016-present Sven Greb <development@svengreb.de>
- *
- * Project: Nord
- * Version: 0.2.0
- * Repository: https://github.com/arcticicestudio/color
- * License: MIT
- * References:
- * https://www.w3.org/TR/css-variables
- * https://www.w3.org/TR/selectors/#root-pseudo
- * https://drafts.csswg.org/css-variables
- * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- * http://warpspire.com/kss
- * https://github.com/kss-node/kss-node
- */
-
-/*
-An arctic, north-bluish color palette.
-Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
-highlighting and UI.
-It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
-ambiance.
-Styleguide Nord
- */
-
-:root {
- /*
- Base component color of "Polar Night".
- Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
- Markup:
- <div style="background-color:#2e3440; width=60; height=60"></div>
- Styleguide Nord - Polar Night
- */
---color0: #2e3440;
-
-/*
-Lighter shade color of the base component color.
-Used as a lighter background color for UI elements like status bars.
-Markup:
-<div style="background-color:#3b4252; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color1: #3b4252;
-
-/*
-Lighter shade color of the base component color.
-Used as line highlighting in the editor.
-In the UI scope it may be used as selection- and highlight color.
-Markup:
-<div style="background-color:#434c5e; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color2: #434c5e;
-
-/*
-Lighter shade color of the base component color.
-Used for comments, invisibles, indent- and wrap guide marker.
-In the UI scope used as pseudoclass color for disabled elements.
-Markup:
-<div style="background-color:#4c566a; width=60; height=60"></div>
-Styleguide Nord - Polar Night
- */
---color3: #4c566a;
-
-/*
-Base component color of "Snow Storm".
-Main color for text, variables, constants and attributes.
-In the UI scope used as semi-light background depending on the theme shading design.
-Markup:
-<div style="background-color:#d8dee9; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color4: #d8dee9;
-
-/*
-Lighter shade color of the base component color.
-Used as a lighter background color for UI elements like status bars.
-Used as semi-light background depending on the theme shading design.
-Markup:
-<div style="background-color:#e5e9f0; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color5: #e5e9f0;
-
-/*
-Lighter shade color of the base component color.
-Used for punctuations, carets and structuring characters like curly- and square brackets.
-In the UI scope used as background, selection- and highlight color depending on the theme shading design.
-Markup:
-<div style="background-color:#eceff4; width=60; height=60"></div>
-Styleguide Nord - Snow Storm
- */
---color6: #eceff4;
-
-/*
-Bluish core color.
-Used for classes, types and documentation tags.
-Markup:
-<div style="background-color:#8fbcbb; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color7: #8fbcbb;
-
-/*
-Bluish core accent color.
-Represents the accent color of the color palette.
-Main color for primary UI elements and methods/functions.
-Can be used for
-- Markup quotes
-- Markup link URLs
-Markup:
-<div style="background-color:#88c0d0; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color8: #88c0d0;
-
-/*
-Bluish core color.
-Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
-punctuations like (semi)colons,commas and braces.
-Markup:
-<div style="background-color:#81a1c1; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color9: #81a1c1;
-
-/*
-Bluish core color.
-Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
-Markup:
-<div style="background-color:#5e81ac; width=60; height=60"></div>
-Styleguide Nord - Frost
- */
---color10: #5e81ac;
-
-/*
-Colorful component color.
-Used for errors, git/diff deletion and linter marker.
-Markup:
-<div style="background-color:#bf616a; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color11: #bf616a;
-
-/*
-Colorful component color.
-Used for annotations.
-Markup:
-<div style="background-color:#d08770; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color12: #d08770;
-
-/*
-Colorful component color.
-Used for escape characters, regular expressions and markup entities.
-In the UI scope used for warnings and git/diff renamings.
-Markup:
-<div style="background-color:#ebcb8b; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color13: #ebcb8b;
-
-/*
-Colorful component color.
-Main color for strings and attribute values.
-In the UI scope used for git/diff additions and success visualizations.
-Markup:
-<div style="background-color:#a3be8c; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color14: #a3be8c;
-
-/*
-Colorful component color.
-Used for numbers.
-Markup:
-<div style="background-color:#b48ead; width=60; height=60"></div>
-Styleguide Nord - Aurora
- */
---color15: #b48ead;
-}
diff --git a/static/css/style.css b/static/css/style.css
index 9be32e0..ec95b6a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -24,6 +24,7 @@ body, html {
* {
box-sizing: border-box;
+ transition: all 0.25s ease-in-out;
}
body {
@@ -134,57 +135,38 @@ body > footer > span {
/* theme swticher */
-.switch {
+button.theme-switcher {
+ border: none;
+ font: inherit;
+ cursor: pointer;
position: relative;
- top: 0.2em;
- display: inline-block;
- width: 2em;
- height: 1em;
-}
-
-.switch input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-.switch input:checked + .slider:before {
- -webkit-transform: translateX(0.9em);
- -ms-transform: translateX(0.9em);
- transform: translateX(0.9em);
+ border-radius: 5px;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
}
-.slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- -webkit-transition: 0.4s;
- transition: 0.4s;
+button.theme-switcher > .fa-sun {
+ transform: translate(-0.5em, -1em);
}
-.slider:before {
- position:absolute;
- content: "";
- height: 0.8em;
- width: 0.8em;
- left: 0.1em;
- bottom: 0.1em;
- -webkit-transition: 0.4s;
- transition: 0.4s;
+.theme-light button.theme-switcher > .fa-sun {
+ transform: translateX(-0.5em);
+ transition: all 0.25s ease-in-out;
}
-.slider.round {
- border-radius: 1em;
+button.theme-switcher > .fa-moon {
+ transform: translate(0.5em, -1em);
}
-.slider.round:before {
- border-radius: 1em;
+.theme-dark button.theme-switcher > .fa-moon {
+ transform: translateX(0.5em);
+ transition: all 0.25s ease-in-out;
}
-
/* code blocks */
code.crypto {
font-size: smaller;
diff --git a/static/css/theme.css b/static/css/theme.css
new file mode 100644
index 0000000..6fc0501
--- /dev/null
+++ b/static/css/theme.css
@@ -0,0 +1,179 @@
+/* nord theme */
+:root {
+ --color0: #2e3440;
+ --color1: #3b4252;
+ --color2: #434c5e;
+ --color3: #4c566a;
+ --color4: #d8dee9;
+ --color5: #e5e9f0;
+ --color6: #eceff4;
+ --color7: #8fbcbb;
+ --color8: #88c0d0;
+ --color9: #81a1c1;
+ --color10: #5e81ac;
+ --color11: #bf616a;
+ --color12: #d08770;
+ --color13: #ebcb8b;
+ --color14: #a3be8c;
+ --color15: #b48ead;
+}
+
+.theme-light {
+ --bg: var(--color5);
+ --body-bg: var(--color4);
+ --navitem-bg: var(--color9);
+ --navitem-bg-hl: var(--color10);
+
+ --fg: var(--color3);
+ --fg-hl: var(--color0);
+
+ --link: var(--color15);
+ --link-hl: var(--color7);
+ --navitem-link: var(--color8);
+ --navitem-link-hl: var(--color7);
+
+ --fg-acc1: var(--color11);
+ --fg-acc2: var(--color12);
+ --fg-acc3: var(--color13);
+ --fg-acc4: var(--color14);
+ --fg-acc5: var(--color15);
+
+ --switch-bg: var(--color9);
+ --switch-bg-hl: var(--color10);
+ --switch-moon: var(--color10);
+ --switch-sun: var(--color13);
+
+ --code-border: var(--color3);
+}
+
+.theme-dark {
+ --bg: var(--color3);
+ --body-bg: var(--color0);
+ --navitem-bg: var(--color1);
+ --navitem-bg-hl: var(--color2);
+
+ --fg: var(--color4);
+ --fg-hl: var(--color5);
+
+ --link: var(--color15);
+ --link-hl: var(--color10);
+ --navitem-link: var(--color8);
+ --navitem-link-hl: var(--color7);
+
+ --fg-acc1: var(--color11);
+ --fg-acc2: var(--color12);
+ --fg-acc3: var(--color13);
+ --fg-acc4: var(--color14);
+ --fg-acc5: var(--color15);
+
+ --switch-bg: var(--color1);
+ --switch-bg-hl: var(--color2);
+ --switch-moon: var(--color10);
+ --switch-sun: var(--color13);
+
+ --code-border: var(--color4);
+}
+
+/* general */
+a {
+ color: var(--link);
+}
+
+a:hover {
+ color: var(--link-hl);
+}
+
+h1 {
+ color: var(--fg-acc1);
+}
+
+h2 {
+ color: var(--fg-acc2);
+}
+
+h3 {
+ color: var(--fg-acc3);
+}
+
+h4 {
+ color: var(--fg-acc4);
+}
+
+h5 {
+ color: var(--fg-acc5);
+}
+
+body {
+ background: var(--bg);
+ color: var(--fg);
+}
+
+main {
+ background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
+}
+
+pre, code {
+ border-radius: 5px;
+ border: 1px solid var(--code-border);
+}
+
+/* nav bar */
+body > header {
+ background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
+}
+
+nav li {
+ background: var(--navitem-bg);
+}
+
+nav a {
+ color: var(--navitem-link);
+}
+
+nav li:hover {
+ background: var(--navitem-bg-hl);
+ color: var(--fg-hl);
+}
+
+nav li:hover > a {
+ color: var(--navitem-link-hl);
+}
+
+
+/* footer */
+body > footer {
+ background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+}
+
+
+/* image gallery (not really being used rn) */
+div.gallery {
+ border: 1px solid var(--fg-hl);
+}
+
+div.gallery:hover {
+ border: var(--fg-acc5);
+}
+
+
+/* switch */
+button.theme-switcher {
+ background-color: var(--switch-bg);
+}
+
+button.theme-switcher:hover {
+ background-color: var(--switch-bg-hl);
+}
+
+button.theme-switcher > .fa-moon,
+button.theme-switcher > .fa-sun {
+ color: transparent;
+}
+
+.theme-dark button.theme-switcher > .fa-moon {
+ color: var(--switch-moon);
+}
+
+.theme-light button.theme-switcher > .fa-sun {
+ color: var(--switch-sun);
+}
--
cgit v1.2.3-70-g09d2