LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change breakpoint logic (#26)

Browse Source
This commit is contained in:
Nazareno Oviedo 2022-04-08 13:24:17 -03:00 committed by GitHub
parent 3118d80aee
commit 965ba2f5bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 203 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/card/card.module.scss
View File

@ -84,7 +84,7 @@
line-height: 1.4;
margin: 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.6;
}
}

22
src/components/common/footer/footer.module.scss
View File

@ -16,7 +16,7 @@
align-items: center;
justify-content: center;
height: calc(var(--vw) * 70);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: calc(var(--vw) * 95);
background-image: url('/images/pre-footer-mobile.png');
background-position: 50%;
@ -40,7 +40,7 @@
rgb(9 9 121 / 0) 50%,
var(--color-black) 100%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: normal;
}
}
@ -72,7 +72,7 @@
position: relative;
width: max-content;
margin: tovw(62px, 'default', 48px) auto 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -123,7 +123,7 @@
height: tovw(276px, 'default', 270px);
margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -150,7 +150,7 @@
justify-content: space-between;
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: grid;
column-gap: tovw(97px, 'tablet', 97px);
grid-template-columns: repeat(2, 1fr);
@ -211,7 +211,7 @@
height: tovw(24px, 'default', 24px);
}
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -219,7 +219,7 @@
.connect__links__mobile {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
> li:last-of-type {
display: flex;
justify-content: center;
@ -237,7 +237,7 @@
ul:first-child {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: unset;
}
}
@ -248,7 +248,7 @@
margin-top: tovw(18px, 'default', 18px);
margin-bottom: tovw(44px, 'default', 36px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: tovw(32px, 'tablet', 32px);
}
@ -268,7 +268,7 @@
}
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: center;
flex-direction: column;
justify-content: center;
@ -282,7 +282,7 @@
display: flex;
gap: tovw(37px, 'default', 24px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
gap: tovw(32px, 'mobile');
margin-bottom: tovw(32px, 'tablet', 32px);
}

4
src/components/common/mouse/mouse.module.scss
View File

@ -14,7 +14,7 @@
grid-template-rows: 1fr;
mix-blend-mode: difference;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
@ -48,7 +48,7 @@
align-items: flex-end;
justify-self: flex-start;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}

2
src/components/layout/container/container.module.scss
View File

@ -5,7 +5,7 @@
max-width: tovw(1296px, 'default', 320px);
margin: 0 auto;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
max-width: 100%;
padding: 0 tovw(27px, 'tablet', 27px);
}

2
src/components/primitives/heading/heading.module.scss
View File

@ -25,7 +25,7 @@
font-size: tovw(58px, 'default', 30px);
line-height: 1.1;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.24;
}
}

2
src/components/primitives/link/link.module.scss
View File

@ -24,7 +24,7 @@
transition: transform var(--normal-transition);
vertical-align: middle;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
right: tovw(-20px, 'mobile', -14px);
bottom: tovw(1px, 'mobile', 3px);
}

14
src/components/sections/404/hero/hero.module.scss
View File

@ -17,7 +17,7 @@
z-index: 2;
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
background-image: url('/images/hero-mobile.png');
background-repeat: no-repeat;
background-position: 50% 15%;
@ -48,7 +48,7 @@
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: initial;
}
}
@ -65,7 +65,7 @@
}
h1 {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile', 71px);
margin-top: auto;
}
@ -81,7 +81,7 @@
margin-top: tovw(32px, 'default', 32px);
text-decoration: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
margin-top: auto;
margin-bottom: tovw(25px, 'mobile');
@ -99,7 +99,7 @@
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
@ -126,7 +126,7 @@
align-items: flex-end;
justify-self: flex-start;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -155,7 +155,7 @@
rgb(0 0 244 / 0.9) 63.96%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 70%;
}
}

20
src/components/sections/about/hero/hero.module.scss
View File

