190 lines
3.8 KiB
CSS
190 lines
3.8 KiB
CSS
/* CSS reset: start */
|
|
html, body, div, span, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
abbr, address, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, samp,
|
|
small, strong, sub, sup, var,
|
|
b, i,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, canvas, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section, summary,
|
|
time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
background: transparent;
|
|
}
|
|
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
|
|
article,aside,details,figcaption,figure,
|
|
footer,header,hgroup,menu,nav,section {
|
|
display: block;
|
|
}
|
|
|
|
nav ul {
|
|
list-style :none;
|
|
}
|
|
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
a {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
background: transparent;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
input, select {
|
|
vertical-align :middle;
|
|
}
|
|
/* CSS reset: end */
|
|
|
|
:root {
|
|
--primary: #006b53;
|
|
--on-primary: #ffffff;
|
|
--primary-container: #1dffcf;
|
|
--on-primary-container: #002117;
|
|
--secondary: #4b635a;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #cee9dd;
|
|
--on-secondary-container: #072018;
|
|
--tertiary: #406376;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #c3e7fe;
|
|
--on-tertiary-container: #001e2c;
|
|
--error: #B3261E;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #F9DEDC;
|
|
--on-error-container: #410E0B;
|
|
--background: #fbfdfa;
|
|
--on-background: #e1e3e0;
|
|
--surface: #fbfdfa;
|
|
--on-surface: #191c1b;
|
|
--outline: #79747E;
|
|
--outline-surface-variant: #E7E0EC;
|
|
--on-outline-surface-variant: #49454F;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--primary: #006b53;
|
|
--on-primary: #ffffff;
|
|
--primary-container: #1dffcf;
|
|
--on-primary-container: #002117;
|
|
--secondary: #4b635a;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #cee9dd;
|
|
--on-secondary-container: #072018;
|
|
--tertiary: #406376;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #c3e7fe;
|
|
--on-tertiary-container: #001e2c;
|
|
--error: #B3261E;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #F9DEDC;
|
|
--on-error-container: #410E0B;
|
|
--background: #fbfdfa;
|
|
--on-background: #e1e3e0;
|
|
--surface: #fbfdfa;
|
|
--on-surface: #191c1b;
|
|
--outline: #79747E;
|
|
--outline-surface-variant: #E7E0EC;
|
|
--on-outline-surface-variant: #49454F;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary: #00e0b2;
|
|
--on-primary: #00382a;
|
|
--primary-container: #00513e;
|
|
--on-primary-container: #1bffd0;
|
|
--secondary: #b2ccc1;
|
|
--on-secondary: #1d352d;
|
|
--secondary-container: #344b43;
|
|
--on-secondary-container: #cee9dd;
|
|
--tertiary: #a8cce2;
|
|
--on-tertiary: #0d3446;
|
|
--tertiary-container: #284b5e;
|
|
--on-tertiary-container: #c3e7fe;
|
|
--error: #ffb4a9;
|
|
--on-error: #680003;
|
|
--error-container: #930006;
|
|
--on-error-container: #ffdad4;
|
|
--background: #191c1b;
|
|
--on-background: #e1e3e0;
|
|
--surface: #191c1b;
|
|
--on-surface: #e1e3e0;
|
|
--outline: #89938e;
|
|
--outline-surface-variant: #3f4945;
|
|
--on-outline-surface-variant: #bfc9c3;
|
|
}
|
|
aside img {
|
|
color: var(--on-background);
|
|
}
|
|
}
|
|
* {
|
|
font-family: cantarell, system-ui;
|
|
}
|
|
h1, h2, h3 {
|
|
font-family: Prompt, system-ui;
|
|
}
|
|
body {
|
|
background: var(--surface);
|
|
}
|
|
h1 {
|
|
font-size: 60px;
|
|
}
|
|
h2 {
|
|
font-size: 40px;
|
|
}
|
|
h3 {
|
|
font-size: 30px;
|
|
}
|
|
h4 {
|
|
font-size: 25px;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background: var(--surface);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
header a {
|
|
font-family: Prompt;
|
|
font-weight: 500;
|
|
color: var(--on-surface);
|
|
text-decoration: none;
|
|
}
|
|
|
|
aside img {
|
|
width: 25px;
|
|
|
|
}
|
|
aside img::before {
|
|
height: 30px;
|
|
width: 50px;
|
|
background: var(--on-primary);
|
|
} |