diff options
Diffstat (limited to 'global/main.css')
| -rw-r--r-- | global/main.css | 371 |
1 files changed, 371 insertions, 0 deletions
diff --git a/global/main.css b/global/main.css new file mode 100644 index 0000000..42951f4 --- /dev/null +++ b/global/main.css @@ -0,0 +1,371 @@ +/* SPDX-License-Identifier: MIT */ +/* SPDX-FileCopyrightText: 2024-2026 Katalin Rebhan <me@dblsaiko.net> */ +/* Adapted for kumardamani.net */ + +:root { + --button-border: color-mix(in oklab, ButtonFace, CanvasText 10%); + --extlink-icon: url('extlink.svg'); + + /* base font size is 16px, which is 12pt */ + --font-size-px-mul: calc(1rem / 16); + --font-size-pt-mul: calc(1rem / 12); + + /* fonts we use */ + --shell-ff: system-ui, ui-sans-serif, sans-serif; + --shell-fs: 1rem; + --shell-font: var(--shell-fs) var(--shell-ff); + + --body-ff: var(--shell-ff); + --body-fs: 1rem; + --body-font: var(--body-fs) var(--body-ff); + + --mono-ff: ui-monospace, monospace; + --mono-fs: calc(13 * var(--font-size-px-mul)); /* according to Safari */ + --mono-font: var(--mono-fs) var(--mono-ff); + + /* some extra lengths */ + --elem-spacing: 0.5rem; + --navbar-extra: 0.15rem; + --border-size: 0.15rem; + --text-skip: 0.2em; +} + +@media not (pointer: coarse) { + :root { + /* on displays with a non-coarse pointer (i.e. desktop computers), + shrink the shell font a bit because we can get away with it */ + --shell-fs: calc(10 * var(--font-size-pt-mul)); + } +} + +html { + max-width: 800px; + height: min(100%, 600px); + /* importantly, we never set font-size on the html element, so we can use + rem later to refer to the browser's default which might be modified by + the user. */ + font-family: var(--body-ff); + display: flex; + flex-direction: column; + color-scheme: light dark; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; + background: Canvas; +} + +body { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +pre, xmp, plaintext, listing, tt, code, kbd, samp { + font: var(--mono-font); +} + +header { + display: grid; + grid-template-columns: auto 1fr; + align-items: baseline; + margin: 0 0 var(--elem-spacing) 0; + font: var(--shell-font); +} + +header > nav { + display: flex; + flex-wrap: nowrap; + text-wrap: nowrap; + flex-grow: 1; + overflow-x: auto; + padding: 0 calc(var(--elem-spacing) + .1rem); + border-bottom: var(--border-size) solid var(--button-border); +} + +header > nav > ul { + display: contents; +} + +header > nav a:link { + text-decoration: unset; + color: unset; +} + +header > nav a:visited { + color: unset; +} + +header > nav li { + display: inline; + padding: 0 calc(var(--elem-spacing) + var(--navbar-extra)); + margin: 0 calc(-1 * var(--navbar-extra)); +} + +header > nav li.current { + background-color: ButtonFace; + color: ButtonText; +} + +header > nav li.hidden { + font-style: italic; +} + +.banner { + font-size: 1.5em; + font-weight: unset; + margin: 0 var(--elem-spacing) 0 0; +} + +main { + flex-grow: 1; + text-wrap-style: pretty; +} + +main > :first-child { + margin-top: 0; +} + +main > :last-child { + margin-bottom: 0; +} + +hr { + /* Fixes <hr> collapsing to width 0 inside of a flex container */ + margin-left: 0; + margin-right: 0; + align-self: stretch; + + /* Same style as navbar */ + border: 0; + border-bottom: var(--border-size) solid var(--button-border); +} + +pre { + overflow: auto; +} + +blockquote { + display: block; + margin-inline-start: var(--elem-spacing); + margin-inline-end: 0; + border-inline-start: var(--border-size) solid; + padding-inline-start: var(--text-skip); +} + +/* Safari does not like font-size: 1rem + clip-path mixed units (FB22092644). + Hope we never have to combine both! */ +.biglist > li .description > a.extlink::after { + font-size: unset; +} + +a.extlink::after { + padding-right: 0.5em; + color: CanvasText; + background-color: currentcolor; + mask: var(--extlink-icon); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + clip-path: polygon( + calc(50% - 0.25em) calc(50% - 0.25em), + calc(50% + 0.25em) calc(50% - 0.25em), + calc(50% + 0.25em) calc(50% + 0.25em), + calc(50% - 0.25em) calc(50% + 0.25em) + ); + content: ""; + vertical-align: super; + line-height: 0; + font-size: 1rem; +} + +.biglist { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1em; + padding: 0; +} + +.biglist > li { + display: block; +} + +.biglist > li > h2 { + float: left; + margin: 0; + font-size: unset; +} + +.biglist > li > h2::after { + color: GrayText; + content: "—"; + font-weight: initial; + margin: 0 var(--text-skip); +} + +.biglist > li .description { + display: inline; + margin: 0; +} + +.biglist > li .source { + float: right; + margin: 0; +} + +.biglist > li .source::before { + color: GrayText; + content: "—"; + margin: 0 var(--text-skip); +} + +article { + hyphens: auto; +} + +article > p, article > blockquote { + text-align: justify; +} + +article > :first-child { + margin-top: 0; +} + +article > :last-child { + margin-bottom: 0; +} + +article > nav li { + display: contents; +} + +article > nav ol { + display: grid; + column-gap: var(--text-skip); + grid-template-columns: 0 1fr; +} + +article > nav > ol { + overflow: auto; +} + +article > nav ol { + grid-column: 2; +} + +article > nav .prefix { + user-select: none; + grid-column: 1; + justify-self: end; +} + +article > nav a { + grid-column: 2; + justify-self: start; +} + +footer { + display: grid; + /* equal flexible side tracks keep the middle track truly centered */ + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + font: var(--shell-font); +} + +footer > .updated { + grid-column: 2; + text-align: center; +} + +footer > .logs { + grid-column: 3; + justify-self: end; +} + +footer > ul { + display: contents; +} + +footer > ul > li { + display: inline; + font: var(--shell-font); +} + +footer > ul > li:not(:last-child)::after { + color: GrayText; + content: "—"; + font-weight: initial; + margin: 0 var(--text-skip); + padding: 0; +} + +.motb { + font-style: italic; + color: GrayText; + white-space: pre-wrap; +} + +.tooltip { + text-decoration: underline; + text-decoration-style: dotted; + cursor: help; +} + +table { + border-collapse: collapse; +} + +th, td { + padding: 0; + border: 0 solid transparent; + background-clip: padding-box; +} + +tr > td + td { + border-left-width: 1.5em; +} + +tr + tr > td { + border-top-width: 0.2em; +} + +/* --- additions for kumardamani.net --- */ + +/* publication date under post titles */ +.date { + color: GrayText; + font: var(--shell-font); + margin-top: 0; +} + +figure { + margin: 1em 0; + text-align: center; +} + +figcaption { + color: GrayText; + margin-top: 0.3em; +} + +img { + max-width: 100%; + height: auto; +} + +p > img:only-child { + display: block; + margin-left: auto; + margin-right: auto; +} + +pre { + padding: 0.5em; + border: 1px solid var(--button-border); +} + +details { + margin: 1em 0; +} + +summary { + cursor: pointer; +} |