Add the Branch Blocks mark as gitfed's logo/favicon
Three square-cornered rectangles forming a git fork — inline in the header via currentColor (follows the link color) and as a light/dark-aware SVG favicon (two <link rel="icon"> variants switched by prefers-color-scheme).
1 files changed
+13 −4
M
cmd/gitfed-web/render.go
+13 −4
cmd/gitfed-web/render.go
@@ -24,16 +24,25 @@ func renderMarkdown(src string) (template.HTML, error) {
return template.HTML(buf.String()), nil
}
+// brandMark is the "Branch Blocks" logo — three square-cornered rectangles
+// forming a git fork, no gradient or curve. Used inline in the header (via
+// currentColor, so it follows the link color) and, percent-encoded, as the
+// favicon below.
+const brandMark = `<svg class="brand-mark" width="20" height="20" viewBox="0 0 96 96" aria-hidden="true"><rect x="41" y="46" width="14" height="36" fill="currentColor"/><rect x="14" y="14" width="14" height="34" fill="currentColor" transform="rotate(35 21 31)"/><rect x="68" y="14" width="14" height="34" fill="currentColor" transform="rotate(-35 75 31)"/></svg>`
+
const shellSrc = `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{.Title}} — gitfed</title>
+<link rel="icon" media="(prefers-color-scheme: light)" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect x='41' y='46' width='14' height='36' fill='%2317181a'/%3E%3Crect x='14' y='14' width='14' height='34' fill='%2317181a' transform='rotate(35 21 31)'/%3E%3Crect x='68' y='14' width='14' height='34' fill='%2317181a' transform='rotate(-35 75 31)'/%3E%3C/svg%3E">
+<link rel="icon" media="(prefers-color-scheme: dark)" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect x='41' y='46' width='14' height='36' fill='%23f0efec'/%3E%3Crect x='14' y='14' width='14' height='34' fill='%23f0efec' transform='rotate(35 21 31)'/%3E%3Crect x='68' y='14' width='14' height='34' fill='%23f0efec' transform='rotate(-35 75 31)'/%3E%3C/svg%3E">
<style>
body { font-family: -apple-system, system-ui, sans-serif; margin: 0; background: #0f1115; color: #e6e6e6; }
header { background: #171a21; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid #2a2f3a; }
header h1 { font-size: 1rem; margin: 0; }
- header h1 a { color: #8ab4f8; text-decoration: none; }
+ header h1 a { color: #8ab4f8; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
+ .brand-mark { flex-shrink: 0; }
nav { display: flex; gap: 1rem; flex: 1; }
nav a { color: #cfd3dc; text-decoration: none; font-size: 0.9rem; }
nav a.active { color: #8ab4f8; font-weight: bold; }
@@ -89,7 +98,7 @@ const shellSrc = `<!doctype html>
</head>
<body>
<header>
- <h1><a href="/">gitfed — {{.Domain}}</a></h1>
+ <h1><a href="/">{{.BrandMark}} gitfed — {{.Domain}}</a></h1>
<nav>
<a href="/"{{if eq .Active "home"}} class="active"{{end}}>Explore</a>
{{if .LoggedIn}}
@@ -119,8 +128,8 @@ func (s *server) render(w http.ResponseWriter, r *http.Request, title, active st
_ = shellTpl.Execute(w, struct {
Title, Domain, Active, Username string
LoggedIn, IsAdmin bool
- Body template.HTML
- }{title, s.domain, active, sess.Username, loggedIn, sess.IsAdmin, body})
+ Body, BrandMark template.HTML
+ }{title, s.domain, active, sess.Username, loggedIn, sess.IsAdmin, body, template.HTML(brandMark)})
}
// flash renders the ?msg=&err= query params (set by handlers that redirect