Blog hero changes, homepage styles

This commit is contained in:
Fede Álvarez 2022-06-08 16:02:57 +02:00
parent 6b973bf2b1
commit db39963aa7
5 changed files with 8 additions and 6 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 245 KiB

View File

@ -22,6 +22,7 @@
.hero__container {
@include respond-to('mobile') {
margin-top: tovw(-300px, 'default', -80px);
min-height: tovw(355px, 'mobile', 380px);
}
@ -43,8 +44,8 @@
@include respond-to('mobile') {
display: flex;
margin: tovw(-70px, 'mobile', -160px) 0;
width: 280%;
transform: translateX(31.5%);
width: 300%;
transform: translateX(36.5%);
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
@ -62,7 +63,7 @@
.container {
@include respond-to('mobile') {
margin-top: unset;
padding-top: tovw(80px, 'tablet');
padding-top: tovw(20px, 'tablet');
}
position: relative;
@ -72,6 +73,8 @@
h1 {
@include respond-to('mobile') {
position: relative;
padding-bottom: tovw(120px, 'default', 60px);
font-size: tovw(50px, 'mobile');
bottom: 125%;
}
@ -81,8 +84,6 @@
left: 0;
right: 0;
bottom: 130%;
// padding-bottom: tovw(120px, 'default', 80px);
}
@media screen and (max-width: 800px) {

View File

@ -18,7 +18,7 @@ const Hero = ({ featuredPost }: HeroProps) => {
className={s.hero}
loading="eager"
alt="hero"
src="/images/blog/blog2.png"
src="/images/blog/blog.png"
/>
<img
className={s.hero__mobile}

View File

@ -111,6 +111,7 @@
padding-right: tovw(69px, 'default', 69px);
width: 100%;
max-width: tovw(1080px, 'default', 730px);
mix-blend-mode: difference;
> ul {
margin-top: tovw(88px, 'default', 72px);