From d0f6a4ce99556e1a8aea686c10c64b0761186f4d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 12 May 2020 15:18:37 +0200
Subject: [PATCH] Better responsive layout for unauthenticated pages

---
 src/App.vue                   | 20 +++++++++-----------
 src/styles/theme/content.scss | 17 ++++++++++++++---
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 282bbdfe..0ca0f35e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -187,19 +187,17 @@
 				</div>
 			</div>
 			<div v-else>
-				<div class="container">
-					<div class="column is-4 is-offset-4">
-						<img src="/images/logo-full.svg" alt="Vikunja"/>
-						<div class="message is-info" v-if="motd !== ''">
-							<div class="message-header">
-								<p>Info</p>
-							</div>
-							<div class="message-body">
-								{{ motd }}
-							</div>
+				<div class="noauth-container">
+					<img src="/images/logo-full.svg" alt="Vikunja"/>
+					<div class="message is-info" v-if="motd !== ''">
+						<div class="message-header">
+							<p>Info</p>
+						</div>
+						<div class="message-body">
+							{{ motd }}
 						</div>
-						<router-view/>
 					</div>
+					<router-view/>
 				</div>
 			</div>
 			<notification/>
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 6c6aa275..cbf53c98 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -1,10 +1,10 @@
-.app-container{
+.app-container {
   min-height: calc(100vh - 65px);
   @media screen and (max-width: $tablet) {
     padding-top: $navbar-height + 0.75rem;
   }
 
-  .app-content{
+  .app-content {
     padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
     z-index: 2;
     margin-left: 17vw;
@@ -15,8 +15,19 @@
       min-height: calc(100vh - 4rem);
     }
 
-    .card{
+    .card {
       background: #fff;
     }
   }
 }
+
+.noauth-container {
+  width: 450px;
+  margin: 0 auto;
+  padding: 1rem 0;
+
+  @media screen and (max-width: calc(450px + 2rem)) {
+    width: 100%;
+    padding: 1rem;
+  }
+}