Work on re-styling
This commit is contained in:
parent
4876a56e56
commit
fd3783188c
@ -9,7 +9,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: tovw(35px, 'default', 20px);
|
||||
padding: tovw(130px, 'default', 95px) 0;
|
||||
padding: tovw(40px, 'default', 35px) 0 tovw(70px, 'default', 60px);
|
||||
|
||||
.slider__container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(85px, 'default', 70px) 0 tovw(135px, 'default', 70px) 0;
|
||||
margin: tovw(25px, 'default', 20px) 0 tovw(135px, 'default', 70px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
position: relative;
|
||||
margin-top: tovw(24px, 'default', 16px);
|
||||
padding: tovw(124px, 'default', 120px) 0 tovw(80px, 'default', 60px) 0;
|
||||
padding: tovw(124px, 'default', 120px) 0 tovw(20px, 'default', 20px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(50px, 'default', 30px) 0;
|
||||
margin-bottom: tovw(-80px, 'default', -85px);
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
@ -53,7 +53,7 @@
|
||||
padding-top: tovw(60px, 'mobile', 60px);
|
||||
}
|
||||
|
||||
padding-top: tovw(75px, 'default', 60px);
|
||||
padding-top: tovw(55px, 'default', 40px);
|
||||
width: tovw(1300px, 'default', 400px);
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react'
|
||||
import { BlogCard } from '~/components/common/card'
|
||||
import { Container } from '~/components/layout/container'
|
||||
import Section from '~/components/layout/section'
|
||||
import Heading from '~/components/primitives/heading'
|
||||
// import Heading from '~/components/primitives/heading'
|
||||
import { BlogPostFragment } from '~/lib/cms/generated'
|
||||
|
||||
import s from './hero.module.scss'
|
||||
@ -31,7 +31,7 @@ const Hero = ({ featuredPost }: HeroProps) => {
|
||||
|
||||
return (
|
||||
<Section className={s['section']} disableFadeIn>
|
||||
<div className={s.hero__container}>
|
||||
{/* <div className={s.hero__container}>
|
||||
<img ref={blogHeroRef} className={s.hero} loading="eager" alt="hero" />
|
||||
<img
|
||||
ref={blogHeroMobileRef}
|
||||
@ -39,11 +39,11 @@ const Hero = ({ featuredPost }: HeroProps) => {
|
||||
loading="eager"
|
||||
alt="hero"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
<Container className={s['container']}>
|
||||
<Heading as="h1" variant="xl" centered>
|
||||
{/* <Heading as="h1" variant="xl" centered>
|
||||
Blog
|
||||
</Heading>
|
||||
</Heading> */}
|
||||
<BlogCard data={featuredPost} horizontal />
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@ -21,6 +21,19 @@ $img-height-mobile: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: tovw(45px, 'default', 30px) 0 tovw(45px, 'default', 30px) 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: tovw(35px, 'default', 15px);
|
||||
|
||||
p {
|
||||
margin-left: tovw(15px, 'default', 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.image__container {
|
||||
border-top: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(105px, 'default', 70px) 0;
|
||||
padding: tovw(104px, 'default', 95px) 0 tovw(44px, 'default', 35px) 0;
|
||||
margin: tovw(55px, 'default', 40px) 0;
|
||||
padding: tovw(104px, 'default', 95px) 0 tovw(105px, 'default', 55px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(140px, 'default', 110px) 0;
|
||||
margin: tovw(50px, 'default', 40px) 0;
|
||||
padding-bottom: tovw(50px, 'default', 40px);
|
||||
|
||||
.container {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: tovw(55px, 'default', 20px);
|
||||
padding: tovw(220px, 'default', 72px) 0;
|
||||
padding: tovw(220px, 'default', 72px) 0 tovw(120px, 'default', 72px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(44px, 'default', 30px) 0;
|
||||
margin-bottom: tovw(165px, 'default', 120px);
|
||||
padding: tovw(30px, 'default', 25px) 0;
|
||||
margin-bottom: tovw(100px, 'default', 80px);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(135px, 'default', 55px) 0;
|
||||
padding: tovw(104px, 'default', 55px) 0;
|
||||
margin: tovw(105px, 'default', 55px) 0;
|
||||
padding: tovw(64px, 'default', 55px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -13,6 +13,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
padding-bottom: tovw(250px, 'default', 160px);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
@include respond-to('mobile') {
|
||||
padding-right: 0;
|
||||
@ -24,9 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding-bottom: tovw(200px, 'default', 200px);
|
||||
|
||||
.grid {
|
||||
@include respond-to('mobile') {
|
||||
display: unset;
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
transform-style: preserve-3d;
|
||||
cursor: grab;
|
||||
width: 100%;
|
||||
height: tovw(1000px, 'default', 700px);
|
||||
height: tovw(950px, 'default', 700px);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: tovw(55px, 'default', 55px);
|
||||
padding: tovw(95px, 'default', 90px) 0 tovw(185px, 'default', 90px) 0;
|
||||
padding: tovw(95px, 'default', 90px) 0 tovw(125px, 'default', 90px) 0;
|
||||
|
||||
.slider__container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(135px, 'default', 70px) 0;
|
||||
padding: tovw(104px, 'default', 95px) 0;
|
||||
margin: tovw(105px, 'default', 70px) 0;
|
||||
padding: tovw(64px, 'default', 55px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
margin: tovw(105px, 'default', 70px) 0;
|
||||
padding: tovw(104px, 'default', 95px) 0;
|
||||
margin: tovw(55px, 'default', 50px) 0;
|
||||
padding: tovw(54px, 'default', 45px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: tovw(40px, 'default', 30px) 0;
|
||||
height: calc(var(--vw) * 40);
|
||||
|
||||
.container {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(124px, 'default', 100px) 0;
|
||||
padding: tovw(80px, 'default', 70px) 0 tovw(84px, 'default', 70px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(124px, 'default', 100px) 0;
|
||||
padding: tovw(110px, 'default', 100px) 0 tovw(80px, 'default', 80px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
@ -121,11 +121,11 @@
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
min-height: tovw(1611px, 'default', 758px);
|
||||
min-height: tovw(1540px, 'default', 758px);
|
||||
|
||||
.stack__img {
|
||||
width: 100%;
|
||||
margin-top: tovw(293px, 'default', 88px);
|
||||
margin-top: tovw(193px, 'default', 88px);
|
||||
image-rendering: optimizequality;
|
||||
@media screen and (max-width: 1450px) {
|
||||
display: none;
|
||||
@ -148,7 +148,7 @@
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: tovw(530px, 'default', 300px);
|
||||
bottom: tovw(590px, 'default', 300px);
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(124px, 'default', 100px) 0;
|
||||
padding: tovw(20px, 'default', 20px) 0 tovw(124px, 'default', 100px) 0;
|
||||
margin-top: tovw(-20px, 'default', -20px);
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: tovw(124px, 'default', 100px) 0;
|
||||
padding: tovw(110px, 'default', 100px) 0;
|
||||
|
||||
.container {
|
||||
@include respond-to('mobile') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user