General styles
This commit is contained in:
parent
b91289cc93
commit
f3f8337412
@ -138,6 +138,7 @@
|
||||
@include respond-to('mobile') {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: tovw(550px, 'default', 550px);
|
||||
gap: tovw(120px, 'default', 30px);
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -162,6 +162,8 @@
|
||||
position: relative;
|
||||
padding-top: unset;
|
||||
width: 100%;
|
||||
max-width: tovw(550px, 'default', 550px);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user