diff options
Diffstat (limited to 'src/content/style.css')
| -rw-r--r-- | src/content/style.css | 220 |
1 files changed, 192 insertions, 28 deletions
diff --git a/src/content/style.css b/src/content/style.css index dbd7967..6c69152 100644 --- a/src/content/style.css +++ b/src/content/style.css @@ -1,11 +1,20 @@ :root { - --color-fg: black; - --color-bg: white; - --color-2nd-fg: #555555; - --color-2nd-bg: #f5f5f5; - --color-pre-border: hsla(0, 100%, 0%, 30%); + --color-fg: #171D1A; + --color-bg: #F3F5F3; + --color-2nd-fg: #4A5651; + --color-2nd-bg: #E9EDEA; + --color-3rd-fg: #6F7B76; + --color-line: #CBD3CE; + --color-line-soft: #DDE3DF; + --color-accent: #1F6F5B; + --color-accent-soft: #D8E9E2; + --color-ochre: #9A6B1F; + --color-code-bg: #E6EBE8; + --color-pre-border: #CBD3CE; - --link-url: url(img/link/light.svg); + --font-body: sans-serif; + --font-display: serif; + --font-mono: monospace; color: var(--color-fg); background-color: var(--color-bg); @@ -13,29 +22,59 @@ @media (prefers-color-scheme: dark) { :root { - --color-fg: white; - --color-bg: black; - --color-2nd-fg: #aaaaaa; - --color-2nd-bg: #222222; - --color-pre-border: hsla(50, 100%, 70%, 10%); - - --link-url: url(img/link/dark.svg); + --color-fg: #E4EAE7; + --color-bg: #121716; + --color-2nd-fg: #A7B3AE; + --color-2nd-bg: #19201E; + --color-3rd-fg: #7E8A85; + --color-line: #2C3733; + --color-line-soft: #222B28; + --color-accent: #5CC2A2; + --color-accent-soft: #1B3A31; + --color-ochre: #D9A85A; + --color-code-bg: #1C2522; + --color-pre-border: #2C3733; } +} - a { - color: hsl(211, 100%, 60%); - &:visited { - color: hsl(242, 100%, 80%); - } - } +a { + color: var(--color-accent); +} + +a:visited { + color: var(--color-accent); } + /* General declarations */ body { margin: 0px auto; padding: 1%; - max-width: 750px; + max-width: 68ch; + font-family: var(--font-body); + font-size: 17px; + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 500; + line-height: 1.2; + text-wrap: balance; +} + +h1 { font-size: 39px; } +h2 { font-size: 31px; } +h3 { font-size: 25px; } +h4, h5, h6 { font-size: 20px; } + +code, pre, .mono { + font-family: var(--font-mono); +} + +code { + background-color: var(--color-code-bg); } .icon { @@ -52,28 +91,74 @@ header { padding: 12px 0px 12px 0px; } -nav .nav-row { +nav, nav ol { display: flex; flex-direction: row; - justify-content: space-between; flex-wrap: wrap; + align-items: center; +} + +nav ol { + list-style: none; + margin: 0px; + padding: 0px; } + nav a { font-size: 18px; margin: 12px; text-decoration: none; } -nav ul, nav li { - display: inline; +nav a img { + width: 32px; + height: 32px; +} + +nav ol.languages { + margin-left: auto; } -nav ul li a { +nav ol.languages a, nav ol.languages li { + font-family: var(--font-mono); font-size: 14px; margin: 6px; } +nav ol.languages li { + color: var(--color-fg); +} + +nav ol.languages a, +nav ol.languages a:visited { + color: var(--color-2nd-fg); +} + +nav ol.languages a:hover { + color: var(--color-fg); +} + +#tagline { + margin: 0px 12px 6px 12px; + font-size: 14px; + color: var(--color-2nd-fg); +} + + +/* A published recording */ + +#media video, #media audio { + width: 100%; + max-width: 100%; +} + +#media-links { + font-family: var(--font-mono); + font-size: 14px; + color: var(--color-2nd-fg); +} + /* Article bodies */ @@ -121,6 +206,28 @@ body > footer li a { +table.tableblock { + border-collapse: collapse; + margin: 16px 0px; +} + +table.tableblock td, table.tableblock th { + text-align: left; + vertical-align: top; + padding: 6px 24px 6px 0px; + border-bottom: 1px solid var(--color-line-soft); +} + +table.tableblock th { + color: var(--color-2nd-fg); + font-size: 14px; +} + +table.tableblock p { + margin: 0px; +} + + /* Code blocks */ /* The "lineno" class is the default generated by Rouge for table-row in code blocks, see: @@ -138,7 +245,7 @@ pre.lineno { border: 1px solid; border-color: var(--color-pre-border); border-radius: 10px; - background-color: var(--color-2nd-bg); + background-color: var(--color-code-bg); } pre { @@ -192,11 +299,11 @@ div.header-anchor:hover img { .plaintext { margin: auto auto 0 auto; text-align: right; - font-family: monospace; + font-family: var(--font-mono); } a.anchor { - background: transparent var(--link-url) center right no-repeat; + background: transparent url(img/link.svg) center right no-repeat; padding-right: 22px; margin-left: 10px; visibility: hidden; @@ -212,3 +319,60 @@ h2:hover a.anchor { .line-through { text-decoration: line-through; } + + +#comments .message { + background-color: var(--color-2nd-bg); + border: 1px solid; + border-color: var(--color-pre-border); + border-radius: 10px; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + margin-left: 9rem; +} + +#comments .message[data-depth="0"] { margin-left: 0; } +#comments .message[data-depth="1"] { margin-left: 1rem; } +#comments .message[data-depth="2"] { margin-left: 2rem; } +#comments .message[data-depth="3"] { margin-left: 3rem; } +#comments .message[data-depth="4"] { margin-left: 4rem; } +#comments .message[data-depth="5"] { margin-left: 5rem; } +#comments .message[data-depth="6"] { margin-left: 6rem; } +#comments .message[data-depth="7"] { margin-left: 7rem; } +#comments .message[data-depth="8"] { margin-left: 8rem; } + +#comments .message-header { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0 1rem; + font-size: 0.9em; +} + +#comments .from { + font-weight: bold; +} + +#comments .date, #comments .reply, #comments .handle { + color: var(--color-2nd-fg); +} + +#comments .handle { + font-weight: normal; +} + +#comments .message-body { + background-color: transparent; + border: none; + overflow-wrap: anywhere; + font-size: 0.9em; +} + +#comments pre.message-body { white-space: pre-wrap; } +#comments div.message-body p { margin: 0.5em 0; } +#comments div.message-body p:first-child { margin-top: 0; } +#comments div.message-body p:last-child { margin-bottom: 0; } + +@media (max-width: 40rem) { + #comments .message[data-depth] { margin-left: 0; } +} |