Add nonfunctional settings page

src/site/html/static/img/tick.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467"><path d="M1.66 5.462l1.685 1.482L6.763 1.78" fill="none" stroke="#151515" stroke-width="1.455" stroke-linecap="round" stroke-linejoin="round" paint-order="fill markers stroke"/></svg>

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

src/site/sass/_forms.sass

@@ -0,0 +1,152 @@
+@mixin medium-border
+	border-color: #aaa
+
+@mixin full-border
+	border-color: #888
+
+@mixin outside-shadow
+	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2)
+
+@mixin inside-shadow
+	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset
+
+@mixin curve-in
+	background: linear-gradient(to bottom, #efebe9, #faf8f7)
+
+@mixin curve-out
+	background: linear-gradient(to bottom, #fff 20%, #efeceb)
+
+@mixin curve-out-major
+	background: linear-gradient(to bottom, #fff 10%, #e4e2e0)
+
+@mixin disabled
+	background-color: #dfd6cb
+	color: #606060
+
+@mixin acts-like-button
+	&:not(:disabled)
+		cursor: pointer
+		@include curve-out
+
+		&:hover, &:focus
+			@include medium-border
+			@include outside-shadow
+
+		&:active
+			@include full-border
+			@include inside-shadow
+			@include curve-in
+
+fieldset
+	border: none
+	padding: 55px 0px 0px 0px
+	position: relative
+
+	@media screen and (max-width: 400px)
+		padding-top: 70px
+
+	legend
+		position: absolute
+		top: 5px
+		left: 0px
+		width: 100%
+		font-size: 28px
+		font-weight: bold
+		padding: 0
+		border-bottom: 1px solid #333
+		line-height: 1.56
+
+		@media screen and (max-width: 400px)
+			margin-top: 15px
+
+
+.field-row
+	line-height: 1
+	display: flex
+	align-items: center
+	justify-content: space-between
+	position: relative
+	padding-bottom: 5px
+	margin-bottom: 5px
+	border-bottom: 1px solid #bbb
+
+	@media screen and (max-width: 400px)
+		flex-direction: column
+		align-items: start
+		padding-bottom: 15px
+
+	.description
+		padding: 8px 8px 8px 0px
+
+button, select, input, .checkbox-row .pill
+	font-family: inherit
+	font-size: inherit
+	color: #222
+	border: 1px solid #ccc
+	border-radius: 4px
+	background-color: #fff
+	padding: 8px
+	line-height: 1
+
+	&::placeholder
+		font-style: italic
+
+	&:disabled
+		@include disabled
+
+input[type="text"]
+	width: 200px
+
+select
+	padding: 4px 6px 4px 4px
+
+input:not(:disabled)
+	&:hover
+		@include medium-border
+
+	&:focus
+		@include full-border
+		@include outside-shadow
+
+select:not(:disabled)
+	&:hover, &:focus
+		@include medium-border
+		@include outside-shadow
+		@include curve-out
+
+button
+	@include acts-like-button
+
+.checkbox-row
+	.pill
+		display: flex
+		align-items: center
+		user-select: none
+
+	.fake-checkbox
+		-webkit-appearance: none
+		background-color: white
+		width: 16px
+		height: 16px
+		padding: 0px
+		border: 1px solid #666
+		border-radius: 3px
+		margin-left: 8px
+		position: relative
+		outline: none
+
+	.checkbox
+		display: none
+
+		&:checked + .pill .fake-checkbox
+			background: center center / contain url(/static/img/tick.svg)
+
+		&:disabled + .pill
+			@include disabled
+
+			.fake-checkbox
+				@include disabled
+
+		&.checkbox:not(:disabled) + .pill
+			@include acts-like-button
+			cursor: pointer

src/site/sass/main.sass

@@ -1,3 +1,5 @@
+@use "forms"
+
 $layout-a-max: 820px
 $layout-b-min: 821px
 $layout-c-max: 680px
@@ -5,6 +7,7 @@ $layout-home-a-max: 520px
 $layout-home-b-min: 521px
 $main-theme-link-color: #085cae
 $medium-red-bg: #6a2222
+$solar-background: #fff4e8
 
 @font-face
 	font-family: "Bariol"
@@ -124,7 +127,7 @@ body
 .timeline
 	--image-size: 260px
 	$image-size: var(--image-size)
-	$background: #fff4e8
+	$background: $solar-background
 
 	@media screen and (max-width: $layout-a-max)
 		--image-size: 150px
@@ -159,9 +162,6 @@ body
 			top: 50%
 			border-top: 1px solid
 
-
-		&:no-posts
-
 		.number
 			position: relative
 			z-index: 1
@@ -633,3 +633,27 @@ body
 
 	a, a:visited
 		color: $main-theme-link-color
+
+.settings-page
+	background-color: #fff4e8
+	padding: 0px 10px 50px
+
+	a, a:visited
+		color: $main-theme-link-color
+
+	.settings
+		max-width: 600px
+		margin: 0 auto
+
+	.action-container
+		margin-top: 20px
+		display: flex
+		justify-content: space-between
+		align-items: center
+
+		.save-button
+			@include forms.curve-out-major
+			width: 180px
+
+		.home-link
+			font-size: 21px

src/site/server.js

@@ -22,6 +22,7 @@ subdirs("pug", async (err, dirs) => {
 
 	pinski.setNotFoundTarget("/404")
 	pinski.addRoute("/static/css/main.css", "sass/main.sass", "sass")
+	pinski.addRoute("/settings", "pug/settings.pug", "pug")
 	pinski.addPugDir("pug", dirs)
 	pinski.addSassDir("sass")
 	pinski.addStaticHashTableDir("html/static/js")