General styles

This commit is contained in:
Fede Álvarez 2022-06-02 15:46:45 +02:00
parent b91289cc93
commit f3f8337412
12 changed files with 35 additions and 17 deletions

View File

@ -138,6 +138,7 @@
@include respond-to('mobile') {
flex-direction: column;
width: 100%;
max-width: tovw(550px, 'default', 550px);
gap: tovw(120px, 'default', 30px);
}

View File

@ -26,7 +26,7 @@
@include respond-to('mobile') {
position: relative;
margin: 0;
margin-top: tovw(70px, 'mobile', 70px);
margin-top: tovw(50px, 'mobile', 70px);
padding-left: tovw(15px, 'mobile', 30px);
}
@ -45,6 +45,10 @@
min-height: 230px;
ul {
@include respond-to('mobile') {
line-height: 1.6;
}
margin-bottom: 0;
padding-left: tovw(20px, 'default', 18px);
font-family: var(--font-tt-hoves);

View File

@ -21,7 +21,9 @@
> div:nth-child(2) {
@include respond-to('mobile') {
flex-direction: column;
margin: unset;
width: 100%;
max-width: tovw(550px, 'default', 550px);
}
display: flex;

View File

@ -31,10 +31,10 @@
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin-right: tovw(150px, 'mobile');
padding-top: tovw(65px, 'mobile');
width: 250%;
mix-blend-mode: screen;
margin-right: tovw(190px, 'mobile');
padding-top: tovw(50px, 'mobile');
width: 280%;
mix-blend-mode: lighten;
place-self: center;
}

View File

@ -162,6 +162,8 @@
position: relative;
padding-top: unset;
width: 100%;
max-width: tovw(550px, 'default', 550px);
margin: auto;
}
position: absolute;

View File

@ -199,7 +199,7 @@
.button {
@include respond-to('mobile') {
margin-top: tovw(40px, 'mobile');
margin-top: tovw(30px, 'mobile', 40px);
width: 100%;
text-align: center;
}

View File

@ -35,7 +35,7 @@
@include respond-to('mobile') {
width: 100%;
max-width: 550px;
margin-top: tovw(16px, 'mobile');
margin-top: tovw(20px, 'mobile', 40px);
line-height: 1.5;
}

View File

@ -31,7 +31,7 @@
> p {
@include respond-to('mobile') {
margin: 0;
margin-top: tovw(40px, 'mobile');
margin-top: tovw(20px, 'mobile', 40px);
width: 100%;
max-width: 550px;
line-height: 1.5;
@ -73,10 +73,12 @@
p {
@include respond-to('mobile') {
width: 100%;
margin-top: tovw(8px, 'default', 8px);
max-width: tovw(350px, 'default', 350px);
}
margin: 0;
margin-top: tovw(20px, 'default', 16px);
margin-top: tovw(6px, 'default', 6px);
width: tovw(268px, 'default', 100px);
line-height: 1.6;
color: var(--color-grey-light);

View File

@ -33,7 +33,7 @@
p {
@include respond-to('mobile') {
margin-top: tovw(40px, 'mobile');
margin-top: tovw(20px, 'mobile', 40px);
width: 100%;
max-width: 550px;
line-height: 1.5;

View File

@ -35,6 +35,7 @@ const Token = ({ data }: Props) => {
src={data?.tokenMobileImg?.url}
alt="token"
/>
<p>LNT will also be used to:</p>
<div className={s.features}>
<div>
<img src="/images/products/tk-01.png" alt="item" />

View File

@ -31,7 +31,7 @@
> p {
@include respond-to('mobile') {
margin: 0;
margin-top: tovw(40px, 'mobile');
margin-top: tovw(20px, 'mobile', 40px);
width: 100%;
max-width: 550px;
line-height: 1.5;
@ -42,17 +42,21 @@
width: tovw(814px, 'default', 350px);
line-height: 1.3;
font-size: tovw(30px, 'default', 18px);
&:nth-child(4) {
margin-top: tovw(80px, 'default', 35px);
}
}
.features {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
margin-top: tovw(25px, 'mobile');
margin-top: tovw(40px, 'default', 40px);
}
display: grid;
margin-top: tovw(125px, 'default', 60px);
margin-top: tovw(60px, 'default', 60px);
gap: tovw(64px, 'default', 40px) 0;
grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
@ -73,10 +77,12 @@
p {
@include respond-to('mobile') {
width: 100%;
margin-top: tovw(8px, 'default', 8px);
max-width: tovw(350px, 'default', 350px);
}
margin: 0;
margin-top: tovw(20px, 'default', 16px);
margin-top: tovw(6px, 'default', 6px);
width: tovw(220px, 'default', 115px);
line-height: 1.6;
color: var(--color-grey-light);
@ -105,7 +111,7 @@
bottom: tovw(-150px, 'default', -750px);
left: tovw(630px, 'default', 50px);
z-index: -1;
width: tovw(950px, 'default', 550px);
width: tovw(950px, 'default', 500px);
mix-blend-mode: screen;
}

View File

@ -26,7 +26,7 @@
line-height: 124%;
}
margin-bottom: tovw(40px, 'mobile');
margin-bottom: tovw(20px, 'mobile', 40px);
text-shadow: 0px 0px 20px rgb(255 255 255 / 0.4);
}
}
@ -43,7 +43,7 @@
> p {
@include respond-to('mobile') {
margin: 0;
margin-top: tovw(40px, 'mobile');
margin-top: tovw(20px, 'mobile', 40px);
padding-left: 0;
width: 100%;
max-width: 550px;