From 5b4d4b3400acdace76f5970849fcb7f9cefd2c4d Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Sun, 30 Jul 2023 04:15:05 +0200 Subject: Genesis commit Not ready for release yet, but I need some commits for M4 to work properly. --- src/style.css | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 src/style.css (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..2b67620 --- /dev/null +++ b/src/style.css @@ -0,0 +1,162 @@ +:root { + --serif: Vollkorn; + --mono: 'Iosevka Custom'; + --bg: #1D1F21; + --fg: #C5C8C6; + --bg-accent: #222427; + --accent: #DE935F; + --lesser: #969896; + --green: #B5BD68; + --red: #C66; +} + +*, *::before, *::after { box-sizing: border-box; } + +body { + font-family: var(--serif); + font-size: 1.2rem; + font-variant-numeric: lining-nums; + line-height: 1.5; + text-align: justify; + color: var(--fg); + background-color: var(--bg); + display: grid; + grid-template-columns: 1fr min(800px, 90%) 1fr; +} +body > * { grid-column: 2; } + +pre, code, kbd, samp { + font-family: var(--mono); + font-size: 1rem; + color: var(--accent); +} +pre > code { color: var(--fg); } + +h1 { + font-size: 3rem; + margin-bottom: 0; +} +h2 { font-size: 2.5rem; } + +h1, h2, p { overflow-wrap: break-word; } + +a { color: var(--accent); } +a:hover { text-decoration: none; } + +blockquote > p:first-child::before { content: '“'; } +blockquote > p:last-child::after { content: '”'; } +blockquote + figcaption::before { content: '— '; } + +blockquote, blockquote + figcaption { font-style: italic; } + +.quote { + border-left: 4px solid var(--accent); + padding: .4rem .8rem; + margin-inline: 2rem 0; + margin-block: 2rem; +} + +.quote blockquote { margin-inline-start: 1rem; } +.quote blockquote, .quote blockquote p { margin-block: .5rem; } + +.quote figcaption { + margin-inline-start: 2rem; + margin-block: .5rem; +} + +figure:not(.quote) figcaption { + text-align: center; + text-decoration: underline; +} + +hr { width: 100%; } +main { margin-block-end: 5rem; } + +footer { + margin-block: 2rem; + text-align: center; + font-style: italic; + color: var(--lesser); +} + +aside { + font-style: italic; + color: var(--lesser); + position: relative; + margin-block: 1.5rem; +} + +aside > p::before, +x-ref { + vertical-align: super; + font-size: .8rem; +} + +aside > p::before { + content: attr(data-ref); + position: absolute; + left: -1.5ch; +} + +abbr { + cursor: help; + position: relative; + text-decoration-line: underline; + text-decoration-style: dotted; +} + +abbr:hover::before { + opacity: 1; + pointer-events: inherit; +} + +abbr::before { + opacity: 0; + position: absolute; + bottom: 100%; + transition: .15s ease opacity; + white-space: nowrap; + padding: .15em .25em; + border: 1px solid var(--fg); + border-radius: 2px; + background: var(--bg-accent); + pointer-events: none; +} + +abbr.ec::before { content: 'Embedded Controller'; } +abbr.html::before { content: 'Hypertext Markup Language'; } +abbr.led::before { content: 'Light-Emitting Diode'; } +abbr.rgb::before { content: 'Red Green Blue'; } + +.diff-ins { color: var(--green); } +.diff-del { color: var(--red); } +.diff-loc { color: var(--lesser); } +.diff-meta { font-weight: bold; } + +figure > pre { margin-left: 4ch; overflow-x: scroll; } +figure > pre > code { counter-increment: line; } +figure > pre > code::before { + position: absolute; + content: counter(line); + padding-right: .5ch; + margin-left: -4ch; + width: 3ch; + text-align: right; + display: inline-block; + border-right: 1px solid var(--lesser); + color: var(--lesser); + z-index: 1; + background-color: var(--bg); +} + +header > div { + display: flex; + justify-content: space-between; + align-items: center; +} + +header > div menu { + display: flex; + gap: 2ch; +} +header > div li { list-style: none; } -- cgit v1.2.3