tykayn
/
digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add styles for small until we_develop section

This commit is contained in:
Tykayn 2023-07-09 17:44:18 +02:00 committed by tykayn
parent 358d18dcff
commit 9234f72441
5 changed files with 226 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -105,7 +105,7 @@
<!-- flipping zones-->
<div id="flipping_zone">
<section id="content-2" class="flip-container flip-from-right">
<div id="content-2" class="flip-container flip-from-right">
<div id="content-2-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
@ -124,9 +124,9 @@
<div class="phone-container">
<img src="/assets/img/phone_shoes_blue.png" alt="phone">
</div>
</section>
</div>
<section id="content-3" class="flip-container flip-from-left">
<div id="content-3" class="flip-container flip-from-left">
<div id="content-3-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
@ -146,7 +146,7 @@
<div class="phone-container">
<img src="/assets/img/phone_glasses.png" alt="phone">
</div>
</section>
</div>
<section id="content-4" class="flip-container flip-from-right">
<div id="content-4-handle" class="flip-handle"></div>

9
repl/src/assets/styles/_debug.scss Normal file
View File

@ -0,0 +1,9 @@
section, .flipping-zone {
border: solid 1px red;
}
.flip-handle{
border: solid 1px green;
width: 2rem;
background: greenyellow;
opacity: 0.5;
}

71
repl/src/assets/styles/coming_small_responsive.scss
View File

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

1
repl/src/assets/styles/main.scss
View File

@ -18,4 +18,5 @@ custom
@import "./responsive_small";
//@import "./coming_small_responsive";
@import "./responsive_big_screens";
@import "./debug";

256
repl/src/assets/styles/responsive_small.scss
View File

@ -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;
}
}
}
}