refactor(layout): Allow different layout

src/App.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="layout">
+  <div class="souvenir">
     <router-view></router-view>
     <refresh-banner></refresh-banner>
   </div>

src/assets/css/3-base/_03-layout.css

@@ -2,6 +2,14 @@
 /* == layout */
 /* ----------------------------------------------------------- */
 
+.souvenir {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+}
+
 .layout {
   display: flex;
   flex-direction: column;

src/assets/css/7-rwd/_rwd-small.css

@@ -3,7 +3,7 @@
 /* ----------------------------------------------------------- */
 
 @media (min-width: 768px) {
-  .layout {
+  .souvenir {
     flex-grow: inherit;
   }
 

src/main.js

@@ -5,6 +5,9 @@ import store from '/store'
 
 import registerServiceWorker from '/register-service-worker.js'
 
+import LayoutDefault from '/views/layout/default'
+Vue.component('layout-default', LayoutDefault)
+
 Vue.config.productionTip = false
 
 new Vue({

src/views/layout/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="layout">
+    <slot></slot>
+  </div>
+</template>

src/views/screens/capture.vue

@@ -1,4 +1,5 @@
 <template lang="html">
+  <layout-default>
     <div class="capture">
       <div v-if="capturing" class="capture-progress">
         <capture-progress :value="capturingProgress"></capture-progress>
@@ -19,8 +20,8 @@
           <button class="btn btn--danger w100" @click="cancelCountdown">Cancel countdown</button>
         </template>
       </div>
-
     </div>
+  </layout-default>
 </template>
 
 <script>

src/views/screens/download.vue

@@ -1,4 +1,5 @@
 <template lang="html">
+  <layout-default>
     <div class="download">
       <div class="options">
         <span></span>
@@ -11,6 +12,7 @@
 
       <a class="download-btn btn btn--primary w100" :href="objectUrl" :download="`souvenir${timestamp}.gif`">Download GIF</a>
     </div>
+  </layout-default>
 </template>
 
 <script>

src/views/screens/preview.vue

@@ -1,4 +1,5 @@
 <template lang="html">
+  <layout-default>
     <div class="download">
       <capture-options :disabled-time="true" :disabled-timer="true" :back-btn="back"></capture-options>
 
@@ -10,6 +11,7 @@
 
       <encoding-overlay v-if="encoding" :value="encodingProgress"></encoding-overlay>
     </div>
+  </layout-default>
 </template>
 
 <script>

src/views/screens/welcome.vue

@@ -1,4 +1,5 @@
 <template lang="html">
+  <layout-default>
     <div class="welcome">
       <div class="welcome-about">
         <h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
@@ -11,6 +12,7 @@
       </div>
       <button class="btn btn--primary" @click="startCapture">Let's make a souvenir!</button>
     </div>
+  </layout-default>
 </template>
 
 <script>