Fix responsivity

pages/components/Header.tsx

@@ -1,9 +1,14 @@
 import Link from 'next/link';
-import Image from 'next/image';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../../styles/Header.module.scss';
 
 const Header = () => {
+  const [isDesktop, setIsDesktop] = useState(true);
+
+  useEffect(() => {
+    setIsDesktop(window.innerWidth > 768);
+  }, []);
+
   return (
     <>
       <header className={styles.header}>
@@ -30,11 +35,19 @@ const Header = () => {
       </header>
       <section className={styles.logoContainer}>
         <div className={styles.logo} id='logo-start'>
+          {isDesktop ? (
             <img
               className={styles.logoImage}
               src='/runosaari-logo.jpg'
               alt='Runosaari logo'
             />
+          ) : (
+            <img
+              className={styles.logoImage}
+              src='/runosaari-logo_small.jpg'
+              alt='Runosaari logo'
+            />
+          )}
           <div className={styles.logoCredits}>
             <div>@Sanna Hukkanen</div>
           </div>

styles/Header.module.scss

@@ -28,10 +28,15 @@
     text-decoration: underline;
     font-size: 1.5rem;
     margin-bottom: 4px;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    width: auto;
   }
 
   .navBar {
-    flex-direction: column;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
   }
 }
 
@@ -58,5 +63,5 @@
   justify-content: right;
   max-width: 990px;
   padding-right: 10px;
-  margin-top: -10px;
+  margin-top: -5px;
 }

styles/Lead.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 90%;
 }
 
 .leadTitle {
@@ -11,5 +12,6 @@
 }
 
 .leadText {
-  width: 33%;
+  margin-left: 5%;
+  margin-right: 5%;
 }

styles/Performers.module.scss

@@ -58,5 +58,9 @@
   .performerContainer {
     flex-direction: column;
     align-items: center;
+
+    hr {
+      margin-top: 0;
+    }
   }
 }