static/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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
@font-face {
font-family: IBM_Plex;
src: url("/static/fonts/IBM_Plex/IBMPlexSans-VariableFont_wdth\,wght.ttf");
font-weight: 400;
}
@font-face {
font-family: redaction-10;
src: url("/static/fonts/redaction/webfonts/Redaction_10-Bold.woff2");
}
@font-face {
font-family: redaction-20;
src: url("/static/fonts/redaction/webfonts/Redaction_20-Bold.woff2");
}
@font-face {
font-family: redaction-35;
src: url("/static/fonts/redaction/webfonts/Redaction_35-Bold.woff2");
}
@font-face {
font-family: redaction-50;
src: url("/static/fonts/redaction/webfonts/Redaction_50-Bold.woff2");
}
@font-face {
font-family: redaction-70;
src: url("/static/fonts/redaction/webfonts/Redaction_70-Bold.woff2");
}
@font-face {
font-family: redaction-100;
src: url("/static/fonts/redaction/webfonts/Redaction_100-Bold.woff2");
}
:root {
--c-bg: #08080a;
--c-fg: #e6e1f2;
--c-link: #d7ffea;
--c-link-glow: #53f49e;
--f-text: "IBM_Plex", sans-serif;
}
html {
font-family: var(--f-text);
color: var(--c-fg);
background-color: var(--c-bg);
font-size: 1.4rem;
padding-bottom: 10rem;
}
body {
max-width: 60dvw;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
}
footer {
margin-top: 5rem;
text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1rem;
margin-bottom: 0.5rem;
a {
text-decoration: none;
&:visited {
color: var(--c-link);
}
}
}
a, .title, .bunt {
color: var(--c-link);
text-shadow: 0 0 5px var(--c-link-glow);
}
a:hover {
color: var(--c-link-glow);
}
.title {
animation: redact 1s infinite;
animation-direction: alternate;
animation-timing-function: linear;
font-size: 6rem;
margin-top: 1em;
}
.glow {
text-shadow: 0 0 50px var(--c-link-glow) !important;
}
@keyframes redact {
0% { font-family: "redaction-10"; }
20% { font-family: "redaction-20"; }
40% { font-family: "redaction-35"; }
60% { font-family: "redaction-50"; }
80% { font-family: "redaction-70"; }
100% { font-family: "redaction-100"; }
}
|