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 112 113 114 115 116 117 118 119 120 121 122 123 |
@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: #10101a;
--c-fg: #e6e1f2;
--c-link: #ead8fe;
--c-link-glow: #a153f4;
--c-link-hover: #8be9fd;
--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 10px var(--c-link-glow);
}
a:hover {
color: var(--c-link-glow);
}
#title {
animation: redact 1.5s infinite;
animation-direction: alternate;
animation-timing-function: linear;
font-size: 3rem;
}
#title {
display: flex;
align-items: center;
margin-top: 1em;
margin-bottom: 0.5em;
h1 {
margin: 0;
padding: 0;
}
img {
width: 5rem;
}
}
@keyframes redact {
0% { font-family: "redaction-10"; }
20% { font-family: "redaction-20"; }
35% { font-family: "redaction-35"; }
50% { font-family: "redaction-50"; }
70% { font-family: "redaction-70"; }
100% { font-family: "redaction-100"; }
}
|