add awsm theme

packages/nuxt/layouts/README.md

@@ -1,7 +0,0 @@
-# LAYOUTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Application Layouts.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

packages/nuxt/layouts/default.vue

@@ -1,55 +1,64 @@
 <template>
-  <div>
+  <main>
+    <header>
+      <h1>{{ theme.title }}</h1>
+
+      <nav>
+        <ul v-if="theme.nav">
+          <li v-for="(n, i) in theme.nav" :key="i">
+            <nuxt-link v-if="n.to" :to="n.to">{{ n.name }}</nuxt-link>
+            <a v-else :href="n.href" target="_blank" rel="noopener">
+              {{ n.name }}
+            </a>
+          </li>
+        </ul>
+
+        <form @submit.prevent="doSearch">
+          <input
+            type="search"
+            :value="$route.query.q"
+            placeholder="Search..."
+          />
+          <div class="icon">🔎</div>
+        </form>
+      </nav>
+    </header>
     <Nuxt />
-  </div>
+  </main>
 </template>
 
-<style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import { THEME } from '~/assets/global'
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-}
+@Component
+export default class DefaultLayout extends Vue {
+  theme = THEME
 
-.button--green {
+  doSearch() {
+    alert('not implemented')
+  }
+}
+</script>
+
+<style scoped>
+nav ul {
   display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
 }
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
+form {
+  float: right;
+  max-width: 300px;
+  position: relative;
 }
 
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
+form .icon {
+  position: absolute;
+  right: 5px;
+  top: 5px;
 }
 
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
+input {
+  padding-right: 1.5em;
 }
 </style>