Improved layout for various screens sizes

public_html/css/core.css

@@ -26,6 +26,16 @@ h2 {
 	text-align: left;
 	max-width: 100%;
 }
+@media all and (max-width: 62.5em) {
+	#content {
+		width: 100%;
+	}
+}
+@media all and (min-width: 62.5em) {
+	#content {
+		width: 80%;
+	}
+}
 
 a {
 	color: #298;

public_html/css/login-form.css

@@ -16,3 +16,7 @@
 	list-style-position: inside;
 	white-space: nowrap;
 }
+
+#login-form .messages {
+	margin: 0 auto;
+}

public_html/css/messages.css

@@ -1,7 +1,8 @@
 .message {
-	margin-bottom: 0.2em;
+	margin: 0 auto 0.2em auto;
 	padding: 0.4em 0.5em;
 	text-align: center;
+	max-width: 40em;
 }
 
 .message.error {

public_html/css/post.css

@@ -36,20 +36,22 @@
 	}
 
 	#post-view-wrapper #post-view {
-		min-width: 40em;
 		flex: 5;
 	}
 }
 
 @media all and (max-width: 62.5em) {
 	#post-view-wrapper {
-		display: block;
+		display: flex;
+		flex-direction: column;
 	}
 	#post-view-wrapper #sidebar {
 		order: 2;
 		margin-bottom: 1em;
 	}
 	#post-view-wrapper #post-view {
+		margin: 0 auto;
+		max-width: 100%;
 		order: 1;
 	}
 }
@@ -128,4 +130,5 @@
 #post-view-wrapper .post-history-wrapper {
 	padding: 1em;
 	display: none;
+	word-break: break-all;
 }

public_html/css/registration-form.css

@@ -4,3 +4,7 @@
 #registration-form form {
 	width: 25em;
 }
+
+#registration-form .messages {
+	margin: 0 auto;
+}