mirror of
https://codeberg.org/slatian/service.echoip-slatecave.git
synced 2024-09-20 07:42:38 +02:00
600 lines
13 KiB
CSS
600 lines
13 KiB
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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|