Fix issues (#27)

This commit is contained in:
Fede Álvarez 2022-04-08 20:29:55 +02:00 committed by GitHub
parent ab86d7d14b
commit bfeae81c8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 33 additions and 47 deletions

View File

@ -138,6 +138,10 @@
padding-bottom: tovw(56px, 'default', 48px);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
@include respond-to('mobile') {
margin-top: tovw(40px, 'default', 40px);
}
nav {
display: flex;
gap: tovw(88px, 'default', 55px);
@ -171,10 +175,18 @@
> li {
line-height: 1.35;
@include respond-to('mobile') {
margin-bottom: tovw(14px, 'default', 14px);
}
&:first-of-type {
line-height: 1;
margin-bottom: tovw(12px, 'default', 10px);
@include respond-to('mobile') {
margin-bottom: tovw(16px, 'default', 16px);
}
a {
font-weight: 500;
}

View File

@ -2,7 +2,7 @@
.link {
font-family: var(--font-dm-mono);
font-size: tovw(18px, 'default', 14px);
font-size: tovw(18px, 'default', 16px);
font-weight: 400;
position: relative;
transition: color var(--duration-fast) var(--ease);
@ -26,7 +26,7 @@
@include respond-to('mobile') {
right: tovw(-20px, 'mobile', -14px);
bottom: tovw(1px, 'mobile', 3px);
bottom: tovw(3px, 'mobile', 4px);
}
&--rotated {

View File

@ -1,7 +1,5 @@
import clsx from 'clsx'
import { useEffect, useState } from 'react'
import Flag from '~/components/icons/flag'
import Line from '~/components/icons/line'
import Section from '~/components/layout/section'
import { ButtonLink } from '~/components/primitives/button'
@ -10,18 +8,6 @@ import Heading from '~/components/primitives/heading'
import s from './hero.module.scss'
const Hero = () => {
const [position, setPosition] = useState({ x: 0, y: 0 })
useEffect(() => {
const setFromEvent = (e: { clientX: any; clientY: any }) =>
setPosition({ x: e.clientX, y: e.clientY })
window.addEventListener('mousemove', setFromEvent)
return () => {
window.removeEventListener('mousemove', setFromEvent)
}
}, [])
return (
<Section className={s['section']}>
<video
@ -42,25 +28,6 @@ const Hero = () => {
<ButtonLink href="/" variant="default" size="large">
Bring me back home
</ButtonLink>
<div className={s['scroll']}>
<div>
<p>C:</p>
<Flag className={s['flag']} />
</div>
<div className="hide-on-mobile">
<p>404</p>
<ul>
<li>
H:
<span>{position.x} PX</span>
</li>
<li>
V:
<span>{position.y} PX</span>
</li>
</ul>
</div>
</div>
<div className={s['gradient']} />
</Section>
)

View File

@ -30,9 +30,9 @@
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
padding-bottom: unset;
border-bottom: unset;
gap: tovw(16px, 'mobile');
padding: 0 tovw(16px, 'tablet', 16px);
border-bottom: unset;
}
h2 {

View File

@ -105,7 +105,7 @@
@include respond-to('mobile') {
width: 100vw;
margin: 0 tovw(-70px, 'tablet', -35px);
overflow: unset !important;
scroll-behavior: smooth;
}
}
@ -116,7 +116,7 @@
justify-content: space-between;
width: tovw(194px, 'default', 80px);
transition: filter var(--normal-transition);
gap: tovw(24px, 'default', 18px);
gap: tovw(24px, 'default', 24px);
img {
overflow: hidden;

View File

@ -6,6 +6,10 @@
flex-direction: column;
margin-top: tovw(55px, 'default', 20px);
padding: tovw(220px, 'default', 72px) 0;
.container {
padding: 0 tovw(16px, 'tablet', 16px);
}
}
.slider__container {

View File

@ -6,7 +6,7 @@
justify-content: center;
max-width: 100%;
min-height: calc(var(--vh) * 100);
gap: tovw(140px, 'default', 80px) tovw(130px, 'default', 30px);
gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
@ -15,7 +15,6 @@
flex-direction: column;
width: 100vw;
min-height: 100vh;
padding: 0 tovw(27px, 'tablet', 27px);
padding-bottom: tovw(18px, 'mobile');
}
}
@ -97,7 +96,7 @@
display: flex;
align-self: start;
flex-direction: column;
gap: tovw(60px, 'default', 20px);
gap: tovw(42px, 'default', 20px);
grid-area: 2 / 2 / 3 / 3;
@include respond-to('mobile') {
@ -123,6 +122,7 @@
.buttons__container {
display: flex;
gap: tovw(24px, 'default', 20px);
margin-top: tovw(32px, 'default', 16px);
@include respond-to('mobile') {
flex-direction: column;

View File

@ -19,6 +19,7 @@
display: flex;
flex-direction: column;
gap: tovw(5px, 'mobile', 15px);
padding: 0 tovw(16px, 'tablet', 16px);
}
}

View File

@ -58,6 +58,7 @@
@include respond-to('mobile') {
display: flex;
flex-wrap: wrap;
padding: 0 tovw(16px, 'mobile');
li {
width: 100%;
@ -106,6 +107,7 @@
@include respond-to('mobile') {
padding-left: tovw(32px, 'mobile');
padding-right: tovw(16px, 'mobile');
}
.line {

View File

@ -26,8 +26,8 @@
@include respond-to('mobile') {
align-items: flex-start;
flex-direction: column;
padding-bottom: unset;
border-bottom: unset;
padding: 0 tovw(16px, 'tablet', 16px);
gap: tovw(16px, 'mobile');
}

View File

@ -116,16 +116,16 @@
gap: tovw(140px, 'default', 20px);
@include respond-to('mobile') {
justify-content: space-between;
border-top: unset;
gap: tovw(20px, 'mobile', 30px);
gap: tovw(22px, 'mobile', 22px);
}
h2 {
width: tovw(100px, 'default', 20px);
@include respond-to('mobile') {
width: tovw(20px, 'mobile');
width: unset;
min-width: tovw(75px, 'mobile');
}
}
@ -137,7 +137,7 @@
color: var(--color-grey-light);
@include respond-to('mobile') {
width: tovw(180px, 'mobile', 250px);
width: 100%;
}
}
}