ahoneybun.net/public/main.css

*,*::before,*::after{box-sizing:border-box}body{min-height:100%;font-family:var(--main-font);background-color:var(--bg-color);color:var(--text-color)}html{scroll-behavior:smooth}button:focus-visible,a:focus-visible{outline:var(--primary-color) solid 3px}::selection{background-color:var(--primary-color);color:var(--bg-color)}::-webkit-scrollbar{width:8px;height:8px;background-color:rgba(0,0,0,0)}::-webkit-scrollbar-track{background:rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background:var(--text-pale-color);background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,0)}::-webkit-scrollbar-thumb:hover{background:var(--text-color);background-clip:padding-box}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--text-pale-color) rgba(0,0,0,0)}}.prose h1{font-size:1.35em;font-weight:bolder;margin:1em 0 .5em 0}.prose h2{font-size:1.25em;padding-top:60px;margin-top:-45px}.prose h3{font-size:1.1em;padding-top:50px;margin-top:-45px}.prose h4{font-size:1.05em;margin:30px 0 15px 0}.prose .zola-anchor{visibility:hidden;margin-left:.75em;border:none}.prose .zola-anchor::after{content:"#"}.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{width:fit-content}.prose h1:hover a.zola-anchor,.prose h2:hover a.zola-anchor,.prose h3:hover a.zola-anchor,.prose h4:hover a.zola-anchor,.prose h5:hover a.zola-anchor,.prose h6:hover a.zola-anchor{visibility:visible !important}.prose p{font-size:1em;line-height:inherit;word-wrap:break-word}.prose a{border-bottom:1.5px solid var(--primary-color);color:var(--primary-color);text-decoration:none;overflow-wrap:anywhere}.prose a:hover{opacity:.8}.prose img{max-width:100%;display:block;margin:0 auto;border-radius:var(--img-border-radius)}.prose figure{margin:0 auto}.prose figcaption{width:100%;text-align:center;margin:5px auto}.prose blockquote{border-left:2px var(--text-pale-color) solid;padding-left:16px;margin:1em 0;color:var(--blockquote-color)}.prose ol,.prose ul{padding-left:1.5em}.prose li{margin:1em 0}.prose li::marker{color:var(--primary-color)}.prose hr{border:none;background-color:var(--text-pale-color);opacity:.3;height:3px;margin:2.5em 0}.prose table{width:100%;border-spacing:0;border:1px solid var(--primary-color)}.prose thead{background-color:var(--primary-pale-color)}.prose th,.prose td{line-height:2;text-align:center;border:.5px solid var(--primary-color);padding:1px 10px}.prose p>code,.prose li>code,.prose td>code,.prose th>code{font-family:var(--code-font);font-size:.85em;padding:1px 6px;margin:0 2px;color:var(--primary-color);background-color:var(--inline-code-bg-color);border-radius:var(--inline-code-border-radius);word-wrap:break-word}.prose pre{font-size:.8em;margin:1.25em 0;padding:12px 48px 12px 16px;line-height:1.5;border:1.5px solid var(--primary-color);border-color:var(--block-code-border-color);border-radius:var(--block-code-border-radius);overflow:auto}.prose pre code{font-family:var(--code-font)}.prose pre[data-linenos]{padding:12px 48px 12px 8px}.prose pre table{width:100%;border-collapse:collapse;border:none}.prose pre table th,.prose pre table td{line-height:1.5}.prose pre table tr td:first-of-type{color:var(--text-pale-color)}.prose pre table td{padding:0;padding-right:48px;text-align:initial;border:initial}.prose pre table td:nth-of-type(1){text-align:right;user-select:none;padding-right:1em}.prose pre table td:nth-of-type(1) mark::before{left:-8px;width:calc(100% + 1em + 8px)}.prose pre mark{display:block;color:inherit;background-color:rgba(0,0,0,0);position:relative;overflow:visible}.prose pre mark::before{pointer-events:none;content:"";position:absolute;top:0;bottom:0;width:calc(100% + 48px + 48px);background-color:var(--highlight-mark-color)}.prose pre.mermaid{border:none}.prose pre>code>mark::before{width:calc(100% + 48px + 16px);left:-16px}.prose .codeblock{margin:1em 0;position:relative;overflow:auto}.prose .codeblock pre{margin:0}.prose .codeblock .copy{display:none;z-index:9;position:absolute;right:.6em;top:.6em;width:24px;height:24px;padding:2px;cursor:pointer;background:rgba(0,0,0,0);border:none;color:var(--text-pale-color)}.prose .codeblock .copy.copied,.prose .codeblock .copy:hover{display:block;color:var(--primary-color)}.prose .codeblock:hover .copy{display:block}.prose .codeblock-with-filename{margin-top:calc(0px - 1.2em - 24px - 1em - 1.5px)}.prose .codeblock-with-filename .filename{z-index:1;position:relative;top:calc(1.2em + 24px + 1em + 1.5px);padding:12px 16px;line-height:1.2;color:var(--blockquote-color);border-bottom:1.5px solid var(--primary-pale-color);pointer-events:none}.prose .codeblock-with-filename pre>code{display:inline-block;min-width:100%;margin-top:3.2em}.prose .footnote-definition{display:flex}.prose .footnote-definition .footnote-definition-label{position:static;font-size:1em;line-height:inherit;vertical-align:auto;margin-right:.5em}.prose .footnote-definition .footnote-definition-label::after{content:"."}.prose .footnote-definition p{margin:0}.prose .footnote-definition button.backlink{border:none;background:none;display:flex;align-items:center;margin-left:.5em;color:var(--primary-color);cursor:pointer}.prose .callout{line-height:inherit;margin:1.25em 0;padding:0px 12px;display:flex;gap:8px}.prose .callout .title{display:flex;align-items:center;gap:12px}.prose .callout .icon{height:1.75em;display:flex;align-items:center}.prose .callout .content{max-width:calc(100% - 32px)}.prose .callout .content p{margin:0}.prose .callout .content p+p{margin:.2em 0 .5em}.prose .callout.note{color:var(--callout-note-color);border-color:var(--callout-note-color)}.prose .callout.important{color:var(--callout-important-color);border-color:var(--callout-important-color)}.prose .callout.warning{color:var(--callout-warning-color);border-color:var(--callout-warning-color)}.prose .callout.alert{color:var(--callout-alert-color);border-color:var(--callout-alert-color)}.prose .callout.question{color:var(--callout-question-color);border-color:var(--callout-question-color)}.prose .callout.tip{color:var(--callout-tip-color);border-color:var(--callout-tip-color)}.prose .quote{border:none;position:relative;margin:2em 0;padding:1.5em 0 0 1.25em;color:var(--blockquote-color)}.prose .quote .icon{display:block !important;position:absolute;left:0;top:0}.prose .quote .content>p:first-of-type{margin-top:0}.prose .quote .content>p:last-of-type{margin-bottom:0}.prose .quote .from{display:flex;justify-content:end;align-items:center;gap:.5em}.prose .quote .from p{margin:0}.prose details{border:1.5px solid var(--detail-border-color);border-radius:var(--detail-border-radius);margin:1em 0;padding:.5em 1em}.prose details summary span{margin-left:.25em}.prose .mermaid{background:#fff}body.dark .prose img{filter:brightness(var(--dark-mode-img-brightness))}body.dark .prose .mermaid{filter:brightness(var(--dark-mode-chart-brightness))}body.prose-page main{font-size:var(--paragraph-font-size);min-height:100vh;padding-top:30px;margin:0 auto;max-width:var(--main-max-width);display:flex;flex-direction:column;justify-content:space-between}body.prose-page article{padding:30px 15px;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}body.prose-page .giscus{padding:0 15px}.layout-list .category{font-size:1.1em;margin:2em 15px 1em}.layout-list .post-list{padding:0 15px;margin-top:2em}.layout-list .post-list.categorized{margin-top:1em}.layout-list .post{display:flex;justify-content:space-between;align-items:flex-end;gap:.5em;padding:4px 0px;margin:8px 0;font-size:1em;text-decoration:none;color:var(--primary-color);-webkit-tap-highlight-color:rgba(0,0,0,0);border-bottom:1.5px solid rgba(0,0,0,0);position:relative}.layout-list .post:hover{border-bottom-color:var(--primary-color)}.layout-list .post .date{white-space:nowrap}.layout-list .post.featured::before{content:"*";position:absolute;top:0;bottom:0;left:0;transform:translateX(-200%);line-height:30px;height:100%}@media (max-width: 768px){.layout-list .post.featured::before{transform:translateX(-150%)}}.layout-list .read-more{display:flex;justify-content:end;margin:1.5em 15px 0px}.layout-list .read-more a{color:var(--primary-color);text-decoration:none;border-bottom:1.5px solid var(--primary-color)}#theme-toggle .sun-icon{display:none}body.dark #theme-toggle .sun-icon{display:initial}body.dark #theme-toggle .moon-icon{display:none}body.homepage #wrapper{width:100%;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;font-size:var(--homepage-font-size)}body.homepage main{width:100%;max-width:var(--homepage-max-width);min-height:75vh;min-height:75dvh;padding:4em 0}@media screen and (max-width: 425px){body.homepage main{padding:2em 0}}body.homepage #info{padding:0 15px;display:flex;gap:1em}body.homepage #info img{height:var(--avatar-size);width:var(--avatar-size);border-radius:50%}body.homepage #info #text{display:flex;flex-direction:column;justify-content:space-around;line-height:1.5;gap:.5em}body.homepage #info #name,body.homepage #info #id{font-size:1.1em}body.homepage #info #id{margin-left:.5em;color:var(--primary-color)}body.homepage #info #bio{color:var(--text-pale-color);font-weight:300}body.homepage #links{padding:0 15px;margin:1.75em 0 1.75em;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em;font-size:1.1em}body.homepage #links a,body.homepage #links button{text-decoration:none;color:var(--text-color)}@media (hover: hover){body.homepage #links a:hover,body.homepage #links button:hover{color:var(--primary-color)}}body.homepage #links #left{display:flex;flex-wrap:wrap;gap:1em}body.homepage #links #left a{border-bottom:1.5px solid var(--primary-color);line-height:1.5}body.homepage #links #right{display:flex;gap:.5em}body.homepage #links #right button{padding:0;border:none;background-color:rgba(0,0,0,0);cursor:pointer}@media (max-width: 425px){body.homepage #links #left{gap:.75em}}body.homepage #brief{padding:0 15px;font-size:1em;line-height:var(--homepage-line-height)}header{z-index:99;position:fixed;top:0;width:100%;height:45px;background-color:var(--bg-color);border-bottom:1.5px solid var(--primary-color)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){header.blur{background-color:initial;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}header #rss-mask{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px)}}header #header-wrapper{height:100%;max-width:var(--main-max-width);margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;position:relative}header nav{font-size:1.35em;display:flex;align-items:center}header nav a{color:var(--text-color);text-decoration:none}header nav a:hover{color:var(--primary-color)}header nav .separator{font-size:.9em;font-weight:600;width:24px;text-align:center;line-height:1;cursor:pointer;border:none;padding:0;background:rgba(0,0,0,0);margin:0 .3em;color:var(--text-color);-webkit-tap-highlight-color:rgba(0,0,0,0)}header nav .wrap.left{margin:0 .4em 0 -.1em}header nav .wrap.right{margin:0 0 0 .4em}header nav .wrap-separator{margin:0 .5em 0 .1em}header nav .fold{display:none}header nav .fold.shown{display:initial}header #btns{display:flex;gap:1em;align-items:center;padding-top:3px}header #btns a,header #btns button{border:none;background-color:rgba(0,0,0,0);padding:0;text-decoration:none;color:var(--text-color);cursor:pointer}@media (hover: hover){header #btns a:hover,header #btns button:hover{color:var(--primary-color)}}header #toc-toggle{display:none}@media (max-width: 1024px){header #toc-toggle{display:inline-block}header #toc-toggle.active{color:var(--primary-color)}}dialog#rss-mask{margin:12.5px auto;padding:0px;border:none;overflow:visible;background:rgba(0,0,0,0)}dialog#rss-mask::backdrop{background-color:initial;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}dialog#rss-mask div{width:fit-content;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1em}dialog#rss-mask a{border-bottom:1.5px solid var(--primary-color);color:var(--primary-color);text-decoration:none;line-height:1.5;line-break:anywhere}dialog#rss-mask button{background:rgba(0,0,0,0);border:none;color:var(--text-pale-color);padding:0;cursor:pointer}dialog#rss-mask button.copied,dialog#rss-mask button:hover{color:var(--primary-color)}footer{font-size:.9em;padding:15px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px;color:var(--text-pale-color)}footer .copyright{margin-right:auto}footer .credits{margin-left:auto;font-style:italic}footer a{color:var(--text-pale-color);text-decoration:none}footer a:hover{text-decoration:underline;text-underline-offset:4px}@media (max-width: 374px){footer{flex-direction:column;gap:0}footer .copyright,footer .credits{margin:0}}body.blog #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.blog main{margin:45px 0}body.post #wrapper{display:flex;justify-content:space-between;font-size:var(--paragraph-font-size)}body.post #blank{order:1;position:sticky;width:calc((100% - var(--main-max-width))/2)}body.post main{order:2;width:100%;margin:0 auto;padding-top:45px;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.post article{padding:0 15px 30px;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}body.post article #post-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:1em;font-size:.9em}body.post article #date{color:var(--text-pale-color);font-style:italic;margin-bottom:1em}body.post article #date #publish,body.post article #date #updated{margin-right:20px}body.post article #tags{margin-bottom:1em;display:flex;gap:1em;flex-wrap:wrap}body.post article #tags a{color:var(--primary-color);text-decoration:none;line-height:1.25;border-bottom:1.5px solid rgba(0,0,0,0)}body.post article #tags a span{font-size:.95em;margin-right:2px}body.post article #tags a:hover{opacity:1;border-bottom-color:var(--primary-color)}body.post article #outdate_alert{font-style:italic}body.post article #outdate_alert.hidden{display:none}body.post .mermaid{background:#fff}body.post .giscus{padding:0 15px}body.post aside{order:3;width:calc((100% - var(--main-max-width))/2);position:sticky;margin-top:175px;top:60px;height:min-content;font-size:var(--aside-font-size)}body.post aside nav{padding:5px 15px 5px 2em;min-width:60%;overflow-y:auto;max-height:calc(100vh - 45px - 6em);scrollbar-width:none}body.post aside nav::-webkit-scrollbar{width:0}body.post aside nav:hover::-webkit-scrollbar{width:4px}body.post aside ul{list-style-type:none;padding:0;line-height:2;margin:0}body.post aside a{text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-pale-color);position:relative;padding:0 1em}body.post aside a.h3{padding-left:2.5em;font-size:.95em}body.post aside a::before{display:block;content:"";width:2px;position:absolute;top:.6em;bottom:.7em;left:0em;background:rgba(0,0,0,0)}body.post aside a:hover,body.post aside a.active{color:var(--primary-color)}body.post aside a:hover::before{background-color:var(--primary-color)}body.post aside #back-to-top{z-index:99;height:28px;padding:0;position:fixed;bottom:1.5em;margin-left:3em;color:var(--text-pale-color);background:rgba(0,0,0,0);border:none;cursor:pointer;transform:translateY(-5px) scale(0);transition:transform .2s}body.post aside #back-to-top svg{width:28px;height:28px}body.post aside #back-to-top.shown{transform:translateY(0px) scale(1)}body.post aside #back-to-top:hover{color:var(--primary-color)}@media screen and (max-width: 1024px){body.post aside{position:fixed;z-index:99;right:-100%;top:45px;margin-top:0;min-width:275px;height:100%;background-color:var(--bg-color);box-shadow:rgba(0,0,0,.08) -2px 8px 8px 0px}body.post aside.shown{right:0}body.post aside nav{padding:1em .75em;max-height:calc(100vh - 45px)}body.post aside #back-to-top{display:none}body.post #blank{display:none}body.post main{margin:0 auto}}body.tag-list #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.tag-list main{margin:85px auto 60px}body.tag-list .title{width:min-content;font-size:1.3em;margin:0 auto}body.tag-list .tags{margin-top:2em;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;font-size:1.1em}body.tag-list .tags a{color:var(--primary-color);text-decoration:none;margin:1em;line-height:1.25;border-bottom:1.5px solid rgba(0,0,0,0)}body.tag-list .tags a:hover{border-bottom-color:var(--primary-color)}body.tag-single #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.tag-single main{width:100%;margin:85px auto 60px}body.tag-single .title{width:min-content;white-space:nowrap;color:var(--text-color);font-size:1.3em;margin:0 auto;margin-bottom:40px;padding:0 0 0 60px}body.tag-single .title a{margin-left:2em;font-size:.75em;color:var(--primary-color)}body.projects #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.projects main{width:100%;margin:85px auto 0px}body.projects .proj{margin:0px 15px 2em}body.projects .proj .meta{display:flex;align-items:center;flex-wrap:wrap;gap:1.5em;margin-bottom:.5em}body.projects .proj .name{white-space:nowrap;color:var(--primary-color);font-size:1.1em}body.projects .proj .links{flex-grow:1;display:flex;font-weight:300;align-items:center;flex-wrap:nowrap;justify-content:end;gap:.5em 1em;color:var(--text-pale-color)}body.projects .proj .links a{text-decoration:none;color:inherit}body.projects .proj .links a:visited{color:inherit}body.projects .proj .links a span,body.projects .proj .links a:hover{color:var(--primary-color)}body.projects .proj .tags,body.projects .proj .tags-narrow{font-size:.9em;font-weight:300;display:flex;align-items:center;flex-wrap:wrap;gap:.5em .75em;color:var(--text-pale-color)}body.projects .proj .tags div span,body.projects .proj .tags-narrow div span{font-size:.9em;margin-right:2px}body.projects .proj .tags-narrow{display:none}@media screen and (max-width: 425px){body.projects .proj .tags{display:none}body.projects .proj .tags-narrow{display:flex}}body.projects .proj .content{display:flex;justify-content:space-between;gap:1em;margin-top:.5em}body.projects .proj .desc{line-height:1.5;margin:0 0 10px 0}body.projects .proj .desc p{margin:.25em 0}body.projects .proj .desc a{border-bottom:1.5px solid var(--primary-color);color:var(--primary-color);text-decoration:none}body.projects .proj .desc p>code{font-family:var(--code-font);font-size:.8em;padding:1px 6px;color:var(--primary-color);background-color:var(--primary-pale-color);border-radius:4px}body.projects .proj img{max-height:125px;margin-top:.5em}@media screen and (max-width: 425px){body.projects .proj img{max-height:100px}}body.not-found{height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}body.not-found .wrapper{display:flex;flex-direction:column;align-items:center;gap:2em;margin-bottom:5em}body.not-found .error{margin:0;display:flex;align-items:center;gap:1em;font-size:1.1em;color:var(--text-pale-color)}body.not-found a{color:var(--primary-color);text-decoration-color:var(--primary-pale-color)}body.not-found a:hover,body.not-found a:active{text-decoration-color:var(--primary-color)}.reaction{font-size:.7em;padding:15px 15px 30px;min-height:75px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.reaction.left{justify-content:start}.reaction.right{justify-content:end}.reaction.center{justify-content:center}.reaction.error button{border-color:var(--callout-alert-color) !important}.reaction button{line-height:1;padding:.5em 1em;color:var(--text-pale-color);display:flex;justify-content:center;align-items:center;border:1px solid var(--primary-pale-color);border-radius:999px;gap:.5em;background:rgba(0,0,0,0);user-select:none;cursor:pointer}.reaction button span{min-width:16px;text-align:end}.reaction button:hover{background:var(--primary-pale-color)}.reaction button.reacted{border-color:var(--primary-color);color:var(--primary-color);background:var(--primary-pale-color)}html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}