@ -8,7 +8,7 @@
min-height: calc(var(--vh) * 100);
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100vw;
padding: 0 0 tovw(18px, 'mobile') 0;
}
@ -17,7 +17,7 @@
margin: 0 tovw(-35px, 'default', -35px);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
width: 300%;
place-self: center;
@ -26,7 +26,7 @@
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
}
@ -38,7 +38,7 @@
gap: tovw(89px, 'default', 56px);
.header {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
}
@ -46,7 +46,7 @@
margin: 0;
text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
}
@ -54,7 +54,7 @@
.arrow {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
display: unset;
align-self: flex-end;
@ -68,7 +68,7 @@
height: tovw(175px, 'default', 130px);
margin-top: tovw(5px, 'default', 5px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
top: unset;
left: 0;
height: tovw(140px, 'default', 130px);
@ -82,7 +82,7 @@
justify-content: space-between;
gap: tovw(60px, 'default', 20px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
gap: tovw(120px, 'default', 30px);
@ -100,7 +100,7 @@
width: tovw(636px, 'default', 200px);
letter-spacing: -0.01em;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -132,7 +132,7 @@
rgb(0 0 244 / 0) 99.89%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 70%;
}
}

12
src/components/sections/about/related/related.module.scss
View File

@ -12,7 +12,7 @@
margin-right: 0;
margin-left: auto;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
@ -27,7 +27,7 @@
justify-content: space-between;
margin-bottom: tovw(90px, 'default', 64px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
padding-bottom: unset;
@ -65,7 +65,7 @@
rgb(241 241 241 / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -74,7 +74,7 @@
.events {
padding-left: tovw(100px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-left: 0;
}
@ -103,7 +103,7 @@
display: none;
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
@ -119,7 +119,7 @@
right: initial;
left: tovw(-150px);
transform: scaleX(-1);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: initial;
}
}

22
src/components/sections/about/team/team.module.scss
View File

@ -5,12 +5,12 @@
margin-top: tovw(24px, 'default', 16px);
padding: tovw(124px, 'default', 100px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: 0;
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
@ -22,7 +22,7 @@
padding-top: tovw(68px, 'default', 40px);
gap: tovw(24px, 'default', 24px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
}
@ -34,7 +34,7 @@
margin: 0;
letter-spacing: -0.01em;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -50,7 +50,7 @@
padding-top: tovw(120px, 'default', 60px);
gap: tovw(64px, 'default', 26px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
@ -65,7 +65,7 @@
display: flex;
gap: tovw(20px, 'default', 3px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
justify-content: flex-start;
}
}
@ -76,7 +76,7 @@
padding-top: tovw(18px, 'default', 8px);
color: var(--color-grey-light);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -87,7 +87,7 @@
transform: rotate(-90deg) translateY(tovw(-5px, 'default', -5px))
scaleX(2.2) scaleY(1.6);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: tovw(32px, 'default', 32px);
transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
translateY(tovw(-2px, 'mobile', -3px));
@ -103,7 +103,7 @@
gap: tovw(100px, 'default', 40px);
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100vw;
margin: 0 tovw(-70px, 'tablet', -35px);
scroll-behavior: smooth;
@ -150,7 +150,7 @@
svg {
width: tovw(23px, 'default', 18px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(12px, 'mobile', 19px);
}
@ -174,7 +174,7 @@
width: tovw(23px, 'default', 15px);
height: tovw(23px, 'default', 15px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}

14
src/components/sections/community/events/events.module.scss
View File

@ -13,7 +13,7 @@
margin-right: 0;
margin-left: auto;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
}
@ -26,7 +26,7 @@
padding-bottom: tovw(60px, 'default', 30px);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
padding-bottom: unset;
@ -64,7 +64,7 @@
rgb(241 241 241 / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -72,7 +72,7 @@
.events__container {
padding-left: tovw(100px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-left: 0;
}
@ -90,7 +90,7 @@
rgb(3 3 3 / 1) 65%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
@ -106,7 +106,7 @@
right: initial;
left: tovw(-150px);
transform: scaleX(-1);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: initial;
}
}
@ -119,7 +119,7 @@
place-content: center;
gap: tovw(25px, 'default', 15px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}

22
src/components/sections/community/hero/hero.module.scss
View File

@ -10,7 +10,7 @@
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
width: 100vw;
@ -26,7 +26,7 @@
right: tovw(620px, 'default', 80px);
padding-top: tovw(220px, 'default', 90px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: unset;
margin-bottom: tovw(-85px, 'mobile');
padding-top: tovw(55px, 'mobile');
@ -35,7 +35,7 @@
video {
width: tovw(1750px, 'default', 800px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(600px, 'mobile');
}
}
@ -55,7 +55,7 @@
rgb(3 3 3 / 1) 95%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
top: tovw(-260px, 'mobile', -260px);
bottom: unset;
height: 100%;
@ -75,7 +75,7 @@
width: tovw(580px, 'default', 80px);
justify-self: end;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
align-items: flex-end;
align-self: flex-start;
@ -87,7 +87,7 @@
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
}
@ -100,7 +100,7 @@
gap: tovw(60px, 'default', 20px);
grid-area: 2 / 2 / 3 / 3;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
gap: tovw(120px, 'default', 30px);
}
@ -110,7 +110,7 @@
width: tovw(500px, 'default', 370px);
margin: 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(150px, 'mobile', 320px);
}
}
@ -124,7 +124,7 @@
display: flex;
gap: tovw(24px, 'default', 20px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
gap: tovw(20px, 'mobile');
@ -145,7 +145,7 @@
);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 70%;
}
}
@ -156,7 +156,7 @@
height: tovw(22px, 'default', 15px);
margin-left: tovw(-58px, 'default', -58px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}

