Pepperminty-Wiki/themes/photo/theme.css

/**
 * @id				photo
 * @name			Photo 
 * @description		A different theme that looks great with a high-res photo behind it. Check the comment at the top of the CSS file for instructions on how to configure the photo behind it and the background colour. Credit for the default background image is unknown, but open an issue and I'll add it right away if you're the author.
 * @author			Starbeamrainbowlabs
 * @author_link		https://starbeamrainbowlabs.com/
 * @minversion		v0.20
 */

/*
To use this theme, copy the following into your custom css;

:root {
	--image-url: url("https://imgur.com/NSIDIeo.jpg");
	--bg-colour: hsl(20, 66%, 44%);
}

....changing URL to point to an image (can be absolute or relative), and the background colour to a colour that will be displayed behind the image. It works best if the image has relatively plain bottom edge, as then it blends with the background colour better.
 */

:root {
	--bg-colour: hsl(20, 66%, 44%);
	--image-url: url("https://i.imgur.com/NSIDIeo.jpg");
	
	/* --image-url: url("https://imgur.com/6KfDsYS.png"); */
	/* --bg-colour: #34243D; */
	
	--bg-a: hsla(0, 0%, 95%, 0.5);
	--bg-b: hsla(0, 0%, 95%, 0.8);
	
	--text-a: hsl(0, 0%, 10%);
	--text-b: hsl(0, 0%, 25%);
	
	--shadow-a: hsla(0, 0%, 25%, 0.3);
	
	--panel-padding: 0.7em;
	
	--addition: #09b400;
	--deletion: #cf1c11;
	--nochange: #847bc7;
	
	counter-reset: search-results;
}

html, body { font-size: 100%; }
body {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-rows: repeat(7, auto);
	grid-template-areas: "side-left header side-right"
		"side-left nav-top side-right"
		"side-left content side-right"
		"side-left similar-suggestions side-right"
		"side-left comments side-right"
		"side-left footer side-right"
		"side-left nav-bottom side-right";
	
	background: var(--image-url) no-repeat top center / contain,
		var(--bg-colour);
	
	color: var(--text-a);
	font-family: sans-serif;
}

body > nav, main, .similar-page-suggestions, .comments, footer {
	margin: 1em 0;
	background: var(--bg-a);
	padding: var(--panel-padding);
	box-shadow: 0.5em 0.5em 0.5em var(--shadow-a);
}
nav.top { grid-area: nav-top; }
nav.bottom { grid-area: nav-bottom; }

body > nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

.nav-more { position: relative; }
.nav-more label { font-weight: bolder; cursor: pointer; }
.nav-more input[type=checkbox] { display: none; }
.nav-more-menu {
	z-index: 10000;
	position: absolute; top: 2.6rem; right: 100000px;
	text-align: left;
	background: var(--bg-b);
}
input[type=checkbox]:checked ~ .nav-more-menu { top: 2.15em; right: -2.7em; }

nav.mega-menu > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; }
nav.mega-menu .category { min-width: 7.5em; padding: 0.3em 1em; }
nav.mega-menu strong { display: block; }
nav.mega-menu span { display: block; }

h1 {
	grid-area: header;
	text-align: center;
}
.logo { max-width: 1.75em; vertical-align: middle; }

main		{ grid-area: content; position: relative;	}
.jump-to-comments { position: absolute; top: var(--panel-padding); right: var(--panel-padding); }

main > h1:first-child, .comments > h2:first-child { margin-top: 0; }

table				{ border-collapse: collapse;	}
tr:nth-child(2n)	{ background: var(--bg-a);		}
th, td				{ padding: 0.25em 0.45em;		}

pre, code, input, textarea	{ font-size: 1rem;	}
img, video, audio			{ max-width: 100%;	}

