dark theme for now, light commented out until i add custom css option for boards

gulp/res/css/style.css

@@ -1,3 +1,4 @@
+/*
 :root {
 	--background-top: #d6daf0;
 	--background-rest: #eef2ff;
@@ -22,8 +23,37 @@
 	--input-borders: #a9a9a9;
 	--input-color: #000;
 	--input-background: white;
+	--dice-color: darkorange;
+	--title-color: #d70000;
+}
+*/
+:root {
+--background-top: #1d1f21;
+--background-rest: #1d1f21;
+--post-color: #282a2e;
+--post-outline-color: #282a2e;
+--label-color: #282a2e;
+--box-border-color: #111;
+--transparent-darken: #00000010;
+--highlighted-post-color: #1d1d21;
+--highlighted-post-outline-color: #111;
+--report-color: #fca;
+--report-outline-color: #c97;
+--board-title: #c5c8c6;
+--hr: #282a2e;
+--font-color: #c5c8c6;
+--name-color: #c5c8c6;
+--capcode-color: #f00;
+--subject-color: #b294bb;
+--link-color: #5f89ac;
+--post-link-color: #5f89ac;
+--link-hover: #81a2be;
+--input-borders: #111;
+--input-color: #c5c8c6;
+--input-background: #282a2e;
+--dice-color: darkorange;
+--title-color: #d70000;
 }
-
 html {
 	scroll-behavior: smooth;
 }
@@ -40,6 +70,10 @@ body {
 	margin: 0;
 }
 
