tui.css (16693B)
1 /* ===== hugo-theme-tui — base styles ===== 2 Box-drawn frame around the page, lazygit-style row selection, 3 restrained Nord palette. */ 4 5 .tui { 6 --bg: var(--base00); 7 --panel: var(--base01); 8 --panel-2: var(--base02); 9 --fg: var(--base05); 10 --fg-bright: var(--base07); 11 --muted: var(--base04); 12 --rule: var(--base02); 13 --rule-bright: var(--base03); 14 --link: var(--base09); 15 --accent: var(--base08); 16 --hl: var(--base0D); 17 --tag: var(--base0C); 18 --green: var(--base0E); 19 20 background: var(--bg); 21 color: var(--fg); 22 font-size: 14px; 23 line-height: 1.65; 24 min-height: 100%; 25 padding: 28px 28px; 26 display: flex; 27 flex-direction: column; 28 29 /* Cap width on large displays so the frame doesn't stretch edge-to-edge. 30 Expressed in rem so it scales with the user's root font size. */ 31 max-width: 64rem; 32 margin: 0 auto; 33 } 34 35 /* Hover decorations ease in over ~90ms — fast enough to feel native, slow 36 enough to not slam like a static screenshot flipping frames. Scoped to 37 the things that actually change on hover (color/background/border). 38 Animations stay off (no spinners etc). */ 39 .tui nav.site a, 40 .tui ul.bullets li, 41 .tui ul.bullets a, 42 .tui .bullets-wrap a, 43 .tui .qf .qf-row, 44 .tui .qf .qf-row .title-cell a, 45 .tui .proj-list li, 46 .tui .proj-list .body a, 47 .tui .socials a, 48 .tui .socials a .ico, 49 .tui .socials a .lbl .k, 50 .tui article.post a, 51 .tui .toc-vertical .toc-row a, 52 .tui .toc-vertical .toc-subitem a, 53 .tui #TableOfContents a, 54 .tui footer.plain a, 55 .tui .brand .brand-link, 56 .tui .brand .brand-link .user, 57 .tui .brand .brand-link .host { 58 transition: color 90ms ease-out, background-color 90ms ease-out, border-color 90ms ease-out; 59 } 60 61 .tui .frame { 62 border: 1px solid var(--rule-bright); 63 position: relative; 64 padding: 30px 36px 18px; 65 display: flex; 66 flex-direction: column; 67 } 68 /* corner-anchored title strip — looks like ╭─ whoami.md ─╮ */ 69 .tui .frame::before { 70 content: attr(data-title); 71 position: absolute; 72 top: -0.7em; 73 left: 18px; 74 background: var(--bg); 75 padding: 0 10px; 76 color: var(--accent); 77 font-size: 11px; 78 font-weight: 600; 79 letter-spacing: 0.04em; 80 } 81 /* right-side meta strip */ 82 .tui .frame::after { 83 content: attr(data-meta); 84 position: absolute; 85 top: -0.7em; 86 right: 18px; 87 background: var(--bg); 88 padding: 0 10px; 89 color: var(--muted); 90 font-size: 11px; 91 letter-spacing: 0.04em; 92 } 93 94 .tui .wrap { 95 max-width: 50rem; 96 margin: 0 auto; 97 width: 100%; 98 flex: 1; 99 } 100 101 /* Header — bracketed tabs (kept from V4) */ 102 .tui header.site { 103 display: flex; 104 align-items: baseline; 105 justify-content: space-between; 106 margin-bottom: 22px; 107 gap: 24px; 108 font-size: 13px; 109 padding-bottom: 12px; 110 border-bottom: 1px solid var(--rule); 111 } 112 .tui .brand { 113 font-weight: 700; 114 color: var(--fg); 115 } 116 .tui .brand .user { color: var(--hl); } 117 .tui .brand .at { color: var(--muted); } 118 .tui .brand .host { color: var(--green); } 119 .tui .brand .path { color: var(--muted); } 120 121 /* The `user@host` brand string is a link back to the home page. Keep the 122 per-span colors at rest; on hover, the whole link turns bright (white). */ 123 .tui .brand .brand-link { 124 color: inherit; 125 text-decoration: none; 126 cursor: pointer; 127 } 128 .tui .brand .brand-link:hover .user, 129 .tui .brand .brand-link:hover .host { color: var(--fg-bright); } 130 131 .tui nav.site { display: flex; gap: 14px; font-size: 13px; } 132 .tui nav.site a { 133 text-decoration: none; 134 color: var(--muted); 135 padding: 0 2px; 136 } 137 .tui nav.site a:hover { color: var(--fg-bright); } 138 .tui nav.site a.is-active { color: var(--hl); font-weight: 700; } 139 .tui nav.site a.is-active::before { content: "["; color: var(--accent); margin-right: 1px; font-weight: 400; } 140 .tui nav.site a.is-active::after { content: "]"; color: var(--accent); margin-left: 1px; font-weight: 400; } 141 142 /* Page title — minimal, no big # */ 143 .tui h1.page-title { 144 font-size: 17px; 145 font-weight: 700; 146 color: var(--fg-bright); 147 margin: 0 0 4px; 148 } 149 .tui .page-sub { 150 color: var(--muted); 151 margin: 0 0 22px; 152 font-size: 12px; 153 } 154 155 /* Section divider — `── label ──` rule */ 156 .tui h2.section { 157 font-size: 11px; 158 text-transform: lowercase; 159 letter-spacing: 0.1em; 160 color: var(--accent); 161 font-weight: 700; 162 margin: 32px 0 16px; 163 display: flex; 164 align-items: center; 165 gap: 12px; 166 } 167 .tui h2.section::before { content: "──"; color: var(--rule-bright); font-weight: 400; } 168 .tui h2.section::after { content: ""; flex: 1; height: 1px; background: var(--rule); } 169 .tui h2.section .count { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: 0; } 170 171 /* Key/value bio rows */ 172 .tui .kv { 173 display: grid; 174 grid-template-columns: 100px 1fr; 175 row-gap: 3px; 176 column-gap: 14px; 177 font-size: 14px; 178 margin: 0 0 30px; 179 } 180 .tui .kv .k { color: var(--accent); font-weight: 700; } 181 .tui .kv .v { color: var(--fg); } 182 .tui .kv .v .name { color: var(--hl); font-weight: 700; } 183 .tui .kv .v .at { color: var(--muted); } 184 .tui .kv .v .host { color: var(--green); font-weight: 700; } 185 .tui .kv .v a { color: var(--link); text-decoration: none; } 186 .tui .kv .v a:hover { color: var(--hl); text-decoration: underline; text-decoration-style: dotted; } 187 .tui .kv .v .sep { color: var(--muted); margin: 0 8px; } 188 189 /* Bullets */ 190 .tui ul.bullets { 191 list-style: none; 192 padding: 0; 193 margin: 0 0 30px; 194 display: flex; 195 flex-direction: column; 196 } 197 .tui ul.bullets li { 198 padding: 4px 10px 4px 22px; 199 position: relative; 200 color: var(--fg); 201 font-size: 14px; 202 border-left: 2px solid transparent; 203 } 204 .tui ul.bullets li::before { 205 content: "·"; 206 position: absolute; 207 left: 10px; top: 4px; 208 color: var(--muted); 209 font-weight: 700; 210 } 211 .tui ul.bullets li:hover { 212 background: var(--panel-soft); 213 border-left-color: var(--accent); 214 } 215 .tui ul.bullets a { color: var(--link); text-decoration: none; } 216 .tui ul.bullets a:hover { color: var(--hl); text-decoration: underline; text-decoration-style: dotted; } 217 .tui ul.bullets strong { color: var(--fg-bright); } 218 219 /* Quickfix-style posts list — lazygit row selection on hover */ 220 .tui .qf { 221 font-size: 13px; 222 font-variant-numeric: tabular-nums; 223 margin: 0; 224 } 225 .tui .qf .qf-row { 226 display: grid; 227 grid-template-columns: 92px 1fr auto; 228 gap: 14px; 229 padding: 9px 14px 9px 12px; 230 align-items: baseline; 231 border-left: 2px solid transparent; 232 cursor: pointer; 233 } 234 .tui .qf .qf-row:hover { 235 background: var(--panel-soft); 236 border-left-color: var(--accent); 237 } 238 .tui .qf .qf-row .date { color: var(--muted); font-size: 12px; } 239 .tui .qf .qf-row .title-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; } 240 .tui .qf .qf-row .title-cell a { color: var(--link); text-decoration: none; font-weight: 700; } 241 .tui .qf .qf-row:hover .title-cell a { color: var(--hl); } 242 .tui .qf .qf-row .title-cell .desc { color: var(--muted); font-size: 12px; line-height: 1.5; } 243 .tui .qf .qf-row .tags { font-size: 10.5px; color: var(--tag); white-space: nowrap; } 244 .tui .qf .qf-row .tags .tag { color: var(--tag); margin-left: 6px; } 245 .tui .qf .qf-row .tags .tag::before { content: "["; color: var(--rule-bright); } 246 .tui .qf .qf-row .tags .tag::after { content: "]"; color: var(--rule-bright); } 247 248 /* Project rows */ 249 .tui .proj-list { 250 margin: 0; padding: 0; list-style: none; 251 display: flex; flex-direction: column; 252 } 253 .tui .proj-list li { 254 display: grid; 255 grid-template-columns: 56px 1fr; 256 gap: 14px; 257 padding: 9px 14px 9px 12px; 258 align-items: baseline; 259 font-size: 13px; 260 border-left: 2px solid transparent; 261 } 262 .tui .proj-list li:hover { 263 background: var(--panel-soft); 264 border-left-color: var(--accent); 265 } 266 .tui .proj-list .lang { color: var(--muted); font-size: 10.5px; text-align: left; } 267 .tui .proj-list .lang::before { content: "["; color: var(--rule-bright); } 268 .tui .proj-list .lang::after { content: "]"; color: var(--rule-bright); } 269 .tui .proj-list .body a { color: var(--link); text-decoration: none; font-weight: 700; } 270 .tui .proj-list li:hover .body a { color: var(--hl); } 271 .tui .proj-list .body .desc { color: var(--muted); font-size: 12px; line-height: 1.5; } 272 273 /* Post article */ 274 .tui article.post { 275 font-size: 14px; 276 line-height: 1.72; 277 } 278 .tui article.post p { margin: 0 0 16px; } 279 .tui article.post h2 { 280 font-size: 14.5px; 281 color: var(--fg-bright); 282 margin: 26px 0 12px; 283 font-weight: 700; 284 display: flex; 285 align-items: center; 286 gap: 10px; 287 } 288 .tui article.post h2::before { content: "▌"; color: var(--accent); font-size: 14px; } 289 .tui article.post h3 { 290 font-size: 13px; 291 color: var(--fg-bright); 292 margin: 22px 0 10px; 293 font-weight: 700; 294 padding-left: 12px; 295 border-left: 2px solid var(--accent); 296 letter-spacing: 0.02em; 297 } 298 .tui article.post a { 299 color: var(--link); 300 text-decoration: none; 301 border-bottom: 1px solid rgba(136, 192, 208, 0.25); 302 } 303 .tui article.post a:hover { color: var(--hl); border-bottom-color: var(--hl); } 304 .tui article.post code { 305 background: var(--panel-2); 306 padding: 2px 6px; 307 color: var(--accent); 308 font-size: 12.5px; 309 border-radius: 2px; 310 } 311 .tui article.post pre { 312 background: var(--panel-2); 313 padding: 14px 16px; 314 margin: 16px 0; 315 overflow: auto; 316 font-size: 12.5px; 317 border-left: 2px solid var(--green); 318 color: var(--fg); 319 line-height: 1.6; 320 } 321 .tui article.post pre code { background: none; padding: 0; color: inherit; border-radius: 0; } 322 .tui article.post blockquote { 323 margin: 16px 0; 324 padding: 8px 18px; 325 border-left: 2px solid var(--tag); 326 color: var(--muted); 327 } 328 329 /* Socials — icon tiles, lazygit/btop style row of compact panels */ 330 .tui .socials { 331 display: grid; 332 grid-template-columns: repeat(3, 1fr); 333 grid-auto-rows: 1fr; 334 align-items: stretch; 335 gap: 8px; 336 margin: 0 0 30px; 337 } 338 .tui .socials a { 339 display: flex; 340 align-items: center; 341 gap: 10px; 342 padding: 10px 12px; 343 border: 1px solid var(--rule); 344 border-left: 2px solid var(--rule); 345 background: var(--bg); 346 text-decoration: none; 347 color: var(--fg); 348 font-size: 13px; 349 } 350 .tui .socials a:hover { 351 background: var(--panel-soft); 352 border-left-color: var(--accent); 353 color: var(--hl); 354 } 355 .tui .socials a .ico { 356 flex: 0 0 16px; 357 width: 16px; height: 16px; 358 color: var(--accent); 359 display: flex; 360 align-items: center; 361 justify-content: center; 362 } 363 .tui .socials a:hover .ico { color: var(--hl); } 364 .tui .socials a .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } 365 .tui .socials a .lbl { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow: hidden; } 366 .tui .socials a .lbl .k { color: var(--accent); font-size: 10.5px; text-transform: lowercase; letter-spacing: 0.06em; font-weight: 700; } 367 .tui .socials a:hover .lbl .k { color: var(--hl); } 368 .tui .socials a .lbl .v { color: var(--fg); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 369 /* Post layout — TOC sits above the article as a compact box */ 370 .tui .post-layout { display: block; } 371 372 .tui .toc { 373 margin: 0 0 22px; 374 padding: 12px 14px; 375 border: 1px solid var(--rule); 376 background: transparent; 377 font-size: 12px; 378 color: var(--muted); 379 } 380 .tui .toc-head { 381 color: var(--accent); 382 font-weight: 700; 383 font-size: 10.5px; 384 letter-spacing: 0.06em; 385 margin-bottom: 8px; 386 text-transform: lowercase; 387 } 388 389 /* Vertical — stacked numbered list, with h3 children branching as a tree */ 390 .tui .toc-vertical .toc-list { 391 list-style: none; 392 padding: 0; 393 margin: 0; 394 display: flex; 395 flex-direction: column; 396 gap: 4px; 397 } 398 .tui .toc-vertical .toc-item { display: block; } 399 .tui .toc-vertical .toc-row { 400 display: flex; 401 align-items: baseline; 402 gap: 10px; 403 line-height: 1.5; 404 } 405 .tui .toc-vertical .num { 406 color: var(--accent); 407 font-size: 11px; 408 font-variant-numeric: tabular-nums; 409 flex-shrink: 0; 410 } 411 .tui .toc-vertical .toc-row a { 412 color: var(--fg); 413 text-decoration: none; 414 font-size: 12.5px; 415 border-bottom: 1px dotted transparent; 416 } 417 .tui .toc-vertical .toc-row:hover a { 418 color: var(--hl); 419 border-bottom-color: var(--accent); 420 } 421 422 /* h3 sub-items: tree branches indented under each h2 */ 423 .tui .toc-vertical .toc-sub { 424 list-style: none; 425 margin: 2px 0 6px; 426 padding: 0 0 0 26px; 427 display: flex; 428 flex-direction: column; 429 gap: 1px; 430 } 431 .tui .toc-vertical .toc-subitem { 432 display: flex; 433 align-items: baseline; 434 line-height: 1.5; 435 } 436 .tui .toc-vertical .branch { 437 color: var(--rule-bright); 438 white-space: pre; 439 user-select: none; 440 font-size: 12px; 441 } 442 .tui .toc-vertical .toc-subitem a { 443 color: var(--muted); 444 text-decoration: none; 445 font-size: 12px; 446 border-bottom: 1px dotted transparent; 447 } 448 .tui .toc-vertical .toc-subitem:hover a { 449 color: var(--hl); 450 border-bottom-color: var(--accent); 451 } 452 453 /* Mobile — tighter padding */ 454 .tui-mobile .tui .toc { margin-bottom: 16px; padding: 8px 10px; } 455 .tui-mobile .tui .toc-vertical .toc-row a { font-size: 11.5px; } 456 .tui-mobile .tui .toc-vertical .toc-subitem a, 457 .tui-mobile .tui .toc-vertical .branch { font-size: 11px; } 458 .tui footer.plain { 459 margin-top: 32px; 460 font-size: 11.5px; 461 color: var(--muted); 462 line-height: 1.7; 463 letter-spacing: 0.02em; 464 } 465 .tui footer.plain .row { display: block; } 466 .tui footer.plain .sep { color: var(--rule-bright); margin: 0 6px; } 467 .tui footer.plain .hash { color: var(--green); } 468 .tui footer.plain a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--rule-bright); } 469 .tui footer.plain a:hover { color: var(--fg); border-bottom-color: var(--fg); } 470 471 @media (max-width: 560px) { 472 .tui footer.plain { font-size: 11px; margin-top: 24px; } 473 } 474 475 /* ===== Real-viewport mobile fallback (when viewing the actual site on a phone) 476 V8 "faithful frame" — keep the frame border + title notch around the whole 477 screen, stack the header (no dashed separator), and ride the Cyrillic motif 478 on the nav's bottom border. Home content sized to fit a 390x844 phone with 479 no scroll; longer pages (posts/projects) scroll normally. ===== */ 480 @media (max-width: 560px) { 481 .tui { 482 padding: 0; 483 min-height: 100%; 484 max-width: none; 485 font-size: 12.5px; 486 } 487 .tui .frame { 488 border: 1px solid var(--rule-bright); 489 margin: 9px; 490 padding: 18px 13px 10px; 491 min-height: calc(100vh - 18px); 492 flex: 1; 493 } 494 /* Title notch — keep, slightly tightened to sit on the narrow border. */ 495 .tui .frame::before { 496 display: block; 497 font-size: 11px; 498 left: 14px; 499 padding: 0 8px; 500 } 501 .tui .frame::after { display: none; } 502 .tui .wrap { max-width: 100%; } 503 504 /* Stacked header — brand line, then nav under a single connecting rule. 505 Border raised to --rule-bright (--base03) so the Cyrillic motif's own line 506 reads as one continuous border running through the dots. */ 507 .tui header.site { 508 flex-direction: column; 509 align-items: stretch; 510 gap: 8px; 511 margin-bottom: 8px; 512 padding-bottom: 7px; 513 border-bottom: 1px solid var(--rule-bright); 514 position: relative; 515 } 516 .tui .brand { font-size: 12px; word-break: break-word; } 517 .tui nav.site { 518 gap: 16px; 519 justify-content: flex-start; 520 font-size: 12.5px; 521 padding-top: 6px; 522 border-top: none; 523 } 524 525 /* Title block (home) */ 526 .tui h1.page-title { font-size: 15px; margin-bottom: 2px; } 527 .tui .page-sub { font-size: 11.5px; line-height: 1.3; margin-bottom: 8px; word-wrap: break-word; } 528 529 /* Sections + bullets — compressed for no-scroll home */ 530 .tui h2.section { font-size: 10.5px; margin: 10px 0 6px; } 531 .tui ul.bullets li, 532 .tui .bullets-wrap ul li { 533 font-size: 11.5px; 534 padding: 1px 4px 1px 18px; 535 line-height: 1.3; 536 } 537 .tui .bullets-wrap p { font-size: 11.5px; line-height: 1.4; margin-bottom: 8px; } 538 539 /* Socials — full-width boxed tiles, one per row, 2px left accent. */ 540 .tui .socials { 541 grid-template-columns: 1fr; 542 gap: 6px; 543 margin-bottom: 14px; 544 } 545 .tui .socials a { 546 border: 1px solid var(--rule); 547 border-left: 2px solid var(--rule-bright); 548 padding: 7px 12px; 549 font-size: 13px; 550 } 551 .tui .socials a .lbl .k { font-size: 10.5px; } 552 .tui .socials a .lbl .v { font-size: 12.5px; } 553 554 /* Longer list pages: stack the columns (these pages scroll). */ 555 .tui .qf .qf-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 8px; } 556 .tui .qf .qf-row .tags { margin-top: 4px; white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; } 557 .tui .qf .qf-row .tags .tag { margin-left: 0; } 558 .tui .proj-list li { grid-template-columns: 44px 1fr; gap: 8px; padding: 10px 8px; font-size: 12.5px; } 559 .tui article.post { font-size: 13px; line-height: 1.7; } 560 .tui article.post pre { padding: 10px; font-size: 11.5px; } 561 .tui footer.site { 562 flex-direction: column; align-items: flex-start; gap: 6px; 563 font-size: 10.5px; padding-top: 10px; margin-top: 18px; 564 } 565 .tui footer.site .kb { padding: 0; border-right: none; } 566 }