layout.css (6817B)
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 @font-face { 52 font-family: "JetBrains Mono"; 53 src: url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.18/files/jetbrains-mono-latin-400-normal.woff2") 54 format("woff2"); 55 font-weight: 400; 56 } 57 58 body { 59 background: var(--bg); 60 color: var(--fg); 61 font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace; 62 font-size: var(--fs-14); 63 line-height: 1.5; 64 min-height: 100vh; 65 overflow: hidden; 66 } 67 68 * { 69 scrollbar-width: auto; 70 scrollbar-color: var(--accent-dim) var(--bg-alt); 71 } 72 73 *::-webkit-scrollbar { 74 width: 12px; 75 height: 12px; 76 } 77 78 *::-webkit-scrollbar-track { 79 background: var(--bg-alt); 80 border-left: 1px solid var(--border); 81 border-right: 1px solid var(--border); 82 } 83 84 *::-webkit-scrollbar-track:horizontal { 85 background: var(--bg-alt); 86 border-top: 1px solid var(--border); 87 border-bottom: 1px solid var(--border); 88 } 89 90 *::-webkit-scrollbar-thumb { 91 background: var(--accent-dim); 92 border-radius: 0; 93 border: 1px solid var(--accent); 94 box-shadow: inset 0 0 0 1px var(--bg-alt); 95 min-height: 28px; 96 } 97 98 *::-webkit-scrollbar-thumb:hover { 99 background: var(--accent); 100 } 101 102 *::-webkit-scrollbar-thumb:active { 103 background: var(--yellow); 104 } 105 106 *::-webkit-scrollbar-corner { 107 background: var(--bg-alt); 108 } 109 110 a { 111 color: var(--light-blue); 112 text-decoration: none; 113 } 114 115 a:hover { 116 opacity: 0.8; 117 } 118 119 .color-dim { 120 color: var(--fg-dim); 121 } 122 123 #app { 124 display: flex; 125 flex-direction: column; 126 height: 100vh; 127 opacity: 0; 128 } 129 130 #app.ready { 131 opacity: 1; 132 } 133 134 #content { 135 flex: 1; 136 overflow: hidden; 137 } 138 139 .page { 140 display: flex; 141 height: 100%; 142 } 143 144 .tag { 145 border: none; 146 padding: 2px 8px; 147 font-size: var(--fs-12); 148 color: var(--bg); 149 background: var(--fg-dim); 150 } 151 152 .tag.lang-zig { 153 background: #f7a41d; 154 } 155 156 .tag.lang-rust { 157 background: #dea584; 158 } 159 160 .tag.lang-c { 161 background: #a8b1c2; 162 } 163 164 .tag.lang-go { 165 background: #00add8; 166 } 167 168 .tag.lang-ts { 169 background: #3178c6; 170 color: #fff; 171 } 172 173 .tag.lang-python { 174 background: #f4c542; 175 color: #0d0d0d; 176 } 177 178 .tag.tool-zed { 179 background: #084ccf; 180 color: #fff; 181 } 182 183 .tag.tool-neovim { 184 background: #57a143; 185 } 186 187 .tag.tool-opencode { 188 background: #af5faf; 189 color: #fff; 190 } 191 192 .tag.tool-linux { 193 background: #f7c94c; 194 } 195 196 .tag.tool-fish { 197 background: #d78700; 198 } 199 200 .tag.tool-ghostty { 201 background: #8b5cf6; 202 color: #fff; 203 } 204 205 .tag.interest-lowlevel { 206 background: #d75f5f; 207 color: #fff; 208 } 209 210 .tag.interest-tui { 211 background: #5faf5f; 212 color: #0d0d0d; 213 } 214 215 .tag.interest-embedded { 216 background: #5fafaf; 217 color: #0d0d0d; 218 } 219 220 .tag.interest-unix { 221 background: #d7af5f; 222 color: #0d0d0d; 223 } 224 225 .tag.tech-temporal { 226 background: #4c35c9; 227 color: #fff; 228 } 229 230 .tag.tech-postgres { 231 background: #336791; 232 color: #fff; 233 } 234 235 .tag.tech-pytorch { 236 background: #ee4c2c; 237 color: #fff; 238 } 239 240 .tag.tech-cuda { 241 background: #76b900; 242 } 243 244 .tag.tech-docker { 245 background: #2496ed; 246 color: #fff; 247 } 248 249 .tag.tech-kafka { 250 background: #4c35c9; 251 color: #fff; 252 } 253 254 .tag.tech-rn { 255 background: #61dafb; 256 } 257 258 .tag.tech-supabase { 259 background: #3ecf8e; 260 } 261 262 .tag.tech-rest { 263 background: #6b8e23; 264 } 265 266 #boot-overlay { 267 position: fixed; 268 top: 0; 269 left: 0; 270 width: 100vw; 271 height: 100vh; 272 background: var(--bg); 273 z-index: 9999; 274 display: flex; 275 align-items: center; 276 justify-content: center; 277 overflow: hidden; 278 } 279 280 #boot-overlay.fade-out { 281 animation: bootFadeOut 0.3s ease-out forwards; 282 } 283 284 .boot-terminal { 285 text-align: center; 286 } 287 288 .boot-text { 289 display: flex; 290 flex-direction: column; 291 gap: 8px; 292 } 293 294 .boot-title { 295 font-family: "JetBrains Mono", "SF Mono", monospace; 296 font-size: var(--fs-32); 297 font-weight: 600; 298 color: var(--accent); 299 letter-spacing: -0.5px; 300 } 301 302 .boot-subtitle { 303 font-family: "JetBrains Mono", "SF Mono", monospace; 304 font-size: var(--fs-14); 305 color: var(--fg-dim); 306 letter-spacing: 0.5px; 307 } 308 309 @keyframes bootFadeOut { 310 0% { 311 opacity: 1; 312 } 313 314 100% { 315 opacity: 0; 316 } 317 } 318 319 #app.boot-reveal { 320 animation: revealContent 0.5s ease-out; 321 } 322 323 @keyframes revealContent { 324 0% { 325 opacity: 0; 326 transform: translateY(15px); 327 } 328 329 100% { 330 opacity: 1; 331 transform: translateY(0); 332 } 333 } 334 335 #help-overlay { 336 position: fixed; 337 top: 0; 338 left: 0; 339 width: 100vw; 340 height: 100vh; 341 background: rgba(0, 0, 0, 0.8); 342 z-index: 9998; 343 display: flex; 344 align-items: center; 345 justify-content: center; 346 opacity: 0; 347 visibility: hidden; 348 transition: opacity 0.2s, visibility 0.2s; 349 } 350 351 #help-overlay.visible { 352 opacity: 1; 353 visibility: visible; 354 } 355 356 .help-modal { 357 background: var(--bg); 358 border: 1px solid var(--border); 359 padding: 20px 24px; 360 min-width: 280px; 361 max-width: 90vw; 362 } 363 364 .help-header { 365 display: flex; 366 justify-content: space-between; 367 align-items: center; 368 margin-bottom: 16px; 369 padding-bottom: 12px; 370 border-bottom: 1px solid var(--border); 371 } 372 373 .help-title { 374 color: var(--accent); 375 font-weight: 600; 376 } 377 378 .help-close { 379 color: var(--fg-dim); 380 font-size: var(--fs-11); 381 } 382 383 .help-content { 384 display: flex; 385 flex-direction: column; 386 gap: 8px; 387 } 388 389 .help-row { 390 display: flex; 391 justify-content: space-between; 392 align-items: center; 393 gap: 24px; 394 } 395 396 .help-key { 397 color: var(--cyan); 398 font-family: "JetBrains Mono", monospace; 399 font-size: var(--fs-12); 400 min-width: 60px; 401 } 402 403 .help-desc { 404 color: var(--fg); 405 font-size: var(--fs-13); 406 } 407 408 @media (max-width: 768px) { 409 body { 410 font-size: var(--fs-13); 411 overflow-y: auto; 412 } 413 414 #app { 415 min-height: 100vh; 416 height: auto; 417 } 418 419 #content { 420 overflow: visible; 421 } 422 423 .page { 424 height: auto; 425 min-height: 100vh; 426 } 427 428 .boot-title { 429 font-size: var(--fs-24); 430 } 431 432 .boot-subtitle { 433 font-size: var(--fs-12); 434 } 435 436 .help-modal { 437 padding: 16px 20px; 438 min-width: 260px; 439 } 440 }