// Variables $mainWidth: 900px; // Colors @import url("/css/highlight-emacs.css") screen and (prefers-color-scheme: light); @import url("/css/highlight-monokai.css") screen and (prefers-color-scheme: dark); @media (prefers-color-scheme: light) { :root { --blockBackgroundColor: #c2beb9; --bodyBackgroundColor: #d7d5d1; --bodyForegroundColor: #2a2e2f; --codeBackgroundColor: #f8f8f8; --linkForegroundColor: #1c4253; } } @media (prefers-color-scheme: dark) { :root { --blockBackgroundColor: #1c1e1f; --bodyBackgroundColor: #131516; --bodyForegroundColor: #bcb7ae; --codeBackgroundColor: #272822; --linkForegroundColor: #00b3ff; } } // Actual CSS html { background-color: var(--bodyBackgroundColor); } body { color: var(--bodyForegroundColor); font-size: 16px; line-height: 1.4; text-align: justify; width: 100%; margin: 0; } small { font-size: 0.7em; } li p { margin: 0; } table { width: 100%; } a.image-link { text-decoration: none; } span.footer-link-seperator { margin: .5rem; overflow: hidden; } div.container { max-width: $mainWidth; margin: 0 auto 0.5em auto; padding: 1em 2em 0 2em; } span.citneed{ vertical-align: top; font-size: 0.7em; padding-left: 0.3em; } p.text-center { text-align: center; } article { footer hr { width: 50% } } section.admonition { background-color: var(--blockBackgroundColor); border: 1px solid var(--bodyForegroundColor); margin: .5rem auto 1.74rem auto; width: 85%; max-width: $mainWidth * .9; padding: 1.5rem; .admonition-title { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } p { margin: 0; } } @media(min-width: $mainWidth) { section.admonition { display: grid; grid-template-columns: [title] .25fr [body] 1fr [end]; .admonition-title { grid-column-start: title; grid-column-end: body; } p { grid-column-start: body; grid-column-end: end; padding-left: 10px; border-left: 1px solid #ddd; } } } @media(max-width: $mainWidth) { section.admonition { .admonition-title { text-align: center; margin-top: 0; } p { padding-top: 10px; border-top: 1px solid #ddd; } } } // Navigation bar nav { padding-bottom: 8px; border-bottom: double var(--bodyForegroundColor); text-align: center; font-family: Sans; a, a:visited { margin: 0 0.5em; font-size: 24px; text-decoration: none; color: var(--bodyForegroundColor); } .brand-name { text-align: center; display: block; font-weight: bold; font-size: 32px; color: var(--bodyForegroundColor); margin-bottom: 8px; } } // Generic links a, a:visited { color: var(--linkForegroundColor); } // Syntax highlighting div.highlight { border: 2px solid var(--bodyForegroundColor); background-color: var(--codeBackgroundColor); width: 90%; margin: 0 auto; overflow-x: auto; pre { margin: 0; padding: 6px 6px; } .code-link { border-top: 1px dotted var(--bodyForegroundColor); padding: 3px 8px; text-align: right; } } code { padding: 2px; } pre code { padding: 0; } // Helper classes .center { text-align: center; } .quoteblock { width: 90%; margin: .5rem auto; border-left: double black; padding: 0.5em; background-color: var(--blockBackgroundColor); blockquote { font-style: italic; } div.attribution { text-align: right; margin-right: 1em; } }