Rework colorscheme
This commit is contained in:
commit
777e53ef81
@ -5,9 +5,10 @@
|
|||||||
.not-found a.logo {
|
.not-found a.logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
background-color: var(--alt-bg);
|
background-color: var(--header-bg);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
box-shadow: inset 0 -20px 20px -20px var(--header-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.not-found-num {
|
h1.not-found-num {
|
||||||
|
@ -1,97 +1,106 @@
|
|||||||
/* Mostly based off of gruvbox */
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--col-0: #FFFFFF;
|
/* Colors */
|
||||||
--col-1: #F0F2F9;
|
--fg: #06080E;
|
||||||
--col-2: #3C5197;
|
--alt-fg: #F1F2F9;
|
||||||
--col-3: #0C101D;
|
|
||||||
--col-4: #18203A;
|
|
||||||
--col-5: #5F75BF;
|
|
||||||
--col-6: #1E2848;
|
|
||||||
--col-7: #12182B;
|
|
||||||
--col-8: #181F38;
|
|
||||||
|
|
||||||
|
--bg: #D4D8ED;
|
||||||
|
--alt-bg: #C5CCE8;
|
||||||
|
--dark-alt-bg: #A9B2DB;
|
||||||
|
|
||||||
|
--acc: #3C5197;
|
||||||
|
--dark-acc: #12182B;
|
||||||
|
--light-acc: #5F75BF;
|
||||||
|
|
||||||
/* Color Sheme linking */
|
/* Color Sheme linking */
|
||||||
--body-bg: var(--col-3);
|
/* Body Colors */
|
||||||
--body-fg: var(--col-1);
|
--body-bg: var(--bg);
|
||||||
|
--body-fg: var(--fg);
|
||||||
|
--link-fg: var(--acc);
|
||||||
|
|
||||||
--link-fg: var(--col-5);
|
/* Navbar Colors */
|
||||||
|
--header-bg: var(--alt-bg);
|
||||||
--header-bg: var(--col-4);
|
--header-bg-hov: var(--acc);
|
||||||
--header-bg-hov: var(--col-2);
|
--header-fg: var(--fg);
|
||||||
--header-fg: var(--body-fg);
|
--header-fg-hov: var(--alt-fg);
|
||||||
|
--header-shadow: var(--dark-acc);
|
||||||
--header-shadow: var(--body-bg);
|
|
||||||
--header-shadow-hov: var(--header-shadow);
|
--header-shadow-hov: var(--header-shadow);
|
||||||
|
|
||||||
--hamburger-fg: var(--col-1);
|
--hamburger-fg: var(--fg);
|
||||||
--hamburger-fg-checked: var(--hamburger-fg);
|
--hamburger-fg-checked: var(--hamburger-fg);
|
||||||
|
|
||||||
--langs-bg: var(--header-bg);
|
--langs-bg: var(--header-bg);
|
||||||
--lang-btn-bg: var(--header-bg) ;
|
--lang-btn-bg: var(--header-bg) ;
|
||||||
--langs-bg-hov: var(--header-bg-hov);
|
--langs-bg-hov: var(--header-bg-hov);
|
||||||
|
--langs-fg-hov: var(--header-fg-hov);
|
||||||
|
|
||||||
|
/* Content Colors */
|
||||||
|
--blockquote-border: var(--alt-bg);
|
||||||
|
|
||||||
--blockquote-border: var(--col-6);
|
--table-bg: var(--dark-alt-bg);
|
||||||
|
--table-bg-alt: var(--alt-bg);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--table-bg: var(--col-7);
|
|
||||||
--table-bg-alt: var(--col-8);
|
|
||||||
--table-border: var(--body-bg);
|
--table-border: var(--body-bg);
|
||||||
|
|
||||||
|
--maps-bg: var(--alt-bg);
|
||||||
|
--maps-border: var(--acc);
|
||||||
|
|
||||||
--maps-bg: var(--col-4);
|
--button-bg: var(--acc);
|
||||||
--maps-border: var(--col-2);
|
--button-fg: var(--alt-fg);
|
||||||
|
|
||||||
--button-bg: var(--col-2);
|
/* Calendar Colors */
|
||||||
--button-fg: var(--body-fg);
|
--cal-bg: var(--alt-bg);
|
||||||
|
--cal-fg: var(--fg);
|
||||||
|
|
||||||
|
--cal-month-bg: var(--alt-bg);
|
||||||
|
--cal-month-fg: var(--fg);
|
||||||
|
|
||||||
|
--cal-weekdays-bg: var(--light-acc);
|
||||||
|
--cal-weekdays-fg: var(--alt-fg);
|
||||||
|
|
||||||
|
--cal-day-empty-fg: var(--alt-fg);
|
||||||
|
--cal-day-empty-bg: var(--dark-alt-bg);
|
||||||
|
|
||||||
--cal-bg: var(--col-4);
|
--cal-day-busy-fg: var(--alt-fg);
|
||||||
--cal-fg: var(--body-fg);
|
--cal-day-busy-bg: var(--acc);
|
||||||
|
--cal-day-hover-fg: var(--cal-day-busy-fg);
|
||||||
|
--cal-day-hover-bg: var(--cal-day-busy-bg);
|
||||||
|
|
||||||
--cal-month-bg: var(--col-8);
|
--cal-event-fg: var(--alt-fg);
|
||||||
--cal-month-fg: var(--link-fg);
|
--cal-event-bg: var(--light-acc) ;
|
||||||
|
|
||||||
--cal-weekdays-bg: var(--col-7);
|
--cal-mobile-bg: var(--alt-bg);
|
||||||
--cal-weekdays-fg: var(--cal-fg);
|
--cal-mobile-fg: var(--fg);
|
||||||
|
|
||||||
--cal-day-empty-fg: var(--col-7);
|
--cal-mobile-border: var(--acc);
|
||||||
--cal-day-empty-bg: var(--col-6);
|
--cal-mobile-link: var(--light-acc);
|
||||||
|
|
||||||
--cal-day-busy-fg: var(--cal-fg);
|
|
||||||
--cal-day-busy-bg: var(--col-7);
|
|
||||||
|
|
||||||
--cal-day-hover-fg: var(--col-2);
|
|
||||||
--cal-day-hover-bg: var(--col-7);
|
|
||||||
|
|
||||||
--cal-event-fg: var(--cal-fg);
|
|
||||||
--cal-event-bg: var(--col-2) ;
|
|
||||||
|
|
||||||
--cal-mobile-bg: var(--cal-day-busy-bg);
|
|
||||||
--cal-mobile-fg: var(--cal-fg);
|
|
||||||
--cal-mobile-border: var(--col-2);
|
|
||||||
--cal-mobile-link: var(--link-fg);
|
|
||||||
|
|
||||||
/* Light Mode Colors */
|
|
||||||
--bg: #f9f5d7;
|
|
||||||
--fg: #3c3836;
|
|
||||||
--alt-bg: #d5c4a1;
|
|
||||||
--acc-1: #076678;
|
|
||||||
--shadow: #504945;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
/* Dark Mode Colors */
|
/* Dark Mode Colors */
|
||||||
|
--bg: #06080E;
|
||||||
|
--fg: #F0F2F9;
|
||||||
|
--dark-acc: #0C101D;
|
||||||
|
--alt-bg: #18203A;
|
||||||
|
--dark-alt-bg: #12182B;
|
||||||
|
|
||||||
/* Dark Mode Colorsheme Link Overides */
|
/* Dark Mode Colorscheme Changes */
|
||||||
|
--link-fg: var(--light-acc);
|
||||||
|
|
||||||
|
--table-bg: var(--dark-acc);
|
||||||
|
--table-bg-alt: var(----alt-bg);
|
||||||
|
|
||||||
|
--button-fg: var(--body-fg);
|
||||||
|
|
||||||
|
--cal-bg: var(--dark-acc);
|
||||||
|
|
||||||
|
--cal-weekdays-fg: var(--fg);
|
||||||
|
|
||||||
|
--cal-day-empty-fg: var(--dark-acc);
|
||||||
|
|
||||||
|
--cal-day-busy-fg: var(--acc);
|
||||||
|
--cal-day-busy-bg: var(--alt-bg);
|
||||||
|
|
||||||
|
--cal-event-fg: var(--fg);
|
||||||
|
--cal-event-bg: var(--acc) ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -377,8 +377,10 @@ blockquote.location p { padding: inherit; }
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-btn:checked ~ .lang-switch a { box-shadow: none; }
|
.lang-btn:checked ~ .lang-switch a {
|
||||||
.lang-btn:checked ~ .lang-switch a { box-shadow: none; }
|
box-shadow: none;
|
||||||
|
color: var(--langs-fg-hov);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* lang-switch content (hidden by default) */
|
/* lang-switch content (hidden by default) */
|
||||||
|
Loading…
Reference in New Issue
Block a user