From 8aaec477f6bbbab2bd82d4f3687df36c4dae0b13 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Fri, 1 May 2026 00:39:14 +0200
Subject: [PATCH] chore(chrome): swap Gitea corner ribbon for a footer GitHub
 link

The corner ribbon ate the top-left of the viewport on desktop, plus
pulled in 60+ lines of CSS for a single decoration. Replace with a
small "Fork me on GitHub" link in the existing footer (12 px Octocat
glyph + label, separated from the byline by a middot). Drops the
`.github-fork-ribbon` CSS block and the now-empty header spacer
comment along with it.
---
 src/App.vue          | 49 +++++++++++++++++++++++-------------
 src/assets/index.css | 59 --------------------------------------------
 2 files changed, 32 insertions(+), 76 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3517d7c..c9f1381 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,17 +15,6 @@ const store = useAppStore()
 
 <template>
     <div class="min-h-screen bg-background text-foreground">
-        <!-- Gitea fork ribbon — top-left, desktop only -->
-        <a
-            href="https://serv.e1n.sh/git/sam1902/skwik"
-            target="_blank"
-            rel="noopener"
-            class="github-fork-ribbon fixed left-0 top-0 z-[100] hidden md:block"
-            data-ribbon="Fork me on Gitea"
-            title="Fork me on Gitea"
-            >Fork me on Gitea</a
-        >
-
         <!-- Header lays out as a single h-14 row on desktop and stacks
              into title-row + stepper-row on mobile so the title doesn't
              collide with the stepper at narrow widths. The theme toggle
@@ -39,7 +28,7 @@ const store = useAppStore()
                     class="flex items-center justify-between gap-3 py-2 sm:grid sm:h-14 sm:grid-cols-3 sm:py-0"
                 >
                     <div class="hidden sm:block">
-                        <!-- spacer for the fork-me ribbon -->
+                        <!-- left-column spacer for the 3-col grid -->
                     </div>
                     <div class="flex items-center gap-2 sm:justify-center">
                         <SkwikLogo :size="28" />
@@ -88,15 +77,41 @@ const store = useAppStore()
         <footer
             class="fixed inset-x-0 bottom-0 z-40 border-t border-border/50 bg-background/95 py-3 text-center text-xs text-muted-foreground backdrop-blur supports-[backdrop-filter]:bg-background/60"
         >
-            <span>
-                Made by
+            <span class="inline-flex items-center gap-3">
+                <span>
+                    Made by
+                    <a
+                        href="https://github.com/usr-ein"
+                        target="_blank"
+                        rel="noopener"
+                        class="underline underline-offset-2 transition-colors hover:text-foreground"
+                        >Samuel Prevost</a
+                    >
+                </span>
+                <span class="text-muted-foreground/50" aria-hidden="true"
+                    >·</span
+                >
                 <a
-                    href="https://github.com/usr-ein"
+                    href="https://github.com/usr-ein/skwik"
                     target="_blank"
                     rel="noopener"
-                    class="underline underline-offset-2 transition-colors hover:text-foreground"
-                    >Samuel Prevost</a
+                    class="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
+                    title="Fork Skwik on GitHub"
                 >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M12 0.5C5.65 0.5 0.5 5.65 0.5 12c0 5.08 3.29 9.39 7.86 10.91.57.1.78-.25.78-.55 0-.27-.01-1-.02-1.95-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.13 0 1.54-.01 2.78-.01 3.16 0 .31.21.66.79.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35 0.5 12 0.5z"
+                        />
+                    </svg>
+                    Fork me on GitHub
+                </a>
             </span>
             <div
                 class="absolute bottom-1/2 right-2 translate-y-1/2 sm:hidden"
diff --git a/src/assets/index.css b/src/assets/index.css
index 252104f..c473d2a 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -129,62 +129,3 @@
     }
 }
 
-/* Fork-me ribbon — adapted from github-fork-ribbon-css */
-.github-fork-ribbon {
-    width: 12.1em;
-    height: 12.1em;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    pointer-events: none;
-    text-decoration: none;
-    text-indent: -999em;
-    font-size: 0.85em;
-}
-
-.github-fork-ribbon::before,
-.github-fork-ribbon::after {
-    position: absolute;
-    display: block;
-    width: 15.38em;
-    height: 1.54em;
-    top: 3.23em;
-    right: 0.5em;
-    box-sizing: content-box;
-    transform: rotate(-45deg);
-}
-
-.github-fork-ribbon::before {
-    content: "";
-    padding: 0.38em 0;
-    background-color: #2d7a2e;
-    background-image: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.05),
-        rgba(0, 0, 0, 0.15)
-    );
-    box-shadow:
-        0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5),
-        0 0 0 1px #5cb85c,
-        inset 0 1px 0 rgba(255, 255, 255, 0.2),
-        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-    border-top: 1px dashed rgba(255, 255, 255, 0.25);
-    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
-    pointer-events: auto;
-}
-
-.github-fork-ribbon::after {
-    content: attr(data-ribbon);
-    color: #fff;
-    font: 700 0.9em "Helvetica Neue", Helvetica, Arial, sans-serif;
-    line-height: 1.54em;
-    text-decoration: none;
-    text-align: center;
-    text-indent: 0;
-    text-shadow:
-        0 -1px 0 rgba(0, 0, 0, 0.5),
-        0 1px 2px rgba(0, 0, 0, 0.3);
-    pointer-events: auto;
-}