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

code refactoring

Browse Source 
add colors as variables
relocate dark mode media query to take priority if dark mode is selected
This commit is contained in:
emma 2025-01-27 19:36:11 -05:00
parent 721c6765e7
commit ccc21cbc75
1 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
style/style.css
View File

@ -18,6 +18,18 @@
--link-visited: #8A2BE2; --link-visited: #8A2BE2;
--link-color: #4B0082; --link-color: #4B0082;
--border-color: #DB7093; --border-color: #DB7093;
--bi-pride-pink-light: #D60270;
--bi-pride-purple-light: #9B4F96;
--bi-pride-blue-light: #0038A8;
--disability-pride-black-light: #595959;
--disability-pride-red-light: #CF7280;
--disability-pride-yellow-light: #EEDE77;
--disability-pride-white-light: #E8E8E8;
--disability-pride-blue-light: #7BC2E0;
--disability-pride-green-light: #3BB07D;
--trans-pride-blue-light: #5BCEFA;
--trans-pride-pink-light: #F5A9B8;
--trans-pride-white-light: #FFFFFF;
} }
@ -46,34 +58,6 @@ body {
color: var(--text-color); color: var(--text-color);
} }
@media (prefers-color-scheme: dark) {
:root {
--background-color: #29274c;
--body-background-color: #0d0c1d;
--text-color: #f1dac4;
--scroll-bar: #474973;
--scroll-gutter: #a69cac;
--link-color: #4cc9f0;
--link-hover: #f72585;
--link-visited: #4cc9f0;
--border-color: #474973;
}
body {
background-color: var(--body-background-color);
background-image: url("../img/site/assets/stardust.png");
}
.status .statuslol_content p {
color: var(--text-color);
}
.status .statuslol_content .statuslol_time a {
color: var(--link-color) !important;
}
}
h1, h2, h3, h4, h5, h6, p, ul, figcaption, details { h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
margin: 0.5rem; margin: 0.5rem;
} }
@ -109,7 +93,7 @@ header {
border-bottom: 10px solid; border-bottom: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to right, #D60270 0 33%, #9B4F96 33% 66%, #0038A8 66%); border-image-source: linear-gradient(to right, var(--bi-pride-pink-light) 0 33%, var(--bi-pride-purple-light) 33% 66%, var(--bi-pride-blue-light) 66%);
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 0.43rem; margin-top: 0.43rem;
} }
@ -125,7 +109,7 @@ footer {
border-top: 10px solid; border-top: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to right, #595959 0 35%, #CF7280 35% 41%, #EEDE77 41% 47%, #E8E8E8 47% 53%, #7BC2E0 53% 59%, #3BB07D 59% 65%, #595959 65% 71%); border-image-source: linear-gradient(to right, var(--disability-pride-black-light) 0 35%, var(--disability-pride-red-light) 35% 41%, var(--disability-pride-yellow-light) 41% 47%, var(--disability-pride-white-light) 47% 53%, var(--disability-pride-blue-light) 53% 59%, var(--disability-pride-green-light) 59% 65%, var(--disability-pride-black-light) 65% 71%);
font-family: system-ui; font-family: system-ui;
font-size: 1.3rem; font-size: 1.3rem;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
@ -152,7 +136,34 @@ nav {
border-right: 10px solid; border-right: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to bottom, #5BCEFA 0 20%, #F5A9B8 20% 40%, #FFFFFF 40% 60%, #F5A9B8 60% 80%, #5BCEFA 80%); border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-light) 0 20%, var(--trans-pride-pink-light) 20% 40%, var(--trans-pride-white-light) 40% 60%, var(--trans-pride-pink-light) 60% 80%, var(--trans-pride-blue-light) 80%);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #29274c;
--body-background-color: #0d0c1d;
--text-color: #f1dac4;
--scroll-bar: #474973;
--scroll-gutter: #a69cac;
--link-color: #4cc9f0;
--link-hover: #f72585;
--link-visited: #4cc9f0;
--border-color: #474973;
}
body {
background-color: var(--body-background-color);
background-image: url("../img/site/assets/stardust.png");
}
.status .statuslol_content p {
color: var(--text-color);
}
.status .statuslol_content .statuslol_time a {
color: var(--link-color) !important;
}
} }
section { section {