diff --git a/templates/extra.toml b/templates/extra.toml index b8cb950..16fbf94 100644 --- a/templates/extra.toml +++ b/templates/extra.toml @@ -5,7 +5,7 @@ base_url="http://localhost:3000" # og_image="" # Url to your stylesheet -stylesheet = "https://slatecave.net/assets/site_slatecave/slatecave_v3.css" +stylesheet = "/style.css" #Url to and mimetype of your favicon # favicon = "" diff --git a/templates/static/style.css b/templates/static/style.css new file mode 100644 index 0000000..5ea4b48 --- /dev/null +++ b/templates/static/style.css @@ -0,0 +1,599 @@ +/* This stylesheet is derived from the one over at slatecave.net (2023-02-25) */ + +:root { + /*Define colors that will be used*/ + --c-page-bg: #111; + --c-dark-slate: #181818; + --c-medium-slate: #222; + --c-transparent-slate: #0008; + --c-accent-slate: #111; + --c-light-accent-slate: #333; + + --c-bright-text: #fff; + --c-normal-text: #ccc; + --c-dark-text: #aaa; + + --c-accent-dark: #ce5c00; + --c-accent-light: #859900; + --c-accent-secondary: #997a2e; + --c-accent-secondary-dark: #98971aa0; + + --shadow-button: 0 0 .3em .3em #0003; + --shadow-button-hover: 0 0 .4em .4em #0004; + + /*NOTE: DO NOT USE THE COLORS ABOVE OUTSIDE OF THE COLOR DEFINITIONS BELOW!!*/ +} + +@media (prefers-color-scheme: light) { + :root { + /*Define colors that will be used*/ + --c-page-bg: #bbb; + --c-dark-slate: #ccc; + --c-medium-slate: #d8d8d8; + --c-transparent-slate: #fff4; + --c-accent-slate: #eee; + --c-light-accent-slate: #ccc; + + --shadow-button: 0 0 .2em .2em #0002; + --shadow-button-hover: 0 0 .3em .3em #0003; + + --c-bright-text: #000; + --c-normal-text: #080808; + --c-dark-text: #111; + + --c-accent-light: #274d03; + --c-accent-dark: #8F350F; + --c-accent-secondary: #36402d; + --c-accent-secondary-dark: #79740e; + } + +} + +@media print { + :root { + /*Define colors that will be used*/ + --c-page-bg: #fff; + --c-dark-slate: #fff; + --c-medium-slate: #fff; + --c-accent-slate: #ccc; + + --c-bright-text: #000; + --c-normal-text: #111; + --c-dark-text: #444; + + --c-accent-dark: #ce5c00; + --c-accent-light: #9c4500; + --c-accent-secondary: #2D5903; + + --shadow-button: unset; + --shadow-button-hover: unset; + + /*NOTE: DO NOT USE THE COLORS ABOVE OUTSIDE OF THE COLOR DEFINITIONS BELOW!!*/ + } +} + +:root { + /*Assign those colors a purpose*/ + --page-bg: var(--c-page-bg); + --page-fg: var(--c-normal-text); + --page-link: var(--c-accent-light); + --page-link-visited: var(--c-accent-secondary); + --page-focus-outline: .2rem solid var(--c-accent-light); + --page-focus-outline-offset: .05rem; + --page-font: 1em Noto Sans, sans-serif; + --page-monospace-font: 1em Noto Sans Mono, monospace; + --page-pad: 0; + --page-max-width: 120ch; + + --section-mg: .75rem; + --section-pad: 1rem; + --section-pad--reverse: -1rem; + --section-bg: var(--c-medium-slate); + --section-fg-section-title: var(--c-accent-dark); + --section-fg-title: var(--c-bright-text); + --section-border: #333 .2rem solid; + --section-preview-border: var(--c-transparent-slate) .2rem solid; + + /*Special sections*/ + + --section--footer-fg: var(--c-dark-text); + --section--footer-mg: 0; + + --heading-mg: var(--section-mg); + --heading-font: 2rem Noto Sans Mono, serif; + + --section-bg-pre: var(--dark-slate); + --section-font-pre: 1rem Noto Sans Mono, sans-serif; + --section-mg-pre: .5em 0; + + --section-bg-figure: var(--c-dark-slate); + --section-pad-figure: .5rem var(--section-pad); + --section-mg-figure: 0.5em -1rem; /*reverse section padding and give multiple figures some space to breathe*/ + --section-mg-figure-caption: 0.2em 0; + --section-pad-figure-caption: .2em 1ch; + --section-bg-figure-caption: var(--c-accent-slate); + --section-fg-figure-caption: var(--c-light-text); + + --section-media-width: 90ch; + + --section--banner-mg: var(--section-mg); + + --big-banner-font: clamp(2rem, 4vw, 4rem) sans-serif; + --big-banner-bg-color: var(--c-accent-slate); + --big-banner-color: var(--c-bright-text); + --big-banner-pad: 1rem 1ch; + + --article-nav-mg: var(--section-mg, main); + + --button-bg: var(--c-dark-slate); + --button-fg: var(--c-dark-text); + --button-pad: .2rem 1ch; + --button-mg: .2rem; + --button-border: var(--c-light-accent-slate) .2rem solid; + --button-border-hover: var(--c-accent-secondary-dark) .2rem solid; + + --button-list-flex-direction: row; + + --preview-mg-title: .25em 0; + --preview-fg-description: var(--c-dark-text); + --preview-mg-description: .25em 0; + + --code-bg: var(--c-dark-slate); + --code-fg: var(--c-dark-text); + --code-radius: .2em; + --code-pad: 0 .3ch; +} + +/* Styling for small screens */ +@media (max-width: 120ch) { + :root { + --section--banner-mg: 0; + + --section-pad-figure: .2em 0; + --section-mg-figure-caption: .2em 1ch; + + --section-pad-pre: 0 1vw; + + --big-banner-side-border: 0em; + } + +} + +@media (max-width: 90ch) { + :root { + --section-mg: .5rem; + --section-pad: .5rem; + + --button-list-flex-direction: column; + + --section-mg-figure-caption: .2em .75ch; + } +} + +@media (min-width: 90ch){ + section > figure:last-child { + margin-bottom: -1rem; + } +} + +@media print { + :root { + --page-link: var(--c-dark-text); + --page-link-visited: var(--c-dark-text); + + --section-fg-title: var(--c-bright-text); + --section-fg-section-title: var(--c-bright-text); + --section-section-title-underline: 2px solid var(--c-bright-text); + --heading-underline: 2px solid var(--c-bright-text); + + --big-banner-font: 3rem Noto Sans Mono, bold, sans-serif; + } + + /*No global navigation needed when printing on non Interactive media, just a waste of space and ink*/ + body > header, article > nav, body > footer > *:not(.page-info) { + display: none; + } + + footer { + padding-top: 0 !important; + } + +} + +/*General Customizations*/ + +dd > a { + text-decoration: none; + word-break: break-all; + overflow-wrap: break-word; +} + +kbd { + font: var(--page-monospace-font); + font-weight: bold; +} + +code, samp { + font: var(--page-monospace-font); + background: var(--code-bg); + color: var(--code-fg); + border-radius: var(--code-radius); + padding: var(--code-pad); +} + +article, main { + text-rendering: optimizeLegibility; +} + +blockquote { + border-left: .3ch solid; + border-left-color: var(--c-dark-text); + margin-left: .5ch; + padding-left: 1ch; +} + +/**Fix headings inside of summary tags**/ +summary > h2, summary > h3 { + display: inline; +} + +*:focus { + outline: var(--page-focus-outline); + outline-offset: var(--page-focus-outline-offset); +} + +nav, body { + margin: 0; + padding: 0; +} + +/*Skiplinks for Screenreaders and keyboard users*/ +a.skiplink { + opacity: 0; + font-size: 0em; + margin: 0; + padding: 0; + position: absolute; +} + +a.skiplink:focus { + opacity: .9; + font-size: 1em; +} + +/*Style links that are supposed to look a bit like buttons*/ +ul.link-list { + padding: 0; + /*Only needed becuase the above has this flex construct to keep the styling uniform without duplicate code*/ + display: flex; + flex-direction: column; + justify-content: start; +} + +p.button-paragraph { + display: block; +} + +ul.link-list > li, +p.button-paragraph, +.preview, +a.skiplink, +button, input, select { + display: block; + margin: var(--button-mg); + color: var(--button-fg); + background: var(--button-bg); +} + +ul.link-list > li > a, +p.button-paragraph > a, +section > .preview, +a.skiplink, +button { + padding: var(--button-pad); + display: block; +} + + +ul.link-list > li > a, +p.button-paragraph > a, +button { + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; +} + +ul.link-list > li > a, +p.button-paragraph > a, +button, input, select { + transition: border-color .3s, box-shadow .3s, background .5s; + box-shadow: var(--shadow-button); + border: var(--button-border); +} + +form > label { + display: block; +} + +input[type="text"], input[type="search"] { + box-shadow: var(--shadow-button), inset 0 0 .8ch #0008; +} + +span button, span input, span select { + display: inline-block; + height: 100%; +} + +ul.link-list > li > a:hover, ul.link-list > li > a:focus, +p.button-paragraph > a:hover, input[type="submit"]:hover, p.button-paragraph > a:focus, +button:hover, button:focus, select:hover, select:focus, input:focus { + outline: unset; + box-shadow: var(--shadow-button-hover); + border: var(--button-border-hover); +} + +footer > ul.link-list, section > ul.link-list, main > section, main > form, article > form, main > p { + padding: 0; + margin: 0; +} + +ul.link-list.row { + flex-direction: var(--button-list-flex-direction); +} + +ul.link-list.row > li { + display: inline-block; +} + +ul.link-list.fill > li { + flex-grow: 1; +} + +ul.link-list.fill { + justify-content: space-between; +} + +/*General page styling*/ + +body { + background: var(--page-bg); + color: var(--page-fg); + font: var(--page-font); + padding: var(--page-pad); + margin: auto; + max-width: var(--page-max-width); +} + +a { + color: var(--page-link); + transition: text-decoration-thickness .1s; + text-decoration: underline; + text-decoration-thickness: .05em; +} + +a:hover { + text-decoration: underline; + text-decoration-thickness: .2rem; +} + +a:visited { + color: var(--page-link-visited); +} + +h1, a.sitename { + margin: var(--heading-mg); + padding: var(--heading-pad); + background: var(--heading-bg); + color: var(--heading-fg); + border-bottom: var(--heading-underline); + font: var(--heading-font) +} + +h1 > a, h2 > a, h3 > a, a.sitename { + text-decoration: none; +} + +/* Style definition lists */ + +@media (min-width: 60ch) { + dt { + float: left; + } + + dd { + margin-left: 12ch; + } +} + +dt { + font-weight: bold; +} + +dt::after { + content: ":"; + margin-right: 1ch; /*Acts like a space following the colon*/ +} + +/*General section styling*/ + +article > section, footer > section, header > section, section > textarea, article > section.preview, main > section, main > form, article > form, main > nav { + margin: var(--section-mg); + padding: var(--section-pad); + padding-top: .3rem; /* Fixed at of less padding for title*/ + background: var(--section-bg); + color: var(--section-fg); + border: var(--section-border); +} + +section > textarea { + width: calc(100% - 2*var(--section-pad) - 2*var(--section-mg)); + border: none; + resize: none; + max-height: 50e, mainm; + box-shadow: inset #000 0 0 .5em; +} + +article > p, main > p { + margin: var(--section-mg); + padding: var(--section-pad); +} + +/*Remove uneccessary bottom margin for last element, section padding will do*/ +section > *:last-child { + margin-bottom: 0; +} + +/* General section header styling*/ +section > h2 { + color: var(--section-fg-section-title); + border-bottom: var(--section-section-title-underline); + margin: .3rem 0; +} + +section:not(.preview) > h3, section > h4, section > h5 { + color: var(--section-fg-title); + border-bottom: var(--section-title-underline); +} + +/*General section preformatted block styling*/ +section > pre > code, section > pre > samp, section > figure > pre, section > figure > samp { + display: block; + margin: var(--section-mg-pre); + padding: var(--section-pad-pre); + background: var(--section-bg-pre); + color: var(--section-fg-pre); + overflow: auto; + scrollbar-color: var(--section-fg-pre, var(--page-fg)) var(--section-bg-pre); + break-inside: avoid; +} + +/*Fix codeblocks in figures*/ +section > figure > pre > code { + display: block; + padding: 0; + margin: 0; + background: unset; +} + +/*General section figure styling*/ + +section > figure, section > pre { + margin: var(--section-mg-figure); + padding: var(--section-pad-figure); + background: var(--section-bg-figure); + color: var(--section-fg-figure); +} + +section > figure > figcaption { + margin: var(--section-mg-figure-caption); + padding: var(--section-pad-figure-caption); + background: var(--section-bg-figure-caption); + color: var(--section-fg-figure-caption); +} + +/* article navigation */ + +article > nav, main > nav { + margin: var(--article-nav-mg); + padding: var(--article-nav-pad); + background: var(--article-nav-bg); + color: var(--article-nav-fg); +} + +article > nav.alternatives > ul { + display: inline; + padding: 0; +} + +/*Header Styling*/ + +header > nav > * { + display: block; + margin: var(--heading-mg); + padding: var(--heading-pad); +} + +header > nav { + display: block; + --button-bg: var(--c-transparent-slate); /* mod */ +} + +/*Provide a small, currently barely visible hint that you are in a given section*/ +a[aria-current="true"], a[aria-current="page"] { + --button-border: var(--c-transparent-slate) solid .2em ; +} + +/*Footer Styling*/ + +footer { + border: var(--section--footer-border); + margin: var(--section--footer-mg, var(--section-mg)); + padding: var(--section--footer-pad, var(--section-pad)); + background: var(--section--footer-bg); + color: var(--section--footer-fg, inherit); +} + +footer > hr { + background-color: var(--section-bg); + border: none; + height: .11rem; +} + +footer > section { + margin: 0 auto; +} + +footer h2, footer h3 { + margin: .4em 0; +} + +/* Special sections - currently none */ + +/* General table styling */ + +table { + border-collapse: collapse; + border: var(--section-border); + background: var(--code-bg); + color: var(--code-fg); +} + +th, td { + text-align: left; + padding-left: .5ch; + padding-right: 2.5ch; + border: .15rem solid var(--c-medium-slate); +} + +tr:hover, th { + background-color: var(--c-accent-slate); +} + +/* Search form styling */ + +form.search > input { + font-size: 1.2em; + font-weight: bold; +} + +form.search > input[type="search"] { + background: unset; + border: unset; + box-shadow: unset; + flex-grow: 1; + padding-left: .5ch; +} + +form.search > input[type="submit"] { + padding-left: 0.5ch; + padding-right: 0.5ch; +} + +form.search { + display: flex; + flex-direction: var(--button-list-flex-direction); + box-shadow: var(--shadow-button); + border: var(--button-border); + background: var(--button-bg); +} +