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) { <h1 style="margin-top:20px">Welcome to Web Maker</h1> </div> - <div class="flex" style="margin-top:40px;"> - <div class="onboard-step show-when-app"> + <div class="flex--desk" style="margin-top:40px;"> + <div class="onboard-step show-when-app hide-on-mobile"> <div class="tac"> <svg class="onboard-step__icon" viewBox="0 0 24 24"> <path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" /> 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; }