echoip-slatecave/templates/static/style.css

/* 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);
}

a.sitename { display: inline-block; }

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, form.search > select {
  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);
}