GuerillaStudio/souvenir
GuerillaStudio/souvenir
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/souvenir.git synced 2025-01-20 22:30:20 +00:00
Code Issues Releases Activity Actions

style(welcome): New welcome screen

Browse source
This commit is contained in:
Tixie 2019-03-15 20:00:40 +01:00
parent b403a78437
commit 9bc17b95ae
6 changed files with 202 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

20
src/assets/css/5-screens/welcome.css
View file

@ -6,7 +6,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
padding: 4rem 2rem; padding: 2rem;
} }
.welcome-about { .welcome-about {
@ -16,19 +16,35 @@
} }
.welcome-title { .welcome-title {
margin-bottom: 6rem; margin: 0;
/* margin-bottom: 6rem; */
font-weight: normal; font-weight: normal;
font-size: 2.4rem; font-size: 2.4rem;
line-height: 1.3em; 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 { .welcome-steps {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-bottom: 2rem;
color: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .7);
font-size: 1.4rem;
} }
.welcome-steps__item { .welcome-steps__item {

13
src/assets/css/7-rwd/_rwd-medium.css
View file

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

9
src/assets/css/7-rwd/_rwd-small.css
View file

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

154
src/views/components/illu-welcome.vue Normal file
View file

File diff suppressed because one or more lines are too long

8
src/views/screens/welcome.vue
View file

@ -2,19 +2,25 @@
<div class="welcome"> <div class="welcome">
<div class="welcome-about"> <div class="welcome-about">
<h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1> <h1 class="welcome-title">Capture few seconds as a gif for souvenir</h1>
<illu-welcome></illu-welcome>
<ol class="welcome-steps"> <ol class="welcome-steps">
<li class="welcome-steps__item">Enable Camera</li> <li class="welcome-steps__item">Enable Camera</li>
<li class="welcome-steps__item">Capture</li> <li class="welcome-steps__item">Capture</li>
<li class="welcome-steps__item">Save as a GIF</li> <li class="welcome-steps__item">Save as a GIF</li>
</ol> </ol>
</div> </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> </div>
</template> </template>
<script> <script>
import illuWelcome from '/views/components/illu-welcome'
export default { export default {
name: 'welcome', name: 'welcome',
components: {
illuWelcome
},
methods: { methods: {
welcome () { welcome () {
this.$store.dispatch('welcome') this.$store.dispatch('welcome')