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.
This commit is contained in:
Samuel Prevost
parent
790f3e9147
commit
8aaec477f6
49
src/App.vue
49
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"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user