diff options
Diffstat (limited to 'assets/theme/main.scss')
-rw-r--r-- | assets/theme/main.scss | 313 |
1 files changed, 313 insertions, 0 deletions
diff --git a/assets/theme/main.scss b/assets/theme/main.scss new file mode 100644 index 0000000..967e0da --- /dev/null +++ b/assets/theme/main.scss @@ -0,0 +1,313 @@ +// 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.external-link-icon { + font-size: x-small; + vertical-align: text-top; +} + +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; + } +} + +section.project { + border-top: 1px solid var(--bodyForegroundColor); + padding: 0.5rem 0.5rem; + + h2 { + margin: 0.5rem 0rem; + + small { + margin-left: 1.5rem; + font-weight: normal; + font-size: small; + } + } + + p { + margin-top: 0; + } + + nav.project { + a, a:visited { + margin: 0.5rem; + text-decoration: underline; + color: var(--bodyForegroundColor); + } + + a::before { + content: "ยป "; + } + } +} + +section.recipe { + border-top: 1px solid var(--bodyForegroundColor); + padding: 0.5rem; + display: grid; + grid-template-columns: [preview] 1fr [description] 5fr [end]; + + div.picture { + grid-column-start: preview; + grid-column-end: description; + } + + div.description { + grid-column-start: description; + grid-column-end: end; + } + + h2 { + margin: 0.5rem 0rem; + } +} + +section.service { + border-top: 1px solid var(--bodyForegroundColor); + padding: 0.5rem; + + h2 { + margin: 0.5rem 0rem; + + small { + margin-left: 1.5rem; + font-weight: normal; + font-size: small; + } + } + + p { + margin-top: 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.main { + 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; + } +} + +.tag { + color: var(--linkForegroundColor); + font-family: monospace; + text-decoration: none; + border-bottom: 1px dotted var(--linkForegroundColor); +} +.tag::before { + content: "#"; +} + +ul.taglist { + li { + display: inline; + } + + margin: 0; + padding: 0; +} |