GitHub/kill-the-news
1
0
Fork 0
mirror of https://github.com/juherr/kill-the-news.git synced 2026-06-20 22:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(admin): add site header and footer to all admin pages

Browse Source 
Adds a minimal header with a branded link to kill-the.news and an
"admin" badge, plus a discreet footer with site link and GitHub
Sponsors link.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-22 23:23:48 +02:00
parent 4a4c276859
commit 75a557d542
2 changed files with 82 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/ui.tsx
+17 -1
View File
@@ -29,10 +29,26 @@ export const Layout = ({ title, children }: LayoutProps) => {
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
{/* designSystem and interactiveScripts are static trusted strings, not user input */}
<style dangerouslySetInnerHTML={{ __html: designSystem }} />
<script dangerouslySetInnerHTML={{ __html: interactiveScripts + ";" }} />
</head>
<body class="page">{children}</body>
<body class="page">
<header class="site-header">
<a href="https://kill-the.news/" class="site-header-logo" target="_blank" rel="noopener">
kill-the-news
</a>
<span class="site-header-label">admin</span>
</header>
{children}
<footer class="site-footer">
<a href="https://kill-the.news/" target="_blank" rel="noopener">kill-the.news</a>
<span class="site-footer-sep" aria-hidden="true">·</span>
<a href="https://github.com/sponsors/juherr" target="_blank" rel="noopener" class="site-footer-sponsor">
♥ Sponsor
</a>
</footer>
</body>
</html>
);
};
src/styles/layout.css
+65
View File
@@ -181,3 +181,68 @@
margin-bottom: var(--spacing-md);
color: var(--color-text-primary);
}
/* Site Header */
.site-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
border-bottom: 1px solid var(--color-border);
}
.site-header-logo {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
letter-spacing: -0.01em;
transition: opacity var(--transition-fast);
}
.site-header-logo:hover {
opacity: 0.8;
}
.site-header-label {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
padding: 2px 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
}
/* Site Footer */
.site-footer {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-lg) var(--spacing-xl);
margin-top: auto;
border-top: 1px solid var(--color-border);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.site-footer a {
color: var(--color-text-tertiary);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer a:hover {
color: var(--color-text-secondary);
}
.site-footer-sep {
opacity: 0.4;
}
.site-footer-sponsor {
color: var(--color-text-tertiary) !important;
}
.site-footer-sponsor:hover {
color: #db61a2 !important;
}