style(welcome): New welcome screen

src/assets/css/2-components/_buttons.css

@@ -19,7 +19,7 @@
 
 .btn {
   display: inline-block;
-  padding: .8em 1.6em;
+  padding: .8em 1.6em .9em;
   border: none;
   border-radius: var(--btn-radius);
   background-color: var(--btn-primary);

src/assets/css/5-screens/welcome.css

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 4rem 2rem;
+  padding: 2rem;
 }
 
 .welcome-about {
@@ -16,19 +16,35 @@
 }
 
 .welcome-title {
-  margin-bottom: 6rem;
+  margin: 0;
+  /* margin-bottom: 6rem; */
   font-weight: normal;
   font-size: 2.4rem;
   line-height: 1.3em;
 }
 
+.welcome-illu {
+  margin-top: -2rem;
+  margin-bottom: 2rem;
+  max-width: calc(100vw - 4rem);
+  max-height: 30rem;
+  width: auto;
+}
+
+.welcome-illu svg {
+  width: 100%;
+  height: auto;
+}
+
 .welcome-steps {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0;
   padding: 0;
+  padding-bottom: 2rem;
   color: rgba(255, 255, 255, .7);
+  font-size: 1.4rem;
 }
 
 .welcome-steps__item {

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

@@ -3,4 +3,17 @@
 /* ----------------------------------------------------------- */
 
 @media (min-width: 960px) {
+  /* Layout
+  -------------------------------------------------------------- */
+
+  .layout {
+    width: 40rem;
+  }
+
+  /* Welcome
+  -------------------------------------------------------------- */
+
+  .welcome-illu {
+    margin-top: 4rem;
+  }
 }

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

@@ -19,6 +19,15 @@
     margin-bottom: 4rem;
   }
 
+  .welcome-illu {
+    margin-top: -1.5rem;
+    margin-bottom: 4rem;
+  }
+
+  .welcome-steps {
+    font-size: 1.6rem;
+  }
+
   /* Capture screen
   -------------------------------------------------------------- */
 

src/views/screens/welcome.vue

@@ -2,19 +2,25 @@
   <div class="welcome">
     <div class="welcome-about">
       <h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
+      <illu-welcome></illu-welcome>
       <ol class="welcome-steps">
         <li class="welcome-steps__item">Enable Camera</li>
         <li class="welcome-steps__item">Capture</li>
         <li class="welcome-steps__item">Save as a GIF</li>
       </ol>
     </div>
-    <button class="btn btn--primary" @click="welcome">Start Capturing</button>
+    <button class="btn btn--primary" @click="welcome">Let's make a souvenir!</button>
   </div>
 </template>
 
 <script>
+import illuWelcome from '/views/components/illu-welcome'
+
 export default {
   name: 'welcome',
+  components: {
+    illuWelcome
+  },
   methods: {
     welcome () {
       this.$store.dispatch('welcome')