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 {
--font: "Cartograph CF";
--bgcolor: #1f1d2e;
--linkcolor: #e0def4;
--base: #191724;
--surface: #1f1d2e;
--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 {
height: inherit;
width: 680px;
background: #26233a;
color: #ebbcba;
font: "Cartograph CF";
font-weight: mono;
line-height: 1.8em;
box-shadow: 1px 1px 3px #000000;
border: none;
text-align: center;
border-radius: 8px;
outline: none;
padding: 7px 14px;
font-size: 18;
grid-column: 1 / -1;
margin: 0px 0px 30px 0px;;
height: inherit;
width: 680px;
background: var(--overlay);
color: var(--rose);
font: var(--font);
font-weight: mono;
line-height: 1.8em;
box-shadow: 1px 1px 3px #000000;
border: none;
text-align: center;
border-radius: 8px;
outline: none;
padding: 7px 14px;
font-size: 18;
grid-column: 1 / -1;
margin: 0px 0px 30px 0px;
}
body {
/*
/*
background-image: url('../background/bg.jpg');
background-repeat : no-repeat;
*/
background-color: #191724;
background-size: cover;
background-color: var(--base);
background-size: cover;
}
.everything {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.link {
display: inline-block;
margin: 1%;
height: 185px;
width: 140px;
text-align: left;
padding-left: 3%;
background-color: var(--bgcolor);
border-radius: 8px;
box-shadow: 2px 2px 8px #000000;
display: inline-block;
margin: 1%;
height: 185px;
width: 140px;
text-align: left;
padding-left: 3%;
background-color: var(--bgcolor);
border-radius: 8px;
box-shadow: 2px 2px 8px #000000;
}
.box {
width: 750px;
width: 750px;
}
ul {
padding-inline-start: 0;
list-style: none;
padding-inline-start: 0;
list-style: none;
}
a {
display: block;
line-height: 2.4em;
font-family: var(--font);
color: var(--linkcolor);
font-size: 1rem;
text-decoration: none;
outline: none;
transition: .2s;
display: block;
line-height: 2.4em;
font-family: var(--font);
color: var(--linkcolor);
font-size: 1rem;
text-decoration: none;
outline: none;
transition: 0.2s;
}
a:hover {
color: #9ccfd8;
color: var(--foam);
}
.time {
font-family: "Cartograph CF"; monospace;
font-weight: mono;
font-size: 5.5rem;
margin: 50px 0px 50px 0px;
color: var(--linkcolor);
text-shadow: -5px 5px 0px #eb6f92, -10px 10px #f6c177, -15px 15px 0px #C3A5E6, -20px 20px 0px #31748f;
font-family: var(--font), monospace;
font-weight: mono;
font-size: 5.5rem;
margin: 50px 0px 50px 0px;
color: var(--linkcolor);
text-shadow:
-5px 5px 0px var(--love),
-10px 10px var(--gold),
-15px 15px 0px var(--iris),
-20px 20px 0px var(--pine);
}