24
src/components/sections/community/socials/socials.module.scss
View File

@ -4,7 +4,7 @@
position: relative;
padding: tovw(124px, 'default', 100px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: 0;
}
}
@ -15,7 +15,7 @@
grid-template-rows: repeat(2, 1fr);
gap: tovw(70px, 'default', 20px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
gap: tovw(5px, 'mobile', 15px);
@ -27,7 +27,7 @@
flex-direction: column;
width: 100%;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: tovw(-135px, 'mobile', -150px);
}
@ -35,7 +35,7 @@
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(42px, 'default', 36px);
text-align: center;
}
@ -43,7 +43,7 @@
&:nth-child(1) {
padding-left: tovw(125px, 'default', 60px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-left: unset;
}
}
@ -52,7 +52,7 @@
align-self: end;
width: tovw(465px, 'default', 80px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -67,7 +67,7 @@
height: tovw(72px, 'default', 40px);
transform: rotate(270deg) scale(1.6);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
top: unset;
right: 0;
left: 0;
@ -80,7 +80,7 @@
.icons__container {
grid-area: 2 / 2 / 3 / 3;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
@ -99,12 +99,12 @@
transform: translate(-220%, -50%);
border-bottom: tovw(2px, 'default', 2px) solid blue;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
text-align: center;
}
}
@ -117,7 +117,7 @@
padding-top: tovw(30px, 'default', 15px);
gap: tovw(20px, 'default', 12px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
place-self: center;
place-content: center;
}
@ -149,7 +149,7 @@
width: tovw(725px, 'default', 320px);
padding-top: tovw(160px, 'default', 80px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
width: 100%;
padding-top: unset;

16
src/components/sections/homepage/benefits/benefits.module.scss
View File

@ -30,7 +30,7 @@
}
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-bottom: tovw(135px, 'mobile');
.grid {
@ -55,7 +55,7 @@
grid-gap: tovw(26px, 'default', 26px) tovw(24px, 'default', 24px);
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, 1fr);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-wrap: wrap;
@ -75,7 +75,7 @@
background-size: cover;
height: tovw(1582px, 'default', 900px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: tovw(-60px, 'mobile');
background-image: none;
height: auto;
@ -94,7 +94,7 @@
margin-top: tovw(88px, 'default', 72px);
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(13px, 'mobile');
}
}
@ -104,7 +104,7 @@
position: relative;
padding-left: tovw(8px, 'default');
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-left: tovw(32px, 'mobile');
}
@ -115,7 +115,7 @@
width: tovw(3px, 'default', 2px);
height: 100%;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
left: tovw(16px, 'mobile');
}
}
@ -128,7 +128,7 @@
font-family: var(--font-dm-mono);
font-size: tovw(12px, 'default', 12px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
top: tovw(4px, 'mobile');
left: tovw(-5px, 'mobile');
}
@ -147,7 +147,7 @@
padding-right: 0;
&__container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-right: 0;
padding-left: 0;
}

8
src/components/sections/homepage/hero/hero.module.scss
View File

