punkfairie/startpage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ feat(css): support light mode

Browse source
This commit is contained in:
punkfairie 2024-09-21 15:04:04 -07:00
parent 6ff1b18d09
commit 9509940029
Signed by: punkfairie
GPG key ID: A86AF57F837E320F
1 changed files with 82 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
style.css
View file

@ -1,86 +1,114 @@
:root { :root {
--font: "Cartograph CF"; --base: #191724;
--bgcolor: #1f1d2e; --surface: #1f1d2e;
--linkcolor: #e0def4; --overlay: #26233a;
--text: #e0def4;
--love: #eb6f92;
--gold: #f6c177;
--rose: #ebbcba;
--pine: #31748f;
--foam: #9ccfd8;
--iris: #c4a7e7;
@media (prefers-color-scheme: light) {
--base: #faf4ed;
--surface: #fffaf3;
--overlay: #f2e9e1;
--text: #575279;
--love: #b4637a;
--gold: #ea9d34;
--rose: #d7827e;
--pine: #286983;
--foam: #56949f;
--iris: #907aa9;
}
--font: "FairiesevkaSans Nerd Font Propo";
--bgcolor: var(--surface);
--linkcolor: var(--text);
} }
/*-----------------------------------------------------------*/ /*-----------------------------------------------------------*/
input { input {
height: inherit; height: inherit;
width: 680px; width: 680px;
background: #26233a; background: var(--overlay);
color: #ebbcba; color: var(--rose);
font: "Cartograph CF"; font: var(--font);
font-weight: mono; font-weight: mono;
line-height: 1.8em; line-height: 1.8em;
box-shadow: 1px 1px 3px #000000; box-shadow: 1px 1px 3px #000000;
border: none; border: none;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
outline: none; outline: none;
padding: 7px 14px; padding: 7px 14px;
font-size: 18; font-size: 18;
grid-column: 1 / -1; grid-column: 1 / -1;
margin: 0px 0px 30px 0px;; margin: 0px 0px 30px 0px;
} }
body { body {
/* /*
background-image: url('../background/bg.jpg'); background-image: url('../background/bg.jpg');
background-repeat : no-repeat; background-repeat : no-repeat;
*/ */
background-color: #191724; background-color: var(--base);
background-size: cover; background-size: cover;
} }
.everything { .everything {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.link { .link {
display: inline-block; display: inline-block;
margin: 1%; margin: 1%;
height: 185px; height: 185px;
width: 140px; width: 140px;
text-align: left; text-align: left;
padding-left: 3%; padding-left: 3%;
background-color: var(--bgcolor); background-color: var(--bgcolor);
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 2px 8px #000000; box-shadow: 2px 2px 8px #000000;
} }
.box { .box {
width: 750px; width: 750px;
} }
ul { ul {
padding-inline-start: 0; padding-inline-start: 0;
list-style: none; list-style: none;
} }
a { a {
display: block; display: block;
line-height: 2.4em; line-height: 2.4em;
font-family: var(--font); font-family: var(--font);
color: var(--linkcolor); color: var(--linkcolor);
font-size: 1rem; font-size: 1rem;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
transition: .2s; transition: 0.2s;
} }
a:hover { a:hover {
color: #9ccfd8; color: var(--foam);
} }
.time { .time {
font-family: "Cartograph CF"; monospace; font-family: var(--font), monospace;
font-weight: mono; font-weight: mono;
font-size: 5.5rem; font-size: 5.5rem;
margin: 50px 0px 50px 0px; margin: 50px 0px 50px 0px;
color: var(--linkcolor); color: var(--linkcolor);
text-shadow: -5px 5px 0px #eb6f92, -10px 10px #f6c177, -15px 15px 0px #C3A5E6, -20px 20px 0px #31748f; text-shadow:
-5px 5px 0px var(--love),
-10px 10px var(--gold),
-15px 15px 0px var(--iris),
-20px 20px 0px var(--pine);
} }