Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: Leilukin:25bc4219d78255cff124a3b154e18af539733c44
Branches Tags
Leilukin:main
Leilukin:build
..
compare: Leilukin:b0ea2c5ee42d56ac730d66a638681240c52c343c
Branches Tags
Leilukin:build
Leilukin:main

2 Commits
25bc4219d7 ... b0ea2c5ee4

Author SHA1 Message Date
Helen Chong b0ea2c5ee4 Replace RBG color values with HEX values 2024-10-25 23:51:43 +08:00
Helen Chong e1237796be Use color-scheme CSS property to set light and dark modes 2024-10-25 23:50:10 +08:00
2 changed files with 21 additions and 41 deletions
Show Stats Expand all files Collapse all files

58
src/assets/css/cassettebeasts.css
View File

@ -1,56 +1,36 @@
:root { html { color-scheme: light dark; }
--clr-body-bg: #e4e3e3;
--clr-body-txt: #141414;
--clr-content-bg: #ffffff;
--clr-top-btn-bg: #552190; :root {
--clr-body-bg: light-dark(#e4e3e3, #141414);
--clr-body-txt: light-dark(#141414, #fff);
--clr-content-bg: light-dark(#ffffff, #242424);
--clr-top-btn-bg: light-dark(#552190, #552190);
--clr-top-btn-txt: #ffffff; --clr-top-btn-txt: #ffffff;
--clr-main-heading: #171717; --clr-main-heading: light-dark(#171717, #daaced);
--clr-sub-heading: #111111; --clr-sub-heading: light-dark(#111111, #fff);
--clr-title-border: #7629db; --clr-title-border: light-dark(#7629db, #9964de);
--clr-bold-txt: #da4500; --clr-bold-txt: light-dark(#da4500, #ff9869);
--clr-link: #7629db; --clr-link: light-dark(#7629db, #ce97ff);
--clr-link-hover: #270e48; --clr-link-hover: light-dark(#270e48, #b366f7);
--clr-quote-bg: #f3f2f2; --clr-quote-bg: light-dark(#f3f2f2, #141414);
--clr-quote-border: #414141; --clr-quote-border: light-dark(#414141, #f3f2f2);
--clr-cw-hover: rgb(250, 229, 229); --clr-cw-hover: #fae5e5;
--clr-code-bg: #f3f2f2; --clr-code-bg: #f3f2f2;
--clr-code-border: #414141; --clr-code-border: #414141;
--clr-dates: rgb(58, 150, 255); --clr-dates: #3a96ff;
--clr-link-btn-bg: #873eb5; --clr-link-btn-bg: #873eb5;
--clr-link-btn-txt: white; --clr-link-btn-txt: white;
--clr-link-btn-hover: #241445; --clr-link-btn-hover: #241445;
--clr-hero-bg: #7944B6; --clr-hero-bg: #7944B6;
--clr-navbar-bg: #9b59b6; --clr-navbar-bg: light-dark(#9b59b6, #3a0873);
--clr-navbar-link: white; --clr-navbar-link: white;
--clr-main-footer-bg: #9b59b6; --clr-main-footer-bg: light-dark(#9b59b6, #3a0873);
}
@media (prefers-color-scheme: dark) {
:root {
--clr-body-bg: #141414;
--clr-body-txt: #fff;
--clr-content-bg: #242424;
--clr-top-btn-bg: #552190;
--clr-main-heading: #daaced;
--clr-sub-heading: #fff;
--clr-title-border: #9964de;
--clr-bold-txt: #ff9869;
--clr-link: #ce97ff;
--clr-link-hover: #b366f7;
--clr-quote-bg: #141414;
--clr-quote-border: #f3f2f2;
--clr-navbar-bg: #3a0873;
--clr-main-footer-bg: #3a0873;
}
} }
.hero__top-bar, .hero__top-bar,

4
src/assets/css/global.css
View File

@ -17,11 +17,11 @@
--clr-link-hover: #c355c9; --clr-link-hover: #c355c9;
--clr-quote-bg: #13092D; --clr-quote-bg: #13092D;
--clr-quote-border: #999999; --clr-quote-border: #999999;
--clr-cw-hover: rgb(58, 0, 0); --clr-cw-hover: #3a0000;
--clr-code-bg: #241445; --clr-code-bg: #241445;
--clr-code-border: #82668f; --clr-code-border: #82668f;
--clr-dates: rgb(121, 184, 255); --clr-dates: #79b8ff;
--clr-link-btn-bg: #873eb5; --clr-link-btn-bg: #873eb5;
--clr-link-btn-txt: white; --clr-link-btn-txt: white;