dark mode refactoring

pick new color for content area
use pastel colors for pride color borders
This commit is contained in:
emma 2025-01-27 22:36:49 -05:00
parent ccc21cbc75
commit 4656b7cea2

View File

@ -30,7 +30,6 @@
--trans-pride-blue-light: #5BCEFA; --trans-pride-blue-light: #5BCEFA;
--trans-pride-pink-light: #F5A9B8; --trans-pride-pink-light: #F5A9B8;
--trans-pride-white-light: #FFFFFF; --trans-pride-white-light: #FFFFFF;
} }
*, *::before, *::after { *, *::before, *::after {
@ -141,7 +140,7 @@ nav {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: #29274c; --background-color: #211951;
--body-background-color: #0d0c1d; --body-background-color: #0d0c1d;
--text-color: #f1dac4; --text-color: #f1dac4;
--scroll-bar: #474973; --scroll-bar: #474973;
@ -150,6 +149,18 @@ nav {
--link-hover: #f72585; --link-hover: #f72585;
--link-visited: #4cc9f0; --link-visited: #4cc9f0;
--border-color: #474973; --border-color: #474973;
--trans-pride-blue-dark: #bee2ff;
--trans-pride-pink-dark: #faaac7;
--trans-pride-white-dark: #f2ffff;
--bi-pride-pink-dark: #fe89d8;
--bi-pride-purple-dark: #9385e3;
--bi-pride-blue-dark: #7084e7;
--disability-pride-black-dark: #595959;
--disability-pride-red-dark: #ffadad;
--disability-pride-yellow-dark: #fcff72;
--disability-pride-white-dark: #f2ffff;
--disability-pride-blue-dark: #76e3f2;
--disability-pride-green-dark: #8df4b0;
} }
body { body {
@ -157,6 +168,18 @@ nav {
background-image: url("../img/site/assets/stardust.png"); background-image: url("../img/site/assets/stardust.png");
} }
header {
border-image-source: linear-gradient(to right, var(--bi-pride-pink-dark) 0 33%, var(--bi-pride-purple-dark) 33% 66%, var(--bi-pride-blue-dark) 66%);
}
footer {
border-image-source: linear-gradient(to right, var(--disability-pride-black-dark) 0 35%, var(--disability-pride-red-dark) 35% 41%, var(--disability-pride-yellow-dark) 41% 47%, var(--disability-pride-white-dark) 47% 53%, var(--disability-pride-blue-dark) 53% 59%, var(--disability-pride-green-dark) 59% 65%, var(--disability-pride-black-dark) 65% 71%);
}
nav {
border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-dark) 0 20%, var(--trans-pride-pink-dark) 20% 40%, var(--trans-pride-white-dark) 40% 60%, var(--trans-pride-pink-dark) 60% 80%, var(--trans-pride-blue-dark) 80%);
}
.status .statuslol_content p { .status .statuslol_content p {
color: var(--text-color); color: var(--text-color);
} }