@ -9,7 +9,7 @@
min-height: calc(var(--vh) * 100);
text-align: center;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
background-image: url('/images/hero-mobile.png');
background-repeat: no-repeat;
background-position: 50% 15%;
@ -40,7 +40,7 @@
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: initial;
}
}
@ -87,12 +87,12 @@
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
bottom: 5%;
grid-template-columns: 1fr;
}
@media screen and (max-width: 480px) {
@include respond-to('mobile-sm') {
bottom: 0;
}

14
src/components/sections/homepage/latest-news/latest-news.module.scss
View File

@ -12,7 +12,7 @@
margin-right: 0;
margin-left: auto;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: calc(100% - tovw(16px, 'mobile'));
}
}
@ -23,7 +23,7 @@
justify-content: space-between;
margin-bottom: tovw(90px, 'default', 64px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
padding-bottom: unset;
@ -61,7 +61,7 @@
rgb(241 241 241 / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -69,7 +69,7 @@
.eventsContainer {
padding-left: tovw(100px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding-left: 0;
}
@ -87,7 +87,7 @@
rgb(3 3 3 / 1) 65%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(20px, 'default', 20px);
background: linear-gradient(
90deg,
@ -103,7 +103,7 @@
right: initial;
left: tovw(-150px);
transform: scaleX(-1);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: initial;
}
}
@ -116,7 +116,7 @@
place-content: center;
gap: tovw(25px, 'default', 15px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}

6
src/components/sections/homepage/seen-in/seen-in.module.scss
View File

@ -16,7 +16,7 @@
rgb(0 0 244 / 0) 99.89%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: calc(var(--vh) * 95);
margin-top: 0;
background: linear-gradient(
@ -38,7 +38,7 @@
transform: translate(-50%, -50%);
pointer-events: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
top: 45%;
}
}
@ -50,7 +50,7 @@
grid-template-rows: 1fr;
grid-column-gap: tovw(24px, 'default', 24px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-wrap: wrap;
}

4
src/components/sections/homepage/trusted-by/trusted-by.module.scss
View File

@ -6,7 +6,7 @@
margin-top: tovw(24px, 'default', 16px);
padding: tovw(104px, 'default', 72px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: calc(var(--vh) * 48);
margin-top: 0;
}
@ -29,7 +29,7 @@
hsl(0deg 0% 95% / 0.5) 48.91%,
hsl(0deg 0% 95% / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 50%;
transform: translate(-50%, -60%);
}

4
src/components/sections/homepage/what-others-say/item/item.module.scss
View File

@ -15,7 +15,7 @@
border-radius: tovw(8px, 'default', 8px);
background-color: rgb(0 0 0 / 0.9);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
top: initial;
left: initial;
@ -68,7 +68,7 @@
p {
font-size: tovw(16px, 'default', 16px);
margin: 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.6;
}
}

6
src/components/sections/homepage/what-others-say/what-others-say.module.scss
View File

@ -15,7 +15,7 @@
margin: 0 auto;
text-transform: capitalize;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
flex-direction: column;
margin-bottom: tovw(24px, 'mobile');
gap: tovw(24px, 'mobile');
@ -27,7 +27,7 @@
letter-spacing: tovw(-0.8px, 'default', -0.8px);
text-transform: uppercase;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
&:first-of-type {
display: none;
}
@ -63,7 +63,7 @@
transform-style: preserve-3d;
perspective: tovw(3000px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}

8
src/components/sections/privacy/hero/hero.module.scss
View File

@ -9,7 +9,7 @@
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
padding-bottom: 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: center;
flex-direction: row;
justify-content: space-between;
@ -23,7 +23,7 @@
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
}
@ -32,7 +32,7 @@
.arrow {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
display: unset;
width: tovw(18px, 'mobile', 18px);
@ -54,7 +54,7 @@
);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 70%;
}
}

10
src/components/sections/products/app/app.module.scss
View File

@ -8,7 +8,7 @@
height: calc(var(--vw) * 60);
margin: tovw(100px, 'default', 50px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: calc(var(--vw) * 95);
background-image: url('/images/pre-footer-mobile.png');
background-position: 50%;
@ -22,12 +22,12 @@
align-items: center;
flex-direction: column;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
h2 {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(32px, 'mobile');
}
}
@ -38,7 +38,7 @@
width: tovw(856px, 'default', 300px);
text-align: center;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.5;
margin-top: tovw(16px, 'mobile');
}
@ -61,7 +61,7 @@
rgb(9 9 121 / 0) 45%,
var(--color-black) 100%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
content: normal;
}
}

