layout.css (7434B)
1 * { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 } 6 7 :root { 8 --bg: #0d0d0d; 9 --bg-alt: #161616; 10 --fg: #c0c0c0; 11 --fg-dim: #606060; 12 --accent: #d7af5f; 13 --accent-dim: #a68a3d; 14 --cyan: #5fafaf; 15 --blue: #5f87d7; 16 --light-blue: #5fafff; 17 --yellow: #d7af5f; 18 --magenta: #af5faf; 19 --red: #d75f5f; 20 --green: #5faf5f; 21 --border: #333; 22 --selection: #3d3520; 23 24 --type-1: clamp(9px, 0.24vw + 8px, 11px); 25 --type-2: clamp(10px, 0.28vw + 8.8px, 12px); 26 --type-3: clamp(11px, 0.32vw + 9.6px, 13px); 27 --type-4: clamp(12px, 0.36vw + 10.4px, 14px); 28 --type-5: clamp(13px, 0.45vw + 11.4px, 16px); 29 --type-6: clamp(14px, 0.5vw + 11.8px, 17px); 30 --type-7: clamp(16px, 0.75vw + 13.6px, 22px); 31 --type-8: clamp(22px, 1.4vw + 16px, 32px); 32 33 --fs-8: var(--type-1); 34 --fs-9: var(--type-1); 35 --fs-10: var(--type-1); 36 --fs-11: var(--type-1); 37 --fs-12: var(--type-2); 38 --fs-13: var(--type-3); 39 --fs-14: var(--type-4); 40 --fs-15: var(--type-5); 41 --fs-16: var(--type-5); 42 --fs-17: var(--type-6); 43 --fs-19: var(--type-6); 44 --fs-20: var(--type-7); 45 --fs-22: var(--type-7); 46 --fs-24: var(--type-7); 47 --fs-28: var(--type-8); 48 --fs-32: var(--type-8); 49 } 50 51 /* 52 * Real 400 and 700 faces so bold text never gets synthesized (synthetic bold 53 * widens glyphs in Firefox and knocks text off the monospace grid). The 54 * fontsource "latin" subset has no box-drawing/arrow glyphs (tree's ├── │), 55 * so those ranges come from the full upstream webfont; the browser only 56 * fetches it when such a glyph is actually on the page. 57 */ 58 @font-face { 59 font-family: "JetBrains Mono"; 60 src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.18/files/jetbrains-mono-latin-400-normal.woff2") 61 format("woff2"); 62 font-weight: 400; 63 font-style: normal; 64 font-display: swap; 65 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 66 } 67 68 @font-face { 69 font-family: "JetBrains Mono"; 70 src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.18/files/jetbrains-mono-latin-700-normal.woff2") 71 format("woff2"); 72 font-weight: 700; 73 font-style: normal; 74 font-display: swap; 75 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 76 } 77 78 @font-face { 79 font-family: "JetBrains Mono"; 80 src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-Regular.woff2") 81 format("woff2"); 82 font-weight: 400; 83 font-style: normal; 84 font-display: swap; 85 unicode-range: U+2190-21FF, U+2500-25FF; 86 } 87 88 @font-face { 89 font-family: "JetBrains Mono"; 90 src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@v2.304/fonts/webfonts/JetBrainsMono-Bold.woff2") 91 format("woff2"); 92 font-weight: 700; 93 font-style: normal; 94 font-display: swap; 95 unicode-range: U+2190-21FF, U+2500-25FF; 96 } 97 98 body { 99 background: var(--bg); 100 color: var(--fg); 101 font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace; 102 font-size: var(--fs-14); 103 line-height: 1.5; 104 min-height: 100vh; 105 overflow: hidden; 106 /* strict monospace grid: no ligatures/contextual alternates, no faux bold */ 107 font-variant-ligatures: none; 108 font-feature-settings: "liga" 0, "calt" 0; 109 font-synthesis: none; 110 letter-spacing: 0; 111 tab-size: 8; 112 } 113 114 * { 115 scrollbar-width: auto; 116 scrollbar-color: var(--accent-dim) var(--bg-alt); 117 } 118 119 *::-webkit-scrollbar { 120 width: 12px; 121 height: 12px; 122 } 123 124 *::-webkit-scrollbar-track { 125 background: var(--bg-alt); 126 border-left: 1px solid var(--border); 127 border-right: 1px solid var(--border); 128 } 129 130 *::-webkit-scrollbar-track:horizontal { 131 background: var(--bg-alt); 132 border-top: 1px solid var(--border); 133 border-bottom: 1px solid var(--border); 134 } 135 136 *::-webkit-scrollbar-thumb { 137 background: var(--accent-dim); 138 border-radius: 0; 139 border: 1px solid var(--accent); 140 box-shadow: inset 0 0 0 1px var(--bg-alt); 141 min-height: 28px; 142 } 143 144 *::-webkit-scrollbar-thumb:hover { 145 background: var(--accent); 146 } 147 148 *::-webkit-scrollbar-thumb:active { 149 background: var(--yellow); 150 } 151 152 *::-webkit-scrollbar-corner { 153 background: var(--bg-alt); 154 } 155 156 a { 157 color: var(--light-blue); 158 text-decoration: none; 159 } 160 161 a:hover { 162 opacity: 0.8; 163 } 164 165 .color-dim { 166 color: var(--fg-dim); 167 } 168 169 #app { 170 display: flex; 171 flex-direction: column; 172 height: 100vh; 173 opacity: 0; 174 } 175 176 #app.ready { 177 opacity: 1; 178 } 179 180 #content { 181 flex: 1; 182 overflow: hidden; 183 } 184 185 .page { 186 display: flex; 187 height: 100%; 188 } 189 190 .tag { 191 border: none; 192 padding: 2px 8px; 193 font-size: var(--fs-12); 194 color: var(--bg); 195 background: var(--fg-dim); 196 } 197 198 #boot-overlay { 199 position: fixed; 200 top: 0; 201 left: 0; 202 width: 100vw; 203 height: 100vh; 204 background: var(--bg); 205 z-index: 9999; 206 display: flex; 207 align-items: center; 208 justify-content: center; 209 overflow: hidden; 210 } 211 212 #boot-overlay.fade-out { 213 animation: bootFadeOut 0.3s ease-out forwards; 214 } 215 216 .boot-terminal { 217 text-align: center; 218 } 219 220 .boot-text { 221 display: flex; 222 flex-direction: column; 223 gap: 8px; 224 } 225 226 .boot-title { 227 font-family: "JetBrains Mono", "SF Mono", monospace; 228 font-size: var(--fs-32); 229 font-weight: 700; 230 color: var(--accent); 231 } 232 233 .boot-subtitle { 234 font-family: "JetBrains Mono", "SF Mono", monospace; 235 font-size: var(--fs-14); 236 color: var(--fg-dim); 237 } 238 239 @keyframes bootFadeOut { 240 0% { 241 opacity: 1; 242 } 243 244 100% { 245 opacity: 0; 246 } 247 } 248 249 #help-overlay { 250 position: fixed; 251 top: 0; 252 left: 0; 253 width: 100vw; 254 height: 100vh; 255 background: rgba(13, 13, 13, 0.85); /* --bg */ 256 z-index: 9998; 257 display: flex; 258 align-items: center; 259 justify-content: center; 260 opacity: 0; 261 visibility: hidden; 262 transition: opacity 0.2s, visibility 0.2s; 263 } 264 265 #help-overlay.visible { 266 opacity: 1; 267 visibility: visible; 268 } 269 270 /* the site palette, like the TUI help panel: an accent-bordered box on the 271 bar background, accent title and keys, plain descriptions */ 272 .help-modal { 273 background: var(--bg-alt); 274 color: var(--fg); 275 border: 1px solid var(--accent); 276 padding: 20px 24px; 277 min-width: 280px; 278 max-width: 90vw; 279 } 280 281 .help-header { 282 display: flex; 283 justify-content: space-between; 284 align-items: center; 285 margin-bottom: 16px; 286 padding-bottom: 12px; 287 border-bottom: 1px solid var(--border); 288 } 289 290 .help-title { 291 color: var(--accent); 292 font-weight: 700; 293 } 294 295 .help-close { 296 color: var(--fg-dim); 297 font-size: var(--fs-11); 298 } 299 300 .help-content { 301 display: flex; 302 flex-direction: column; 303 gap: 8px; 304 } 305 306 .help-row { 307 display: flex; 308 justify-content: space-between; 309 align-items: center; 310 gap: 24px; 311 } 312 313 .help-key { 314 color: var(--accent); 315 font-weight: 700; 316 font-size: var(--fs-12); 317 min-width: 60px; 318 } 319 320 .help-desc { 321 color: var(--fg); 322 font-size: var(--fs-13); 323 } 324 325 @media (max-width: 768px) { 326 body { 327 font-size: var(--fs-13); 328 overflow-y: auto; 329 } 330 331 #app { 332 min-height: 100vh; 333 height: auto; 334 } 335 336 #content { 337 overflow: visible; 338 } 339 340 .page { 341 height: auto; 342 min-height: 100vh; 343 } 344 345 .boot-title { 346 font-size: var(--fs-24); 347 } 348 349 .boot-subtitle { 350 font-size: var(--fs-12); 351 } 352 353 .help-modal { 354 padding: 16px 20px; 355 min-width: 260px; 356 } 357 } 358 359 /* line-by-line reveal on tab switch */ 360 .line-in { 361 animation: lineIn 0s steps(1) both; 362 animation-delay: calc(var(--line) * var(--line-ms)); 363 } 364 @keyframes lineIn { from { visibility: hidden; } }