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

✨ feat(css): variable tweaks

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

34
style.css
View file

@ -9,6 +9,9 @@
--pine: #31748f; --pine: #31748f;
--foam: #9ccfd8; --foam: #9ccfd8;
--iris: #c4a7e7; --iris: #c4a7e7;
--highlight-low: #21202e;
--highlight-med: #403d52;
--highlight-high: #524f67;
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
--base: #faf4ed; --base: #faf4ed;
@ -21,23 +24,32 @@
--pine: #286983; --pine: #286983;
--foam: #56949f; --foam: #56949f;
--iris: #907aa9; --iris: #907aa9;
--highlight-low: #f4ede8;
--highlight-med: #dfdad9;
--highlight-high: #cecacd;
} }
--font: "FairiesevkaSans Nerd Font Propo"; --font: "FairiesevkaSans Nerd Font Propo";
--bgcolor: var(--surface); --page-bg: var(--base);
--linkcolor: var(--text); --clock-fg: var(--text);
--search-bg: var(--overlay);
--search-fg: var(--rose);
--link-bg: var(--surface);
--link-fg: var(--text);
--link-hover-fg: var(--foam);
--shadow: var(--highlight-med);
} }
/*-----------------------------------------------------------*/ /*-----------------------------------------------------------*/
input { input {
height: inherit; height: inherit;
width: 680px; width: 680px;
background: var(--overlay); background: var(--search-bg);
color: var(--rose); color: var(--search-fg);
font: var(--font); 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 var(--shadow);
border: none; border: none;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
@ -52,7 +64,7 @@ body {
background-image: url('../background/bg.jpg'); background-image: url('../background/bg.jpg');
background-repeat : no-repeat; background-repeat : no-repeat;
*/ */
background-color: var(--base); background-color: var(--page-bg);
background-size: cover; background-size: cover;
} }
@ -71,9 +83,9 @@ body {
width: 140px; width: 140px;
text-align: left; text-align: left;
padding-left: 3%; padding-left: 3%;
background-color: var(--bgcolor); background-color: var(--link-bg);
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 2px 8px #000000; box-shadow: 2px 2px 8px var(--shadow);
} }
.box { .box {
@ -89,7 +101,7 @@ 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(--link-fg);
font-size: 1rem; font-size: 1rem;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
@ -97,7 +109,7 @@ a {
} }
a:hover { a:hover {
color: var(--foam); color: var(--link-hover-fg);
} }
.time { .time {
@ -105,7 +117,7 @@ a:hover {
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(--clock-fg);
text-shadow: text-shadow:
-5px 5px 0px var(--love), -5px 5px 0px var(--love),
-10px 10px var(--gold), -10px 10px var(--gold),