zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark mode refactoring

Browse Source 
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
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
style/style.css
View File

@ -30,7 +30,6 @@
--trans-pride-blue-light: #5BCEFA;
--trans-pride-pink-light: #F5A9B8;
--trans-pride-white-light: #FFFFFF;
}
*, *::before, *::after {
@ -141,7 +140,7 @@ nav {
@media (prefers-color-scheme: dark) {
:root {
--background-color: #29274c;
--background-color: #211951;
--body-background-color: #0d0c1d;
--text-color: #f1dac4;
--scroll-bar: #474973;
@ -150,6 +149,18 @@ nav {
--link-hover: #f72585;
--link-visited: #4cc9f0;
--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 {
@ -157,6 +168,18 @@ nav {
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 {
color: var(--text-color);
}