+main {
+	margin: 38px 0 0 0;
+}
+
 .row {
 	display: flex;
 	flex-direction: row;
@@ -69,6 +103,15 @@ pre {
 	overflow-wrap: break-word;
 }
 
+.navbar {
+	background: var(--post-color);
+	border-bottom: 1px solid var(--box-border-color);
+	position: fixed;
+	width: 100%;
+	z-index: 1;
+	top: 0;
+}
+
 .replies {
 	padding-top: 5px;
 	font-size: smaller;
@@ -213,14 +256,6 @@ p {
 	background: black!important; /*for detected coloring*/
 }
 
-.mode {
-	margin-top: 1px;
-	background-color: red;
-	color: white;
-	font-weight: bold;
-	text-align: center;
-}
-
 .banmessage {
 	color: red;
 	font-weight: bold;
@@ -246,18 +281,25 @@ p {
 	background-image: url(/img/dice.svg);
 	background-repeat: no-repeat;
 	background-size: contain;
-	content: "      ";
+	content: "    ";
 }
 
 .dice {
-	color: red;
+	color: var(--dice-color);
 }
 
 .title, .required {
-	color: maroon;
 	font-weight: bold;
 }
 
+.required {
+	color: maroon;
+}
+
+.title {
+	color: var(--title-color);
+}
+
 #bottom {
 	margin-bottom: 10px;
 }
@@ -284,10 +326,6 @@ a .post-name:hover, a:hover {
 	align-items: flex-start;
 }
 
-.thread .anchor:first-child {
-	margin-top: -10px;
-}
-
 table {
 	background: var(--background-rest);
 	border: 1px solid var(--box-border-color);
@@ -317,7 +355,6 @@ td, th {
 	right: 5px;
 	position: fixed;
 	z-index: 1;
-	padding: 5px;
 }
 
 .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile {
@@ -510,8 +547,8 @@ textarea {
 }
 
 .anchor {
-	height: 10px;
-	margin-top: -5px;
+	height: 50px;
+	margin-top: -45px;
 }
 
 .post-container.op {

views/custompages/faq.pug

@@ -77,7 +77,7 @@ block content
 					p A tripcode is a password of sorts, which users can provide in the tripcode component of their name. This tripcode is used in conjunction with a server-known secret to generate the unique* tripcode portion of the name. Users can use the same tripcode, however with a long, secure, unique tripcode, it can be used as a form of identity between posts as it is unlikely that another user will find a different tripcode that generates the same output. It is important that you keep tripcodes secret if you use them for some form of identity. A compromised tripcode can be used for impersonation and cannot be revoked in any way.
 
 					b Capcode
-					p A capcode is a component of the name field only available to authenticated users. This includes admins, global staff, board owners and board moderators. The capcoded string will be prefixed with the users role on the board staff can make an authoritative post.
+					p A capcode is a component of the name field only available to authenticated users. This includes admins, global staff, board owners and board moderators. The capcoded string will be prefixed with the users role so board staff can make an authoritative post.
 
 	.anchor#post-styling
 	.table-container.flex-center

views/includes/postform.pug

@@ -1,4 +1,7 @@
-- const isThread = thread != null
+- const isThread = thread != null;
+- const subjectRequired = (!isThread && board.settings.forceThreadSubject);
+- const messageRequired = (!isThread && board.settings.forceThreadMessage) || (isThread && board.settings.forceReplyMessage);
+- const fileRequired = (!isThread && board.settings.forceThreadFile) || (isThread && board.settings.forceReplyFile);
 section.form-wrapper.flex-center
 	form.form-post#postform(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST')
 		input(type='hidden' name='thread' value=isThread ? thread.postId : null)
@@ -9,9 +12,9 @@ section.form-wrapper.flex-center
 				a.close.postform-style(href='#!') X
 			section.row
 				.label Subject
-					if !isThread && board.settings.forceOPSubject
+					if subjectRequired
 						.required *
-				input(type='text', name='subject', autocomplete='off' maxlength='50' required=!isThread && board.settings.forceOPSubject)
+				input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
 			section.row
 				.label Email
 				input(type='text', name='email', autocomplete='off' maxlength='50')
@@ -22,23 +25,22 @@ section.form-wrapper.flex-center
 					input(type='checkbox', name='email', value='sage')
 					| Sage
 				a.close.postform-style(href='#!') X
-			if !isThread
-				section.row
-					.label Subject
-						if board.settings.forceOPSubject
-							.required *
-					input(type='text', name='subject', autocomplete='off' maxlength='50' required=board.settings.forceOPSubject)
+			section.row
+				.label Subject
+					if subjectRequired
+						.required *
+					input(type='text', name='subject', autocomplete='off' maxlength='50' required=subjectRequired)
 		section.row
 			.label Message
-				if !isThread && board.settings.forceOPMessage
+				if messageRequired
 					.required *
-			textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=!isThread && board.settings.forceOPMessage)
+			textarea(name='message', rows='5', autocomplete='off' maxlength='4000' required=messageRequired)
 		if board.settings.maxFiles > 0
 			section.row
 				.label Files
-					if !isThread && board.settings.forceOPFile
+					if fileRequired
 						.required *
-				input(type='file', name='file' multiple required=!isThread && board.settings.forceOPFile)
+				input(type='file', name='file' multiple required=fileRequired)
 				if board.settings.userPostSpoiler
 					label.postform-style.ph-5.ml-1
 						input(type='checkbox', name='spoiler', value='true')

views/includes/stickynav.pug

@@ -1,4 +1,4 @@
 nav.stickynav
-	a(href='#bottom') [▼]
+	a.nav-item(href='#bottom') [▼]
 	|   
-	a(href='#top') [▲]
+	a.nav-item(href='#top') [▲]

views/layout.pug

@@ -3,7 +3,7 @@ html
 	head
 		include includes/head.pug
 		block head
-	body
+	body#top
 		include includes/navbar.pug
 		main
 			.container

views/pages/home.pug

@@ -15,10 +15,12 @@ block content
 						| This is an anonymous imageboard, a type of discussion board where users share images and text about various topics. 
 					p
 						| The primary difference to traditional forums is that anybody can make a post without the need to register an account or provide 
-						| any personal information. This has numerous advantages. The bar for entry is lowered, users can remain anonymous 
-						| and what is said becomes more important than whoever says it.
+						| any personal information. This lowers the barrier to entry and allows users to remain anonymous. This is especially important 
+						| when discussing topics that could have consequences if the posters identity was revealed, for example political persecution.
 					p 
-						| Choose a board below and join the discussion!
+						| Choose a board below to join the discussion, or 
+						a(href='/create.html') create your own
+						| .
 	.table-container.flex-center.mv-10.text-center
 		table
 			tr