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.
 * @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(6, auto);
	grid-template-areas: "side-left header side-right"
		"side-left nav-top side-right"
		"side-left content 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, .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; }


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; }

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] {
	width: 100%; 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);
}

.stacked-bar { display: flex; }


.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; }
}