Bumped to v2

VERSION

@@ -0,0 +1 @@
+v2

css/main.css

@@ -11,13 +11,13 @@ html, body {
 }
 
 body {
+	position: relative;
+	min-height: 100vh;
 	font-size: 14pt;
-
 	font-family: 'Roboto', sans-serif;
 }
 
 header {
-	position: relative;
 	display: grid;
 	grid-template-columns: min-content min-content 1fr min-content;
 	grid-gap: 16px;
@@ -38,6 +38,45 @@ header .page {
 	font-weight: 500;
 }
 
+@media only screen and (max-width: 700px) {
+	header {
+		display: flex;
+		flex-flow: wrap;
+		justify-content: center;
+	}
+
+	header #page-label {
+		width: 100%;
+		text-align: center;
+	}
+
+	header #pages {
+		display: flex;
+		flex-flow: wrap;
+		justify-content: center;
+	}
+
+	header #theme {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.spacer { display: none; }
+}
+
+footer {
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	padding: 6px 0;
+	color: #f0f;
+	text-align: center;
+	font-size: 0.75em;
+	font-weight: 500;
+}
+
 #page-label {
 	font-weight: 500;
 	font-size: 1.25em;
@@ -61,7 +100,7 @@ header .page {
 	justify-content: center;
 	gap: 32px;
 	margin-top: 32px;
-	padding: 32px;
+	padding: 32px 32px 96px 32px;
 }
 
 .section {
@@ -133,3 +172,5 @@ header .page {
 	font-weight: 300;
 	font-size: 0.85em;
 }
+
+/* vim: ts=8 sw=8 noexpandtab */

index.html

@@ -28,5 +28,6 @@
 			<div id="theme"></div>
 		</header>
 		<div id="sections"></div>
+		<footer></footer>
 	</body>
 </html>

js/app.js

@@ -9,6 +9,8 @@ class App {
 		this.themes = { default: Theme.default() }
 		this.sections = []
 
+		this.retrieveVersion()
+
 		this.retrieveThemes()
 		.then(()=>this.retrieveConfig())
 		.then(config=>this.parseConfig(config))
@@ -30,6 +32,18 @@ class App {
 			})
 		})
 	}//}}}
+	retrieveVersion() {//{{{
+		return fetch('/VERSION')
+		.then(res=>{
+			if(res.ok)
+				return res.text()
+			throw `Error when fetching /${page}.yaml: ${res.status} ${res.statusText}`
+		})
+		.then(version=>{
+			this.version = version
+			document.querySelector('footer').innerHTML = `Dashie ${version}`
+		})
+	}//}}}
 	retrieveConfig() {//{{{
 		const urlParams = new URLSearchParams(window.location.search);
 		let page = urlParams.get('page')
@@ -103,6 +117,12 @@ class App {
 
 		let sectionHTML = this.sections.map(s=>s.html())
 		document.getElementById('sections').innerHTML = sectionHTML.join('')
+
+		// Footer
+		let footer = document.querySelector('footer')
+		footer.style.display = t.colors.page.footer.show ? 'block' : 'none';
+		footer.style.color = t.colors.page.footer.text
+		footer.style.backgroundColor = t.colors.page.footer.background
 	}//}}}
 	setTheme(theme) {//{{{
 		this.theme = theme
@@ -159,7 +179,12 @@ class Theme {
 			page: {
 				text: '#fff',
 				header: '#333',
-				background: '#fff'
+				background: '#fff',
+				footer: {
+					show: true,
+					text: "#aaa",
+					background: "#eee"
+				}
 			},
 
 			page_select: {

themes.yaml

@@ -0,0 +1,116 @@
+# Colorful
+# ========
+colorful:
+  page:
+    text: "#fff"
+    background: "#2f3542"
+    header: "#1e232b"
+    footer:
+      show: true
+      text: "#56647a"
+      background: "#1e232b"
+
+  page_select:
+    text: "#fff"
+    background: "#2f3542"
+
+  theme_select:
+    text: "#9db0d9"
+    background: "#2f3542"
+    border: "#3e4556"
+
+  section:
+    background: "#252932"
+    borders:
+      - ["#ffb932", "#222"]
+      - ["#ff58ae", "#222"]
+      - ["#e65272", "#222"]
+      - ["#68e2ff", "#222"]
+      - ["#33b3b6", "#222"]
+      - ["#1a66cc", "#222"]
+      - ["#883fbb", "#222"]
+      - ["#4da769", "#222"]
+
+  item:
+    label:
+    background: "#333a48"
+    description: "#9db0d9"
+    url: "#8393b6"
+    icon:
+    hover: brighter
+
+# Subdued
+# =======
+subdued:
+  page:
+    text: "#ccc"
+    background: "#f4f0ee"
+    header: "#545454"
+    footer:
+      show: true
+      text: "#c1aba0"
+      background: "#ebe4e0"
+
+  page_select:
+    text: "#3c3c3c"
+    background: "#888"
+
+  theme_select:
+    text: "#ccc"
+    background: "#545454"
+    border: "#888"
+
+  section:
+    background: "#f4f0ee"
+    borders:
+      - ["#bd9391", "#333"]
+      - ["#adbabd", "#333"]
+      - ["#91b7c7", "#333"]
+      - ["#6c4b5e", "#bbb"]
+
+  item:
+    label: "#6c4b5e"
+    background: "#ece4e1"
+    description: "#9d828f"
+    url: "#9d828f"
+    icon: "#9d828f"
+    hover: brighter
+
+# Gruvbox
+# =======
+gruvbox:
+  page:
+    text: "#bdae93"
+    background: "#282828"
+    header: "#504945"
+    footer:
+      show: true
+      text: "#a89984"
+      background: "#504945"
+
+  page_select:
+    text: "#bdae93"
+    background: "#3c3836"
+
+  theme_select:
+    text: "#bdae93"
+    background: "#3c3c36"
+    border: "#665c54"
+
+  section:
+    background: "#504945"
+    borders:
+      - ["#fb4934", "#eee"]
+      - ["#b8bb26", "#333"]
+      - ["#fabd2f", "#333"]
+      - ["#458588", "#eee"]
+      - ["#fe8019", "#333"]
+      - ["#689d6a", "#333"]
+
+  item:
+    label:
+    background: "#282828"
+    description: "#d5c4a1"
+    url: "#a89984"
+    icon:
+    hover: brighter