/* * Stylesheet:Terminal aesthetic,content-first design. * * Structure:CSS Variables → Base Reset → Typography → Links → Layout → Components * * Design philosophy:Content>decoration. System fonts only (0KB downloads). * Line width constrained to 65ch for optimal readability. * Dark mode via prefers-color-scheme with manual override support. */ /* ========================================================================== CSS Variables ========================================================================== */:root{--bg:#fff;--fg:#000;--fg-muted:#666;--border:#ddd;--code-bg:#f5f5f5;color-scheme:light dark}@media (prefers-color-scheme:dark){:root:not(.light){--bg:#0a0a0a;--fg:#e0e0e0;--fg-muted:#888;--border:#333;--code-bg:#1a1a1a;color-scheme:dark}}html.dark{--bg:#0a0a0a;--fg:#e0e0e0;--fg-muted:#888;--border:#333;--code-bg:#1a1a1a;color-scheme:dark}/* ========================================================================== Base Reset ========================================================================== */ *,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}/* ========================================================================== HTML & Body ========================================================================== */ html{background-color:var(--bg);overflow-x:hidden;overflow-y:scroll;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:ui-monospace,"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;font-size:15px;color:var(--fg);line-height:1.6;min-height:100vh;max-width:65ch;margin:0 auto;padding:2rem 1.5rem}/* ========================================================================== Typography ========================================================================== */ h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:600}h1{font-weight:700;font-size:1.75em;margin-top:0;margin-bottom:0.75em;line-height:1.2}h2{font-weight:600;font-size:1.35em;margin-top:1.75em;margin-bottom:0.75em;line-height:1.3}h3{font-weight:600;font-size:1.1em;margin-top:1.5em;margin-bottom:0.5em;color:var(--fg-muted)}h4{font-weight:600;margin-top:1.25em;margin-bottom:0.5em}p{margin-top:1em;margin-bottom:1em}h2+p,h3+p,h4+p{margin-top:0}/* ========================================================================== Links ========================================================================== */ a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}article a,main p a,main li a{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}article a:hover,main p a:hover,main li a:hover{text-decoration-color:var(--fg)}a:focus-visible{outline:1px solid var(--fg);outline-offset:2px}/* ========================================================================== Header & Navigation ========================================================================== */ header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;margin-bottom:4rem;padding:0.5rem 0}header h1{font-size:1rem;font-weight:600;margin:0}header h1 a{color:var(--fg)}header h1 a:hover{text-decoration:none}nav{display:flex;justify-content:flex-end;align-items:center;gap:1.2rem;font-size:0.9rem}nav a{color:var(--fg-muted);display:inline-flex;align-items:center;gap:0.3rem}nav a:hover{color:var(--fg);text-decoration:none}nav .nav-icon{display:none}nav .nav-text{display:inline}.theme-toggle{background:none;border:none;cursor:pointer;padding:0.25rem;color:var(--fg-muted);display:flex;align-items:center;justify-content:center}.theme-toggle:hover{color:var(--fg)}.theme-toggle svg{width:1.2em;height:1.2em}html:not(.dark) .theme-toggle .moon{display:none}html.dark .theme-toggle .sun{display:none}/* ========================================================================== Main Content ========================================================================== */ main{min-height:60vh}article{margin-bottom:2rem}article>*:first-child{margin-top:0}article>*:last-child{margin-bottom:0}/* ========================================================================== Horizontal Rule ========================================================================== */ hr{border:none;border-top:1px solid var(--border);margin:3em 0}/* ========================================================================== Lists ========================================================================== */ ul,ol{margin-top:1em;margin-bottom:1em;padding-left:1.5em}li{margin-top:0.25em;margin-bottom:0.25em}ul ul,ul ol,ol ul,ol ol{margin-top:0.25em;margin-bottom:0.25em}/* ========================================================================== Definition Lists ========================================================================== */ dl{margin:1.5em 0}dt{font-weight:600;margin-top:1.5em;margin-bottom:0.25em}dt:first-child{margin-top:0}dd{margin-left:0;margin-bottom:1em;color:var(--fg-muted);line-height:1.6}dd:last-child{margin-bottom:0}/* ========================================================================== Blockquotes ========================================================================== */ blockquote{font-style:italic;color:var(--fg-muted);border-left:2px solid var(--border);margin:1.5em 0;padding-left:1em}/* ========================================================================== Code ========================================================================== */ code{font-family:inherit;font-size:0.95em;background-color:var(--code-bg);padding:0.15em 0.3em}pre{background-color:var(--code-bg);border:1px solid var(--border);overflow-x:auto;font-size:0.9em;line-height:1.5;margin:1.5em 0;padding:1em}pre code{background-color:transparent;padding:0}/* ========================================================================== Tables ========================================================================== */ table{width:100%;table-layout:auto;text-align:left;margin:2em 0;font-size:0.875em;line-height:1.7}thead{color:var(--fg);font-weight:600;border-bottom:1px solid var(--border)}thead th{vertical-align:bottom;padding:0 0.5em 0.5em}thead th:first-child{padding-left:0}tbody tr{border-bottom:1px solid var(--border)}tbody tr:last-child{border-bottom:none}tbody td{vertical-align:top;padding:0.5em}tbody td:first-child{padding-left:0}/* ========================================================================== Images & Media ========================================================================== */ img{max-width:100%;height:auto;display:block;margin:1.5em 0}figure{margin:2em 0}figure>*{margin:0}figcaption{color:var(--fg-muted);font-size:0.875em;line-height:1.4;margin-top:0.85em}/* ========================================================================== Footer ========================================================================== */ footer{margin-top:5rem;padding-top:2rem;text-align:center;font-size:0.875rem;color:var(--fg-muted)}footer a{color:inherit}/* ========================================================================== Content Lists (Notes,Essays,Projects) ========================================================================== */ .content-list{list-style:none;padding-left:0;margin:1.5em 0}.content-list li{padding:0.5em 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem}.content-list li:last-child{border-bottom:none}.content-list li:hover{background:var(--code-bg)}.content-list a{text-decoration:none}.content-list a:hover{text-decoration:underline}.content-list .muted,.content-list time{font-size:0.85em;color:var(--fg-muted);white-space:nowrap;opacity:1}/* ========================================================================== Slide Enter Animation ========================================================================== */ @keyframes slide-enter{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion:no-preference){.slide-enter-content>*{--enter-stage:0;--enter-step:90ms;--enter-initial:0ms;animation:slide-enter 1s both 1;animation-delay:calc(var(--enter-initial)+var(--enter-stage) * var(--enter-step))}.slide-enter-content>*:nth-child(1){--enter-stage:1}.slide-enter-content>*:nth-child(2){--enter-stage:2}.slide-enter-content>*:nth-child(3){--enter-stage:3}.slide-enter-content>*:nth-child(4){--enter-stage:4}.slide-enter-content>*:nth-child(5){--enter-stage:5}.slide-enter-content>*:nth-child(6){--enter-stage:6}.slide-enter-content>*:nth-child(n+7){--enter-stage:7}}/* ========================================================================== Scroll to Top Button ========================================================================== */ .scroll-top{position:fixed;right:1rem;bottom:1rem;width:2rem;height:2rem;background:var(--bg);border:1px solid var(--border);cursor:pointer;color:var(--fg-muted);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.scroll-top:hover{color:var(--fg);border-color:var(--fg)}.scroll-top.visible{opacity:1;pointer-events:auto}.scroll-top svg{width:1.25em;height:1.25em}/* ========================================================================== Utility Classes ========================================================================== */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.op50{opacity:0.5}.op75{opacity:0.75}.mt-0{margin-top:0}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}/* ========================================================================== Year Headers (watermark style) ========================================================================== */ .year-section{position:relative;margin-top:3rem}.year-section:first-of-type{margin-top:0}.year-header{position:relative;pointer-events:none;height:5rem;margin-bottom:-2rem}.year-header span{position:absolute;left:-1rem;top:0;font-size:6rem;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--border);opacity:0.3;line-height:1;-webkit-user-select:none;user-select:none}@media (max-width:640px){.year-header span{font-size:4rem;left:0}}/* ========================================================================== Media/Book List ========================================================================== */ .media-list{list-style:none;padding:0;margin:0}.media-item{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:0.75rem 0;border-bottom:1px solid var(--border);align-items:baseline}.media-item:last-child{border-bottom:none}.media-item:hover{background:var(--code-bg)}.media-item::before{display:none}.media-title{font-weight:500}.media-author{color:var(--fg-muted);font-size:0.9em}.media-note{color:var(--fg-muted);font-size:0.85em;font-style:italic;grid-column:1 / -1;margin-top:0.25rem}/* ========================================================================== Tags [book] [article] [podcast] ========================================================================== */ .tag{font-size:0.85em;color:var(--fg-muted)}.content-list .tag{margin-right:0.5em}.content-list .tag:last-child{margin-right:0}.category-nav{margin-bottom:1.5em;color:var(--fg-muted)}.category-nav a{color:var(--fg-muted);text-decoration:none}.category-nav a:hover{color:var(--fg)}.favorites{margin-bottom:2em;padding-bottom:1.5em;border-bottom:1px solid var(--border)}.favorites-label{font-size:0.85em;color:var(--fg-muted);margin-bottom:0.75em}/* ========================================================================== Social Links ========================================================================== */ .social-links{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;margin:1.5rem 0}.social-links a{display:inline-flex;align-items:center;gap:0.4rem;color:var(--fg-muted);font-size:0.9rem;text-decoration:none}.social-links a:hover{color:var(--fg)}.social-links svg{width:1em;height:1em;opacity:0.7}.social-links a:hover svg{opacity:1}.more-links{margin-top:0;margin-bottom:2.5rem;font-size:0.9em;color:var(--fg-muted)}.more-links a{color:var(--fg-muted)}.more-links a:hover{color:var(--fg)}/* ========================================================================== Project Cards (antfu-style grid) ========================================================================== */ .project-category{position:relative;margin-top:3rem}.project-category:first-of-type{margin-top:0}.category-header{position:relative;pointer-events:none;height:4rem;margin-bottom:-1.5rem}.category-header span{position:absolute;left:-0.5rem;top:0;font-size:4rem;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--border);opacity:0.25;line-height:1;-webkit-user-select:none;user-select:none}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.75rem;list-style:none;padding:0;margin:1rem 0}.project-card{padding:0.75rem;border:1px solid transparent;transition:background-color 0.15s ease}.project-card:hover{background:var(--code-bg)}.project-card a{text-decoration:none;display:block}.project-card .project-name{font-weight:500;margin-bottom:0.25rem}.project-card .project-desc{color:var(--fg-muted);font-size:0.85em;line-height:1.4}/* ========================================================================== Uses Page ========================================================================== */ .uses-section{margin-top:2rem}.uses-section h3{margin-bottom:0.75rem}.uses-list{list-style:none;padding:0}.uses-list li{padding:0.4rem 0;padding-left:0}.uses-list li::before{display:none}.uses-list strong{color:var(--fg)}/* ========================================================================== Aphorisms List ========================================================================== */ .bits-list{list-style:none;padding:0}.bits-list li{padding:1.25rem 0;border-bottom:1px solid var(--border);line-height:1.6}.bits-list li:last-child{border-bottom:none}.aphorism-list li:last-child{border-bottom:none}.aphorism-list li:hover{background:var(--code-bg)}/* ========================================================================== NAQ Definition List ========================================================================== */ .naq-list{margin:1.5rem 0}.naq-list dt{font-weight:600;margin-top:1.5rem}.naq-list dt:first-child{margin-top:0}.naq-list dd{margin-left:0;margin-top:0.5rem;color:var(--fg-muted)}/* ========================================================================== Questions List ========================================================================== */ .questions-list{list-style:none;padding:0}.questions-list li{padding:0.5rem 0;border-bottom:1px solid var(--border)}.questions-list li:last-child{border-bottom:none}.questions-list .q-mark{margin-right:0.5rem;color:var(--fg-muted)}/* ========================================================================== Quotes List ========================================================================== */ .quotes-list blockquote{margin:1.5rem 0;padding:1rem;background:var(--code-bg)}.quotes-list blockquote p{margin:0}.quotes-list blockquote cite{display:block;margin-top:0.75rem;font-size:0.85em;color:var(--fg-muted);font-style:normal}/* ========================================================================== Print Styles ========================================================================== */ @media print{body{background:white;color:black;max-width:none;padding:0}header nav,footer,.scroll-top,.theme-toggle{display:none}a{color:black;opacity:1}pre,blockquote{page-break-inside:avoid}h1,h2,h3{page-break-after:avoid}}/* ========================================================================== Scrapbook Gallery ========================================================================== */ .scrapbook-gallery{columns:3 250px;column-gap:1rem;margin-top:1.5rem}.scrapbook-item{break-inside:avoid;margin-bottom:1rem}.scrapbook-item img{width:100%;display:block;border:1px solid var(--border)}.scrapbook-item:hover img{opacity:0.9}/* ========================================================================== Gallery ========================================================================== */ .gallery-hero{margin-bottom:4rem}.gallery-hero p{font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.3;font-weight:600;margin:0;color:var(--fg);letter-spacing:-0.02em}.gallery-masonry{columns:3 320px;column-gap:2rem;margin-top:2rem}.gallery-photo{margin:0 0 2rem 0;break-inside:avoid;page-break-inside:avoid}.gallery-photo a{display:block;text-decoration:none;transition:transform 0.2s ease,opacity 0.2s ease}.gallery-photo a:hover{opacity:0.9;transform:translateY(-2px)}.gallery-photo img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:2px}/* ========================================================================== Responsive - Mobile First Enhancements ========================================================================== */ @media (max-width:640px){body{padding:1.5rem 1rem}header{grid-template-columns:1fr;gap:0.5rem;margin-bottom:2.5rem}nav{justify-content:flex-start;flex-wrap:wrap;gap:0.5rem 1rem}nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}.theme-toggle{min-height:44px;min-width:44px}h1{font-size:1.5em}h2{font-size:1.2em}table{display:block;overflow-x:auto;white-space:nowrap}.content-list li{flex-direction:column;align-items:flex-start;gap:0.25rem;padding:0.75rem 0}.content-list .muted,.content-list time{font-size:0.8em}.project-grid{grid-template-columns:1fr}.category-header{height:3rem;margin-bottom:-1rem}.category-header span{font-size:3rem;left:0}.media-item{grid-template-columns:1fr;gap:0.25rem}.social-links{gap:0.75rem 1.5rem}.social-links a{min-height:44px;padding:0.5rem 0}footer{margin-top:3rem;padding-top:1.5rem}.more-links{line-height:2}.more-links a{display:inline-block;min-height:44px;line-height:44px}.scrapbook-gallery{columns:2 150px}.gallery-masonry{columns:2 250px;column-gap:1.5rem}.gallery-hero{margin-bottom:3rem}.gallery-hero p{font-size:clamp(1.35rem,6vw,2rem)}blockquote{margin:1em 0;padding-left:0.75em}pre{margin:1em 0;padding:0.75em;font-size:0.85em}}@media (max-width:480px){body{padding:1.25rem 0.875rem;font-size:14px}h1{font-size:1.35em}h2{font-size:1.15em}h3{font-size:1em}ul,ol{padding-left:1.25em}.year-header span{font-size:3.5rem}hr{margin:2em 0}.social-links{gap:0.5rem 1rem}.slide-enter-content>*{--enter-step:60ms}}@media (max-width:360px){body{padding:1rem 0.75rem}.scrapbook-gallery{columns:1}.gallery-masonry{columns:1;column-gap:1rem}.gallery-photo{margin-bottom:1.5rem}.gallery-hero{margin-bottom:2.5rem}.gallery-hero p{font-size:clamp(1.25rem,7vw,1.75rem)}nav{gap:0.4rem 0.8rem}.year-header{height:3.5rem}.year-header span{font-size:3rem}.category-header span{font-size:2.5rem}footer{margin-top:2.5rem}}/* ========================================================================== Ensure No Horizontal Overflow ========================================================================== */ body{overflow-x:hidden}img,video,iframe,embed,object{max-width:100%}code{word-break:break-word}pre{max-width:100%;overflow-x:auto}article{overflow-wrap:break-word;word-wrap:break-word}