1 line
6.1 KiB
CSS
1 line
6.1 KiB
CSS
*,*::before,*::after{box-sizing:border-box;margin:0}html{color-scheme:light dark;scroll-behavior:smooth}body{--bg:light-dark(oklch(0.98 0 0), oklch(0.15 0.005 260));--text:light-dark(oklch(0.25 0 0), oklch(0.88 0.005 260));--muted:light-dark(oklch(0.50 0 0), oklch(0.55 0.005 260));--border:light-dark(oklch(0.85 0 0), oklch(0.28 0.005 260));--card:light-dark(oklch(1 0 0), oklch(0.20 0.008 260));--card-h:light-dark(oklch(0.96 0 0), oklch(0.25 0.015 260));--accent:light-dark(oklch(0.52 0.23 260), oklch(0.70 0.22 260));--code-bg:light-dark(oklch(0.94 0.01 260), oklch(0.22 0.015 260));--radius:8px;font-family:system-ui,-apple-system,segoe ui,sans-serif;font-size:1rem;line-height:1.7;text-wrap:pretty;color:var(--text);background:var(--bg);min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr min(800px,95%)1fr;> *{grid-column:2}}header{padding:1.5rem 0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem;.logo{font-size:1.25rem;font-weight:700;color:var(--accent);text-decoration:none;&:hover{text-decoration:underline}}nav a{color:var(--muted);font-size:.9rem;text-decoration:none;&:hover{color:var(--text)}}}.search{position:relative;flex:auto;max-width:360px;min-width:160px;input[type=search]{width:100%;padding:.45rem .9rem;font-size:.9rem;font-family:inherit;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:999px;outline:none;transition:border-color .15s,box-shadow .15s;&::placeholder{color:var(--muted)}&:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 20%,transparent)}&::-webkit-search-cancel-button{cursor:pointer}}}.search-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:50;max-height:70vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem;box-shadow:0 12px 32px oklch(0 0 0/.18);&[hidden]{display:none}}.search-item{display:block;padding:.6rem .75rem;border-radius:calc(var(--radius) - 2px);text-decoration:none;&:hover{background:var(--card-h)}}.search-title{display:block;color:var(--text);font-weight:600;font-size:.9rem}.search-excerpt{display:block;color:var(--muted);font-size:.8rem;margin-top:.15rem;line-height:1.5;mark{background:color-mix(in oklab,var(--accent) 30%,transparent);color:var(--text);border-radius:2px;padding:0 .1em}}.search-sub{list-style:none;margin:.25rem 0 .5rem;padding-left:.75rem;border-left:2px solid var(--border);li{margin:.15rem 0;a{display:block;padding:.25rem .5rem;border-radius:calc(var(--radius) - 2px);color:var(--muted);font-size:.8rem;text-decoration:none;&:hover{background:var(--card-h);color:var(--text)}}.search-excerpt{font-size:.75rem}}}.search-empty{padding:.75rem;color:var(--muted);font-size:.85rem;text-align:center}footer{margin-top:3rem;padding:1.5rem 0;border-top:1px solid var(--border);text-align:center;font-size:.85rem;color:var(--muted);a{color:var(--accent)}}h1,h2,h3,h4,h5,h6{line-height:1.3;color:var(--text);text-wrap:balance}h1{font-size:2rem;margin-bottom:.5rem}h2{font-size:1.5rem;margin:2rem 0 .5rem}h3{font-size:1.2rem;margin:1.5rem 0 .4rem}.subtitle{color:var(--muted);margin-bottom:2rem}a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px;&:hover{text-decoration-thickness:2px}}.content{p, ul, ol, blockquote{margin-bottom:1rem}ul, ol{padding-left:1.5rem}li{margin-bottom:.25rem}blockquote{border-left:3px solid var(--accent);padding:.5rem 1rem;color:var(--muted);background:var(--card);border-radius:0 var(--radius)var(--radius)0;p:last-child{margin-bottom:0}}img{max-width:100%;height:auto;border-radius:var(--radius)}hr{border:none;border-top:1px solid var(--border);margin:2rem 0} :not(pre) > code { background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } pre { background: var(--code-bg); padding: 1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--border); code { font-size: 0.85rem; background: none; padding: 0; } } table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; th, td { padding: 0.5rem 0.75rem; border: 1px solid var(--border); text-align: left; } th { background: var(--card); font-weight: 600; } tr:nth-child(even) { background: var(--card); } }}.article-header{margin-bottom:1.5rem;h1{margin-bottom:.25rem}time{color:var(--muted);font-size:.9rem}}details.toc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:2rem;font-size:.9rem;summary{cursor:pointer;font-weight:600;user-select:none}nav#TableOfContents > ul{padding-left:1rem;margin-top:.5rem}ul{list-style:none;padding-left:1.25rem;li{margin-bottom:.3rem}}a{text-decoration:none}}.post-grid{container-type:inline-size;display:grid;gap:1.5rem}article.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;transition:background .15s,border-color .15s;&:hover{background:var(--card-h);border-color:var(--accent)}time{color:var(--muted);font-size:.8rem}h2{font-size:1.15rem;margin-top:.25rem;a{color:var(--text);text-decoration:none;&:hover{color:var(--accent)}}}p{color:var(--muted);font-size:.9rem;margin-top:.5rem}}.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}.tag{background:var(--code-bg);color:var(--muted);font-size:.75rem;padding:.15em .6em;border-radius:4px}:root{--chroma-bg:oklch(0.22 0.015 260);--chroma-k:#cba6f7;--chroma-s:#a6e3a1;--chroma-c:#6c7086;--chroma-n:#cdd6f4;--chroma-o:#89b4fa;--chroma-m:#f38ba8}@media(prefers-color-scheme:light){:root{--chroma-bg:oklch(0.94 0.01 260);--chroma-k:#8839ef;--chroma-s:#40a02b;--chroma-c:#9ca0b0;--chroma-n:#4c4f69;--chroma-o:#1e66f5;--chroma-m:#d20f39}}pre.chroma{background:var(--chroma-bg)}pre .k,pre .kd,pre .kn{color:var(--chroma-k)}pre .s,pre .s1,pre .s2{color:var(--chroma-s)}pre .c,pre .c1,pre .cm{color:var(--chroma-c);font-style:italic}pre .n,pre .na,pre .nt{color:var(--chroma-n)}pre .o,pre .p{color:var(--chroma-o)}pre .m,pre .mi{color:var(--chroma-m)}@media(max-width:840px){body{grid-template-columns:1fr;padding:0 1rem;> *{grid-column:1}}} |