Drop the logo and title from the top bar
The bar now holds only Lists, Settings and Sign out, right-aligned, and is shown only when signed in, so visitors never see it on any page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
0d4bbe8c8a
commit
568162202b
3 files changed
+5
-19
No files matched your search
@@ -50,12 +50,7 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
|
|||||||
-webkit-backdrop-filter: saturate(160%) blur(14px);
|
-webkit-backdrop-filter: saturate(160%) blur(14px);
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
||||||
}
|
}
|
||||||
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
|
.topbar-inner { display: flex; align-items: center; justify-content: flex-end; height: 60px; gap: 16px; }
|
||||||
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; min-width: 0; }
|
|
||||||
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
||||||
.brand-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
|
|
||||||
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
|
|
||||||
.brand-mark .icon { width: 18px; height: 18px; }
|
|
||||||
.topnav { display: flex; align-items: center; gap: 4px; }
|
.topnav { display: flex; align-items: center; gap: 4px; }
|
||||||
.topnav a, .topnav-btn {
|
.topnav a, .topnav-btn {
|
||||||
display: inline-flex; align-items: center; gap: 7px;
|
display: inline-flex; align-items: center; gap: 7px;
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ function profileSection() {
|
|||||||
|
|
||||||
const form = h("form", { class: "stack" },
|
const form = h("form", { class: "stack" },
|
||||||
h("div", { class: "avatar-edit" }, avatarBox, h("div", { class: "row-btns", style: { display: "flex", gap: "6px", flexWrap: "wrap" } }, uploadBtn, removeBtn, file)),
|
h("div", { class: "avatar-edit" }, avatarBox, h("div", { class: "row-btns", style: { display: "flex", gap: "6px", flexWrap: "wrap" } }, uploadBtn, removeBtn, file)),
|
||||||
h("div", { class: "row" }, field("Your name", ownerName, "Shown as the page heading."), field("Site title", siteTitle, "Shown in the header and browser tab. Leave blank to use “Your name's Canon”.")),
|
h("div", { class: "row" }, field("Your name", ownerName, "Shown as the page heading."), field("Site title", siteTitle, "Shown in the browser tab. Leave blank to use “Your name's Canon”.")),
|
||||||
field("Tagline", tagline),
|
field("Tagline", tagline),
|
||||||
field("Entries per list on the home page", preview, "Visitors see the full list on each list's page. 0 shows only the heading."),
|
field("Entries per list on the home page", preview, "Visitors see the full list on each list's page. 0 shows only the heading."),
|
||||||
h("label", { class: "check" }, notes, "Show why each entry is ranked where it is"),
|
h("label", { class: "check" }, notes, "Show why each entry is ranked where it is"),
|
||||||
@@ -95,11 +95,7 @@ function profileSection() {
|
|||||||
ownerName: ownerName.value, siteTitle: siteTitle.value, tagline: tagline.value,
|
ownerName: ownerName.value, siteTitle: siteTitle.value, tagline: tagline.value,
|
||||||
previewCount: Number(preview.value), showNotes: notes.checked, showPreviews: previews.checked,
|
previewCount: Number(preview.value), showNotes: notes.checked, showPreviews: previews.checked,
|
||||||
}, save, "Profile saved");
|
}, save, "Profile saved");
|
||||||
if (ok) {
|
if (ok) renderAvatar();
|
||||||
renderAvatar();
|
|
||||||
const brand = document.querySelector(".brand-name");
|
|
||||||
if (brand) brand.textContent = settings.siteTitleShown;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
renderAvatar();
|
renderAvatar();
|
||||||
return section("profile", "Profile", "Who's behind the lists.", form);
|
return section("profile", "Profile", "Who's behind the lists.", form);
|
||||||
|
|||||||
@@ -15,7 +15,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="{{block "bodyclass" .}}{{end}}">
|
<body class="{{block "bodyclass" .}}{{end}}">
|
||||||
<a class="skip-link" href="#main">Skip to content</a>
|
<a class="skip-link" href="#main">Skip to content</a>
|
||||||
{{- if ne .Path "/"}}
|
{{- /* The bar only holds the owner's links, so visitors never see it. */}}
|
||||||
|
{{- if and .LoggedIn (ne .Path "/")}}
|
||||||
{{template "topbar" .}}
|
{{template "topbar" .}}
|
||||||
{{- else if .LoggedIn}}
|
{{- else if .LoggedIn}}
|
||||||
{{- /* The home page is the public face, so even signed in the bar stays
|
{{- /* The home page is the public face, so even signed in the bar stays
|
||||||
@@ -42,11 +43,6 @@
|
|||||||
{{define "topbar"}}
|
{{define "topbar"}}
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="topbar-inner container">
|
<div class="topbar-inner container">
|
||||||
<a class="brand" href="/">
|
|
||||||
{{- if .Site.AvatarURL}}<img class="brand-avatar" src="{{.Site.AvatarURL}}" alt="">{{else}}<span class="brand-mark">{{icon "deck"}}</span>{{end -}}
|
|
||||||
<span class="brand-name">{{.Site.Title}}</span>
|
|
||||||
</a>
|
|
||||||
{{- if .LoggedIn}}
|
|
||||||
<nav class="topnav" aria-label="Admin">
|
<nav class="topnav" aria-label="Admin">
|
||||||
<a href="/admin"{{if or (eq .Path "/admin") (hasPrefix .Path "/admin/lists")}} aria-current="page"{{end}}>{{icon "list"}}<span>Lists</span></a>
|
<a href="/admin"{{if or (eq .Path "/admin") (hasPrefix .Path "/admin/lists")}} aria-current="page"{{end}}>{{icon "list"}}<span>Lists</span></a>
|
||||||
<a href="/admin/settings"{{if eq .Path "/admin/settings"}} aria-current="page"{{end}}>{{icon "settings"}}<span>Settings</span></a>
|
<a href="/admin/settings"{{if eq .Path "/admin/settings"}} aria-current="page"{{end}}>{{icon "settings"}}<span>Settings</span></a>
|
||||||
@@ -54,7 +50,6 @@
|
|||||||
<button type="submit" class="topnav-btn" title="Sign out ({{.Username}})">{{icon "logout"}}<span class="sr-only">Sign out</span></button>
|
<button type="submit" class="topnav-btn" title="Sign out ({{.Username}})">{{icon "logout"}}<span class="sr-only">Sign out</span></button>
|
||||||
</form>
|
</form>
|
||||||
</nav>
|
</nav>
|
||||||
{{- end}}
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
{{end}}
|
{{end}}
|
||||||
Reference in new issue
Block a user