Initial layout

components/Footer.vue

@@ -0,0 +1,48 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="content has-text-centered">
+        <p>
+          <strong>Stardew Community Checklist</strong> by <a href="http://johncleaver.com">John Cleaver</a>. The source code is licensed
+          <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+        </p>
+        <p>
+          <NuxtLink to="/changelog">
+            Changelog
+          </NuxtLink>
+        </p>
+        <p>
+          Bundle and Item information is from the <a href="http://stardewvalleywiki.com/Stardew_Valley_Wiki">Stardew Valley Wiki</a>
+          and is used under the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
+        </p>
+        <p>
+          <a href="http://stardewvalley.net/">Stardew Valley</a> &copy; <a href="https://chucklefish.org/">Chucklefish LTD</a>.
+          Developed by <a href="https://twitter.com/ConcernedApe">ConcernedApe</a>.
+        </p>
+        <p>
+          <a :href="gh_address"><b-icon icon="github" /></a>
+          <a :href="reddit_address"><b-icon icon="reddit" /></a>
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'AppFooter',
+  components: {
+  },
+  data () {
+    return {
+      gh_address: 'https://github.com/kihashi/stardew_community_checklist',
+      reddit_address: 'https://www.reddit.com/r/stardewchecklist/'
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

components/HeaderBar.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="hero is-info is-bold">
+    <b-navbar>
+      <template #brand>
+        <b-navbar-item tag="NuxtLink" to="/">
+          <h1 class="is-size-3 has-text-weight-semibold is-hidden-mobile">
+            Stardew Community Checklist
+          </h1>
+          <h1 class="is-size-3 has-text-weight-semibold is-hidden-tablet">
+            SCC
+          </h1>
+        </b-navbar-item>
+      </template>
+    </b-navbar>
+  </section>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

layouts/default.vue

@@ -1,74 +1,32 @@
 <template>
-  <div>
-    <nav
-      class="navbar header has-shadow is-primary"
-      role="navigation"
-      aria-label="main navigation"
-    >
-      <div class="navbar-brand">
-        <a
-          class="navbar-item"
-          href="/"
-        >
-          <img
-            src="~assets/buefy.png"
-            alt="Buefy"
-            height="28"
-          >
-        </a>
-
-        <div class="navbar-burger">
-          <span />
-          <span />
-          <span />
-        </div>
-      </div>
-    </nav>
-
-    <section class="main-content columns">
-      <aside class="column is-2 section">
-        <p class="menu-label is-hidden-touch">
-          General
-        </p>
-        <ul class="menu-list">
-          <li
-            v-for="(item, key) of items"
-            :key="key"
-          >
-            <nuxt-link
-              :to="item.to"
-              exact-active-class="is-active"
-            >
-              <b-icon :icon="item.icon" /> {{ item.title }}
-            </nuxt-link>
-          </li>
-        </ul>
-      </aside>
-
-      <div class="container column is-10">
+  <div id="app">
+    <HeaderBar />
+    <section id="main-section" class="section">
+      <div class="container">
         <nuxt />
       </div>
     </section>
+    <AppFooter />
   </div>
 </template>
 
 <script>
+import HeaderBar from '@/components/HeaderBar'
+import AppFooter from '@/components/Footer'
 export default {
+  components: {
+    HeaderBar,
+    AppFooter
+  },
   data () {
     return {
-      items: [
-        {
-          title: 'Home',
-          icon: 'home',
-          to: { name: 'index' }
-        },
-        {
-          title: 'Inspire',
-          icon: 'lightbulb',
-          to: { name: 'inspire' }
-        }
-      ]
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  #main-section {
+    min-height: 100vh
+  }
+</style>