Skeleton of the new style

pages/components/Footer.tsx

@@ -4,12 +4,7 @@ import styles from '../../styles/Footer.module.scss';
 
 export const Footer = () => {
   return (
-    <footer>
-      <div className={styles.mobileMiddle}>
-        <Link href='/#nav-bar'>
-          <img src='small-logo.png' alt='small logo' />
-        </Link>
-      </div>
+    <footer className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.left}>
           Livonsaari & Palva & Velkuanmaa
@@ -19,25 +14,27 @@ export const Footer = () => {
         </div>
         <div className={styles.middle}>
           <Link href='/#nav-bar'>
-            <img src='small-logo.png' alt='small logo' />
+            <img
+              className={styles.logo}
+              src='small-logo.png'
+              alt='small logo'
+            />
           </Link>
+          <div>
+            <a
+              className={styles.sourceLink}
+              href='https://github.com/codevictory/runosaari.net'
+            >
+              lähdekoodi
+            </a>
+            by codevictory
+          </div>
         </div>
         <div className={styles.right}>
           Katariina Vuorinen <br />
-          <a className='generic-link' href='mailto:runosaari@gmail.com'>
-            runosaari@gmail.com
-          </a>
+          <a href='mailto:runosaari@gmail.com'>runosaari@gmail.com</a>
         </div>
       </div>
-      <div>
-        <a
-          className='generic-link'
-          href='https://github.com/codevictory/runosaari.net'
-        >
-          lähdekoodi
-        </a>
-        by codevictory
-      </div>
     </footer>
   );
 };

pages/components/Header.tsx

@@ -4,25 +4,26 @@ import styles from '../../styles/Header.module.scss';
 
 export const Header = () => {
   return (
-    <header>
-      <nav className={styles.mainNavBar}>
-        <Link href='/'>Etusivu</Link>
-        <Link href='/program'>Ohjelma</Link>
-        <Link href='/performers'>Esiintyjät</Link>
-        <Link href='/info'>Info</Link>
-        <Link href='/safety'>Turvallisuus</Link>
-        <Link href='/archive'>Arkisto</Link>
-      </nav>
-      <h1 className={styles.mobileMainTitle}>
-        <Link href='/'>Runosaari 2022</Link>
-      </h1>
-      <nav className={styles.mobileMainNavBar} id='nav-bar'>
-        <Link href='/#logo-start'>Etusivu</Link>
-        <Link href='/program#program-start'>Ohjelma</Link>
-        <Link href='/performers#performers-start'>Esiintyjät</Link>
-        <Link href='/info#contact-start'>Info</Link>
-        <Link href='/safety#safety-start'>Turvallisuus</Link>
-        <Link href='/archive#archive-start'>Arkisto</Link>
+    <header className={styles.header}>
+      <nav className={styles.navBar}>
+        <Link href='/'>
+          <a className={styles.navBarLink}>Etusivu</a>
+        </Link>
+        <Link href='/program'>
+          <a className={styles.navBarLink}>Ohjelma</a>
+        </Link>
+        <Link href='/performers'>
+          <a className={styles.navBarLink}>Esiintyjät</a>
+        </Link>
+        <Link href='/info'>
+          <a className={styles.navBarLink}>Info</a>
+        </Link>
+        <Link href='/safety'>
+          <a className={styles.navBarLink}>Turvallisuus</a>
+        </Link>
+        <Link href='/archive'>
+          <a className={styles.navBarLink}>Arkisto</a>
+        </Link>
       </nav>
     </header>
   );