dnoulet/go-tell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

catpuccing moka

Browse source
This commit is contained in:
Daniel Noulet 2026-09-19 15:29:10 +02:00
parent ead8819e39
commit 17b5f751e2
3 changed files with 246 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
ui/app/src/App.tsx
View file

@ -5,8 +5,13 @@ import { useAuth } from './auth'
function Shell({ children }: { children: React.ReactNode }) {
const { user, signOut } = useAuth()
const [dark, setDark] = useState(() => window.localStorage.getItem('urpi-theme') !== 'light')
useEffect(() => {
document.documentElement.dataset.theme = dark ? 'dark' : 'light'
window.localStorage.setItem('urpi-theme', dark ? 'dark' : 'light')
}, [dark])
return <main className="shell">
<header className="header"><Link className="brand" to="/"><span className="brand-prompt">~/</span> Urpi's backlog<span className="brand-cursor">_</span><small>linux · go · java · ideas</small></Link>{user && <button className="text-button" onClick={() => void signOut()}>Sign out</button>}</header>
<header className="header"><Link className="brand" to="/"><span className="brand-prompt">~/</span> Urpi's backlog<span className="brand-cursor">_</span><small>linux · go · java · ideas</small></Link><div className="header-actions"><button className="theme-button" type="button" aria-label={`Switch to ${dark ? 'light' : 'dark'} theme`} onClick={() => setDark(value => !value)}>{dark ? '☀ Light' : '☾ Dark'}</button>{user && <button className="text-button" onClick={() => void signOut()}>Sign out</button>}</div></header>
{children}
</main>
}
@ -98,7 +103,7 @@ function ContentList() {
}, [cursor, category, status, badges.join(',')])
return <Shell><section className="content-page">
<div className="page-heading"><div><span className="eyebrow">Journal</span><h1>Latest content</h1></div></div>
<div className="page-heading"><div><span className="eyebrow">$ cd ~/backlog && ls</span></div></div>
<div className="filters" aria-label="Content filters">
<label className="status-filter">Status
<select value={status} onChange={event => setStatus(event.target.value)}>

46
ui/app/src/styles.css
View file

@ -14,6 +14,7 @@ button, a, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
.shell { min-height: 100vh; max-width: 1080px; margin: auto; padding: 0 28px 72px; }
.header { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.brand { position: relative; color: #cdd6f4; font-size: 1.15rem; font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand:hover { color: #cba6f7; }
.brand-prompt { color: #a6e3a1; font-family: ui-monospace, SFMono-Regular, monospace; }
@ -22,6 +23,8 @@ button, select { cursor: pointer; }
@keyframes blink { 50% { opacity: 0; } }
.text-button { border: 1px solid #45475a; border-radius: 8px; background: #313244; color: #bac2de; cursor: pointer; padding: 8px 12px; }
.text-button:hover { border-color: #89b4fa; color: #cdd6f4; }
.theme-button { border: 1px solid #45475a; border-radius: 8px; background: #313244; color: #bac2de; padding: 8px 12px; }
.theme-button:hover { border-color: #cba6f7; color: #f5e0e8; }
.card { margin: 10vh auto 0; max-width: 500px; padding: 42px; background: #242438; border: 1px solid #45475a; border-radius: 16px; box-shadow: 0 18px 50px #11111b66; }
.auth-card { text-align: center; }
h1 { margin: 10px 0 12px; color: #f5e0e8; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.04em; }
@ -80,5 +83,48 @@ p { line-height: 1.65; }
.actions .secondary-button { margin: 0; background: #45475a; color: #cdd6f4; }
.inline-button { margin-top: 22px; }
.protected-card { text-align: center; }
html[data-theme="light"] {
color: #4c4f69;
background: #eff1f5;
}
html[data-theme="light"] body { background: radial-gradient(circle at 85% -10%, #dce4f4 0, transparent 38rem), #eff1f5; }
html[data-theme="light"] .brand { color: #4c4f69; }
html[data-theme="light"] .brand:hover { color: #8839ef; }
html[data-theme="light"] .brand-prompt { color: #40a02b; }
html[data-theme="light"] .brand-cursor { color: #df8e1d; }
html[data-theme="light"] .brand small { color: #8c8fa1; }
html[data-theme="light"] .text-button,
html[data-theme="light"] .theme-button { border-color: #ccd0da; background: #e6e9ef; color: #5c5f77; }
html[data-theme="light"] .text-button:hover,
html[data-theme="light"] .theme-button:hover { border-color: #8839ef; color: #4c4f69; }
html[data-theme="light"] .card,
html[data-theme="light"] .filters,
html[data-theme="light"] .content-card { background: #ffffff; border-color: #ccd0da; box-shadow: 0 12px 34px #4c4f6914; }
html[data-theme="light"] h1,
html[data-theme="light"] .content-card h2 a { color: #4c4f69; }
html[data-theme="light"] .muted,
html[data-theme="light"] .content-card p { color: #6c6f85; }
html[data-theme="light"] .eyebrow { color: #8839ef; }
html[data-theme="light"] .google-button,
html[data-theme="light"] .filters select,
html[data-theme="light"] .badge-input,
html[data-theme="light"] .editor input,
html[data-theme="light"] .editor textarea,
html[data-theme="light"] .editor select { border-color: #ccd0da; background: #eff1f5; color: #4c4f69; }
html[data-theme="light"] .google-button:hover { background: #e6e9ef; border-color: #1e66f5; }
html[data-theme="light"] .profile,
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .actions .secondary-button { background: #e6e9ef; color: #5c5f77; }
html[data-theme="light"] .status { color: #179299; background: #d9f1ed; }
html[data-theme="light"] .filter-pill,
html[data-theme="light"] .badge { color: #8839ef; background: #f0e5ff; }
html[data-theme="light"] .body-copy,
html[data-theme="light"] .editor label,
html[data-theme="light"] .filters label { color: #5c5f77; }
html[data-theme="light"] .detail-heading { border-color: #ccd0da; }
html[data-theme="light"] .read-link,
html[data-theme="light"] .back-link { color: #1e66f5; }
html[data-theme="light"] .primary-button { background: #8839ef; color: #ffffff; }
html[data-theme="light"] .primary-button:hover { background: #7c2fe0; }
@media (max-width: 480px) { .shell { padding: 0 16px 56px; } .card { padding: 28px 22px; } .brand small { font-size: .58rem; } }
@media (max-width: 640px) { .content-page, .detail-page { padding-top: 3vh; } .edit-button { position: static; margin-top: 10px; } .filters { grid-template-columns: 1fr; } }