Some css + some content...

frontend/components/Navbar.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-app-bar fixed app color="primary" dark>
+        <v-btn to="/" text rounded>Simple Notes</v-btn>
+        <v-spacer />
+        <div v-if="isAuthenticated">
+            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
+            <v-btn class="mr-2" outlined>
+                Welcome {{ loggedInUser.username }}
+            </v-btn>
+            <v-btn outlined @click="logout">Logout</v-btn>
+        </div>
+        <v-btn v-else to="/account" text rounded>Account</v-btn>
+    </v-app-bar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Navbar',
+    computed: {
+        ...mapGetters(['isAuthenticated', 'loggedInUser']),
+    },
+    methods: {
+        async logout() {
+            await this.$auth.logout()
+        },
+    },
+}
+</script>

frontend/layouts/centered.vue

@@ -1,19 +0,0 @@
-<template>
-    <v-app>
-        <v-content>
-            <v-container class="fill-height" fluid>
-                <v-row align="center" justify="center">
-                    <v-col cols="12" lg="6" md="8">
-                        <nuxt />
-                    </v-col>
-                </v-row>
-            </v-container>
-        </v-content>
-    </v-app>
-</template>
-
-<script>
-export default {
-    name: 'Centered',
-}
-</script>

frontend/layouts/default.vue

@@ -1,37 +1,23 @@
 <template>
     <v-app>
-        <v-app-bar fixed app color="primary" dark>
+        <Navbar />
-            <v-btn to="/" text rounded>Simple Notes</v-btn>
-            <v-spacer />
-            <div v-if="isAuthenticated">
-                <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-                <v-btn class="mr-2" outlined>
-                    Welcome {{ loggedInUser.username }}
-                </v-btn>
-                <v-btn outlined @click="logout">Logout</v-btn>
-            </div>
-            <v-btn v-else to="/account" text rounded>Account</v-btn>
-        </v-app-bar>
         <v-content>
-            <v-container>
+            <v-container fill-height>
-                <nuxt />
+                <v-row no-gutters justify="center">
+                    <v-col cols="12" sm="8" md="6">
+                        <nuxt />
+                    </v-col>
+                </v-row>
             </v-container>
         </v-content>
     </v-app>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import Navbar from '@/components/Navbar'
 
 export default {
-    computed: {
+    components: { Navbar },
-        ...mapGetters(['isAuthenticated', 'loggedInUser']),
-    },
-    methods: {
-        async logout() {
-            await this.$auth.logout()
-        },
-    },
 }
 </script>
 

frontend/layouts/wide.vue

@@ -0,0 +1,28 @@
+<template>
+    <v-app>
+        <Navbar />
+        <v-content>
+            <v-container fluid fill-height>
+                <v-row no-gutters justify="center">
+                    <v-col cols="12">
+                        <nuxt />
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-content>
+    </v-app>
+</template>
+
+<script>
+import Navbar from '@/components/Navbar'
+
+export default {
+    components: { Navbar },
+}
+</script>
+
+<style>
+html {
+    overflow-y: auto;
+}
+</style>

frontend/pages/account.vue

@@ -31,8 +31,6 @@ import LoginForm from '~/components/LoginForm'
 import RegisterForm from '~/components/RegisterForm'
 
 export default {
-    name: 'Centered',
-    layout: 'centered',
     options: {
         auth: 'guest',
     },

frontend/pages/index.vue

@@ -1,5 +1,48 @@
 <template>
-    <h1>slt</h1>
+    <v-container>
+        <v-row dense>
+            <v-col cols="12">
+                <v-card color="#385F73" dark>
+                    <v-card-title class="headline">
+                        Unlimited notes now
+                    </v-card-title>
+                    <v-card-subtitle>
+                        Listen to your favorite artists and albums whenever and
+                        wherever, online and offline.
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>See a demo</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+            <v-col cols="12">
+                <v-card color="#1F7087" dark>
+                    <v-card-title class="headline">
+                        Wow
+                    </v-card-title>
+                    <v-card-subtitle>
+                        You can even search your notes
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>Create an account</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+            <v-col cols="12">
+                <v-card color="#952175" dark>
+                    <v-card-title class="headline">
+                        babar
+                    </v-card-title>
+                    <v-card-subtitle>
+                        You notes are safe with us
+                    </v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text>Privacy policy</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <script>
@@ -8,7 +51,6 @@ export default {
     options: {
         auth: false,
     },
-    data: () => ({}),
     head: () => ({
         title: 'Home',
     }),

frontend/pages/new.vue

@@ -1,62 +0,0 @@
-<template>
-    <v-card flat>
-        <v-toolbar color="primary" dark extended prominent>
-            <v-app-bar-nav-icon></v-app-bar-nav-icon>
-            <v-toolbar-title>Notes</v-toolbar-title>
-        </v-toolbar>
-
-        <v-card class="mx-auto" max-width="700" style="margin-top: -64px;">
-            <v-toolbar flat>
-                <v-toolbar-title class="grey--text"
-                    >Create a note</v-toolbar-title
-                >
-            </v-toolbar>
-
-            <v-divider></v-divider>
-
-            <v-card-text>
-                <v-text-field label="Title" value="My new note"></v-text-field>
-
-                <v-textarea
-                    label="Text"
-                    counter
-                    loader-height="5"
-                    spellcheck="false"
-                    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse"
-                ></v-textarea>
-
-                <v-combobox
-                    v-model="tags"
-                    :items="possibleTags"
-                    :delimiters="delimiters"
-                    label="Tags"
-                    multiple
-                    chips
-                    deletable-chips
-                ></v-combobox>
-            </v-card-text>
-
-            <v-divider></v-divider>
-
-            <v-card-actions>
-                <v-btn color="success" class="mx-auto" depressed block>
-                    Create
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-card>
-</template>
-
-<script>
-export default {
-    name: 'New',
-    layout: 'empty',
-    data: () => ({
-        delimiters: [' ', ','],
-        tags: [],
-        possibleTags: ['Dev', 'Ephec', 'Java'],
-    }),
-}
-</script>
-
-<style scoped></style>

frontend/pages/notes.vue

@@ -4,7 +4,7 @@
         :items="notes"
         :loading="loading"
         loading-text="Loading notes..."
-        class="elevation-1 mt-10"
+        class="elevation-1"
         disable-sort
     >
         <template v-slot:top>
@@ -59,6 +59,7 @@ import { format } from 'timeago.js'
 export default {
     name: 'Notes',
     title: 'Notes',
+    layout: 'wide',
     data: () => ({
         loading: true,
         notes: [],