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 @@
+
+