From 5291d02b4c84d780e253b8dfc817c97ce3d22fb4 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sat, 27 Sep 2014 10:26:33 +0200
Subject: [PATCH] Improved layout for various screens sizes

---
 public_html/css/core.css              | 10 ++++++++++
 public_html/css/login-form.css        |  4 ++++
 public_html/css/messages.css          |  3 ++-
 public_html/css/post.css              |  7 +++++--
 public_html/css/registration-form.css |  4 ++++
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/public_html/css/core.css b/public_html/css/core.css
index 9dd4bf67..fbfe881b 100644
--- a/public_html/css/core.css
+++ b/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;
diff --git a/public_html/css/login-form.css b/public_html/css/login-form.css
index 68916986..dd12b208 100644
--- a/public_html/css/login-form.css
+++ b/public_html/css/login-form.css
@@ -16,3 +16,7 @@
 	list-style-position: inside;
 	white-space: nowrap;
 }
+
+#login-form .messages {
+	margin: 0 auto;
+}
diff --git a/public_html/css/messages.css b/public_html/css/messages.css
index 5e2628c0..cf51ffb8 100644
--- a/public_html/css/messages.css
+++ b/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 {
diff --git a/public_html/css/post.css b/public_html/css/post.css
index e26fca55..f2a4d37c 100644
--- a/public_html/css/post.css
+++ b/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;
 }
diff --git a/public_html/css/registration-form.css b/public_html/css/registration-form.css
index 645ee64f..479fdefa 100644
--- a/public_html/css/registration-form.css
+++ b/public_html/css/registration-form.css
@@ -4,3 +4,7 @@
 #registration-form form {
 	width: 25em;
 }
+
+#registration-form .messages {
+	margin: 0 auto;
+}