98 lines
1.2 KiB
SCSS
98 lines
1.2 KiB
SCSS
blockquote,
|
|
code,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
li,
|
|
ol,
|
|
p,
|
|
pre,
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 62.5%;
|
|
}
|
|
|
|
body {
|
|
--base: #24273a;
|
|
--surface-0: #363a4f;
|
|
--subtext-0: #a5adcb;
|
|
--overlay-0: #6e738d;
|
|
--text: #cad3f5;
|
|
--spacing-1: 32px;
|
|
|
|
background-color: var(--base);
|
|
color: var(--text);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.preact-root {
|
|
border: 2px solid var(--overlay-0);
|
|
min-height: 100vh;
|
|
min-width: 100vw;
|
|
}
|
|
|
|
.calendar,
|
|
.big-date,
|
|
.subtitle {
|
|
margin-left: var(--spacing-1);
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
.big-date {
|
|
font-size: 4rem;
|
|
|
|
.dash {
|
|
color: var(--overlay-0);
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
border: 2px solid var(--text);
|
|
display: inline-grid;
|
|
font-family: monospace;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
width: fit-content;
|
|
|
|
p {
|
|
padding: 4px;
|
|
}
|
|
|
|
.current-week,
|
|
.current-week-day {
|
|
background-color: var(--surface-0);
|
|
}
|
|
|
|
.current-day,
|
|
.current-week-day-name {
|
|
background-color: var(--text);
|
|
color: var(--base);
|
|
}
|
|
|
|
.current-month,
|
|
.current-week,
|
|
.current-week-day-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.other-month {
|
|
color: var(--overlay-0);
|
|
}
|
|
|
|
.week-day-name {
|
|
border-bottom: 2px solid var(--text);
|
|
}
|
|
|
|
.week-number {
|
|
border-right: 2px solid var(--text);
|
|
}
|
|
}
|