Pepperminty-Wiki/docs/theme.css

:root {
	--primary-colour: #ff1b1b;
	--primary-colour-soft: hsla(0, 93%, 68%, 0.58);
	
	--background-colour-a: hsla(3, 100%, 70%, 0.3);
	--background-colour-b: hsla(3, 100%, 80%, 0.3);
	--background-colour-light: hsla(0, 100%, 100%, 0.5);
	--background-size: 5em;
}

html, body { font-size: 100%; }
body {
	display: grid;
	grid-template-columns: minmax(25%, 15em) auto;
	grid-template-rows: auto auto;
	grid-template-areas: "navigation content"
		"navigation footer";
	
	margin: 0; padding: 0;
	
    font-family: sans-serif;
	
	background: repeating-linear-gradient(-55deg,
		var(--background-colour-a), var(--background-colour-a) var(--background-size),
		var(--background-colour-b) var(--background-size), var(--background-colour-b) calc(var(--background-size) * 2));
}

main {
	grid-area: content; min-height: 75vh;
	padding: 0.5em 10% 0.5em 10%;
	box-sizing: border-box;
}

p, li, tr {	line-height: 1.65em; }

/* Blockquote */
blockquote {
	border-left: 0.25em solid var(--primary-colour-soft);
	margin-left: 1em; padding-left: 0.5em;
}

/* Headings */
h1 {
	padding-bottom: 0.25em;
	border-bottom: 0.1em solid var(--primary-colour);
	text-align: center;
}
h2 {
	padding-bottom: 0.1em;
	border-bottom: 0.08em solid var(--primary-colour);
}
h3 {
	font-size: 1.5em;
}

/* Inline elements */
.logo-small {
	max-width: 1.25em; max-height: 1.25em;
	vertical-align: middle;
}


/* Responsive media */
audio, video, img { max-width: 100%; }


/* Code Blocks */
pre {
	padding: 0.25em;
	
	background: hsla(0, 100%, 100%, 0.5);
	border: 0.2em dashed var(--primary-colour-soft);
	
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
pre, :not(pre) > code {
	background: hsla(0, 100%, 100%, 0.6);
	border-radius: 0.25em;
	padding: 0.25em;
	font-size: 1.25em;
}


/*
███    ██  █████  ██    ██ ██  ██████ ████████ ██  ██████  ███    ██
████   ██ ██   ██ ██    ██ ██ ██         ██    ██ ██    ██ ████   ██
██ ██  ██ ███████ ██    ██ ██ ██   ███   ██    ██ ██    ██ ██ ██  ██
██  ██ ██ ██   ██  ██  ██  ██ ██    ██   ██    ██ ██    ██ ██  ██ ██
██   ████ ██   ██   ████   ██  ██████    ██    ██  ██████  ██   ████
*/

nav {
	grid-area: navigation;
	display: flex;
	flex-direction: column;
	
	padding: 0.5em;
	background-color: var(--background-colour-light);
}

.logo {
	align-self: center;
	text-align: center;
	max-width: 90%; height: 10em;
	box-sizing: border-box;
	
	padding: 0 0.5em 0.5em 0.5em;
	
}
/* nav h1 { margin-top: 0; } */
nav ul {
	list-style-type: none;
	margin: 0 1.25em; padding: 0;
}
nav ul li {
	padding: 0;
}
a, a:visited {
	color: hsla(5, 87%, 53%, 0.8);
	transition: color 0.25s;
}
a:hover { color: hsla(5, 87%, 53%, 0.9); }
a:active { color: hsl(5, 87%, 53%); }


/*
███████  ██████   ██████  ████████ ███████ ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
█████   ██    ██ ██    ██    ██    █████   ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
██       ██████   ██████     ██    ███████ ██   ██
*/

footer {
	grid-area: footer;
	margin: 1em 1em 0.5em 1em;
	/* border: 0; */
	border-top: 0.25em solid var(--background-colour-light);
	/* background: linear-gradient(to bottom, transparent, white); */
}


/*
███    ███  ██████  ██████  ██ ██      ███████
████  ████ ██    ██ ██   ██ ██ ██      ██
██ ████ ██ ██    ██ ██████  ██ ██      █████
██  ██  ██ ██    ██ ██   ██ ██ ██      ██
██      ██  ██████  ██████  ██ ███████ ███████
*/

@media (max-width: 500px) {
	body {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas: "navigation"
			"content"
			"footer";
	}
}