docs: styleguide header design optimization (#945)

mittwald · Nov 6, 2024 · f3c72e8 · f3c72e8
1 parent b08cd7b
commit f3c72e8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 45 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/packages/docs/assets/Styleguide_Startseite.svg b/packages/docs/assets/Styleguide_Startseite.svg
diff --git a/packages/docs/assets/m-flow_logo.svg b/packages/docs/assets/m-flow_logo.svg
diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss
@@ -25,7 +25,7 @@
   align-items: center;
   max-width: 1500px;
   margin: 0 auto;
-  padding: var(--size-px--m) var(--size-px--l);
+  padding: var(--size-px--m) var(--size-px--l) var(--size-px--l);
   flex-wrap: wrap;
   gap: var(--size-rem--m);
 
@@ -36,24 +36,16 @@
     left: 0;
     right: 0;
     height: 250px;
-    background: var(--primary--color--100);
+    background: var(--color--hosting-blue--200);
     position: absolute;
     z-index: -1;
   }
-
-  h1 {
-    margin-right: auto;
-  }
 }
 
 .homeLink {
   display: flex;
-  column-gap: var(--size-rem--s);
-  align-items: center;
-}
-
-.logo {
-  color: var(--heading--color);
+  column-gap: var(--size-rem--m);
+  align-items: end;
 }
 
 .mainNavigation {
@@ -116,7 +108,7 @@
   }
 
   .header {
-    padding: var(--size-px--xs) var(--size-px--s);
+    padding: var(--size-px--xs) var(--size-px--s) var(--size-px--m);
     row-gap: var(--size-rem--s);
   }
 
@@ -129,9 +121,6 @@
   padding: 0;
 
   .homeImage {
-    margin-left: -1px;
-    width: calc(100% + 2px);
-    max-width: calc(100% + 2px);
     border-bottom-color: var(--separator--color);
     border-bottom-width: var(--separator--height);
     border-bottom-style: var(--border-style--default);

diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx
@@ -7,14 +7,14 @@ import React from "react";
 import HeaderNavigation from "@/app/_components/layout/HeaderNavigation/HeaderNavigation";
 import clsx from "clsx";
 import styles from "./layout.module.scss";
-import Heading from "@mittwald/flow-react-components/Heading";
 import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory";
 import { LinkProvider } from "@mittwald/flow-react-components/nextjs";
-import { IconMittwald } from "@mittwald/flow-react-components/Icons";
+import logoMittwald from "../../assets/m-flow_logo.svg";
 import MainNavigation from "@/app/_components/layout/MainNavigation";
 import MobileNavigation from "@/app/_components/layout/MobileNavigation/MobileNavigation";
 import { NotificationProvider } from "@mittwald/flow-react-components/NotificationProvider";
 import { Link } from "@mittwald/flow-react-components/Link";
+import { Image } from "@mittwald/flow-react-components/Image";
 
 export const metadata: Metadata = {
   title: "Flow – mittwald Design System",
@@ -31,10 +31,7 @@ const RootLayout: FC<PropsWithChildren> = async (props) => {
           <NotificationProvider>
             <header className={styles.header}>
               <Link href="/" className={styles.homeLink}>
-                <IconMittwald size="l" className={styles.logo} />
-                <Heading level={1} className={styles.heading}>
-                  Flow
-                </Heading>
+                <Image src={logoMittwald.src} alt="mittwald Flow Logo" />
               </Link>
 
               <HeaderNavigation