LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-01-16 15:34:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix hero shifts, general styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-31 18:52:09 +02:00
parent 8972896d9b
commit 80a85347ae
9 changed files with 67 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/header/header.module.scss
View File

@ -110,22 +110,22 @@
}
.social {
display: grid;
display: flex;
flex-flow: row wrap;
position: relative;
justify-content: center;
margin: tovw(16px, 'mobile') 0;
place-content: center;
margin: tovw(16px, 'mobile') auto;
padding-top: tovw(10px, 'mobile');
width: 100%;
width: 70%;
gap: tovw(24px, 'mobile');
grid-template-columns: repeat(6, tovw(24px, 'mobile'));
&::after {
position: absolute;
top: tovw(-32px, 'mobile');
left: tovw(-16px, 'mobile');
margin: tovw(15px, 'mobile') 0;
background: white;
width: calc(100% + tovw(32px, 'mobile'));
width: calc(100vw - tovw(32px, 'mobile'));
height: tovw(1px, 'mobile', 1px);
content: '';
}

36
src/components/sections/about/hero/hero.module.scss
View File

@ -13,6 +13,29 @@
max-width: 100%;
min-height: calc(var(--vh) * 100);
.hero__container {
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(430px, 'mobile', 495px);
}
display: none;
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(30px, 'mobile', 75px) 0 tovw(-25px, 'mobile')
tovw(10px, 'mobile', 10px);
width: 300%;
mix-blend-mode: screen;
place-self: center;
}
display: none;
}
}
.video_container {
@include respond-to('mobile') {
min-height: unset;
@ -53,19 +76,6 @@
content: '';
}
}
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(30px, 'mobile', 75px) 0 tovw(-25px, 'mobile')
tovw(10px, 'mobile', 10px);
width: 300%;
mix-blend-mode: screen;
place-self: center;
}
display: none;
}
}
.container {

14
src/components/sections/about/hero/index.tsx
View File

@ -35,12 +35,14 @@ const Hero = ({ data }: Props) => {
<source src="/videos/banner-about.mp4" type="video/mp4" />
</video>
</div>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/about/about.jpg"
/>
<div className={s.hero__container}>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/about/about.jpg"
/>
</div>
<Container className={s['container']}>
<div className={s['body']}>
<div className={s['header']}>

2
src/components/sections/careers/hero/hero.module.scss
View File

@ -23,7 +23,7 @@
.hero__container {
@include respond-to('mobile') {
min-height: unset;
min-height: tovw(400px, 'mobile', 510px);
}
display: flex;

24
src/components/sections/community/hero/hero.module.scss
View File

@ -19,17 +19,27 @@
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
.hero__mobile {
.hero__container {
@include respond-to('mobile') {
display: flex;
margin-right: tovw(150px, 'mobile');
padding-top: tovw(65px, 'mobile');
width: 250%;
mix-blend-mode: screen;
place-self: center;
place-content: center;
min-height: tovw(450px, 'mobile', 515px);
}
display: none;
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin-right: tovw(150px, 'mobile');
padding-top: tovw(65px, 'mobile');
width: 250%;
mix-blend-mode: screen;
place-self: center;
}
display: none;
}
}
}
@ -137,7 +147,7 @@
.buttons__container {
@include respond-to('mobile') {
flex-direction: column;
margin-top: tovw(88px, 'default', 88px);
margin-top: tovw(30px, 'default', 30px);
width: 100%;
gap: tovw(20px, 'mobile');

14
src/components/sections/community/hero/index.tsx
View File

@ -33,12 +33,14 @@ const Hero = ({ data }: Props) => {
<source src="/videos/banner-community.mp4" type="video/mp4" />
</video>
</div>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/community/hero/community.jpg"
/>
<div className={s.hero__container}>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/community/hero/community.jpg"
/>
</div>
<div className={s['header']}>
<Heading as="h1" variant="xl">
{data?.heroHeading}

2
src/components/sections/contact/hero/hero.module.scss
View File

@ -26,7 +26,7 @@
.hero__container {
@include respond-to('mobile') {
min-height: unset;
min-height: tovw(400px, 'mobile', 510px);
}
display: flex;

4
src/components/sections/newsroom/hero/hero.module.scss
View File

@ -5,7 +5,7 @@
margin-bottom: tovw(88px, 'mobile');
padding: 0;
width: 100vw;
justify-content: flex-start;
justify-content: center;
}
display: flex;
@ -23,7 +23,7 @@
.hero__container {
@include respond-to('mobile') {
min-height: unset;
min-height: tovw(360px, 'mobile', 460px);
}
display: flex;

2
src/components/sections/partners/hero/hero.module.scss
View File

@ -23,7 +23,7 @@
.hero__container {
@include respond-to('mobile') {
min-height: unset;
min-height: tovw(400px, 'mobile', 480px);
}
display: flex;