127 lines
2.6 KiB
CSS
127 lines
2.6 KiB
CSS
:root {
|
|
--base: #191724;
|
|
--surface: #1f1d2e;
|
|
--overlay: #26233a;
|
|
--text: #e0def4;
|
|
--love: #eb6f92;
|
|
--gold: #f6c177;
|
|
--rose: #ebbcba;
|
|
--pine: #31748f;
|
|
--foam: #9ccfd8;
|
|
--iris: #c4a7e7;
|
|
--highlight-low: #21202e;
|
|
--highlight-med: #403d52;
|
|
--highlight-high: #524f67;
|
|
|
|
@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;
|
|
--highlight-low: #f4ede8;
|
|
--highlight-med: #dfdad9;
|
|
--highlight-high: #cecacd;
|
|
}
|
|
|
|
--font: "FairiesevkaSans Nerd Font Propo";
|
|
--clock-font: "FairiesevkaSans Nerd Font Propo Heavy";
|
|
--page-bg: var(--base);
|
|
--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 {
|
|
height: inherit;
|
|
width: 680px;
|
|
background: var(--search-bg);
|
|
color: var(--search-fg);
|
|
font: var(--font);
|
|
font-weight: mono;
|
|
line-height: 1.8em;
|
|
box-shadow: 1px 1px 3px var(--shadow);
|
|
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: var(--page-bg);
|
|
background-size: cover;
|
|
}
|
|
|
|
.everything {
|
|
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(--link-bg);
|
|
border-radius: 8px;
|
|
box-shadow: 2px 2px 8px var(--shadow);
|
|
}
|
|
|
|
.box {
|
|
width: 750px;
|
|
}
|
|
|
|
ul {
|
|
padding-inline-start: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
line-height: 2.4em;
|
|
font-family: var(--font);
|
|
color: var(--link-fg);
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
outline: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover-fg);
|
|
}
|
|
|
|
.time {
|
|
font-family: var(--clock-font), monospace;
|
|
font-weight: mono;
|
|
font-size: 5.5rem;
|
|
margin: 50px 0px 50px 0px;
|
|
color: var(--clock-fg);
|
|
text-shadow:
|
|
-5px 5px 0px var(--love),
|
|
-10px 10px var(--gold),
|
|
-15px 15px 0px var(--iris),
|
|
-20px 20px 0px var(--pine);
|
|
}
|