powermaker450/my-site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix light mode

Browse source
This commit is contained in:
powermaker450 2024-08-15 15:33:22 +00:00
parent c7f72d933a
commit a170e26f11
2 changed files with 522 additions and 455 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

897
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

34
src/index.css
View file

@ -3,19 +3,19 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255); color: var(--text-color);
background-color: rgb(0, 0, 0); background-color: var(--background);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
--background: rgb(0, 0, 0);
--main: rgb(250, 95, 0); --main: rgb(250, 95, 0);
--primary: rgb(40, 40, 40); --primary: rgb(40, 40, 40);
--secondary: rgb(100, 100, 100); --secondary: rgb(100, 100, 100);
--tertiary: rgb(30, 30, 30); --tertiary: rgb(30, 30, 30);
--text-color-light: rgb(0, 0, 0); --text-color: rgb(255, 255, 255);
--text-color-dark: rgb(255, 255, 255);
} }
.header { .header {
@ -29,7 +29,7 @@
margin: 0 7px; margin: 0 7px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: var(--text-color-dark); color: var(--text-color);
transition: transition:
text-shadow 0.25s, text-shadow 0.25s,
transform 0.25s, transform 0.25s,
@ -37,7 +37,7 @@
} }
.header-link:hover { .header-link:hover {
text-shadow: 0px 0px 12px var(--text-color-dark); text-shadow: 0px 0px 12px var(--text-color);
transform: translateY(-5%) scale(1.12, 1.12); transform: translateY(-5%) scale(1.12, 1.12);
} }
@ -100,7 +100,7 @@
padding: 11px 15px; padding: 11px 15px;
margin: 7px; margin: 7px;
background-color: var(--primary); background-color: var(--primary);
color: var(--text-color-dark); color: var(--text-color);
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
transition: transition:
@ -129,19 +129,11 @@
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
color: rgb(0, 0, 0); --background: rgb(255, 255, 255);
background-color: rgb(255, 255, 255); --main: rgb(250, 95, 0);
} --primary: rgb(160, 160, 160);
--secondary: rgb(220, 220, 220);
.header-link { --tertiary: rgb(100, 100, 100);
color: var(--text-color-light); --text-color: rgb(0, 0, 0);
}
.header-link:hover {
text-shadow: 0 0 12px var(--text-color-light);
}
button {
background-color: #f9f9f9;
} }
} }