admin/metatron-open-seo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: fix mobile header and footer layout (#135)

Browse Source 
Hide Sign in and GitHub text label on small screens, wrap footer
links onto multiple rows, and clip any horizontal overflow globally.
This commit is contained in:
Ben Senescu 2026-04-23 11:54:54 -04:00 committed by GitHub
parent 4c8a3305ed
commit 65d62f0eed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/site-footer.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
export function SiteFooter({ className }: { className?: string }) {
return (
<div className={className}>
<div className="flex items-center gap-6">
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
<Link to="/" className="font-semibold">
OpenSEO
</Link>

9
web/src/routes/_marketing.tsx
View File

@ -23,14 +23,14 @@ function MarketingLayout() {
}}
>
<div className="max-w-3xl mx-auto px-6 py-16 md:py-24">
<nav className="flex items-center justify-between mb-20">
<nav className="flex items-center justify-between gap-4 mb-20">
<Link
to="/"
className="text-sm font-semibold hover:opacity-80 transition-opacity"
>
OpenSEO
</Link>
<div className="flex items-center gap-5">
<div className="flex items-center gap-4 sm:gap-5">
<Link
to="/guides"
className="text-sm text-neutral-600 hover:text-neutral-900 transition-colors"
@ -47,14 +47,15 @@ function MarketingLayout() {
href="https://github.com/every-app/open-seo"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
className="inline-flex items-center gap-1.5 text-sm text-neutral-600 hover:text-neutral-900 transition-colors"
>
<GitHubIcon size={16} />
<span>GitHub</span>
<span className="hidden sm:inline">GitHub</span>
</a>
<a
href="https://app.openseo.so/sign-in"
className="h-8 px-3.5 text-sm font-medium border border-neutral-300 text-neutral-900 rounded-md hover:border-neutral-900 transition-colors inline-flex items-center"
className="hidden sm:inline-flex h-8 px-3.5 text-sm font-medium border border-neutral-300 text-neutral-900 rounded-md hover:border-neutral-900 transition-colors items-center"
>
Sign in
</a>

5
web/src/styles/app.css
View File

@ -10,3 +10,8 @@
--color-surface-raised: #ffffff;
--color-border-subtle: #e5e7eb;
}
html,
body {
overflow-x: clip;
}