@import "/font.css";@import "/highlight-solarized.css";@import "/highlight-rose-pine.css";*{--sb-size:8px}*::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}*::-webkit-scrollbar-track{background:var(--sb-track-color);border-radius:4px}*::-webkit-scrollbar-thumb{background:var(--sb-thumb-color);border-radius:4px}@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--sb-thumb-color)var(--sb-track-color)}}html{width:100%}body{color:#222;font-family:Monoplexkr;line-height:1.5;margin-block:1rem;margin-inline:auto;max-width:800px;overflow-y:scroll;overflow-x:hidden}main{font-size:18px;overflow-x:auto}#main{padding-inline:10px;position:relative}#left-aside{position:absolute;min-height:100%;right:100%;top:0}#right-aside{position:absolute;min-height:100%;left:100%;top:0}@media(max-width:700px){#right-aside,#left-aside{display:none}}header{margin-bottom:1rem;padding-inline:10px;nav ul { display: flex; flex-direction: row; padding-left: 0; flex-wrap: wrap; gap: 1rem; & li { list-style-type: none; } & li:has(> a.active) { font-weight: bold; } }}.tags{display:flex;flex-direction:row;align-items:center;gap:.3rem;& ul { display: flex; flex-direction: row; padding-left: 0; gap: 0.3rem; & li { list-style-type: none; } }}footer{margin-top:1rem}.post-list_date{color:var(--mute);font-size:.8em}.menu-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}#theme-btn,#color-btn{color:var(--primary6);cursor:pointer;user-select:none;span { font-weight: bold; }}a{text-decoration:none}html.solarized body{--base03:#002b36;--base02:#073642;--base01:#586e75;--base00:#657b83;--base0:#839496;--base1:#93a1a1;--base2:#eee8d5;--base3:#fdf6e3;--primary1:#b58900;--primary2:#cb4b16;--primary3:#dc322f;--primary4:#d33682;--primary5:#6c71c4;--primary6:#268bd2;--primary7:#2aa198;--primary8:#859900}html.rose-pine:not(.dark) body{--base01:#575279;--base0:#9893a5;--base1:#797593;--base2:#faf4ed;--base3:#f2e9e1;--primary1:#ea9d34;--primary2:#d7827e;--primary3:#b4637a;--primary4:#56949f;--primary5:#907aa9;--primary6:#286983;--primary7:#2aa198;--primary8:#859900}html.rose-pine.dark body{--base03:#191724;--base02:#26233a;--base01:#908caa;--base00:#6e6a86;--base1:#e0def4;--primary1:#f6c177;--primary2:#ebbcba;--primary3:#eb6f92;--primary4:#9ccfd8;--primary5:#c4a7e7;--primary6:#31748f;--primary7:#2aa198;--primary8:#859900}html:not(.dark) body{background-color:var(--base2);color:var(--base01);a { color: var(--primary6); } --mute: var(--base0);--border:var(--base0);--hr:var(--base1);main { --outline: var(--base0); --altbg: var(--base3); --blockquote-side: var(--primary1); } --sb-track-color: var(--base1);--sb-thumb-color:var(--primary1)}html.dark body{background-color:var(--base03);color:var(--base1);a { color: var(--primary6); } --mute: var(--base00);--border:var(--base00);--hr:var(--base01);main { --outline: var(--base00); --altbg: var(--base02); --blockquote-side: var(--primary7); } --sb-track-color: var(--base01);--sb-thumb-color:var(--primary7)}main{border-block:1px solid var(--outline);a { color: var(--primary6); &:hover { text-decoration: underline; } &.external { &::after { content: " "; display: inline-block; width: 1em; height: 1em; background-color: var(--primary6); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --%3E%3Cpath fill='var(--red)' d='M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: 0 -80%; vertical-align: bottom; } } } blockquote { border-left: 3px solid var(--blockquote-side); background-color: var(--altbg); } hr { border: none; border-top: 1px solid var(--hr); } pre { padding: .5rem; position: relative; font-size: 16px; border: 1px dashed var(--border); overflow-x: auto; code * { tab-size: 4; } } :not(pre)>code { border: 1px solid var(--border); padding-inline: .3rem; } p:has(> mjx-container) { max-width: 100%; overflow-x: auto; overflow-y: hidden; } img { max-width: 100%; } aside.callout { &.note { --highlight: var(--primary6); } &.tip { --highlight: var(--primary8); } &.caution { --highlight: var(--primary2); } &.warning { --highlight: var(--primary3); } &.important { --highlight: var(--primary5); } background-color: color-mix(in srgb, var(--highlight) 20%, transparent); border-left: 4px solid var(--highlight); padding-inline: 1rem; padding-block: 0.8rem; margin-block: 1rem; .callout-title { margin-block: 0; color: var(--highlight); font-weight: bold; } .callout-content {} } ul li input[type="checkbox"] { display: inline; appearance: none; &::after { font-weight: bold; content: "[ ]"; font-family: Monoplexkr; font-size: 18px; color: var(--primary3); display: inline-block; } &:checked::after { content: "[x]"; color: var(--primary8); } } details { cursor: pointer; & summary { user-select: none; } & summary::marker { font-weight: bold; content: "[+]"; } &[open] summary::marker { @apply font-mono; content: "[-]"; } } blockquote { margin-inline: 0; padding-inline: 1rem; padding-block: 0.1rem; box-sizing: border-box; &>*:first-child, &>*:last-child { margin-block: 0.3rem; box-sizing: border-box; } } fieldset { border: 1px solid var(--border); &>div { margin-block: 0; } } table { margin-block: 1rem; tr { &:first-child td { border-top: none; } td, th { border-top: 1px solid black; border-left: 1px solid black; padding-inline: .6rem; &:first-child { border-left: none; } } } } .sc_columns { display: flex; flex-direction: row; gap: 0.4rem; align-items: start; flex-wrap: wrap; &.align-center { align-items: center; } &.align-end { align-items: end; } &.justify-center { justify-content: center; } &.justify-end { justify-content: end; } &.justify-around { justify-content: space-around; } &.justify-between { justify-content: space-between; } &.justify-evenly { justify-content: space-evenly; } &.same-size { align-items: stretch; } &.same-size>* { width: 100%; } }}