Add nonfunctional settings page

src/site/pug/settings.pug

@@ -0,0 +1,101 @@
+mixin form-component(id, description)
+	.field-row
+		label.description(for=id)= description
+		block(id="ten")
+
+mixin fieldset(name)
+	fieldset
+		legend= name
+		.fieldset-contents
+			block
+
+mixin input(id, description, value, disabled)
+	.field-row
+		label.description(for=id)= description
+		input(type="text" id=id name=id value=value disabled=disabled)
+
+mixin checkbox(id, description, label, checked, disabled)
+	.field-row.checkbox-row
+		label.description(for=id)= description
+		input.checkbox(type="checkbox" id=id name=id checked=checked disabled=disabled autocomplete="off")
+		label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
+			span.fake-checkbox
+
+mixin select(id, description, disabled, options)
+	.field-row
+		label.description(for=id)= description
+		select(id=id name=id disabled=disabled)
+			block
+
+doctype html
+html
+	head
+		title Settings | Bibliogram
+		include includes/head
+	body.settings-page
+		main.settings
+			form(action="/settings" method="post")
+				h1 Settings
+
+				+fieldset("Features")
+					+select("language", "Language", true)
+						option English (International)
+
+					+checkbox("show_comments", "Display comments", "Display", false, true)
+
+					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", false, true)
+
+					+checkbox("spa", "Fast navigation", "Enabled", true, true)
+
+				+fieldset("Appearance")
+					+select("theme", "Theme", true)
+						option Classic
+
+					+select("caption_side", "Caption side", true)
+						option Left (Bibliogram)
+						option Right (Instagram)
+
+					+checkbox("display_alt", "Display alt text inline", "Display", false, true)
+
+				//- div
+					//- Here are all the possible input styles. Uncomment to test styling.
+					- let i = 2
+					- let id = 0
+					- let thisID
+					while --i >= 0
+						fieldset
+							legend Style demo
+							.field-row
+								- thisID = "in"+(id++)
+								label.description(for=thisID) Placeholder
+								input(type="text" placeholder="Placeholder" id=thisID)
+
+							.field-row
+								- thisID = "in"+(id++)
+								label.description(for=thisID) Disabled
+								input(type="text" disabled placeholder="Disabled" value="Value" id=thisID)
+
+							.field-row
+								label.description Button
+								button(type="button") Button
+
+							.field-row
+								- thisID = "in"+(id++)
+								label.description(for=thisID) Select
+								select(id=thisID)
+									option Select
+									option Yes
+									option No
+									option Always
+									option Never
+
+							.field-row.checkbox-row
+								- thisID = "in"+(id++)
+								label.description(for=thisID) Checkbox
+								input.checkbox(type="checkbox" id=thisID)
+								label.pill(for=thisID tabindex=0 onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`) Label
+									span.fake-checkbox
+
+				.action-container
+					a(href="/").home-link ← Home
+					button(type="submit").save-button Save settings