Work on re-styling

This commit is contained in:
Fede Álvarez 2022-06-28 12:48:31 +02:00
parent 4876a56e56
commit fd3783188c
21 changed files with 51 additions and 35 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -13,7 +13,6 @@
position: relative;
align-items: center;
justify-content: center;
margin: tovw(40px, 'default', 30px) 0;
height: calc(var(--vw) * 40);
.container {

View File

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

View File

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

View File

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

View File

@ -7,7 +7,7 @@
}
position: relative;
padding: tovw(124px, 'default', 100px) 0;
padding: tovw(110px, 'default', 100px) 0;
.container {
@include respond-to('mobile') {