style.css (5933B)
1 /* -*- tab-width: 8; indent-tabs-mode: nil; -*- */ 2 3 @font-face { 4 font-family: "JetBrains Mono"; 5 src: url("/static/jetbrains-mono.woff2") format("woff2"); 6 font-style: normal; 7 font-weight: 100 800; 8 font-display: swap; 9 } 10 11 @font-face { 12 font-family: "Iosevka Slab"; 13 src: url("/static/iosevka-slab-regular.woff2") format("woff2"); 14 font-weight: 400; 15 font-style: normal; 16 font-display: swap; 17 } 18 19 @font-face { 20 font-family: "Iosevka Slab"; 21 src: url("/static/iosevka-slab-bold.woff2") format("woff2"); 22 font-weight: 700; 23 font-style: normal; 24 font-display: swap; 25 } 26 27 :root { 28 --bg: #10100E; 29 --fg: #FFFFE6; 30 --line: #30302B; 31 --link: #8AA499; 32 --link-active: #C8899B; 33 --bright-red: #BF281B; 34 --red: #981E13; 35 --off-white: #FAF7F1; 36 --off-black: #0c0c0b; 37 --shadow: transparent; 38 --border-width: 0.25ex; 39 } 40 41 html, body { 42 min-height: 100%; 43 } 44 45 body { 46 display: flex; 47 flex-direction: column; 48 min-height: 100vh; 49 50 font-family: "Jetbrains Mono", monospace; 51 font-size: 135%; 52 max-width: 900px; 53 margin: 0 auto; 54 padding: 0 1em; 55 line-height: 1.6; 56 color: var(--fg); 57 background-color: var(--bg); 58 } 59 60 .site-title { 61 font-family: "Iosevka Slab"; 62 font-size: clamp(1.25em, 5vw, 2em); 63 color: var(--fg); 64 border-bottom: 2px solid var(--fg); 65 } 66 67 .cursor { 68 color: var(--fg); 69 animation: blink 1s steps(1) infinite; 70 } 71 72 @keyframes blink { 73 50% { 74 visibility: hidden; 75 } 76 } 77 78 @media (prefers-reduced-motion: reduce) { 79 .cursor { 80 animation: none; 81 } 82 } 83 84 #site-header { 85 flex-shrink: 0; 86 } 87 88 #site-nav { 89 display: flex; 90 align-items: center; 91 92 font-family: "Iosevka Slab"; 93 font-size: 110%; 94 margin-top: 0.5rem; 95 padding-bottom: 1rem; 96 } 97 98 @media (max-width: 600px) { 99 #site-nav { 100 font-size: 90%; 101 flex-wrap: wrap; 102 gap: 0.25em 0.75em; 103 } 104 } 105 106 #site-nav a { 107 color: var(--link); 108 text-decoration: none; 109 } 110 111 #site-nav a:hover { 112 color: var(--bright-red); 113 } 114 115 #site-nav .bracket { 116 color: var(--fg); 117 } 118 119 .blog-compact ul, .blog-full ul { list-style: none; padding-left: 0; } 120 .blog-compact a:link, .blog-compact a:visited, 121 .blog-full a:link, .blog-full a:visited { text-decoration: none; } 122 123 /* HOME blog index */ 124 .blog-compact li { font-size: 1.2em; display: flex; gap: 1ch; margin-bottom: 0; } 125 .blog-compact .post-date { order: -1; font-size: 1em; } 126 127 /* BLOG index */ 128 .blog-full li { margin-bottom: 1.2em; } 129 .blog-full .entry-title { display: block; font-size: 1.5em; line-height: 1.3; } 130 .blog-full .post-date { display: block; font-size: 0.8em; } 131 .blog-full .post-date::before { content: "posted on "; } 132 133 .theme-toggle { 134 position: absolute; 135 opacity: 0; 136 width: 1px; 137 height: 1px; 138 } 139 140 .theme-label { 141 display: inline-flex; 142 align-items: center; 143 justify-content: center; 144 145 margin-left: auto; 146 147 width: 1.5em; 148 height: 1.5em; 149 150 color: var(--link); 151 cursor: pointer; 152 } 153 154 .theme-label:hover { 155 color: var(--bright-red); 156 } 157 158 .icon { 159 width: 1em; 160 height: 1em; 161 162 fill: none; 163 stroke: currentColor; 164 stroke-width: 2; 165 stroke-linecap: round; 166 stroke-linejoin: round; 167 } 168 169 .icon-moon { 170 display: none; 171 } 172 173 .theme-toggle:checked + .theme-label .icon-sun { 174 display: none; 175 } 176 177 .theme-toggle:checked + .theme-label .icon-moon { 178 display: block; 179 } 180 181 .theme-toggle:focus-visible + .theme-label { 182 outline: 1px dotted var(--fg); 183 outline-offset: 0.2em; 184 } 185 186 body:has(.theme-toggle:checked) { 187 --bg: #FFFFE6; 188 --fg: #10100E; 189 --shadow: #10100E59; 190 } 191 192 .sr { 193 position: absolute; 194 width: 1px; 195 height: 1px; 196 padding: 0; 197 margin: -1px; 198 overflow: hidden; 199 clip: rect(0, 0, 0, 0); 200 white-space: nowrap; 201 border: 0; 202 } 203 204 #content { 205 flex: 1; 206 } 207 208 .title { 209 font-family: "Iosevka Slab"; 210 font-size: 2.8em; 211 margin-top: 0; 212 color: var(--fg); 213 } 214 215 .content h1 { 216 /* border-bottom: 2px solid var(--fg); */ 217 margin: 0; 218 border-bottom: none; 219 } 220 221 .content h2, 222 .content h3, 223 .content h4, 224 .content h5, 225 .content h6 { 226 font-family: "Iosevka Slab"; 227 border-bottom: 1px solid var(--fg); 228 padding-bottom: 0.4ex; 229 } 230 231 .post-date { 232 font-family: "Iosevka Slab"; 233 font-size: 0.90em; 234 color: var(--fg); 235 opacity: 0.75; 236 } 237 238 p.post-date { 239 margin: 0.25em 0 1.5em; 240 } 241 242 #content li { 243 margin-bottom: 0.6em; 244 } 245 246 li .post-date { 247 display: block; 248 } 249 250 a:link, 251 a:visited { 252 color: var(--link); 253 } 254 255 a:hover, 256 a:active { 257 color: var(--bright-red); 258 text-decoration: none; 259 } 260 261 table { 262 border-collapse: collapse; 263 border: var(--border-width) solid var(--fg); 264 box-shadow: 4px 4px 6px var(--shadow); 265 } 266 267 th { 268 color: var(--fg); 269 background-color: var(--bg); 270 border: 1px solid var(--fg); 271 padding: 0.25em; 272 } 273 274 td { 275 border: 1px solid var(--fg); 276 padding: 0.25em; 277 } 278 279 pre { 280 font-family: "Iosevka Slab"; 281 overflow: auto; 282 scrollbar-color: var(--line) var(--bg); 283 scrollbar-width: thin; 284 border: var(--border-width) solid var(--fg); 285 box-shadow: 4px 4px 6px var(--shadow); 286 padding: 1em; 287 } 288 289 pre, 290 code { font-family: "Iosevka Slab"; } 291 292 .todo { font-family: "Iosevka Slab"; color: var(--bright-red); } 293 .done { font-family: "Iosevka Slab"; color: var(--link); } 294 295 .underline { text-decoration: underline; } 296 297 footer { 298 margin-top: auto; 299 font-size: 90%; 300 line-height: 1.5em; 301 } 302 303 .cc-icons { 304 display: inline-flex; 305 gap: 0.12em; 306 vertical-align: center; 307 margin-right: 0; 308 } 309 310 .cc-icon { 311 display: inline-block; 312 width: 1.1em; 313 height: 1.1em; 314 background-color: var(--fg); 315 -webkit-mask-repeat: no-repeat; 316 mask-repeat: no-repeat; 317 -webkit-mask-position: center; 318 mask-position: center; 319 -webkit-mask-size: contain; 320 mask-size: contain; 321 } 322 323 .cc-icon.cc { 324 -webkit-mask-image: url("/static/cc.svg"); 325 mask-image: url("/static/cc.svg"); 326 } 327 328 .cc-icon.by { 329 -webkit-mask-image: url("/static/by.svg"); 330 mask-image: url("/static/by.svg"); 331 }