feat: Bootstrap welcome screen

src/App.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="container">
-    <h1 class="txtcenter">Souvenir</h1>
+  <div class="layout">
+    <welcome-screen/>
   </div>
 </template>
 
 <script>
 
+import welcomeScreen from '@/views/welcome'
 export default {
-  name: 'souvenir'
+  name: 'souvenir',
+  components: {
+    welcomeScreen
+  }
 }
 </script>
 

src/assets/css/1-core/_01-typography.css

@@ -9,7 +9,7 @@ html {
 }
 
 body {
-  font-size: calc(1.4em);
+  font-size: 1.6em;
   line-height: 1.5;
 }
 

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

@@ -0,0 +1,64 @@
+/**
+* Button Module
+* namespace : .btn
+*/
+
+/* ----------------------------------------------------------- */
+/* == configuration */
+/* ----------------------------------------------------------- */
+
+:root {
+  --btn-primary: var(--color-primary);
+  --btn-secondary: var(--color-secondary);
+  --btn-radius: 4.2rem;
+}
+
+/* ----------------------------------------------------------- */
+/* == module */
+/* ----------------------------------------------------------- */
+
+.btn {
+  display: inline-block;
+  padding: .8em 1.6em;
+  border: none;
+  border-radius: var(--btn-radius);
+  background-color: var(--btn-primary);
+  box-shadow: none;
+  color: #fff;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none !important;
+  line-height: normal;
+  cursor: pointer;
+  transition: background .4s;
+}
+
+.btn:active,
+.btn:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* colors
+-------------------------------------------------------------- */
+
+.btn--primary,
+.btn--primary:link,
+.btn--primary:visited {
+  background: linear-gradient(116.15deg, var(--btn-primary) 0%, var(--btn-secondary) 100%);
+  background-color: var(--btn-primary);
+  color: #fff;
+}
+
+.btn--primary:hover,
+.btn--primary:active,
+.btn--primary:focus {
+  background: var(--btn-primary);
+}
+
+/* size
+-------------------------------------------------------------- */
+
+.btn--big {
+  font-size: calc(var(--base-font) + .4em);
+}

src/assets/css/3-base/_02-main.css

@@ -3,6 +3,9 @@
 /* ----------------------------------------------------------- */
 
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background: var(--color-tertiary) url("/img/dotgrid.png");
   color: var(--color-light-text);
   font-family: var(--fontstack);

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

@@ -1,3 +1,13 @@
 /* ----------------------------------------------------------- */
 /* == layout */
 /* ----------------------------------------------------------- */
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 32rem;
+}

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

@@ -0,0 +1,36 @@
+/* ----------------------------------------------------------- */
+/* == Welcome screen */
+/* ----------------------------------------------------------- */
+
+.welcome {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 4rem 2rem;
+}
+
+.welcome-about {
+  margin-top: auto;
+  margin-bottom: auto;
+  text-align: center;
+}
+
+.welcome-title {
+  margin-bottom: 6rem;
+  font-weight: normal;
+  font-size: 2.4rem;
+  line-height: 1.3em;
+}
+
+.welcome-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  color: rgba(255, 255, 255, .7);
+}
+
+.welcome-steps__item {
+  margin: .5rem 0;
+}

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

@@ -2,5 +2,5 @@
 /* == rwd -> large */
 /* ----------------------------------------------------------- */
 
-@media (min-width: var(--rwd-large)) {
+@media (min-width: 1280px) {
 }

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

@@ -2,5 +2,5 @@
 /* == rwd -> medium */
 /* ----------------------------------------------------------- */
 
-@media (min-width: var(--rwd-medium)) {
+@media (min-width: 960px) {
 }

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

@@ -2,5 +2,13 @@
 /* == rwd -> small */
 /* ----------------------------------------------------------- */
 
-@media (min-width: var(--rwd-small)) {
+@media (min-width: 768px) {
+  .welcome {
+    justify-content: center;
+  }
+
+  .welcome-about {
+    margin-top: 0;
+    margin-bottom: 4rem;
+  }
 }

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

@@ -2,5 +2,5 @@
 /* == rwd -> xsmall */
 /* ----------------------------------------------------------- */
 
-@media (min-width: var(--rwd-xsmall)) {
+@media (min-width: 480px) {
 }

src/assets/css/config.css

@@ -10,21 +10,11 @@
 -------------------------------------------------------------- */
 
 :root {
-  --base-font: 14; /* px value (without unit), will be converted in em */
+  --base-font: 16; /* px value (without unit), will be converted in em */
   --line-height: 1.5;
   --fontstack: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-/* responsive
--------------------------------------------------------------- */
-
-:root {
-  --rwd-xsmall: 480px;
-  --rwd-small: 768px;
-  --rwd-medium: 960px;
-  --rwd-large: 1280px;
-}
-
 /* focus ring
 -------------------------------------------------------------- */
 

src/assets/css/style.css

@@ -36,7 +36,7 @@
 /* == screens */
 /* ----------------------------------------------------------- */
 
-/* @import "5-screens/..."; */
+@import "5-screens/welcome.css";
 
 /* ----------------------------------------------------------- */
 /* == helpers */

src/views/welcome.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="welcome">
+    <div class="welcome-about">
+      <h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
+      <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">Start Capturing</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'welcome'
+}
+</script>