commit 9a6db96aeaa11ae65aa7728b48371ff07fd1b266
parent e8aef7b350583e05b03a72fd9a70e49db3d2c84e
Author: notamitgamer-bot <noreply@github.com>
Date: Wed, 30 Sep 2026 09:39:01 +0000
ui: icon + hamburger navbar; restyle shortener, docs and gh-sync pages
- navbar: SVG icons with labels, collapses to a hamburger menu under 720px (no more sideways scrolling)
- url_shortener, documentation, gh_sync_docs: shared tokens, system fonts, no Google Fonts, no shadows, light/dark
- color-scheme meta now 'light dark' on all pages
Diffstat:
5 files changed, 87 insertions(+), 71 deletions(-)
diff --git a/app/templates/_navbar.html b/app/templates/_navbar.html
@@ -13,13 +13,32 @@
max-width: var(--ui-width); margin: 0 auto; padding: 0.75rem 1rem;
}
.wordmark { font-weight: 600; font-size: 1rem; color: var(--ui-text) !important; text-decoration: none !important; white-space: nowrap; }
-.navlinks { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; }
+.navlinks { display: flex; align-items: center; gap: 0.25rem; }
.navlinks a {
- padding: 0.4rem 0.7rem; border-radius: var(--ui-radius);
+ display: inline-flex; align-items: center; gap: 0.4rem;
+ padding: 0.4rem 0.65rem; border-radius: var(--ui-radius);
color: var(--ui-muted); font-size: 0.9rem; text-decoration: none; white-space: nowrap;
}
+.navlinks a svg { flex-shrink: 0; }
.navlinks a:hover { color: var(--ui-text); background: var(--ui-surface); }
.navlinks a.active { color: var(--ui-accent); background: var(--ui-accent-bg); font-weight: 500; }
+.nav-toggle {
+ display: none; align-items: center; justify-content: center;
+ width: 2.25rem; height: 2.25rem; padding: 0;
+ background: transparent; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+ color: var(--ui-text); cursor: pointer;
+}
+.nav-toggle:hover { background: var(--ui-surface); }
+.nav-toggle .icon-close { display: none; }
+.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
+.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
+@media (max-width: 720px) {
+ .navbar { flex-wrap: wrap; }
+ .nav-toggle { display: inline-flex; }
+ .navlinks { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.15rem; padding-top: 0.5rem; }
+ .navlinks.open { display: flex; }
+ .navlinks a { padding: 0.65rem 0.75rem; font-size: 1rem; }
+}
.breadcrumb-container { max-width: var(--ui-width); margin: 0 auto; padding: 0 1rem 0.75rem; }
.breadcrumb {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
@@ -48,13 +67,14 @@
<div class="navbar-wrapper">
<header class="navbar">
<a href="/" class="wordmark">amit/cdn</a>
- <nav class="navlinks" aria-label="Primary">
- <a href="/find" class="{{ 'active' if page == 'search' }}"{{ ' aria-current="page"'|safe if page == 'search' }}>Find</a>
- <a href="/new" class="{{ 'active' if page == 'upload' }}"{{ ' aria-current="page"'|safe if page == 'upload' }}>Upload</a>
- <a href="/gh-sync" class="{{ 'active' if page == 'gh-sync' }}"{{ ' aria-current="page"'|safe if page == 'gh-sync' }}>Sync</a>
- <a href="/documentation" class="{{ 'active' if page == 'documentation' }}"{{ ' aria-current="page"'|safe if page == 'documentation' }}>Docs</a>
- <a href="/history" class="{{ 'active' if page == 'history' }}"{{ ' aria-current="page"'|safe if page == 'history' }}>History</a>
- <a href="/shorten" class="{{ 'active' if page == 'shorten' }}"{{ ' aria-current="page"'|safe if page == 'shorten' }}>Shorten</a>
+ <button type="button" class="nav-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="primary-nav" onclick="var o=document.getElementById('primary-nav').classList.toggle('open');this.setAttribute('aria-expanded',o)"><svg class="icon-open" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg><svg class="icon-close" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg></button>
+ <nav class="navlinks" id="primary-nav" aria-label="Primary">
+ <a href="/find" class="{{ 'active' if page == 'search' }}"{{ ' aria-current="page"'|safe if page == 'search' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><span>Find</span></a>
+ <a href="/new" class="{{ 'active' if page == 'upload' }}"{{ ' aria-current="page"'|safe if page == 'upload' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><span>Upload</span></a>
+ <a href="/gh-sync" class="{{ 'active' if page == 'gh-sync' }}"{{ ' aria-current="page"'|safe if page == 'gh-sync' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>Sync</span></a>
+ <a href="/documentation" class="{{ 'active' if page == 'documentation' }}"{{ ' aria-current="page"'|safe if page == 'documentation' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg><span>Docs</span></a>
+ <a href="/history" class="{{ 'active' if page == 'history' }}"{{ ' aria-current="page"'|safe if page == 'history' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><span>History</span></a>
+ <a href="/shorten" class="{{ 'active' if page == 'shorten' }}"{{ ' aria-current="page"'|safe if page == 'shorten' }}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg><span>Shorten</span></a>
</nav>
</header>
{% if not (page == 'listing' and not path) %}
diff --git a/app/templates/documentation.html b/app/templates/documentation.html
@@ -10,36 +10,34 @@
<link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
-<meta name="theme-color" content="#09090b">
-<meta name="color-scheme" content="dark">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
+<meta name="color-scheme" content="light dark">
<style>
- :root{--bg:#09090b;--surface:#121214;--surface-2:#1e1e22;--border:#27272a;--text:#f4f4f5;--muted:#a1a1aa;--accent:#818cf8;--get:#4ade80;--post:#818cf8;--err:#f87171;}
+ :root{--bg:var(--ui-bg);--surface:var(--ui-surface);--surface-2:var(--ui-surface);--border:var(--ui-border);--text:var(--ui-text);--muted:var(--ui-muted);--accent:var(--ui-accent);--get:var(--ui-success);--post:var(--ui-accent);--err:var(--ui-danger);}
*{box-sizing:border-box;}
- body{background:var(--bg);color:var(--text);font-family:'Work Sans',system-ui,sans-serif;margin:0;line-height:1.6;}
+ body{background:var(--bg);color:var(--text);font-family:var(--ui-font);margin:0;line-height:1.6;}
.wrap{max-width:1000px;margin:0 auto;padding:48px 20px 96px;}
- h1{font-family:'Zilla Slab',Georgia,serif;font-weight:600;font-size:1.9rem;margin-bottom:.2em;}
- h2{font-size:1.15rem;margin:0 0 1rem;font-family:'JetBrains Mono',monospace;}
+ h1{font-family:var(--ui-font);font-weight:600;font-size:1.9rem;margin-bottom:.2em;}
+ h2{font-size:1.15rem;margin:0 0 1rem;font-family:var(--ui-mono);}
h3{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:1.1em 0 .4em;}
p{color:var(--muted);margin:.4em 0;}
- code{font-family:'JetBrains Mono',monospace;background:var(--surface-2);padding:.15em .4em;border-radius:4px;font-size:.85em;color:var(--text);word-break:break-word;overflow-wrap:anywhere;}
- pre{font-family:'JetBrains Mono',monospace;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;overflow-x:auto;font-size:.82rem;margin:.5em 0;}
+ code{font-family:var(--ui-mono);background:var(--surface-2);padding:.15em .4em;border-radius:4px;font-size:.85em;color:var(--text);word-break:break-word;overflow-wrap:anywhere;}
+ pre{font-family:var(--ui-mono);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px;overflow-x:auto;font-size:.82rem;margin:.5em 0;}
a{color:var(--accent);}
.lede{max-width:70ch;}
- .toc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.3rem;margin:1.6rem 0 2.4rem;}
+ .toc{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1.1rem 1.3rem;margin:1.6rem 0 2.4rem;}
.toc h3{margin-top:0;}
.toc ol{margin:0;padding-left:1.2em;color:var(--muted);columns:2;font-size:.92rem;}
.toc a{color:var(--text);text-decoration:none;}
.toc a:hover{color:var(--accent);}
- .endpoint{border:1px solid var(--border);border-radius:10px;padding:1.4rem 1.5rem;margin-bottom:1.6rem;background:var(--surface);scroll-margin-top:20px;}
+ .endpoint{border:1px solid var(--border);border-radius:6px;padding:1.4rem 1.5rem;margin-bottom:1.6rem;background:var(--surface);scroll-margin-top:20px;}
.route-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem;}
- .method{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.78rem;padding:.2rem .5rem;border-radius:5px;letter-spacing:.03em;}
- .method.get{background:rgba(74,222,128,.12);color:var(--get);}
- .method.post{background:rgba(129,140,248,.15);color:var(--post);}
- .route-path{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--text);}
- .domain-tag{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.15rem .4rem;}
+ .method{font-family:var(--ui-mono);font-weight:700;font-size:.78rem;padding:.2rem .5rem;border-radius:5px;letter-spacing:.03em;}
+ .method.get{background:color-mix(in srgb,var(--ui-success) 14%,transparent);color:var(--get);}
+ .method.post{background:var(--ui-accent-bg);color:var(--post);}
+ .route-path{font-family:var(--ui-mono);font-size:1rem;color:var(--text);}
+ .domain-tag{font-family:var(--ui-mono);font-size:.72rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.15rem .4rem;}
.endpoint > p:first-of-type{margin-top:0;}
table{width:100%;border-collapse:collapse;margin:.5em 0;font-size:.88rem;}
th,td{text-align:left;padding:.4em .6em;border-bottom:1px solid var(--border);vertical-align:top;}
@@ -48,9 +46,9 @@
td.desc{color:var(--muted);}
.err-list{list-style:none;padding:0;margin:.4em 0;}
.err-list li{padding:.3em 0;font-size:.88rem;overflow:hidden;}
- .err-code{font-family:'JetBrains Mono',monospace;color:var(--err);font-weight:600;float:left;width:3.2em;margin-right:.6em;}
+ .err-code{font-family:var(--ui-mono);color:var(--err);font-weight:600;float:left;width:3.2em;margin-right:.6em;}
section{margin-top:2.6rem;}
- section > h2 { font-family:'Zilla Slab',Georgia,serif; font-size:1.4rem; font-weight:600; color:var(--text); }
+ section > h2 { font-family:var(--ui-font); font-size:1.4rem; font-weight:600; color:var(--text); }
.footnote{font-size:.82rem;color:var(--muted);margin-top:3rem;border-top:1px solid var(--border);padding-top:1.2rem;}
footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted);}
</style>
diff --git a/app/templates/gh_sync_docs.html b/app/templates/gh_sync_docs.html
@@ -10,21 +10,19 @@
<link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
-<meta name="theme-color" content="#09090b">
-<meta name="color-scheme" content="dark">
+<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
+<meta name="color-scheme" content="light dark">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
- --bg: #09090b;
- --surface: #121214;
- --surface-2: #1e1e22;
- --border: #27272a;
- --text: #f4f4f5;
- --muted: #a1a1aa;
- --accent: #818cf8;
+ --bg: var(--ui-bg);
+ --surface: var(--ui-surface);
+ --surface-2: var(--ui-surface);
+ --border: var(--ui-border);
+ --text: var(--ui-text);
+ --muted: var(--ui-muted);
+ --accent: var(--ui-accent);
}
*,
@@ -43,7 +41,7 @@
body {
background: var(--bg);
color: var(--text);
- font-family: 'Work Sans', system-ui, sans-serif;
+ font-family: var(--ui-font);
margin: 0;
line-height: 1.6;
}
@@ -55,7 +53,7 @@
}
h1 {
- font-family: 'Zilla Slab', Georgia, 'Times New Roman', serif;
+ font-family: var(--ui-font);
font-weight: 600;
font-size: 1.9rem;
margin-bottom: .2em;
@@ -73,7 +71,7 @@
}
code, pre {
- font-family: 'JetBrains Mono', monospace;
+ font-family: var(--ui-mono);
}
code {
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -15,7 +15,7 @@
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
- <meta name="color-scheme" content="dark">
+ <meta name="color-scheme" content="light dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="amit/cdn">
diff --git a/app/templates/url_shortener.html b/app/templates/url_shortener.html
@@ -11,32 +11,32 @@
<link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
<link rel="manifest" href="/static/manifest.json">
- <meta name="theme-color" content="#09090b">
- <meta name="color-scheme" content="dark">
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
+ <meta name="color-scheme" content="light dark">
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/dist/turbo.es2017-esm.js"></script>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
- --bg: #09090b;
- --surface: #121214;
- --surface-2: #1e1e22;
- --surface-3: #27272a;
- --text-main: #f4f4f5;
- --text-dim: #b8b8c0;
- --accent-primary: #818cf8;
- --accent-primary-hover: #a5b4fc;
- --success: #10b981;
- --danger: #ef4444;
- --border: rgba(255, 255, 255, 0.08);
- --border-hover: rgba(255, 255, 255, 0.15);
- --font-heading: 'Zilla Slab', Georgia, 'Times New Roman', serif;
- --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
- --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
- --radius-md: 8px;
- --radius-lg: 12px;
- --radius-xl: 16px;
+ /* Legacy names mapped onto the shared --ui- tokens (_styles.html) */
+ --bg: var(--ui-bg);
+ --surface: var(--ui-surface);
+ --surface-2: var(--ui-surface);
+ --surface-3: var(--ui-border);
+ --text-main: var(--ui-text);
+ --text-dim: var(--ui-muted);
+ --accent-primary: var(--ui-accent);
+ --accent-primary-hover: var(--ui-accent);
+ --accent-secondary: var(--ui-accent);
+ --success: var(--ui-success);
+ --danger: var(--ui-danger);
+ --border: var(--ui-border);
+ --border-hover: var(--ui-muted);
+ --font-heading: var(--ui-font);
+ --font-body: var(--ui-font);
+ --font-mono: var(--ui-mono);
+ --radius-md: 6px;
+ --radius-lg: 6px;
+ --radius-xl: 6px;
}
* { -webkit-tap-highlight-color: transparent; }
@@ -104,7 +104,7 @@
outline: none;
background: var(--surface-2);
border-color: var(--accent-primary);
- box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+ box-shadow:none;
}
.url-input::placeholder { color: var(--text-dim); }
.input-clear-btn {
@@ -197,8 +197,8 @@
color: var(--danger);
margin-top: 1rem;
padding: 1rem 1.25rem;
- border: 1px solid rgba(239, 68, 68, 0.5);
- background: rgba(239, 68, 68, 0.1);
+ border: 1px solid var(--ui-danger);
+ background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
border-radius: var(--radius-md);
}
.info-text {
