From c003b0627daca6df278700bbb8126ba85493de08 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Tue, 18 Oct 2022 23:40:09 +0200
Subject: [PATCH] Img optimized

---
 components/Blog/Navigation.tsx     |  9 ++++++---
 pages/index.tsx                    | 18 ++++++++----------
 styles/Blog/Navigation.module.scss |  1 +
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/Blog/Navigation.tsx b/components/Blog/Navigation.tsx
index d0aeef9..596cb2c 100644
--- a/components/Blog/Navigation.tsx
+++ b/components/Blog/Navigation.tsx
@@ -1,19 +1,22 @@
 /* eslint-disable @next/next/no-img-element */
 import type { NextPage } from "next";
 import Link from "next/link";
+import Image from "next/image";
 import { TerminalWindow, House, User } from "phosphor-react";
 import ThemeSwitch from "./ThemeSwitch";
 
 import styles from "../../styles/Blog/Navigation.module.scss";
+import logo from "../../public/icon.png";
 
 const Navigation: NextPage<{}> = () => {
     return <nav className={styles.navigation}>
         <Link href={"/"}>
-            <a className={`nostyle ${styles.imgContainer}`}>
-                <picture>
+            <a className={`nostyle ${styles.imgContainer} ${styles.logo}`}>
+                <Image src={logo} alt={"Logo"} layout={"fill"} />
+                {/*<picture>
                     <source srcSet="/icon.png" type="image/png" />
                     <img src="/icon.png" alt={"Website icon, a red eye"} className={styles.logo} />
-                </picture>
+</picture>*/}
             </a>
         </Link>
         <div className={styles.navLink}>
diff --git a/pages/index.tsx b/pages/index.tsx
index 06f54ff..f8be2c3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -32,16 +32,14 @@ const Blog: NextPage<{ content: ContentList }> = ({content}) => {
         </div>;
     };
 
-    return <>
-        <Layout>
-            <h1>Hello there!</h1>
-            <p>Miaumiau Lorem ipsum</p>
-            <h2>Projects</h2>
-            { generateCards("project") }
-            <h2>Diaries</h2>
-            { generateCards("diary") }
-        </Layout>
-    </>;
+    return <Layout>
+        <h1>Hello there!</h1>
+        <p>Miaumiau Lorem ipsum</p>
+        <h2>Projects</h2>
+        { generateCards("project") }
+        <h2>Diaries</h2>
+        { generateCards("diary") }
+    </Layout>;
 
 };
 
diff --git a/styles/Blog/Navigation.module.scss b/styles/Blog/Navigation.module.scss
index 0bca406..e28b4f7 100644
--- a/styles/Blog/Navigation.module.scss
+++ b/styles/Blog/Navigation.module.scss
@@ -29,6 +29,7 @@
 
     .logo {
         height: calc(1em + 40px - 20px);
+        width: calc((501 / 204) * (1em + 40px - 20px));
     }
 
     .navLink {