layout tweaks

src/components/Header/index.module.css

@@ -1,8 +1,8 @@
 .header {
   position: relative;
   padding: calc(var(--spacer) / 2);
-  padding-top: 30vh;
+  padding-top: 25vh;
-  min-height: calc(90vh - var(--spacer));
+  min-height: calc(80vh - var(--spacer));
   max-height: 1000px;
   text-align: center;
   display: flex;

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}>

src/components/LogoUnit/index.module.css

@@ -1,7 +1,6 @@
 .logounit {
   pointer-events: none;
   display: block;
-  width: 100%;
 }
 
 .logo {

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,

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'
     }