380 lines
7.7 KiB
CSS
380 lines
7.7 KiB
CSS
/* Base CSS */
|
|
|
|
/*
|
|
* This CSS file contains (for me) logical style defaults that are easy to read.
|
|
*
|
|
* This file is quite often used as a starting point for other projects.
|
|
*
|
|
* Todo:
|
|
* <button>
|
|
* <inputs>
|
|
* <progress>
|
|
* <meter>
|
|
*/
|
|
|
|
:root {
|
|
--bg-main: hsl(206, 87%, 67%);
|
|
/* --bg-bright: #57b43f; */
|
|
--bg-bright: #7ac767;
|
|
--bg-alt: #3F57B4;
|
|
--bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
|
|
--bg-transcluscent: rgba(255, 255, 255, 0.85);
|
|
--bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8);
|
|
--bg-transcluscent-alt-slight: hsla(196, 91%, 62%, 0.23);
|
|
|
|
/* --text-main: #3F57B4; */
|
|
--text-main: hsl(227, 70%, 35%);
|
|
--text-bright: #efefef;
|
|
--text-alt: #38871e;
|
|
|
|
--shadow: hsla(0, 0%, 25%, 0.25);
|
|
--shadow-dark: hsla(0, 0%, 25%, 0.5);
|
|
|
|
--highlight: hsl(353, 100%, 36%);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-main: #232323;
|
|
--bg-bright: black;
|
|
--bg-transcluscent: rgba(50, 50, 50, 0.5);
|
|
|
|
--text-main: #f3f3f3;
|
|
}
|
|
} */
|
|
|
|
/* rem is relative to the html element, and em is relative to the current element. */
|
|
html { font-size: 100%; scroll-behavior: smooth; }
|
|
|
|
body
|
|
{
|
|
margin: 0;
|
|
font-family: sans-serif; /* Serif is awful :( */
|
|
|
|
background: url('{% image_urlpass "images/clouds.png" %}') center / cover fixed,
|
|
var(--bg-main); /* Don't forget to update the @page one too for paged media */
|
|
color: var(--text-main);
|
|
}
|
|
|
|
title { string-set: page-title content(text); }
|
|
|
|
/* Special tweaks for paged media (e.g. PDFs) */
|
|
@page {
|
|
font-family: sans-serif;
|
|
background: var(--bg-main); /* Set the background colour to cover the whole page */
|
|
|
|
@top-right {
|
|
content: "By Starbeamrainbowlabs";
|
|
opacity: 0.6;
|
|
}
|
|
@bottom-right {
|
|
content: "Page " counter(page) " of " counter(pages);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
}
|
|
.linked-section-heading {
|
|
display: flex;
|
|
}
|
|
.linked-section-heading > a.section-link {
|
|
opacity: 0.75;
|
|
text-decoration: none;
|
|
transition: 0.25s opacity;
|
|
}
|
|
.linked-section-heading > a.section-link:hover {
|
|
opacity: 1;
|
|
}
|
|
.linked-section-heading > span {
|
|
flex: 1;
|
|
word-wrap: anywhere;
|
|
}
|
|
|
|
nav {
|
|
background: var(--bg-bright);
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 1.1em;
|
|
margin: 0;
|
|
}
|
|
nav h1 {
|
|
background: var(--bg-alt);
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
font-size: 1.2em;
|
|
color: var(--text-bright);
|
|
}
|
|
nav ul {
|
|
flex: 1;
|
|
list-style-type: none;
|
|
margin: 0; padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
nav a {
|
|
background: var(--bg-transcluscent-slight);
|
|
display: inline-block;
|
|
padding: 1.2em 2em;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: var(--text-main);
|
|
}
|
|
nav li[aria-current=page] a {
|
|
margin: -0.25em;
|
|
border: 0.25em solid var(--bg-alt);
|
|
}
|
|
|
|
nav a.image {
|
|
padding: 0.75em 1em 0.5em 1em;
|
|
}
|
|
nav img { max-height: 2em; }
|
|
|
|
|
|
/* A small tweak to things more responsive */
|
|
iframe, object, embed, img, table
|
|
{
|
|
max-width: 100%;
|
|
}
|
|
picture img { height: initial; }
|
|
|
|
/* Turn the user's cursor into a hand when over things they can click */
|
|
button, summary
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
th, td
|
|
{
|
|
margin: 4px 6px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
a { font-weight: bold; }
|
|
/* a:not(.nav) { color: hsl(208, 67%, 40%); }
|
|
a:not(.nav):hover { color: hsl(214, 67%, 50%); }
|
|
a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
|
|
a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
|
|
|
|
pre {
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
padding: 0.6em;
|
|
border: 0.2em solid var(--bg-transcluscent-alt);
|
|
border-radius: 0.25em;
|
|
background: var(--bg-transcluscent-alt);
|
|
box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark);
|
|
line-height: 1.75em;
|
|
color: var(--text-bright);
|
|
}
|
|
pre, code {
|
|
text-align: left;
|
|
font-size: 1rem;
|
|
font-family: "Source Code Pro", "Ubuntu Mono", monospace;
|
|
white-space: pre-wrap;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
}
|
|
pre > code { background: transparent; padding: 0; }
|
|
code {
|
|
background: var(--bg-transcluscent-alt-slight);
|
|
border-radius: 0.25em;
|
|
padding: 0.15em;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
padding: 0.25em 0.45em;
|
|
}
|
|
|
|
|
|
/* todo add the rest of the textbox like inputs here */
|
|
input[type=text], input[type=number], textarea
|
|
{
|
|
margin: 3px 5px;
|
|
padding: 5px 8px;
|
|
|
|
background: var(--bg-bright);
|
|
border: 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
margin: 0.5em 0;
|
|
}
|
|
.form-item.checkbox:not(.centre) > label { flex: 1; }
|
|
.form-item:not(.checkbox):not(.centre) > input { flex: 1; }
|
|
.form-item.centre { justify-content: center; }
|
|
.bigsearch {
|
|
flex-direction: row;
|
|
}
|
|
.bigsearch > input[type=search] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
footer {
|
|
margin: 3em 0 0 0;
|
|
padding: 1em;
|
|
text-align: center;
|
|
background: var(--bg-bright);
|
|
/* color: var(--text-bright); */
|
|
}
|
|
|
|
.text-left { text-align: left; }
|
|
.text-centre { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
.invisilink { text-decoration: none; color: inherit; }
|
|
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
|
|
|
|
.icon { vertical-align: middle; }
|
|
.icon.tiny { max-width: 1em; max-height: 1em; }
|
|
.icon.small { max-width: 1.25em; max-height: 1.25em; }
|
|
.icon.medium { max-width: 2em; max-height: 2em; }
|
|
.icon.large { max-width: 5em; max-height: 5em; }
|
|
|
|
.shadow-top { box-shadow: 0 -0.25em 0.5em var(--shadow); }
|
|
.shadow-bottom { box-shadow: 0 0.25em 0.5em var(--shadow); }
|
|
.shadow-vertical{ box-shadow: 0 0 0.5em 0.25em var(--shadow); }
|
|
.shadow-text { text-shadow: 0.15em 0.15em 0.15em var(--shadow); }
|
|
|
|
.hidden { display: none; }
|
|
|
|
.bigbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)),
|
|
var(--bg) center / cover;
|
|
height: 80vh;
|
|
padding: 0 5em 0 5em;
|
|
box-sizing: border-box;
|
|
}
|
|
.bigbox h1 {
|
|
margin: 0;
|
|
font-size: 3em;
|
|
color: var(--text-alt);
|
|
}
|
|
|
|
.features-large {
|
|
margin: 3em 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
.features-large > :where(figure, .features-item) {
|
|
background: var(--bg-transcluscent);
|
|
margin: 0.1em;
|
|
padding: 1em;
|
|
max-width: 15em;
|
|
box-shadow: 0.25em 0.25em 0.5em var(--shadow);
|
|
}
|
|
.features-item.wide {
|
|
flex: 1;
|
|
max-width: initial;
|
|
margin: 0.1em 2em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
/* .features-item.wide > :last-child {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
} */
|
|
|
|
.panel-generic {
|
|
background: var(--bg-transcluscent);
|
|
margin: 2em;
|
|
padding: 1em;
|
|
box-shadow: 0.25em 0.25em 0.5em var(--shadow);
|
|
}
|
|
|
|
.bigbutton-list {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 1em 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.bigbutton {
|
|
display: inline-block;
|
|
|
|
margin: 0;
|
|
padding: 0.35em 0.45em;
|
|
border: 0;
|
|
border-radius: 0.25em;
|
|
|
|
background: var(--bg-alt);
|
|
|
|
color: var(--text-bright);
|
|
font-size: 1.25em;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
|
|
box-shadow: 0 0 0.5em var(--shadow);
|
|
|
|
cursor: pointer;
|
|
transition: box-shadow 0.25s, transform 0.25s;
|
|
}
|
|
.bigbutton:hover {
|
|
box-shadow: 0 0.25em 0.65em var(--shadow);
|
|
transform: translateY(-0.25em);
|
|
}
|
|
.bigbutton:active {
|
|
box-shadow: 0 0 0.25em var(--shadow);
|
|
transform: translateY(0.1em);
|
|
}
|
|
.bigbutton.disabled {
|
|
filter: saturate(25%);
|
|
opacity: 0.75;
|
|
cursor: default;
|
|
}
|
|
|
|
.gallerybox {
|
|
background: var(--bg-transcluscent);
|
|
}
|
|
|
|
|
|
.command-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
word-wrap: anywhere;
|
|
}
|
|
.command-list > li > a {
|
|
text-decoration: none;
|
|
}
|
|
.command-list code {
|
|
display: block;
|
|
padding: 0.5em;
|
|
box-sizing: border-box;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
|
|
.contributor-list {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.contributor-list li {
|
|
padding: 0.5em;
|
|
}
|
|
.contributor-list a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|