style.css (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
@font-face {
font-family: lexend;
src: url("assets/fonts/lexend-latin-400-normal.woff2");
font-weight: 400;
}
@font-face {
font-family: lexend;
src: url("assets/fonts/lexend-latin-800-normal.woff2");
font-weight: 800;
}
@font-face {
font-family: montserrat;
src: url("assets/fonts/montserrat-latin-800-normal.woff2");
font-weight: 800;
}
:root {
--c-bg: #1e1e2e;
--c-fg: #cdd6f4;
--c-surface: #313244;
--c-overlay: #6c7086;
--c-link: #8caaee;
--c-visited: #ca9ee6;
--f-heading: 'Montserrat', sans-serif;
--f-text: 'Lexend', sans-serif;
}
html {
font-family: var(--f-text);
color: var(--c-fg);
background-color: var(--c-bg);
font-size: 1.5rem;
}
body {
max-width: 60rem;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1em;
margin-bottom: 0.5em;
font-family: var(--f-heading);
a {
text-decoration: none;
&:visited {
color: var(--c-link);
}
}
}
#top {
margin-top: 1rem;
}
#contact table {
text-align: start;
& th {
text-align: left;
padding-right: 0.5rem;
}
}
a {
color: var(--c-link);
&:visited {
color: var(--c-visited);
}
}
|