From a4b906245cff0e1a3cb22c9e8d3e5dd16812aee3 Mon Sep 17 00:00:00 2001
From: flooorianflo <florian.kiem@hfg.design>
Date: Sun, 3 Dec 2023 15:37:53 +0100
Subject: [PATCH] fix: some issues

---
 interface/components/Button.tsx |  2 +-
 interface/components/Footer.tsx |  2 +-
 interface/sections/Work.tsx     | 12 +++++++++---
 pages/index/+Page.tsx           |  2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/interface/components/Button.tsx b/interface/components/Button.tsx
index a74d5d57..cbfc00e7 100644
--- a/interface/components/Button.tsx
+++ b/interface/components/Button.tsx
@@ -49,7 +49,7 @@ export default function Button(props: {
     >
       {props.icon}
       {props.children}
-      {props.chevron && <Chevron />}
+      {props.chevron && <Chevron class="flex-shrink-0" />}
     </button>
   )
 }
diff --git a/interface/components/Footer.tsx b/interface/components/Footer.tsx
index 4c5eb504..e4660179 100644
--- a/interface/components/Footer.tsx
+++ b/interface/components/Footer.tsx
@@ -10,7 +10,7 @@ export default function Footer() {
   return (
     <footer class="py-16 border-t border-t-zinc-100 dark:border-t-zinc-900">
       <div class="max-w-screen-lx mx-auto md:px-10 px-6 grid lg:grid-cols-5 gap-8">
-        <div class="lg:col-span-3 xs:col-span-2 lg:max-w-[170px] max-w-sm">
+        <div class="lg:col-span-3 xs:col-span-2 max-w-md">
           <h3 class="font-semibold mb-2">Florian's {m.footer_slogan()}</h3>
           <p class="text-zinc-500 dark:text-zinc-400 mb-8">{m.footer_text()}</p>
           <LanguagePicker position="top" align="left" />
diff --git a/interface/sections/Work.tsx b/interface/sections/Work.tsx
index 9d8a6655..96750281 100644
--- a/interface/sections/Work.tsx
+++ b/interface/sections/Work.tsx
@@ -7,6 +7,12 @@ import * as m from "#lang/paraglide/messages"
 export default function Work(props: { projects: Record<string, string>[] }) {
   return (
     <>
+      <div class="flex gap-4 items-center mb-8">
+        <h2 class="font-medium text-lg text-zinc-300 dark:text-zinc-700">
+          Work
+        </h2>
+        <div class="w-full h-[1px] bg-zinc-100 dark:bg-zinc-900" />
+      </div>
       <div class="flex flex-col gap-32">
         {props.projects.map((project) => {
           const date = new Date(
@@ -19,12 +25,12 @@ export default function Work(props: { projects: Record<string, string>[] }) {
                 class="flex lg:gap-4 gap-2 flex-col md:flex-row items-start relative group/link"
                 href={project.url}
               >
-                <div class="lg:sticky lg:top-14 py-2 flex-shrink-0 top-0">
+                <div class="lg:sticky lg:top-14 py-2.5 flex-shrink-0 top-0">
                   <img
                     alt={`
                     Icon of ${project.title} project
                   `}
-                    class="w-8 h-8 outline-1 -outline-offset-1 outline outline-transparent rounded-lg dark:outline-zinc-900"
+                    class="w-7 h-7 outline-1 -outline-offset-1 outline outline-transparent rounded-lg dark:outline-zinc-900"
                     src={project.icon}
                   />
                 </div>
@@ -54,7 +60,7 @@ export default function Work(props: { projects: Record<string, string>[] }) {
                     <Button
                       type="text"
                       link={project.url}
-                      class="relative group-hover/link:underline"
+                      class="relative group-hover/link:underline truncate"
                       chevron
                     >
                       {m.button_readmore()}
diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx
index ef796e70..a42a18d3 100644
--- a/pages/index/+Page.tsx
+++ b/pages/index/+Page.tsx
@@ -5,7 +5,7 @@ import * as m from "#lang/paraglide/messages"
 export default function Page({ projects }: { projects: any[] }) {
   return (
     <div class="w-full">
-      <header class="flex items-center justify-start md:gap-24 gap-16 max-lg:pb-16 w-full lg:py-32 mb-12 lg:justify-between lg:flex-row flex-col-reverse">
+      <header class="flex items-center justify-start md:gap-24 gap-16 max-lg:pb-8 w-full lg:pt-24 lg:pb-8 mb-12 lg:justify-between lg:flex-row flex-col-reverse">
         <div class="lg:h-2/6 h-2/5 max-lg:w-full max-lg:flex">
           <div class="cursor-text max-w-2xl">
             <h1 class="text-4xl font-semibold leading-snug pointer-events-none transition-colors group hover:text-zinc-400 mb-10">