22
src/components/sections/products/hero/hero.module.scss
View File

@ -8,14 +8,14 @@
min-height: calc(var(--vh) * 100);
padding: tovw(100px, 'default', 50px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100vw;
margin-bottom: tovw(88px, 'mobile');
padding: 0;
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
}
@ -24,7 +24,7 @@
margin: 0 tovw(180px, 'default', 90px);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
width: 300%;
place-self: center;
@ -41,7 +41,7 @@
margin: 0;
text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
}
@ -87,7 +87,7 @@
grid-template-columns: 1fr 1.15fr;
gap: tovw(113px, 'default', 40px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
@ -97,7 +97,7 @@
line-height: 1.65;
width: tovw(546px, 'default', 150px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.5;
width: 100%;
max-width: 550px;
@ -115,7 +115,7 @@
border-top: tovw(1px, 'default') solid var(--color-grey-light);
gap: tovw(140px, 'default', 20px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
justify-content: space-between;
border-top: unset;
gap: tovw(20px, 'mobile', 30px);
@ -124,7 +124,7 @@
h2 {
width: tovw(100px, 'default', 20px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(20px, 'mobile');
}
}
@ -136,7 +136,7 @@
margin: 0;
color: var(--color-grey-light);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(180px, 'mobile', 250px);
}
}
@ -151,7 +151,7 @@
.arrow {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
display: unset;
align-self: flex-end;
@ -175,7 +175,7 @@
rgb(0 0 244 / 0) 99.89%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 45%;
}
}

20
src/components/sections/products/network/network.module.scss
View File

