:root { --link-color: #5A67D3; --link2-color: #6A6873; --bg-color: #D0D0DB; --bg-light-color: #E7E7ED; --bg-dark-color: #aaaab7; --main-bg-color: #4D4B57; --sub-color: #6A6873; --sub-light-color: #8E8D98; --dark-color: #373540; --light-color: white; --lighten-color: #fffa; --highlight-color: #fff09c; } [data-theme="dark"] { --link-color: #ffe2ab; --link2-color: #a1a0a7; --bg-color: #373540; --bg-light-color: #211f27; --bg-dark-color: #aaaab7; --main-bg-color: #4D4B57; --sub-color: #6A6873; --sub-light-color: #8E8D98; --dark-color: #D0D0DB; --light-color: black; --lighten-color: #0009; --highlight-color: #1a2043; } [data-theme="dark"] #header a, [data-theme="dark"] #tag-index summary, [data-theme="dark"] .spoiler summary, [data-theme="dark"] #header a:hover, [data-theme="dark"] nav a, [data-theme="dark"] nav a:hover, [data-theme="dark"] nav a:visited {color:white;} @font-face { font-family: Atkinson Hyperlegible; src: url('/fonts/AtkinsonHyperlegible-Regular.ttf'); } @font-face { font-family: Atkinson Hyperlegible; src: url('/fonts/AtkinsonHyperlegible-Bold.ttf'); font-weight: bold; } html {scroll-behavior: smooth; scroll-padding: 60px;} body { background-color: var(--main-bg-color); /* background-image: url('../images/bg_diamond.png');*/ /* background-position: top;*/ font-size: 16px; font-family: 'Atkinson Hyperlegible', Lato, Verdana, sans-serif; font-weight: 400; margin: 0; } details > summary {cursor: pointer;} main p, main aside { line-height: 1.6em; } li { line-height: 1.6em; margin-bottom: 1em; } article li { margin-bottom: .5em; } hr { border: dashed var(--sub-color); border-width: 2px 0 0 0; } ::selection { background: var(--link2-color); color: var(--light-color); } img { max-width: 100%; height: auto; margin-top: 0.5em; margin-bottom: 0.5em; } .right { float: right; margin-left: 1em; } .left { float: left; margin-right: 1em; } .center { display: block; margin-right: auto; margin-left: auto; text-align: center; } .caption { margin-top: 0; font-size: 0.9em; font-style: italic; } .small-header {font-size: 1.2em} .rounded {border-radius: .5em;} figcaption {text-align: center;} a {color: var(--link-color);} a:visited {color: var(--link2-color);} a:hover { color: var(--link-color); text-decoration: none; transition: color 0.25s ease; } h1, h2, h3 { font-family: 'Nunito', Trebuchet MS, sans-serif; color: var(--dark-color); } h4, h5 { font-family: 'Nunito', Lato, Verdana, sans-serif; color: var(--link2-color); } #container { margin: 3em auto; width: 98%; max-width: 700px; background-color: var(--bg-color); color: var(--dark-color); border-radius: 1em; } #content { padding: 10px 5% 20px 5%; } #header { font-family: 'Nunito', Lato, Verdana, sans-serif; color: var(--bg-color); background-color: var(--sub-color); padding: 0 .5em; border-color: var(--sub-color); border-style: solid; border-top-left-radius: .8em; border-top-right-radius: .8em; border-width: 0 0 6px 0; } #header ul { list-style-type: none; padding: 0.5em 0; margin: 0; } #header li { font-size: 1.2em; font-weight: bold; display: inline-block; margin-right: 1.5em; margin-bottom: 0; margin-top: 0.2em; } #header li a { color: var(--light-color); text-decoration: none; background-color: inherit; padding: 6px 1em; border-radius: .5em; } #header li a:hover { background-color: var(--sub-light-color); } #header a { color: var(--bg-color); } #header a:hover { color: var(--light-color); } .post-container { background-color: var(--bg-light-color); padding: .5em 1em; list-style-type: none; } /*#comment {margin-bottom: 1em;}*/ #comment iframe { width: 100%; /*min-height: fit-content;*/ max-height: 90vh; overflow: auto; background-color: var(--bg-color); border: none; } #comment details, #tag-index details {background-color: var(--bg-light-color);} #comment summary, #tag-index summary { font-family: 'Nunito', Trebuchet MS, sans-serif; background-color: var(--sub-color); color: var(--light-color); font-weight: bold; font-size: 1.4em; padding: .5em; } #tag-index summary::before {content: "#"} #tag-index ul, #tag-index ol { margin: 1em; padding-bottom: .5em; border-radius: .5em; list-style-type: none; } #tag-index li time, .post-container li time { background-color: var(--bg-color); border-radius: .5em; padding: .2em .4em; margin-right: .2em; } .post-container li, #tag-index li {margin: .5em 0;} .post-container li::before, #tag-index details li::before { content:"❤︎"; padding-right: 8px; color: var(--sub-color); } #notes a { border-bottom: 1px dashed var(--sub-light-color); background-color: var(--bg-light-color); padding: 0 2px; text-decoration: none; color: inherit; } #notes a:hover { color: var(--link2-color); transition: none; } /*superscript*/ sup {font-size: .6em;} #footnotes { padding-left: 1em; } #footnotes li { font-size: 0.9em; padding: 0 4px; background-color: var(--bg-light-color); } #footnotes a { color: inherit; text-decoration: none; } #footnotes li:hover { color: var(--link2-color); } #post-nav { border-top: 2px dashed var(--sub-color); } #post-nav > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-inline-start: 0; list-style-type: none; & > :first-child > a::before { content: "\2190 \a0"; /* left arrow + non-breaking space */ } & > :last-child { text-align: right; a::after { content: "\2192 \a0"; /* right arrow + non-breaking space */ } } } #post-nav a { display: inline-block; background: var(--bg-light-color); color: var(--link-color); padding: .3em .8em; border-radius: .5em; text-decoration: none; margin-bottom: 1em; } #post-nav a:hover {text-decoration: underline; background-color: var(--light-color);} #post-nav a:visited {color: var(--link2-color);} #post-nav li {margin: .5em;} .return {margin-bottom: 1em;} .return a { background-color: var(--sub-color); color: var(--light-color); text-align: center; font-size: 14px; padding: .3em .8em; border-radius: .5em; text-decoration: none; } .return a:visited{color: var(--light-color);} .return a:hover{ background-color: var(--sub-light-color); color: var(--light-color); } #links { text-align: center; padding-bottom: 1em; } .flex-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-inline-start: 0; } #post-tags { list-style-type: none; margin-top: .5em; margin-bottom: 0; gap: .8em; } #post-tags a { background: var(--bg-light-color); border-radius: 1em; padding: .1em .5em; text-decoration: none; } #post-tags a:before {content: "#"} #post-tags a:hover {text-decoration: underline;} .post-list { padding-inline-start: 1.5rem; list-style-type: ""; text-indent: calc(-1 * 1.5rem); } #tag-index { padding-inline-start: 0; list-style-type: ""; details { margin-block: 0; } [open] { margin-block-end: 1rem; } } table { background-color: var(--bg-light-color); line-height: 1.5em; } td, th { padding: .4em; } table tr:nth-child(odd){ background-color: var(--light-color); } code { font-size: 0.8em; color: var(--dark-color); background-color: var(--lighten-color); padding: 4px; margin: 2px; } .code-block { display: block; margin-block: 1rem; overflow-x: auto; background-color: var(--lighten-color); tab-size: 4ch; padding: 8px; white-space: pre; line-height: 1.5em; } .code-block::selection { background-color: var(--link-color); } .tip { border: 2px dashed var(--sub-light-color); border-radius: 1em; padding: 0.8em; margin-bottom:1em; background: var(--bg-light-color); } .sidenote { background: var(--highlight-color); border: 1px solid #91735a; margin-bottom:1em; padding: 0.5em; } .tangent { border: 2px dashed var(--sub-color); background-color: var(--bg-light-color); } .tangent summary { font-family: 'Nunito', Lato, Verdana, sans-serif; font-weight: bold; padding: .5em 1em; } .tangent p { margin-inline: 1em; } .spoiler summary { font-family: 'Nunito', Lato, Verdana, sans-serif; font-weight: bold; font-size: 1.2em; background-color: var(--sub-color); color: var(--light-color); padding: 1em; } article time { display: block; border-bottom: 2px dashed var(--sub-color); text-align: right; } footer { color: var(--bg-dark-color); text-align: center; font-size: small; font-family: Lato, Verdana, sans-serif; } .theme-switch-wrapper { display: flex; align-items: center; position: absolute; right:0; top: 0; margin: 12px; border-radius: 1em; } .theme-switch { display: inline-block; height: 32px; position: relative; width: 56px; } .theme-switch input {display:none;} .slider { background-color: var(--bg-color); border-radius: 1em; inset: 0; cursor: pointer; position: absolute; transition: .4s; } .slider:before { background-color: var(--dark-color); border-radius: 1em; content: ""; height: 24px; position: absolute; transition: .4s; width: 24px; left: 4px; top: 4px; } input:checked + .slider { background-color: var(--bg-color); } input:checked + .slider:before { transform: translateX(24px); border-radius: 1em; content: ""; } /*fixing display issues, thanks cryref*/ :is(article, aside, nav, section) h1{ /* -webkit-any doesn't work on firefox, so using :is */ font-size: 1.5em; } :is(article, aside, nav, section) :is(article, aside, nav, section) h1{ font-size: 1.17em; } @media only screen and (min-width: 600px) { .small { max-width: 60%; height: auto; } } @media only screen and (max-width: 720px) { .theme-switch-wrapper { top: auto; } }