mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-03-06 08:54:07 +00:00
Fix issues (#27)
This commit is contained in:
parent
ab86d7d14b
commit
bfeae81c8b
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: tovw(5px, 'mobile', 15px);
|
||||
padding: 0 tovw(16px, 'tablet', 16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user