Polish the repo home page UI
Assisted-by: Claude Sonnet 4.6 via Claude Code
diff --git a/quire-server/src/quire/web/handlers.rs b/quire-server/src/quire/web/handlers.rs
index 1d946b7..7c0672d 100644
--- a/quire-server/src/quire/web/handlers.rs
+++ b/quire-server/src/quire/web/handlers.rs
@@ -61,7 +61,7 @@ pub async fn repo_home(State(quire): State<Quire>, AxumPath(repo): AxumPath<Stri
tags,
recent_runs,
recent_changes,
- active_section: "readme".to_string(),
+ active_section: "overview".to_string(),
};
render(&tmpl)
}
@@ -163,7 +163,7 @@ fn read_tags(repo: &Repo) -> Vec<TagRow> {
&[
"for-each-ref",
"--format=%(refname:short)|%(committerdate:relative)",
- "--sort=-version:refname",
+ "--sort=-creatordate",
"refs/tags/",
],
)
diff --git a/quire-server/static/style.css b/quire-server/static/style.css
index 43ed4d7..8945dbc 100644
--- a/quire-server/static/style.css
+++ b/quire-server/static/style.css
@@ -443,7 +443,7 @@ html.dark {
.readme-content h2 {
font-family: var(--font-humanist);
- font-size: 19px;
+ font-size: 22px;
font-weight: 600;
margin: 28px 0 10px;
line-height: 1.3;
@@ -451,12 +451,15 @@ html.dark {
.readme-content h3 {
font-family: var(--font-humanist);
- font-size: 16px;
+ font-size: 18px;
font-weight: 600;
margin: 20px 0 8px;
}
-.readme-content p { margin: 0 0 16px; }
+.readme-content p {
+ margin: 0 0 16px;
+ font-size: var(--step-1);
+}
.readme-content p:last-child { margin-bottom: 0; }
@@ -466,7 +469,7 @@ html.dark {
padding-left: 22px;
}
-.readme-content li { margin: 5px 0; }
+.readme-content li { margin: 5px 0; font-size: var(--step-1); }
.readme-content code {
font-family: var(--font-mono);
@@ -617,25 +620,23 @@ html.dark {
.ci-mini-list {
font-family: var(--font-mono);
font-size: 12.5px;
+ display: grid;
+ grid-template-columns: 10px 64px 1fr auto auto;
+ column-gap: 8px;
+ row-gap: 0;
+ align-items: baseline;
line-height: 1.85;
}
-.ci-mini-row {
- display: flex;
- align-items: baseline;
- gap: 8px;
-}
+.ci-mini-row { display: contents; }
.ci-mini-link {
color: var(--ink);
text-decoration: none;
- width: 64px;
- flex-shrink: 0;
}
.ci-mini-branch {
color: var(--accent);
- flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/quire-server/templates/_footer.html b/quire-server/templates/_footer.html
index 6c0622a..d05e487 100644
--- a/quire-server/templates/_footer.html
+++ b/quire-server/templates/_footer.html
@@ -1,9 +1,6 @@
<footer class="page-footer">
<span>quire v{{ self.version() }}</span>
- <span>
- <button class="dark-toggle" @click="toggleDark()" :aria-label="darkMode ? 'switch to light' : 'switch to dark'" title="toggle dark mode">
- <span x-show="!darkMode">◐</span><span x-show="darkMode">◑</span>
- </button>
- <span class="footer-hint">press <kbd>?</kbd> for keyboard shortcuts</span>
- </span>
+ <button class="dark-toggle" @click="toggleDark()" :aria-label="darkMode ? 'switch to light' : 'switch to dark'" title="toggle dark mode">
+ <span x-show="!darkMode">◐</span><span x-show="darkMode">◑</span>
+ </button>
</footer>
diff --git a/quire-server/templates/_repo_section_nav.html b/quire-server/templates/_repo_section_nav.html
index ba760aa..d473dbe 100644
--- a/quire-server/templates/_repo_section_nav.html
+++ b/quire-server/templates/_repo_section_nav.html
@@ -1,5 +1,5 @@
<nav class="repo-section-nav">
- <a class="section-link {% if active_section == "readme" %}section-link--active{% endif %}" href="/{{ repo }}">readme</a>
+ <a class="section-link {% if active_section == "overview" %}section-link--active{% endif %}" href="/{{ repo }}">overview</a>
<a class="section-link {% if active_section == "tree" %}section-link--active{% endif %}" href="/{{ repo }}/tree">tree</a>
<a class="section-link {% if active_section == "log" %}section-link--active{% endif %}" href="/{{ repo }}/log">log</a>
<a class="section-link {% if active_section == "bookmarks" %}section-link--active{% endif %}" href="/{{ repo }}/bookmarks">bookmarks{% if !bookmarks.is_empty() %} <span class="section-count">{{ bookmarks.len() }}</span>{% endif %}</a>
diff --git a/quire-server/templates/repo_home.html b/quire-server/templates/repo_home.html
index 70ae532..64bddc3 100644
--- a/quire-server/templates/repo_home.html
+++ b/quire-server/templates/repo_home.html
@@ -25,13 +25,9 @@
{# ── Repo identity band ─────────────────────────────────────── #}
<header class="repo-header">
- <div class="repo-title-row">
- <h1 class="repo-name">{{ repo }}</h1>
- </div>
<div class="repo-meta-row">
{% if let Some(h) = head %}
<span class="repo-meta-item">
- <span class="repo-meta-label">on</span>
<span class="bookmark-glyph">※</span>
<span class="bookmark-name">{{ h.bookmark }}</span>
<span class="repo-meta-sep">→</span>
@@ -74,10 +70,7 @@
<div class="side-block">
<div class="side-block-title">Clone</div>
- <div class="clone-label">https</div>
<div class="clone-url">https://quire.local/{{ repo }}.git</div>
- <div class="clone-label">ssh</div>
- <div class="clone-url">git@quire.local:{{ repo }}.git</div>
</div>
{% if !bookmarks.is_empty() %}
@@ -106,7 +99,6 @@
<div class="bookmark-list">
{% for t in self.tags_preview() %}
<div class="bookmark-row">
- <span class="bookmark-kind">tag</span>
<a class="bookmark-link" href="/{{ repo }}/log">{{ t.name }}</a>
<span class="bookmark-age">{{ t.age }}</span>
</div>
@@ -120,7 +112,7 @@
{% if !recent_runs.is_empty() %}
<div class="side-block">
- <div class="side-block-title">CI · last {{ recent_runs.len() }}</div>
+ <div class="side-block-title">CI</div>
<div class="ci-mini-list">
{% for run in recent_runs %}
<div class="ci-mini-row">