From e77c062d41fe495a7dbfd6ffec314c0c07d80e71 Mon Sep 17 00:00:00 2001
From: TheClashFruit <admin@theclashfruit.me>
Date: Sat, 28 Mar 2026 15:44:48 +0100
Subject: [PATCH] chore: some design changes

---
 app/(main)/layout.tsx                |  12 ++-
 app/(main)/links/page.tsx            |   3 +-
 components/Footer.tsx                | 156 +++++++++++++--------------
 components/Header.tsx                |  12 +--
 styles/components/Footer.module.scss |  80 +++++++-------
 styles/components/Header.module.scss |  46 ++++----
 styles/globals.scss                  |  22 ++--
 styles/layout/Main.module.scss       |  24 ++---
 styles/pages/Links.module.scss       |   2 +
 styles/typography.module.scss        |   4 +-
 10 files changed, 179 insertions(+), 182 deletions(-)

diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index f8e9248..6374193 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -16,13 +16,15 @@ export default function MarketLayout({
     <>
       <Header />
 
-      <Container as="main" className={styles.main}>
+      <aside className={styles.sideBar}>
         <NavBar />
+      </aside>
 
-        <ViewTransition>
-          <div>{children}</div>
-        </ViewTransition>
-      </Container>
+      <ViewTransition>
+        <main>
+          {children}
+        </main>
+      </ViewTransition>
 
       <Footer />
     </>
diff --git a/app/(main)/links/page.tsx b/app/(main)/links/page.tsx
index d9f61f3..bc10154 100644
--- a/app/(main)/links/page.tsx
+++ b/app/(main)/links/page.tsx
@@ -89,7 +89,8 @@ export default function Links() {
         style={{
           display: 'flex',
           flexWrap: 'wrap',
-          gap: '4px'
+          gap: '4px',
+          marginBottom: '8px'
         }}
       >
         {buttons.map((btn, i) => (
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 957e945..939ff6b 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -16,86 +16,84 @@ import styles from '@/styles/components/Footer.module.scss';
 export default function Footer() {
   return (
     <footer className={styles.footer}>
-      <Container>
-        <div>
-          <p>
-            Copyright &copy; {new Date().getFullYear()}{' '}
-            <Link href="https://theclashfruit.me">TheClashFruit</Link>.
-          </p>
-          <p>
-            Licensed under{' '}
-            <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
-              CC BY-NC-SA 4.0
-            </Link>{' '}
-            unless otherwise noted.
-          </p>
-        </div>
+      <div>
+        <p>
+          Copyright &copy; {new Date().getFullYear()}{' '}
+          <Link href="https://theclashfruit.me">TheClashFruit</Link>.
+        </p>
+        <p>
+          Licensed under{' '}
+          <Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+            CC BY-NC-SA 4.0
+          </Link>{' '}
+          unless otherwise noted.
+        </p>
+      </div>
 
-        <div>
-          <ul>
-            <li>
-              <Link
-                href="https://bsky.app/profile/theclashfruit.me"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="Bluesky"
-              >
-                <SiBluesky />
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="https://wetdry.world/@TheClashFruit"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="Mastodon"
-              >
-                <SiMastodon />
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="https://github.com/TheClashFruit"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="GitHub"
-              >
-                <SiGithub />
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="https://tangled.org/theclashfruit.me"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="Tangled"
-              >
-                <SiTangled />
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="https://ko-fi.com/theclashfruit"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="Ko-Fi"
-              >
-                <SiKofi />
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="https://discord.gg/CWEApqJ6rc"
-                target="_blank"
-                rel="noopener noreferrer me"
-                title="Discord"
-              >
-                <SiDiscord />
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </Container>
+      <div>
+        <ul>
+          <li>
+            <Link
+              href="https://bsky.app/profile/theclashfruit.me"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="Bluesky"
+            >
+              <SiBluesky />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://wetdry.world/@TheClashFruit"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="Mastodon"
+            >
+              <SiMastodon />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://github.com/TheClashFruit"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="GitHub"
+            >
+              <SiGithub />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://tangled.org/theclashfruit.me"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="Tangled"
+            >
+              <SiTangled />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://ko-fi.com/theclashfruit"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="Ko-Fi"
+            >
+              <SiKofi />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://discord.gg/CWEApqJ6rc"
+              target="_blank"
+              rel="noopener noreferrer me"
+              title="Discord"
+            >
+              <SiDiscord />
+            </Link>
+          </li>
+        </ul>
+      </div>
     </footer>
   );
 }
diff --git a/components/Header.tsx b/components/Header.tsx
index 47a56b6..1c49d40 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -7,13 +7,11 @@ import styles from '@/styles/components/Header.module.scss';
 export default function Header() {
   return (
     <header className={styles.header}>
-      <Container>
-        <div className={styles.navHeader}>
-          <Leaf size={32} />
-        </div>
-  
-        <h1>TheClashFruit</h1>
-      </Container>
+      <div className={styles.nav}>
+        <Leaf size={32} />
+      </div>
+      
+      <h1>TheClashFruit</h1>
     </header>
   );
 }
diff --git a/styles/components/Footer.module.scss b/styles/components/Footer.module.scss
index 136a809..48abc9c 100644
--- a/styles/components/Footer.module.scss
+++ b/styles/components/Footer.module.scss
@@ -1,68 +1,64 @@
 .footer {
-  > div {
-    display: flex;
-
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
 
-    padding: 16px;
+  justify-content: space-between;
+  align-items: center;
 
-    p {
-      margin-bottom: 2px;
-      
-      &:last-child {
-        margin: 0;
-      }
+  p {
+    margin-bottom: 2px;
+    
+    &:last-child {
+      margin: 0;
     }
+  }
 
-    ul {
-      display: flex;
+  ul {
+    display: flex;
 
-      list-style: none;
+    list-style: none;
 
-      gap: 4px;
+    gap: 4px;
 
-      > li > a {
-        display: flex;
+    > li > a {
+      display: flex;
 
-        padding: 8px;
+      padding: 8px;
 
-        color: var(--inverseSurface);
+      color: var(--inverseSurface);
 
-        text-decoration: none;
+      text-decoration: none;
 
-        border-radius: 50%;
+      border-radius: 50%;
 
-        transition: background 150ms;
+      transition: background 150ms;
 
-        &:hover {
-          color: var(--primary);
-          background: color-mix(var(--primary) 20%, transparent 80%);
-        }
+      &:hover {
+        color: var(--primary);
+        background: color-mix(var(--primary) 20%, transparent 80%);
       }
     }
+  }
 
-    @media (max-width: 769px) {
-      flex-direction: column-reverse;
+  @media (max-width: 769px) {
+    flex-direction: column-reverse;
 
-      align-items: center;
-      justify-content: center;
+    align-items: center;
+    justify-content: center;
 
-      gap: 16px;
+    gap: 16px;
 
-      p {
-        text-align: center;
-      }
+    p {
+      text-align: center;
+    }
+    
+    ul {
+      flex-wrap: wrap;
       
-      ul {
-        flex-wrap: wrap;
-        
-        align-items: center;
-        justify-content: center;
-      }
+      align-items: center;
+      justify-content: center;
     }
   }
-
+  
   @media (max-width: 769px) {
     margin-bottom: calc(16px + 44px);
   }
diff --git a/styles/components/Header.module.scss b/styles/components/Header.module.scss
index 245c8b9..065c4f4 100644
--- a/styles/components/Header.module.scss
+++ b/styles/components/Header.module.scss
@@ -1,35 +1,35 @@
 .header {
-  > div {
-    display: flex;
+  padding: 16px calc(50vw - 50%);
 
-    align-items: center;
+  margin: 0 calc(50% - 50vw) 0;
+  margin-top: -16px;
+
+  display: flex;
+
+  align-items: center;
 
-    gap: 16px;
+  gap: 16px;
 
-    padding: 16px;
+  h1 {
+    margin: 0;
 
-    > .navHeader {
-      width: 215px;
+    font-size: 180%;
+    font-weight: 600;
+  }
 
-      display: flex;
+  .nav {
+    display: flex;
 
-      align-items: center;
-      justify-content: end;
+    align-items: center;
+    justify-content: end;
 
-      > svg {
-        color: var(--primary);
-      }
-      
-      @media (max-width: 769px) {
-        width: fit-content;
-      }
-    }
+    width: 215px;
 
-    > h1 {
-      margin: 0;
+    position: absolute;
+    left: calc(50% - 40ch - 215px);
+  }
 
-      font-size: 180%;
-      font-weight: 600;
-    }
+  svg {
+    color: var(--primary);
   }
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index f14ff52..c9d8c40 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -16,16 +16,24 @@ body {
   color: var(--onSurface);
 
   min-height: 100svh;
+  max-width: 80ch;
 
-  display: flex;
-  flex-direction: column;
+  margin: 0 auto;
+  padding: 16px;
 
   > main {
-    flex: 1;
-    
-    ul, ol {
+    margin-bottom: 16px;
+
+    min-height: calc(100dvh - 75px - 50px - (2 * 16px));
+
+    @media (max-width: 769px) {
+      min-height: calc(100dvh - 75px - 106px - 60px - (2 * 16px));
+    }
+
+    ul,
+    ol {
       margin-bottom: 8px;
-      
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -46,4 +54,4 @@ a {
 }
 
 // View Transition
-// TODO: Add some fancy anim
\ No newline at end of file
+// TODO: Add some fancy anim
diff --git a/styles/layout/Main.module.scss b/styles/layout/Main.module.scss
index a98aed3..0dafaa2 100644
--- a/styles/layout/Main.module.scss
+++ b/styles/layout/Main.module.scss
@@ -1,25 +1,17 @@
-.main {
-  display: flex;
-
-  align-items: flex-start;
+.sideBar {
+  position: absolute;
 
-  gap: 16px;
+  left: calc(50% - ((80ch) / 2) - (215px));
+  
+  width: 215px;
+}
 
+.main {
   padding: 0 16px;
-
-  > div {
-    flex: 1;
-
-    max-width: calc(100% - (16px + 215px));
-    
-    @media (max-width: 769px) {
-      max-width: 100%;
-    }
-  }
 }
 
 .error {
   h2 {
     font-weight: 600;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/pages/Links.module.scss b/styles/pages/Links.module.scss
index d751df3..d88febb 100644
--- a/styles/pages/Links.module.scss
+++ b/styles/pages/Links.module.scss
@@ -1,4 +1,6 @@
 .button {
+  display: flex;
+  
   transition: 150ms;
   
   > img:not([src$=".svg"]) {
diff --git a/styles/typography.module.scss b/styles/typography.module.scss
index d9eb567..250a110 100644
--- a/styles/typography.module.scss
+++ b/styles/typography.module.scss
@@ -4,7 +4,7 @@ body {
   font-size: 100%;
   font-weight: 400;
 
-  line-height: 1.35;
+  line-height: 1.5;
 }
 
 ::selection {
@@ -24,7 +24,7 @@ h6 {
 }
 
 h1 {
-  font-size: 210%;
+  font-size: 200%;
 }
 
 h2 {
-- 
2.51.2