From 9905b93c68cf6601e2e1a41cbcc5d59bf0418f24 Mon Sep 17 00:00:00 2001
From: Slatian <baschdel@disroot.org>
Date: Sat, 25 Feb 2023 16:28:29 +0100
Subject: [PATCH] Use a local stylesheet

---
 templates/extra.toml       |   2 +-
 templates/static/style.css | 599 +++++++++++++++++++++++++++++++++++++
 2 files changed, 600 insertions(+), 1 deletion(-)
 create mode 100644 templates/static/style.css

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);
+}
+