diff options
Diffstat (limited to 'http/src/css/base.uppcss')
| -rw-r--r-- | http/src/css/base.uppcss | 515 |
1 files changed, 0 insertions, 515 deletions
diff --git a/http/src/css/base.uppcss b/http/src/css/base.uppcss deleted file mode 100644 index b0e8565..0000000 --- a/http/src/css/base.uppcss +++ /dev/null @@ -1,515 +0,0 @@ -/** Variables */ - -:root { - --colour-primary-10: #060300; - --colour-primary-15: #150800; - --colour-primary-20: #1f1400; - --colour-primary-30: #3c2b00; - --colour-primary-40: #5c4300; - --colour-primary-50: #7f5d00; - --colour-primary-60: #a37800; - --colour-primary-70: #c89500; - --colour-primary-80: #efb300; - --colour-primary-90: #ffd98c; - --colour-primary-95: #ffecc8; - - --colour-hyperlink-10: #000409; - --colour-hyperlink-20: #001829; - --colour-hyperlink-30: #00314d; - --colour-hyperlink-40: #004d75; - --colour-hyperlink-50: #006a9f; - --colour-hyperlink-60: #1388c9; - --colour-hyperlink-70: #41a8ea; - --colour-hyperlink-80: #78c7ff; - --colour-hyperlink-90: #bfe3ff; - --colour-hyperlink-95: #e0f1ff; - - --colour-grey-10: oklch(0.1 0.01 84); - --colour-grey-20: oklch(0.2 0.01 84); - --colour-grey-30: oklch(0.3 0.01 84); - --colour-grey-40: oklch(0.4 0.01 84); - --colour-grey-50: oklch(0.5 0.01 84); - --colour-grey-60: oklch(0.6 0.01 84); - --colour-grey-70: oklch(0.7 0.01 84); - --colour-grey-80: oklch(0.8 0.01 84); - --colour-grey-90: oklch(0.9 0.01 84); - --colour-grey-95: oklch(0.95 0.01 84); - - --colour-error-10: oklch(0.1 0.2 26); - --colour-error-20: oklch(0.2 0.2 26); - --colour-error-30: oklch(0.3 0.2 26); - --colour-error-40: oklch(0.4 0.2 26); - --colour-error-50: oklch(0.5 0.2 26); - --colour-error-60: oklch(0.6 0.2 26); - --colour-error-70: oklch(0.7 0.2 26); - --colour-error-80: oklch(0.8 0.2 26); - --colour-error-90: oklch(0.9 0.2 26); - --colour-error-95: oklch(0.95 0.2 26); - - --colour-warn-10: oklch(0.1 0.2 46); - --colour-warn-20: oklch(0.2 0.2 46); - --colour-warn-30: oklch(0.3 0.2 46); - --colour-warn-40: oklch(0.4 0.2 46); - --colour-warn-50: oklch(0.5 0.2 46); - --colour-warn-60: oklch(0.6 0.2 46); - --colour-warn-70: oklch(0.7 0.2 46); - --colour-warn-80: oklch(0.8 0.2 46); - --colour-warn-90: oklch(0.9 0.2 46); - --colour-warn-95: oklch(0.95 0.2 46); - - --colour-primary-fg: var(--colour-primary-90); - --colour-primary-fg-accent: var(--colour-primary-80); - --colour-primary-bg: var(--colour-primary-10); - --colour-primary-bg-accent: var(--colour-primary-20); - --colour-code-fg: var(--colour-primary-90); - --colour-code-bg: var(--colour-primary-15); - --colour-hyperlink: var(--colour-hyperlink-80); - --colour-grey-fg: var(--colour-grey-70); - --colour-grey-bg: var(--colour-grey-30); - --colour-error-fg: var(--colour-error-90); - --colour-error-bg: var(--colour-error-40); - --colour-warn-fg: var(--colour-warn-20); - --colour-warn-bg: var(--colour-warn-80); - - --font-size-sm: 1rem; - --font-size-base: 1.125rem; - --font-size-md: 1.5rem; - --font-size-lg: 2rem; - --font-size-xl: 3rem; - - --spacing-block-xs: 0.5rem; - --spacing-block-sm: 1.75rem; - --spacing-block-md: 2.5rem; - --spacing-block-lg: 3.5rem; - --spacing-block-xl: 5rem; - --spacing-inline-xs: 0.25rem; - --spacing-inline-sm: 0.5rem; - --spacing-inline-md: 1.5rem; - --spacing-inline-lg: 3rem; - --spacing-inline-xl: 6rem; -} - -/** Light theme */ -@media (prefers-color-scheme: light) { - :root { - --colour-primary-fg: var(--colour-primary-20); - --colour-primary-fg-accent: var(--colour-primary-40); - --colour-primary-bg: var(--colour-primary-95); - --colour-hyperlink: var(--colour-hyperlink-40); - --colour-grey-fg: var(--colour-grey-40); - --colour-grey-bg: var(--colour-grey-80); - --colour-error-fg: var(--colour-error-20); - --colour-error-bg: var(--colour-error-80); - } -} - -/** Base typography */ - -body { - font-size: var(--font-size-base); - color: var(--colour-primary-fg); - font-weight: light; - background-color: var(--colour-primary-bg); - line-height: 1.5; - - /* Geometric Humanist stack from https://modernfontstacks.com */ - font-family: - Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; -} - -small { - font-size: var(--font-size-sm); -} - -:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol, blockquote) { - margin-block-start: var(--spacing-block-sm); -} - -hr { - height: 2px; -} - -/** Base layout */ - -body { - --body-margin-inline-start: var(--spacing-inline-lg); - --body-margin-inline-end: var(--body-margin-inline-start); - --body-margin-block-end: var(--spacing-block-xl); - margin-inline: var(--body-margin-inline-start) var(--body-margin-inline-end); - margin-block-end: var(--body-margin-block-end); -} - -:is(h1, h2, h3, h4, h5, h6) { - text-align: center; -} - -img { - margin-inline: auto; - height: auto; -} - -@media (min-width: 60rem) { - body { - display: grid; - grid-template-columns: - [grid-start media-start] - var(--grid-margin-inline) - [media-end content-start] - minmax(var(--grid-max-content-width), auto) - [content-end grid-end]; - grid-auto-rows: max-content; - column-gap: var(--spacing-block-sm); - max-width: var(--grid-total-width); - - --body-margin-inline-end: 6rem; - --grid-margin-inline: 6rem; - --grid-total-width: 48rem; - --grid-max-content-width: calc( - var(--grid-total-width) - var(--body-margin-inline-start) - - var(--grid-margin-inline) - var(--spacing-block-sm) - - var(--grid-margin-inline) - ); - } - - :is(main, article, nav) { - display: grid; - grid-column: grid; - grid-template-columns: subgrid; - - > :is(section, header, aside, form) { - display: grid; - grid-template-columns: subgrid; - grid-column: grid; - - > :not(.not-grid-content) { - grid-column: content; - } - } - } - - :is(h1, h2, h3, h4, h5, h6) { - text-align: start; - } -} - -@media (min-width: 80rem) { - body { - grid-template-columns: - [grid-start media-start] - var(--grid-margin-inline) - [media-end content-start] - minmax(auto, var(--grid-max-content-width)) - [content-end margin-start] - auto - [margin-end grid-end]; - - --grid-total-width: 80rem; - --grid-max-content-width: 40rem; - } -} - -/** Headings */ - -h1 { - font-size: var(--font-size-xl); - font-weight: 900; - margin-block-start: 0; -} - -h2 { - font-size: var(--font-size-lg); - font-weight: 900; - margin-block-start: var(--spacing-block-xl); -} - -h3, -h4, -h5, -h6 { - font-size: var(--font-size-md); - font-weight: 600; - margin-block-start: var(--spacing-block-lg); -} - -/** Hyperlinks */ - -a:is(:link, :visited) { - color: var(--colour-hyperlink); - text-decoration: underline; - display: inline; -} - -a:hover { - text-decoration: wavy; -} - -/** Definition lists */ -dl { - margin-block-start: var(--spacing-block-md); -} - -dl dt { - font-weight: bold; -} - -dl dd + dt { - margin-block-start: var(--spacing-block-md); -} - -/** figcaptions */ - -figcaption { - font-size: var(--font-size-sm); - font-style: italic; - text-align: center; -} - -/** Lists */ - -:is(ol, ul) { - margin-inline-start: var(--spacing-inline-lg); -} - -/** Navigation bar */ - -nav { - margin-block: var(--spacing-block-sm); -} - -nav ul { - grid-column: media-start / content-end; - display: flex; - justify-content: center; - gap: var(--spacing-inline-md); - list-style: none; - margin: 0; -} - -@media (min-width: 36rem) { - nav { - display: grid; - grid-template-columns: subgrid; - } - - nav ul { - justify-content: end; - } -} - -/** Emphasis */ - -strong { - font-weight: bold; - font-style: italic; -} - -/** Blog feed */ - -/** Block quotes */ -blockquote { - padding-inline-start: var(--spacing-inline-lg); - border-inline-start: 2px solid var(--colour-primary-fg); - font-style: italic; -} - -blockquote :first-child { - margin-block-start: 0; -} - -blockquote footer { - font-style: initial; -} - -blockquote :is(b, strong) { - font-style: italic; - font-weight: bold; -} - -blockquote :is(i, em) { - font-style: normal; -} - -/** Small caps */ -.small-caps { - font-variant: small-caps; -} - -/** Pre-formatted blocks */ -pre { - border: 2px solid var(--colour-primary-fg); - border-radius: 2px; - background-color: var(--colour-code-bg) !important; - margin-block-start: var(--spacing-block-sm); - padding-inline: var(--spacing-inline-sm); - padding-block: var(--spacing-block-xs); -} - -/** Code blocks */ -code { - border: 2px solid var(--colour-primary-fg); - border-radius: 2px; - padding-inline: var(--spacing-inline-xs); - color: var(--colour-code-fg); - background-color: var(--colour-code-bg); - font-size: var(--font-size-sm); -} -pre code { - border: none; - border-radius: none; - padding: none; -} - -/* verse */ -.verse { - span { - display: block; - } -} -.verse--hanging-indents { - span + span:not(.not-hanging) { - margin-inline-start: var(--spacing-inline-md); - } -} - -/* block-comment */ -block-comment { - display: grid; - grid-template-columns: subgrid; - grid-column: grid; - - > * { - grid-column: content; - } - - > blockquote:last-of-type { - padding-block: var(--spacing-block-sm); - padding-inline: var(--spacing-inline-md); - overflow-y: scroll; - border: 2px solid var(--colour-primary-fg); - --colour-scroll-shadow: color-mix( - in srgb, - var(--colour-primary-fg), - transparent 20% - ); - - background: - linear-gradient(var(--colour-primary-bg) 30%, transparent) center top, - linear-gradient(transparent, var(--colour-primary-bg) 70%) center bottom, - radial-gradient( - farthest-side at 50% 0, - var(--colour-scroll-shadow), - transparent - ) - center top, - radial-gradient( - farthest-side at 50% 100%, - var(--colour-scroll-shadow), - transparent - ) - center bottom; - background-repeat: no-repeat; - background-size: - 100% 2rem, - 100% 2rem, - 100% 1rem, - 100% 1rem; - background-attachment: local, local, scroll, scroll; - - > :first-child { - margin-block-start: 0; - } - } -} - -@media (min-width: 80rem) { - block-comment > blockquote:last-of-type { - grid-column: margin; - max-height: 67vh; - } -} - -/* forms */ -form { - margin-inline: auto; - max-width: max-content; - - :is(button, fieldset, input, label, object, output, select, textarea, img) { - display: block; - } - - label { - margin-block-end: var(--spacing-block-xs); - } - - * + :is(label, input[type='submit'], button) { - margin-block-start: var(--spacing-block-md); - } - - :is(input[type='submit'], input[type='button'], button) { - padding-inline: var(--spacing-inline-sm); - max-width: max-content; - &:not(dialog *) { - margin-inline-start: auto; - } - } - - :is(input[type='email'], input[type='text'], select) { - max-width: 100%; - width: 16rem; - } - - textarea { - max-width: 100%; - width: 40rem; - } -} - -/* dialogs */ - -dialog { - background: var(--colour-primary-bg-accent); - border: 2px solid var(--colour-primary-fg-accent); - bottom: auto; - color: var(--colour-primary-fg); - left: calc(0.5 * (100vw - min(90vw, 36rem))); - margin: 0; - padding-block: var(--spacing-block-sm); - padding-inline: var(--spacing-inline-sm); - text-align: center; - top: auto; - width: min(90vw, 36rem); -} - -@media (min-width: 80rem) { - dialog { - left: calc( - var(--body-margin-inline-start) + var(--grid-margin-inline) + 2 * - var(--spacing-inline-md) - ); - } -} - -/* utilities */ -:is( - .para-spacing-tight:is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol), - .para-spacing-tight :is(p, h1, h2, h3, h4, h5, h6, hr, img, figure, ul, ol) -) { - margin-block-start: var(--spacing-block-xs); -} - -.error { - background: var(--colour-error-bg); - border: 2px solid var(--colour-error-fg); - color: var(--colour-error-fg); - padding-block: var(--spacing--block-sm); - padding-inline: var(--spacing-inline-sm); -} - -.warn { - background: var(--colour-warn-bg); - border: 2px solid var(--colour-warn-fg); - color: var(--colour-warn-fg); - padding-block: var(--spacing--block-sm); - padding-inline: var(--spacing-inline-sm); - --colour-hyperlink: var(--colour-hyperlink-40); -} |