Start working on new photo theme

pack.php

@@ -7,6 +7,7 @@ if(!isset($paths)) {
 	$paths = new stdClass();
 	$paths->extra_data_directory = "build/._extra_data";
 }
+$theme_id = "default";
 
 if(isset($_GET["determine-latest-version"])) {
 	header("content-type: application/json");
@@ -89,7 +90,7 @@ $core = str_replace([
 	trim(file_get_contents("version")),
 	exec("git rev-parse HEAD"),
 	trim(file_get_contents("peppermint.guiconfig.json")),
-	trim(file_get_contents("themes/default/theme.css"))
+	trim(file_get_contents("themes/$theme_id/theme.css"))
 ], $core);
 
 $result = $core;

themes/photo/theme.css

@@ -0,0 +1,96 @@
+/**
+ * @id				photo
+ * @name			Photo 
+ * @description		A different theme that looks great with a high-res photo behind it.
+ * @author			Starbeamrainbowlabs
+ * @author_link		https://starbeamrainbowlabs.com/
+ * @minversion		v0.20
+ */
+
+:root {
+	--bg-colour: hsl(20, 66%, 44%);
+	--image-url: url("https://i.imgur.com/NSIDIeo.jpg");
+	
+	--bg-a: hsla(0, 0%, 95%, 0.5);
+	--bg-b: hsla(0, 0%, 95%, 0.8);
+	
+	--text-a: hsl(0, 0%, 10%);
+	
+	--shadow-a: hsla(0, 0%, 25%, 0.3);
+	
+	--panel-padding: 0.7em;
+}
+
+html, body { font-size: 100%; }
+body {
+	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; }
+pre, code, input, textarea { font-size: 1rem; }
+
+textarea {
+	width: 100%; min-height: 10em;
+	box-sizing: border-box;
+}
+
+.comments	{ grid-area: comments;	}
+.avatar { vertical-align: middle; max-height: 1.5em; }
+
+footer		{ grid-area: footer;	}