feat: add navbar & start theming

packages/site/assets/styles/_layout.scss

@@ -1 +1,9 @@
-$example-size: 40px;
+$example-size: 90px;
+$page-width: 1320px;
+
+.page {
+  max-width: $page-width;
+  margin: 0 auto;
+  padding: 40px;
+  position: relative;
+}

packages/site/assets/styles/_shared.scss

@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:400,400i,900');
+
+$purple: #5623EE;
+$primary: $purple ;
+$white: #fff;
+$black: #000;
+
+.page {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+}
+
+code {
+  font-family: 'Source Code Pro', monospace;
+}
+
+a {
+  text-decoration: none;
+  color: $primary;
+  font-weight: 900;
+  transition: opacity 140ms ease-out;
+  &:hover {
+    opacity: .76;
+  }
+}
+
+button, .button {
+  background-color: $primary;
+  position: relative;
+	border-radius: 4px;
+  border-bottom: 4px solid darken($primary, 40%);
+	padding: 11px 30px 9px;
+  margin: 0px 10px;
+  font-weight: 900;
+	font-family: 'Source Code Pro', monospace;
+  letter-spacing: 1.4px;
+	color: $white;
+	text-decoration: none;	
+  transition: all 100ms;
+  outline: none;
+  overflow: hidden;
+  cursor: pointer;
+  &:active {
+    transform: translate(0px,4px);
+    border-bottom: 1px solid;
+  }
+  &:before {
+    content: "";
+    background-color: rgba(255,255,255,0.09);
+    height: 100%;
+    width: 3em;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: -4.5em;
+    transform: skewX(-45deg) translateX(0);
+    transition: none;
+    pointer-events: none;
+  }
+  &:hover {
+    opacity: 1;
+    &:before {
+      transform: skewX(-45deg) translateX(600%);
+      transition: all 300ms ease-in;
+    }
+  }
+}

packages/site/components/NavBar.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="nav">
+    <div class="holster">
+      <div class="logo">Diez {%</div>
+      <div>
+        <a href="#">Github</a>
+        <a href="#">Docs</a>
+        <a href="#">Spectrum</a>
+        <a class="button">Get Started</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'nuxt-property-decorator';
+
+@Component({
+  components: {},
+})
+export default class NavBar extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '@/assets/styles/_shared.scss';
+  @import '@/assets/styles/_layout.scss';
+
+  .nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: $white;
+  }
+
+  .holster {
+    width: $page-width;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 40px;
+  }
+
+  .logo {
+    font-family: 'Source Code Pro', monospace;
+    font-weight: 900;
+    font-size: 30px;
+  }
+
+  a {
+    padding: 0 30px;
+    color: $black;
+  }
+</style>

packages/site/pages/index.vue

@@ -1,22 +1,23 @@
 <template>
-  <h1>Hello Diez!</h1>
+  <div class="page">
+    <NavBar></NavBar>
+    <h1>Hello Diez, bro!</h1>
+    <p>yo thi sis my paragraph</p>
+  </div>
 </template>
 
 <script lang="ts">
 import {Component, Vue} from 'nuxt-property-decorator';
+import NavBar from '@/components/NavBar.vue';
 
 @Component({
-  components: {},
+  components: {NavBar},
 })
 export default class extends Vue {
 }
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/_layout.scss';
-
-h1 {
-  color: rebeccapurple;
-  margin-top: $example-size;
-}
+  @import '@/assets/styles/_shared.scss';
+  @import '@/assets/styles/_layout.scss';
 </style>