From 66cb27fbf74aabf0437b45f938456e283ae890ad Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 16 Nov 2022 23:06:26 +0000
Subject: [PATCH] layout tweaks

---
 src/components/Header/index.module.css   | 4 ++--
 src/components/Header/index.tsx          | 2 +-
 src/components/LogoUnit/index.module.css | 1 -
 src/components/Networks/index.module.css | 4 ++--
 src/components/Transitions.ts            | 4 ++--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/index.module.css b/src/components/Header/index.module.css
index b659528..68ab5ec 100644
--- a/src/components/Header/index.module.css
+++ b/src/components/Header/index.module.css
@@ -1,8 +1,8 @@
 .header {
   position: relative;
   padding: calc(var(--spacer) / 2);
-  padding-top: 30vh;
-  min-height: calc(90vh - var(--spacer));
+  padding-top: 25vh;
+  min-height: calc(80vh - var(--spacer));
   max-height: 1000px;
   text-align: center;
   display: flex;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 2b34973..f7ebb8d 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export default function Header({ small }: Props) {
   return (
-    <header className={`${styles.header} ${small ? styles.small : null}`}>
+    <header className={`${styles.header} ${small ? styles.small : ''}`}>
       <LogoUnit small={small} />
       {!small ? <Networks /> : null}
       <div className={styles.meta}>
diff --git a/src/components/LogoUnit/index.module.css b/src/components/LogoUnit/index.module.css
index 4dfda71..05e949f 100644
--- a/src/components/LogoUnit/index.module.css
+++ b/src/components/LogoUnit/index.module.css
@@ -1,7 +1,6 @@
 .logounit {
   pointer-events: none;
   display: block;
-  width: 100%;
 }
 
 .logo {
diff --git a/src/components/Networks/index.module.css b/src/components/Networks/index.module.css
index d9739c2..ac866bc 100644
--- a/src/components/Networks/index.module.css
+++ b/src/components/Networks/index.module.css
@@ -1,7 +1,5 @@
 .networks {
   padding-top: var(--spacer);
-  width: 100%;
-  text-align: center;
 }
 
 .title {
@@ -25,6 +23,8 @@
   stroke: var(--brand-grey-light);
   width: 24px;
   height: 24px;
+  transition: stroke 0.2s var(--easing);
+  will-change: stroke;
 }
 
 .link:hover svg,
diff --git a/src/components/Transitions.ts b/src/components/Transitions.ts
index 12fe98d..cc829b5 100644
--- a/src/components/Transitions.ts
+++ b/src/components/Transitions.ts
@@ -26,7 +26,7 @@ export const moveInTop = {
 export const moveInBottom = {
   initial: {
     opacity: 0,
-    y: 50,
+    y: 20,
     transition: { type: 'spring' }
   },
   enter: {
@@ -40,7 +40,7 @@ export const moveInBottom = {
   },
   exit: {
     opacity: 0,
-    y: 50,
+    y: 20,
     transition: {
       type: 'spring'
     }