diff --git a/src/components/OnboardingModal.jsx b/src/components/OnboardingModal.jsx index f71339c..f13ddb3 100644 --- a/src/components/OnboardingModal.jsx +++ b/src/components/OnboardingModal.jsx @@ -11,8 +11,8 @@ export function OnboardingModal(props) {

Welcome to Web Maker

-
-
+
+
diff --git a/src/style.css b/src/style.css index cdabe6e..ceafc1c 100644 --- a/src/style.css +++ b/src/style.css @@ -137,6 +137,12 @@ p { } } +@media screen and (min-width: 501px) { + .show-on-mobile { + display: none; + } +} + hr { background: 0; border: 0; @@ -201,6 +207,7 @@ textarea { cursor: pointer; letter-spacing: 0.2px; line-height: 1; + white-space: nowrap; transition: box-shadow 0.2s ease; } @@ -571,6 +578,7 @@ body > #demo-frame { line-height: 20px; height: 20px; letter-spacing: 0.6px; + white-space: nowrap; color: #9297b3; border-radius: 3px; margin-left: 10px; @@ -1231,17 +1239,6 @@ body > #demo-frame { border-radius: 10px; box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1); flex: 1; - opacity: 0; - animation: onboard-step-show 0.6s ease forwards; - animation-delay: 0.1s; -} - -.onboard-step:nth-child(2) { - animation-delay: 0.2s; -} - -.onboard-step:nth-child(3) { - animation-delay: 0.4s; } .onboard-step__icon { @@ -1252,17 +1249,6 @@ body > #demo-frame { height: 80px; } -@keyframes onboard-step-show { - from { - transform: translateY(10px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } -} - .autocomplete-dropdown { border-top-left-radius: 0; border-top-right-radius: 0; @@ -1499,6 +1485,9 @@ body:not(.is-app) .show-when-app { body { font-size: 70%; } + .flex--desk { + display: flex; + } .main-header { overflow-x: auto; }