106 lines
2.5 KiB
CSS
106 lines
2.5 KiB
CSS
:root {
|
|
font-family: 'Departure Mono', monospace;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color-scheme: light dark;
|
|
--white: #cfcfcf;
|
|
--black: #1a1a1a;
|
|
}
|
|
/* Fonts */
|
|
@font-face {
|
|
font-family: "Departure Mono";
|
|
src: url("../assets/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2") format("woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 { font-family: 'Departure Mono', monospace; }
|
|
h1 { font-size: clamp(1.8rem, 4vw, 4rem); }
|
|
h2 { font-size: clamp(1.4rem, 3vw, 3rem); }
|
|
h3 { font-size: clamp(1.1rem, 2vw, 2rem); }
|
|
h4 { font-size: clamp(1rem, 1.8vw, 1.6rem); }
|
|
h5 { font-size: clamp(0.95rem, 1.5vw, 1.4rem); }
|
|
h6 { font-size: clamp(0.9rem, 1.2vw, 1.2rem); }
|
|
p { font-size: clamp(1rem, 1.5vw, 1.25rem); }
|
|
li { font-size: clamp(1rem, 1.5vw, 1.25rem); }
|
|
a { font-size: inherit; }
|
|
label { font-size: clamp(0.85rem, 1.1vw, 1rem); }
|
|
input,
|
|
textarea,
|
|
select { font-size: clamp(0.9rem, 1.1vw, 1rem); }
|
|
blockquote { font-size: clamp(1rem, 1.5vw, 1.3rem); }
|
|
caption { font-size: clamp(0.8rem, 1vw, 0.95rem); }
|
|
figcaption { font-size: clamp(0.8rem, 1vw, 0.9rem); }
|
|
code,
|
|
pre { font-size: clamp(0.8rem, 1vw, 0.95rem); }
|
|
small { font-size: clamp(0.75rem, 0.9vw, 0.85rem); }
|
|
strong { font-size: inherit; }
|
|
em { font-size: inherit; }
|
|
span { font-size: inherit; }
|
|
th { font-size: clamp(0.9rem, 1.1vw, 1rem); }
|
|
td { font-size: clamp(0.85rem, 1.1vw, 1rem); }
|
|
button { font-size: clamp(0.9rem, 1.1vw, 1rem); }
|
|
|
|
body {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--white);
|
|
|
|
background-color: black;
|
|
}
|
|
|
|
a {
|
|
color: crimson;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: coral;
|
|
}
|
|
|
|
a:active {
|
|
color: coral;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { border-color: transparent; }
|
|
50% { border-color: currentColor; }
|
|
}
|
|
|
|
@keyframes typing {
|
|
0% { width: 0; }
|
|
80% { width: 13ch; }
|
|
100% { width: 13ch; }
|
|
}
|
|
|
|
h2.typewriter {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
border-right: 2px solid currentColor;
|
|
width: 0;
|
|
display: inline-block;
|
|
animation:
|
|
typing 4.5s steps(13, end) infinite,
|
|
blink 0.75s step-end infinite;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.links a {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
a.disabled {
|
|
pointer-events: none;
|
|
color: #666;
|
|
} |