@import 'https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Cardo:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap';:root{--base-font-size:1.2rem;--base-line-height:1.8rem;--base-font-family:"Cardo", "Georgia", serif;--base-font-weight:400;--header-font-family:'Bitter', "Georgia", serif;--header-font-weight:700;--mono-font-family:'Roboto Mono', mono;--spacing-unit:1rem;--content-width:80ch;--color-white:#f2f0ec;--color-black:#2d2d2d;--color-red:#f2777a;--color-orange:#f99157;--color-yellow:#ffcc66;--color-green:#99cc99;--color-aqua:#66cccc;--color-blue:#2d7bc0;--color-purple:#cc99cc;--color-redorange:#d27b53;--color-canvas:light-dark(
                        var(--color-white),
                        var(--color-black)
                    );--color-ink:light-dark(
                        color-mix(in srgb, var(--color-black), var(--color-white) 10%),
                        color-mix(in srgb, var(--color-white), var(--color-black) 15%)
                    );--color-ink-soft:color-mix(in srgb, var(--color-ink), var(--color-canvas));--color-primary:light-dark(
                        var(--color-blue),
                        color-mix(in srgb, var(--color-ink) 40%, var(--color-blue))
                    );--color-primary-soft:color-mix(in srgb, var(--color-canvas) 40%, var(--color-primary));--color-negative:light-dark(
                        color-mix(in srgb, var(--color-ink) 20%, var(--color-red)),
                        var(--color-red)
                    );--color-secondary:light-dark(
                        color-mix(in srgb, var(--color-ink) 30%, var(--color-yellow)),
                        color-mix(in srgb, var(--color-canvas) 50%, var(--color-yellow))
                    );--color-highlight:light-dark(
                        color-mix(in srgb, var(--color-green), var(--color-canvas)),
                        color-mix(in srgb, var(--color-green) 80%, var(--color-canvas))
                    );--color-shadow:color-mix(in srgb, var(--color-ink) 10%, var(--color-canvas));--color-shadow-strong:color-mix(in srgb, var(--color-shadow), var(--color-ink) 10%)}*,*::before,*::after{box-sizing:border-box}html{color-scheme:light dark}html,body{margin:0;padding:0}body{color:var(--color-ink);background-color:var(--color-canvas);display:flex;flex-direction:column;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--header-font-family);font-weight:var(--header-font-weight);margin:var(--spacing-unit)0;padding:0}p{margin:var(--spacing-unit)0;line-height:1.6rem}h1{font-size:2rem;line-height:2rem}h2{font-size:1.6rem;line-height:1.6rem;margin-top:calc(2 * var(--spacing-unit))}h3{font-size:1.3rem;line-height:1.3rem}html{font-family:var(--base-font-family);font-size:var(--base-font-size);line-height:var(--base-line-height);font-weight:var(--base-font-weight)}img{display:block;max-width:100%;margin:0 auto}picture{display:block}picture img{max-width:100%;height:auto}figcaption{margin:calc(.5 * var(--spacing-unit))0;text-align:center;font-size:.9rem;font-style:italic}a{word-wrap:break-word;color:var(--color-primary);text-decoration-thickness:2px;&.internal { background-color: var(--color-shadow); text-decoration: none; padding: 0px 5px; border-radius: 5px; } &.disabled { color: var(--color-negative); &:hover { color: var(--color-negative); } }}a:hover{color:var(--color-primary-soft)}strong,b{font-weight:800}pre,code{border-radius:3px}code{padding:1px 5px}pre{padding:8px 12px;overflow-x:auto;> code { border: 0; padding-right: 0; padding-left: 0; }}blockquote{border-left:3px solid color-mix(in srgb,var(--color-primary) 40%,var(--color-canvas));margin:1rem 0;padding:0 1rem;transition:border-color .2s;background-color:var(--color-shadow);overflow:auto;border-radius:0 5px 5px 0}li{margin:calc(.5 * var(--spacing-unit))0;a { text-decoration: none;}}.mono{font-family:var(--mono-font-family);font-size:.8rem}.flex{display:flex;gap:var(--spacing-unit)}.layout-container{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-unit);grid-template-areas:"header" "main" "footer"}.inner-content{margin:0 auto;max-width:var(--content-width)}header{grid-area:header;line-height:30px;position:sticky;top:0;background-color:var(--color-canvas);z-index:1000;.site-title { font-size: 1.5rem; font-family: var(--header-font-family); position: relative; padding: var(--spacing-unit); display: flex; align-items: center; #header-logo { position: absolute; top: var(--spacing-unit); left: var(--spacing-unit); } .header-button { background: none; border: none; cursor: pointer; color: var(--color-ink); padding: 0; } .search-trigger { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--color-shadow-strong); border-radius: 5px; padding: 4px 8px; cursor: pointer; color: var(--color-ink-soft); font-family: var(--mono-font-family); font-size: 0.75rem; margin-left: calc(2 * var(--spacing-unit)); } .search-trigger:hover { border-color: var(--color-ink); color: var(--color-ink); } .search-trigger-icon { width: 16px; height: 16px; } #theme-toggle { position: absolute; top: var(--spacing-unit); right: var(--spacing-unit); } #search-toggle-mobile { position: absolute; top: calc(var(--spacing-unit) + 3px); right: calc(var(--spacing-unit) + 40px); display: none; } .site-url { margin-left: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; a { color: var(--color-ink); text-decoration: none; } } } .header-flair { width: 100%; height: 2px; background-image: linear-gradient( 90deg, var(--color-canvas), var(--color-canvas), var(--color-shadow), var(--color-shadow), var(--color-shadow), var(--color-canvas), var(--color-canvas) ); }}@media screen and (max-width:520px){header .site-title{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding-bottom:calc(.5 * var(--spacing-unit));.search-trigger { margin-top: calc(0.5 * var(--spacing-unit)); margin-left: 50px; } #search-toggle-full { display: none; } #search-toggle-mobile { display: block; }}}.search-modal{display:none;position:fixed;inset:0;z-index:2000;align-items:flex-start;justify-content:center;padding-top:5vh}.search-modal.open{display:flex}.search-backdrop{position:absolute;inset:0;background-color:rgba(0,0,0,.2);backdrop-filter:blur(4px)}.search-container{position:relative;width:100%;max-width:600px;margin:0 var(--spacing-unit);background-color:var(--color-canvas);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);overflow:hidden}.search-input-wrapper{display:flex;align-items:center;padding:var(--spacing-unit);border-top:1px solid var(--color-shadow-strong);border-bottom:1px solid var(--color-shadow-strong)}.search-icon{flex-shrink:0;color:var(--color-ink-soft);margin-right:calc(.5 * var(--spacing-unit))}.search-input{flex:1;border:none;background:0 0;font-size:1.1rem;color:var(--color-ink);outline:none}.search-input::placeholder{color:var(--color-ink-soft)}.search-hint{flex-shrink:0;font-size:.75rem;color:var(--color-ink-soft);background-color:var(--color-shadow);padding:2px 8px;border-radius:4px;border:1px solid var(--color-shadow-strong)}.search-results{max-height:60vh;overflow-y:auto}.search-empty{padding:calc(2 * var(--spacing-unit));text-align:center;color:var(--color-ink-soft)}.search-result{display:block;padding:var(--spacing-unit);text-decoration:none;color:var(--color-ink);border-bottom:1px solid var(--color-shadow);transition:background-color .1s}.search-result:hover,.search-result.selected{background-color:var(--color-shadow)}.search-result:last-child{border-bottom:none}.search-result-title{font-weight:600;margin-bottom:4px}.search-result-snippet{font-size:.9rem;color:var(--color-ink-soft);line-height:1.4}.search-result mark{background-color:var(--color-highlight);color:inherit;padding:0 2px;border-radius:2px}.sidebar-left{font-size:.9rem;grid-area:sidebarL;display:none;flex-direction:column;align-items:flex-end}nav{margin-top:var(--spacing-unit);ul { list-style-type: none; margin: 0px; padding: 0px; li { padding: var(--spacing-unit); a { display: block; font-size: 1.2em; font-weight: bold; color: var(--color-ink); text-decoration: none; } a:hover { color: var(--color-primary-soft); } } }}main{grid-area:main;padding:var(--spacing-unit);.foot-meta { text-align: right; margin-top: calc(4*var(--spacing-unit)); }}.home-card{border:1px dashed var(--color-ink-soft);border-radius:5px;margin-top:calc(2 * var(--spacing-unit));padding:var(--spacing-unit);position:relative;.card-header { background-color: var(--color-canvas); padding: 0 calc(0.5 * var(--spacing-unit)); position: absolute; top: -15px; left: 10px; &.right { left: auto; right: 10px; } .card-title { font-size: 1.3rem; margin-right: calc(0.5 * var(--spacing-unit)); } .card-subtitle { color: var(--color-ink-soft); } a { color: var(--color-ink); text-decoration: none; } } li { display:flex; align-items: center; }}.home-responsive{display:flex;gap:var(--spacing-unit);flex-direction:column}ul.card-list{display:flex;justify-content:center;gap:var(--spacing-unit);list-style:none;padding:0;li.card { border: 1px dashed var(--color-ink-soft); border-radius: 5px; padding: 0 var(--spacing-unit); text-align: center; flex-grow: 1; margin: 0; p { margin: calc(0.5 * var(--spacing-unit)) 0; } p.subtitle { font-size: 0.9rem; } }}@media screen and (min-width:100ch){.home-responsive{flex-direction:row}ul.card-list{margin-top:calc(2 * var(--spacing-unit));flex-direction:column;flex-grow:1;justify-content:flex-start;li.card { flex-grow: 0; }}}table.archive-list{td { vertical-align: top; &.date-text { text-align: right; padding-right: calc(var(--spacing-unit) * 1); color: var(--color-ink-soft); min-width: 8ch; } } a { text-decoration: none; }}hr{margin:calc(2 * var(--spacing-unit))auto;background-color:var(--color-shadow-strong);border:none;height:1px;width:90%;&.big { margin: calc(6 * var(--spacing-unit)) auto; }}.meta{color:var(--color-ink-soft)}h3 a{text-decoration:none}h3 .meta{font-size:1rem}.post-flair{width:100%;height:5px;margin-top:1rem;margin-bottom:2rem}.related-tags{margin-bottom:calc(.5 * var(--spacing-unit));text-align:right}.related-posts{&.after-content { margin-top: calc(4 * var(--spacing-unit)); padding-top: calc(4 * var(--spacing-unit)); border-top: 1px solid var(--color-shadow-strong); } h3 { margin-bottom: var(--spacing-unit); } .related-list { margin-top: 0; list-style: none; margin-bottom: calc(2 * var(--spacing-unit)); padding-left: 0; }}a:has(.tag){color:var(--color-ink);text-decoration:none;.tag { background-color: var(--color-shadow); font-size: 0.9rem; padding: 2px 5px; margin-left: 5px; border-radius: 5px; border: 1px solid var(--color-shadow-strong); }}.extend-line{display:flex;align-items:center;&:before { content:""; flex:1; border-bottom:1px dashed var(--color-shadow-strong); margin-left:5px; }}ul.section-ul{padding-left:0;list-style:none;li.border-top { border-top: 1px solid var(--color-shadow-strong); padding-top: 1rem; margin-top: 2rem; }}ul.pagination{margin-top:calc(4 * var(--spacing-unit));list-style:none;display:flex;flex-direction:horizontal;justify-content:center;gap:var(--spacing-unit);a { text-decoration: none; } li { padding: 5px var(--spacing-unit); text-align: center; border-radius: 10px; &.border { border: 1px solid var(--color-shadow-strong); } &.active { background-color: color-mix(in srgb, var(--color-primary-soft), var(--color-canvas)); } }}img.list-image{flex-shrink:0;width:150px;margin:0 1em 0 0}.gallery{display:flex;gap:calc(var(--spacing-unit) * .5);margin-bottom:var(--spacing-unit)}footer{grid-area:footer;text-align:left;color:var(--color-ink-soft);.inner-content { border-top: 1px solid var(--color-shadow); } ul { list-style: none; display: flex; flex-direction: horizontal; gap: var(--spacing-unit); } a { text-decoration: none; color: var(--color-ink-soft); }}pre,code{font-family:var(--mono-font-family);font-size:.8rem;border:1px solid var(--color-shadow-strong);border-radius:5px;background-color:var(--color-shadow)}.highlight{background:light-dark(var(--color-grey-light),var(--color-black-light));.highlighter-rouge & { background: light-dark(var(--color-grey-light), var(--color-black-light)); } .c { color: var(--color-grey-6); font-style: italic } .err { color: var(--color-red); background-color: light-dark(var(--color-white), var(--color-grey-dark)); } .k { color: var(--color-pink) } .o { font-weight: bold } .cm { color: var(--color-grey-6); font-style: italic } .cp { color: var(--color-grey-6) } .c1 { color: var(--color-grey-6); font-style: italic } .cs { color: var(--color-grey-6); font-style: italic } .gd { color: var(--color-black); background-color: #fdd } .gd .x { color: var(--color-black); background-color: #faa } .ge { font-style: italic } .gr { color: light-dark(var(--color-red), var(--color-red-light)) } .gh { color: var(--color-grey-6) } .gi { color: var(--color-black); background-color: #dfd } .gi .x { color: var(--color-black); background-color: #afa } .go { color: var(--color-grey-6) } .gp { color: var(--color-grey-dark) } .gs { font-weight: bold } .gu { color: var(--color-grey-6) } .gt { color: light-dark(var(--color-blue), var(--color-blue-light)) } .kc { color: var(--color-pink) } .kd { color: var(--color-pink) } .kp { color: var(--color-pink) } .kr { color: var(--color-pink) } .kt { color: light-dark(var(--color-red), var(--color-red-light)) } .m { color: var(--color-orange) } .s { color: light-dark(var(--color-green), var(--color-green-light)) } .na { color: light-dark(var(--color-red), var(--color-red-light)) } .nb { color: light-dark(var(--color-red), var(--color-red-light)) } .nc { color: light-dark(var(--color-red), var(--color-red-light)) } .no { color: light-dark(var(--color-red), var(--color-red-light)) } .ni { color: var(--color-pink) } .ne { color: light-dark(var(--color-blue), var(--color-blue-light)) } .nf { color: light-dark(var(--color-blue), var(--color-blue-light)) } .nn { color: var(--color-grey-dark) } .nt { font-weight: bold } .nv { color: light-dark(var(--color-red), var(--color-red-light)) } .ow { font-weight: bold } .w { color: var(--color-grey-6) } .mf { color: var(--color-orange) } .mh { color: var(--color-orange) } .mi { color: var(--color-orange) } .mo { color: var(--color-orange) } .sb { color: light-dark(var(--color-green), var(--color-green-light)) } .sc { color: light-dark(var(--color-green), var(--color-green-light)) } .sd { color: light-dark(var(--color-green), var(--color-green-light)) } .s2 { color: light-dark(var(--color-green), var(--color-green-light)) } .se { color: light-dark(var(--color-green), var(--color-green-light)) } .sh { color: light-dark(var(--color-green), var(--color-green-light)) } .si { color: light-dark(var(--color-green), var(--color-green-light)) } .sx { color: light-dark(var(--color-green), var(--color-green-light)) } .sr { color: light-dark(var(--color-green), var(--color-green-light)) } .s1 { color: light-dark(var(--color-green), var(--color-green-light)) } .ss { color: var(--color-pink) } .bp { color: var(--color-grey-6) } .vc { color: light-dark(var(--color-red), var(--color-red-light)) } .vg { color: light-dark(var(--color-red), var(--color-red-light)) } .vi { color: light-dark(var(--color-red), var(--color-red-light)) } .il { color: light-dark(var(--color-red), var(--color-red-light)) }}