superior styling

static/css/style.css

@@ -13,22 +13,45 @@ span {
 	margin-right: 5px;
 }
 
+section {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
 input, textarea {
-    display: block;
+	display: flex;
+	display: flex;
 	font-family: arial, helvetica, sans-serif;
 	font-size: 10pt;
 	border-radius: 3px;
 	max-width:100%;
 }
 
+.form-post-wrapper {
+	align-items: center;
+}
+
+.form-post {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+}
+
 .post-check {
-	vertical-align: sub;
+	position: relative;
+	top: 3px;
 	display: inline-block;
 }
 
 .post-file {
-	vertical-align: top;
-	display: inline-block;
+	display: inline-flex;
+	flex-direction: column;
+	margin: 5px;
+}
+
+.post-file-info {
+	margin: 2px;
 }
 
 input textares {
@@ -36,24 +59,29 @@ input textares {
 }
 
 .container {
-	margin: 5px;
-	margin-top: 57px;
+	padding: 35px 10px;
 }
 
 .board-title {
-	color: #AF0A0F;
-	font-size: 20pt;
-	font-weight: bold;
-	font-family: tahoma;
+	color: #af0a0f;
+	font: bolder 28px Tahoma;
 	letter-spacing: -2px;
+	text-align: center;
+	margin-bottom: 0;
+}
+
+.board-description {
+	text-align:center;
+	margin-top: 0;
 }
 
 .post-container {
-	margin-top: 5px;
-	margin-left: 15px;
-	padding: 5px;
+	margin-top: 2px;
+	padding: 3px;
 	background: #D6DAF0;
-	display: inline-block;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 	border-color: #B7C5D9;
 	border-width: 0 1px 1px 0;
 	border-style: none solid solid none;
@@ -89,10 +117,8 @@ input textares {
 }
 
 .navbar {
-	border-bottom: 1px solid black;
+	border-bottom: 1px solid gray;
 	margin: 0;
-	line-height: 50px;
-	height: 50px;
 	position: fixed;
 	width: 100%;
 	background: #eef2ff;
@@ -112,8 +138,7 @@ input textares {
 }
 
 .footer {
-	line-height: 50px;
-	border-top: 1px solid black;
+	border-top: 1px solid gray;
 	text-align: center;
 	flex-shrink: 0;
 	margin-top: auto;

views/includes/postform.pug

@@ -1,18 +1,19 @@
-p make a post:
-form.form-post(action='/api/board/'+board._id, enctype='multipart/form-data', method='POST')
-
-	input(type='hidden' name='_csrf' value=csrf)
-
-	input(type='hidden' name='thread' value=thread != null ? thread._id : null)
-
-	input#title(type='text', name='subject', placeholder='subject' autocomplete='off')
-
-	input#name(type='text', name='name', placeholder='name' autocomplete='off')
-
-	input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off')
-
-	textarea#messagey(name='message', rows='8', cols='50', placeholder='message' autocomplete='off')
-
-	input#file(type='file', name='file' multiple)
-
-	input(type='submit', value='submit')
+section.form-post-wrapper
+	form.form-post(action='/api/board/'+board._id, enctype='multipart/form-data', method='POST')
+	
+		input(type='hidden' name='_csrf' value=csrf)
+
+		input(type='hidden' name='thread' value=thread != null ? thread._id : null)
+	
+		input#title(type='text', name='subject', placeholder='subject' autocomplete='off' maxlength='50')
+	
+		input#name(type='text', name='name', placeholder='name' autocomplete='off' maxlength='50')
+	
+		input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off' maxlength='50')
+	
+		textarea#message(name='message', rows='8', cols='50', placeholder='message' autocomplete='off' maxlength='2000')
+	
+		input#file(type='file', name='file' multiple)
+	
+		input(type='submit', value='submit')
+	

views/mixins/post.pug

@@ -1,27 +1,28 @@
 mixin post(board, post)
-	.post-wrapper
-		div(class='post-container '+(post.thread ? '' : 'op'))
-			.post-info
-				input.post-check(type='checkbox', name='checked[]' value=post._id)
+	article(class='post-container '+(post.thread ? '' : 'op'))
+		header.post-info
+			input.post-check(type='checkbox', name='checked[]' value=post._id)
+			if post.subject
 				span.post-subject #{post.subject}
-				span.post-name #{post.name}
-				span #{post.date.toLocaleString()}
-				span No.
-				if post.thread == null
-					a(href=`/${board._id}/thread/${post._id}`) ##{post._id}
-				else
-					a(href=`/${board._id}/thread/${post.thread}#${post._id}`) ##{post._id}
-			if post.files.length > 0
-				.post-files
-					each file in post.files
-						.post-file
-							.post-file-info
-								span: a(href='/img/thumb-'+file.filename download=file.originalFilename) #{file.originalFilename}
-								span ( Size: #{file.sizeString}
-								span Dimensions: #{file.geometryString} )
-							.post-file
-								a(href='/img/'+file.filename)
-									object(data='/img/thumb-'+file.filename type=file.mimetype)
+			span.post-name #{post.name}
+			time #{post.date.toLocaleString()}
+			span No.
+			if post.thread == null
+				a(href=`/${board._id}/thread/${post._id}`) ##{post._id}
+			else
+				a(href=`/${board._id}/thread/${post.thread}#${post._id}`) ##{post._id}
+		if post.files.length > 0
+			.post-files
+				each file in post.files
+					.post-file
+						.post-file-info
+							span: a(href='/img/thumb-'+file.filename download=file.originalFilename) #{file.originalFilename}
+							br
+							span (#{file.sizeString} #{file.geometryString})
+						.post-file-src
+							a(href='/img/'+file.filename)
+								object(data='/img/thumb-'+file.filename type=file.mimetype)
+		if post.message
 			.post-message
 				p(style='white-space: pre-wrap;') #{post.message}
 

views/pages/board.pug

@@ -5,16 +5,20 @@ block head
 	title /#{board._id}/ - Recent Posts
 
 block content
-	span #{board.name} - #{board.description}
-	hr(size=1)
+	h1.board-title /#{board._id}/ - #{board.name}
+	h4.board-description #{board.description}
 	include ../includes/postform.pug
 	hr(size=1)
 	form(action='/api/board/'+board._id+'/delete' method='POST' enctype='application/x-www-form-urlencoded')
 		input(type='hidden' name='_csrf' value=csrf)
+		if threads.length === 0
+			p No posts.
+			hr(size=1)
 		for thread in threads
-			+post(board, thread)
-			for post in thread.replies
-				+post(board, post)
+			section.thread(id=thread._id)
+				+post(board, thread)
+				for post in thread.replies
+					+post(board, post)
 			hr(size=1)
 		input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off')
 		input(type='submit', value='delete')