From 9234f724418baa170657766222794d899e1c98f4 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sun, 9 Jul 2023 17:44:18 +0200 Subject: [PATCH] add styles for small until we_develop section --- index.html | 8 +- repl/src/assets/styles/_debug.scss | 9 + .../styles/coming_small_responsive.scss | 71 ----- repl/src/assets/styles/main.scss | 1 + repl/src/assets/styles/responsive_small.scss | 256 +++++++++++++++--- 5 files changed, 226 insertions(+), 119 deletions(-) create mode 100644 repl/src/assets/styles/_debug.scss diff --git a/index.html b/index.html index a577359..344f22b 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@
-
+

@@ -124,9 +124,9 @@
phone
-

+
-
+

@@ -146,7 +146,7 @@
phone
-

+
diff --git a/repl/src/assets/styles/_debug.scss b/repl/src/assets/styles/_debug.scss new file mode 100644 index 0000000..6f88185 --- /dev/null +++ b/repl/src/assets/styles/_debug.scss @@ -0,0 +1,9 @@ +section, .flipping-zone { + border: solid 1px red; +} +.flip-handle{ + border: solid 1px green; + width: 2rem; + background: greenyellow; + opacity: 0.5; +} diff --git a/repl/src/assets/styles/coming_small_responsive.scss b/repl/src/assets/styles/coming_small_responsive.scss index a1fa3ba..4eb39b2 100644 --- a/repl/src/assets/styles/coming_small_responsive.scss +++ b/repl/src/assets/styles/coming_small_responsive.scss @@ -1,79 +1,8 @@ @media all and (max-width: 600px) { - #transactionnal_webdesign { - .description { - font-size: 5rem !important; - padding-top: 4rem; - } - .sub-title { - font-weight: 600; - font-size: 5rem; - } - min-height: 160vh; - } - section#carry { - .description { - margin-top: 3vh; - font-size: 5rem; - } - .computer-block { - margin-top: 32vh; - } - } - - #carry .bubbles p { - &:nth-of-type(1) { - left: -7%; - top: -93rem; - } - - &:nth-of-type(2) { - left: 36%; - top: -112rem; - } - - &:nth-of-type(3) { - left: -10vw; - } - } - - #kyc { - .description2 { - font-size: 3rem; - padding: 0 1rem; - } - - .title { - font-size: 5rem; - line-height: 1em; - } - - .bubbles { - .bubble { - span { - margin-left: 0; - } - - &:nth-of-type(2) { - margin-left: -2rem; - } - } - - margin-top: -200vw; - } - } - - #china { - height: 200vh; - - .top { - font-size: 3rem; - margin-bottom: 1rem; - } - } #we_develop { .title { diff --git a/repl/src/assets/styles/main.scss b/repl/src/assets/styles/main.scss index d9f10af..c8cfd1f 100644 --- a/repl/src/assets/styles/main.scss +++ b/repl/src/assets/styles/main.scss @@ -18,4 +18,5 @@ custom @import "./responsive_small"; //@import "./coming_small_responsive"; @import "./responsive_big_screens"; +@import "./debug"; diff --git a/repl/src/assets/styles/responsive_small.scss b/repl/src/assets/styles/responsive_small.scss index 419a779..4c3f668 100644 --- a/repl/src/assets/styles/responsive_small.scss +++ b/repl/src/assets/styles/responsive_small.scss @@ -5,7 +5,6 @@ responsive land custom @media all and (max-width: 600px) { main { - img { max-width: 95vw; } @@ -22,7 +21,6 @@ responsive land custom } #cover { - .button { top: 10rem; width: 7rem; @@ -36,13 +34,21 @@ responsive land custom } } - #unlock_white { - height: 132px; + #open { + img, #unlock, #unlock_white { + height: 120px; + } + + #unlock_white { + margin-top: -34rem; + } } + #transactionnal_webdesign .title, #content_first, #for_all_your { font-size: 2rem; + margin-bottom: 1rem; } #content_all .text, .container-text-md { @@ -62,9 +68,8 @@ responsive land custom } #content-2 { margin-top: 0; + padding-top: 0; } - - #popover { margin-top: 132vw; } @@ -76,57 +81,220 @@ responsive land custom #flipping_zone { margin-top: 0; position: static; - } - .flip-container { - position: relative; - .flip-handle { - height: 10vh; - } + .flip-container { + position: relative; + height: 1300px; - + .flip-container { - margin-top: 25rem !important; - } + .flip-handle { + height: 10vh; + } - .container-text { - width: 100%; - margin: 0; - top: 0; - } + + .flip-container { + margin-top: 0; + } - .text-description { - width: 100%; - } - - .container-text { - z-index: 1; - left: 1rem; - } - - .text-title { - margin-top: 0; - } - - .phone-container { - left: 1rem; - top: 2rem; - } - - &.flip-from-left { .container-text { + width: 100%; + margin: 0; + top: 0; + padding-left: 7vw; + min-height: 25rem; + } + + .text-description { + width: 100%; + } + + .container-text { + z-index: 1; left: 1rem; - margin-left: 0; + } + + .text-title { + margin-top: 0; } .phone-container { - left: 1rem; - top: 2rem; - margin: 0 auto; - padding: 0; + margin: 2rem auto; + margin-left: auto; + position: static; + width: 335px; + margin-left: 9.5vw; + } + + &.flip-from-left { + .container-text { + left: 1rem; + margin-left: 0; + } + + .phone-container { + left: 1rem; + top: 2rem; + margin: 0 auto; + padding: 0; + } } } } + #popover, #portfolio { + margin-top: 0; + height: 1500px; + } + .slider-screen { + .phone-container { + left: 2vw; + width: 95vw; + } + + .text { + left: 7vw; + position: relative; + text-align: left; + top: 19rem; + width: 90vw; + } + } + #transactionnal_webdesign { + min-height: 1600px; + + .columns { + max-width: 85vw; + } + + .description { + font-size: 5rem !important; + padding-top: 4rem; + } + + .sub-title { + font-weight: 600; + font-size: 5rem; + text-shadow: 0 0 1rem #333; + line-height: 4rem; + letter-spacing: 0; + } + + .second { + text-shadow: 0 0 1rem #fff; + } + + } + + + #carry { + .description { + margin-top: 3vh; + font-size: 5rem; + text-shadow: 0 0 1rem #ccc; + } + + .computer-block { + margin-top: -11rem; + width: 97vw; + } + + .bubbles { + margin-top: 0; + + p { + &:nth-of-type(1) { + left: -19%; + top: -89rem; + } + + &:nth-of-type(2) { + left: 36%; + top: -112rem; + } + + &:nth-of-type(3) { + left: -10vw; + } + + &:nth-of-type(4) { + height: 322px; + } + } + } + + .gradient-bg { + width: 96vw; + height: 58vh; + left: 0; + top: -41rem; + } + + .gradient-bg-yellow { + width: 96vw; + height: 58vh; + left: 0; + top: -10rem; + } + } + + + #kyc { + .description2 { + font-size: 3rem; + padding: 0 1rem; + } + + .title { + font-size: 5rem; + line-height: 1em; + } + + .bubbles { + .bubble { + span { + margin-left: 0; + } + + &:nth-of-type(1) { + left: 1rem; + top: -7rem; + } + + &:nth-of-type(2) { + margin-left: -6rem; + } + + &:nth-of-type(3) { + left: 0; + top: 0; + } + } + + margin-top: -200vw; + } + } + + + #china { + height: 90rem; + padding: 1rem; + + .top { + font-size: 3rem; + margin-bottom: 1rem; + } + + .cols { + .columns { + text-align: center; + display: block; + padding: 0px; + padding-right: 0px; + margin-top: 1rem; + padding-right: 1rem; + } + } + } + + }