@ -4,7 +4,7 @@
position: relative;
padding: tovw(124px, 'default', 100px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(18px, 'mobile');
}
@ -13,7 +13,7 @@
position: relative;
display: flex;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
@ -21,7 +21,7 @@
width: 100%;
h2 {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(200px, 'mobile');
}
}
@ -33,7 +33,7 @@
margin: 0;
margin-top: tovw(62px, 'default', 30px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.5;
width: 100%;
max-width: 550px;
@ -48,7 +48,7 @@
grid-template-columns: repeat(2, tovw(360px, 'default', 225px));
gap: tovw(64px, 'default', 40px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
@ -58,7 +58,7 @@
grid-template-columns: auto 1fr;
gap: tovw(23px, 'default', 16px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin: 0 tovw(10px, 'mobile');
}
@ -75,7 +75,7 @@
margin-top: tovw(20px, 'default', 16px);
color: var(--color-grey-light);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -84,7 +84,7 @@
p {
width: tovw(300px, 'default', 85px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -101,7 +101,7 @@
width: tovw(1050px, 'default', 550px);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -109,7 +109,7 @@
.network__img__mobile {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: unset;
width: 100%;
margin: tovw(60px, 'mobile') 0 tovw(20px, 'mobile') 0;

8
src/components/sections/products/partners/partners.module.scss
View File

@ -5,12 +5,12 @@
margin: tovw(135px, 'default', 70px) 0;
padding: tovw(104px, 'default', 95px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-top: 0;
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
@ -52,7 +52,7 @@
rgb(241 241 241 / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
bottom: tovw(1px, 'mobile', 90px);
height: tovw(230px, 'mobile', 440px);
}
@ -73,7 +73,7 @@
&__container {
margin-top: tovw(60px, 'default', 43px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: unset !important;
margin: tovw(60px, 'default', 43px) tovw(-18px, 'mobile') 0
tovw(-18px, 'mobile');

18
src/components/sections/products/stack/stack.module.scss
View File

@ -4,13 +4,13 @@
position: relative;
padding: tovw(124px, 'default', 100px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(88px, 'mobile');
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
}
@ -18,14 +18,14 @@
.header {
display: flex;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
flex-direction: column;
}
h2 {
width: tovw(360px, 'default', 250px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: unset;
}
}
@ -35,7 +35,7 @@
line-height: 1.35;
width: tovw(746px, 'default', 300px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.5;
width: 100%;
max-width: 550px;
@ -60,7 +60,7 @@
grid-template-columns: repeat(3, 1fr);
gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
margin: 0;
@ -72,7 +72,7 @@
counter-increment: custom;
gap: tovw(34px, 'default', 28px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
@ -106,7 +106,7 @@
margin-bottom: tovw(42px, 'default', 42px);
margin-left: tovw(25px, 'default', 20px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin-bottom: tovw(8px, 'mobile');
}
}
@ -152,7 +152,7 @@
rgb(241 241 241 / 0) 89.23%
);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}

20
src/components/sections/products/token/token.module.scss
View File

@ -4,7 +4,7 @@
position: relative;
padding: tovw(124px, 'default', 100px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(18px, 'mobile');
}
@ -13,12 +13,12 @@
position: relative;
display: flex;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0 tovw(16px, 'tablet', 16px);
}
h2 {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: tovw(320px, 'mobile');
}
}
@ -33,7 +33,7 @@
margin: 0;
margin-top: tovw(62px, 'default', 30px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
line-height: 1.5;
width: 100%;
max-width: 550px;
@ -48,7 +48,7 @@
grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
gap: tovw(64px, 'default', 40px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
}
@ -58,7 +58,7 @@
grid-template-columns: auto 1fr;
gap: tovw(23px, 'default', 15px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
margin: 0 tovw(10px, 'mobile');
}
@ -75,7 +75,7 @@
margin-top: tovw(20px, 'default', 16px);
color: var(--color-grey-light);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -84,7 +84,7 @@
p {
width: tovw(265px, 'default', 150px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
width: 100%;
}
}
@ -101,7 +101,7 @@
width: tovw(950px, 'default', 550px);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none;
}
}
@ -109,7 +109,7 @@
.token__img__mobile {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: unset;
width: 100%;
margin: tovw(60px, 'mobile') 0 tovw(5px, 'mobile') 0;

8
src/components/sections/terms/hero/hero.module.scss
View File

@ -9,7 +9,7 @@
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
padding-bottom: 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
align-items: center;
flex-direction: row;
justify-content: space-between;
@ -23,7 +23,7 @@
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(50px, 'mobile');
}
}
@ -32,7 +32,7 @@
.arrow {
display: none;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
position: relative;
display: unset;
width: tovw(18px, 'mobile', 18px);
@ -54,7 +54,7 @@
);
mix-blend-mode: screen;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
height: 70%;
}
}

8
src/components/sections/terms/termsofuse/termsofuse.module.scss
View File

@ -6,7 +6,7 @@
tovw(100px, 'default', 50px);
padding-bottom: tovw(270px, 'default', 150px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
max-width: 100%;
padding: 0 tovw(16px, 'tablet', 16px);
padding-bottom: tovw(80px, 'tablet', 80px);
@ -17,7 +17,7 @@
line-height: 1.9;
margin: tovw(64px, 'default', 40px) 0;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(15px, 'tablet', 15px);
line-height: 1.6;
}
@ -25,7 +25,7 @@
}
.container {
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
padding: 0;
}
}
@ -39,7 +39,7 @@
border-bottom: 1px solid var(--color-grey-light);
gap: tovw(15px, 'default', 10px);
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
font-size: tovw(12px, 'tablet', 12px);
padding-bottom: tovw(16px, 'tablet', 16px);
}

2
src/css/global.scss
View File

@ -106,7 +106,7 @@ p {
.hide-on-mobile {
display: inherit !important;
@media screen and (max-width: 800px) {
@include respond-to('mobile') {
display: none !important;
}
}

31
src/css/helpers.scss
View File

@ -50,3 +50,34 @@
@return math.div($target, $context) + 0em;
}
$breakpoints: (
'mobile-sm': (
max-width: 500px
),
'mobile': (
max-width: 900px
),
'tablet': (
max-width: 1024px
),
'desktop-sm': (
max-width: 1280px
),
'desktop': (
max-width: 1440px
),
'desktop-xl': (
min-width: 1920px
)
) !default;
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media #{inspect(map-get($breakpoints, $breakpoint))} {
@content;
}
} @else {
@warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
}
}