From 9bc17b95ae55e1cb9aa0c179456b1452b393e64b Mon Sep 17 00:00:00 2001 From: Tixie Date: Fri, 15 Mar 2019 20:00:40 +0100 Subject: [PATCH] style(welcome): New welcome screen --- src/assets/css/2-components/_buttons.css | 2 +- src/assets/css/5-screens/welcome.css | 20 ++- src/assets/css/7-rwd/_rwd-medium.css | 13 ++ src/assets/css/7-rwd/_rwd-small.css | 9 ++ src/views/components/illu-welcome.vue | 154 +++++++++++++++++++++++ src/views/screens/welcome.vue | 8 +- 6 files changed, 202 insertions(+), 4 deletions(-) create mode 100644 src/views/components/illu-welcome.vue diff --git a/src/assets/css/2-components/_buttons.css b/src/assets/css/2-components/_buttons.css index 10cec88..ec9030b 100644 --- a/src/assets/css/2-components/_buttons.css +++ b/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); diff --git a/src/assets/css/5-screens/welcome.css b/src/assets/css/5-screens/welcome.css index bd04b11..a063fc7 100644 --- a/src/assets/css/5-screens/welcome.css +++ b/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 { diff --git a/src/assets/css/7-rwd/_rwd-medium.css b/src/assets/css/7-rwd/_rwd-medium.css index 1875e14..86fcf52 100644 --- a/src/assets/css/7-rwd/_rwd-medium.css +++ b/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; + } } diff --git a/src/assets/css/7-rwd/_rwd-small.css b/src/assets/css/7-rwd/_rwd-small.css index 77fb951..a5d8d22 100644 --- a/src/assets/css/7-rwd/_rwd-small.css +++ b/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 -------------------------------------------------------------- */ diff --git a/src/views/components/illu-welcome.vue b/src/views/components/illu-welcome.vue new file mode 100644 index 0000000..4ebe3b6 --- /dev/null +++ b/src/views/components/illu-welcome.vue @@ -0,0 +1,154 @@ + + + diff --git a/src/views/screens/welcome.vue b/src/views/screens/welcome.vue index cbe6d3e..da40722 100644 --- a/src/views/screens/welcome.vue +++ b/src/views/screens/welcome.vue @@ -2,19 +2,25 @@

Capture few seconds as a gif for souvenir

+
  1. Enable Camera
  2. Capture
  3. Save as a GIF
- +