.spoiler		{ background: #333333; border-radius: 0.2em; color: transparent; }
.spoiler:target	{ background: transparent; color: inherit; }

/* Ref https://devdocs.io/html/element/del#Accessibility_concerns it's better than nothing, but I'm not happy with it. How would a screen reader user skipt he spsoiler if they don't want to hear it? */
.spoiler::before, .spoiler::after {
	clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px);
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; white-space: nowrap;
}
.spoiler::before	{ content: " [spoiler start] ";	}
.spoiler::after		{ content: " [spoiler end] ";	}


main label	{ font-weight: bold; display: inline-block; min-width: 12em; }
textarea { min-height: 10em; }
textarea, #tags, #search-box {
	width: 100%;
	box-sizing: border-box;
	
}
.fit-text-mirror { position: absolute; left: -1000000px; }
.awesomplete { width: 100%; }

textarea, input:not([type=submit]):not([type=button]) {
	font-family: "Ubuntu", sans-serif;
	/* font-weight: light; */
	font-size: 1.1em;
	
	background: var(--bg-b);
	margin: 0.5em 0;
	padding: 0.5em;
	
	border: 0;
	box-shadow: inset 0 0 0.5em var(--shadow-a);
}

input[type=submit].large { width: 100%; }
input[type=submit] {
	box-sizing: border-box;
	margin: 0.25em 0;
	padding: 0.1em 0.25em;
	font-weight: bold;
	font-size: 1.25em;
}

.matching-tags-display {
	--parent-margin: 0.7em;
	width: calc(100% + (var(--parent-margin) * 2)); box-sizing: border-box;
	background: var(--bg-b);
	margin-left: calc(0em - var(--parent-margin));
	padding: 1em;
}

.page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
.page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
.page-list li .size { margin-left: 0.7rem; color: var(--text-b); }
.page-list li .editor { display: inline-block; margin: 0 0.5rem; }
.page-list li .tags { margin: 0 1rem; }
.tag-list { list-style-type: none; margin: 0.5rem; padding: 0.5rem; }
.tag-list li { display: inline-block; margin: 1rem; }
.mini-tag { background: var(--bg-b); padding: 0.2rem 0.4rem; text-decoration: none; }

.larger { color: var(--addition); }
.smaller, .deletion { color: var(--deletion); }
.nochange { color: var(--nochange); font-style: italic; }
.significant { font-weight: bolder; font-size: 1.1rem; }
.deletion, .deletion > .editor { text-decoration: line-through; }

.highlighted-diff { white-space: pre-wrap; }
.diff-added { background-color: rgba(31, 171, 36, 0.6); color: var(--addition); }
.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: var(--deletion); }

.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
.move::before { content: "\\1f69a"; font-size: 1.25em; margin: 0 0.1em 0 -1.1em; }
.upload::before { content: "\\1f845"; margin: 0 0.1em 0 -1.1em; }
.new-comment::before { content: "\\1f4ac"; margin: 0 0.1em 0 -1.1em; }
.reversion::before { content: "\\231b"; margin: 0 0.1em 0 -1.1em; }

.search-result {
	position: relative;
	counter-increment: search-results;
	margin-left: 1.25em;
}
.search-result::before {
	position: absolute;
	top: 0.2em; left: -1.25em;
	content: counter(search-results);
	font-size: 1.25em; color: var(--text-b);
}


.grid-large { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); grid-auto-rows: min-content; grid-gap: 1em; justify-content: center;}

.theme-item { justify-self: center; text-align: center; }
.theme-item label { min-width: auto; }


.stacked-bar { display: flex; }

/* TODO: Actually refine this properly */
.similar-page-suggestions { grid-area: similar-suggestions; }
.similar-page-suggestions > h2 { text-align: center; }
.similar-page-suggestions-list { list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-evenly; }

.comments	{ grid-area: comments;	}

.avatar		{ vertical-align: middle; max-height: 1.5em;		}
figure > .avatar, .avatar ~ figcaption { display: inline-block;	}


footer		{ grid-area: footer;	}


@media (max-width: 640px) {
	body { grid-template-columns: 1fr 16fr 1fr; }
	nav { flex-direction: column !important; }
	nav > span { padding: 0.5em; }
}