From 62858870b483ef4ffd2b12834f89cd0ef584b0c2 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Tue, 28 Jun 2022 22:15:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Boxed=20layout=20for=20larger=20?=
 =?UTF-8?q?screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 20 ++++++++++++--------
 src/assets/base.css              | 10 ++++++++++
 src/components/bottom-navbar.vue |  1 +
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e092685..1954377 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,14 +9,18 @@ import { loading } from "./store";
 
 <template>
   <TitleBar />
-  <DateSelector v-show="$route.name != 'Settings' && $route.name != 'Login'" />
-  <main>
-    <LoadingElement
-      :active="loading"
-      v-show="$route.name != 'Settings' && $route.name != 'Login'"
-    />
-    <RouterView />
-  </main>
+  <div class="center">
+    <main>
+      <DateSelector
+        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+      />
+      <LoadingElement
+        :active="loading"
+        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+      />
+      <RouterView />
+    </main>
+  </div>
   <BottomNavbar v-show="$route.name != 'Login'" />
 </template>
 
diff --git a/src/assets/base.css b/src/assets/base.css
index c9115a4..9cb526b 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -23,6 +23,16 @@ body {
   font-family: var(--font-family);
 }
 
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+main {
+  width: 100%;
+  max-width: 900px;
+}
+
 @font-face {
   font-family: "sourcesanspro";
   font-style: "normal";
diff --git a/src/components/bottom-navbar.vue b/src/components/bottom-navbar.vue
index b47c0ea..e75e7ca 100644
--- a/src/components/bottom-navbar.vue
+++ b/src/components/bottom-navbar.vue
@@ -42,6 +42,7 @@ import { RouterLink } from "vue-router";
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   padding: 0px 20px;
+  max-width: 800px;
 }
 
 .entry {