socle

marquee: the site's own name over the door

commit 30aaaf206d0b3eeee04fd2fa57260f7e24f2deba · parent 42df532d73 · browse this tree
Ximianth, 2026-10-30 14:46:03 UTC

The entrance opens with the sitename, accent-colored, seated on the grandest
pedestal -- the gallery itself is the first exhibit, and the pedestal motif
gets one more recurrence.  'repositories' stays the h1, plain and true.
The grand plinth is drawn natively at its size (not scaled) so stroke weight
stays in step with its siblings; the name's baseline rests on the cap, with
the descender just kissing the stroke (checked by eye).

diff --git a/chrome.go b/chrome.go
index 8d82588..b3a80ea 100644
--- a/chrome.go
+++ b/chrome.go
@@ -210,6 +210,24 @@ nav.arc.corner a {
 	font-size: .72rem;
 }
 
+/* The marquee: the site's own name over the door, standing on the grandest pedestal --
+   the gallery itself is the first exhibit.  The name sits on the cap. */
+article .marquee { text-align: center; margin: .6rem 0 2.4rem; }
+article .marquee .sitename {
+	font-size: 2.7rem;
+	font-weight: 700;
+	color: var(--accent);
+	line-height: 1.05;
+	margin: 0 0 -19px;
+	position: relative;
+}
+article .marquee .pedestal {
+	height: 132px;
+	background-position: top center;
+	background-size: 220px 132px;
+	background-repeat: no-repeat;
+}
+
 /* The entrance: repos as exhibit stands, surveyed rather than parsed.
    Each stand is name / pedestal / placard / one-line "now showing" caption. */
 article ul.entrance {
@@ -449,6 +467,7 @@ func sketchCSS(scheme string) string {
 .flank { background-image: %s; }
 footer.ground .floor { background-image: %s; }
 .stand .pedestal { background-image: %s; }
+.marquee .pedestal { background-image: %s; }
 /* Hand-ruled lines replace solid borders on the nav and headings. */
 nav.crumbs, article h1, article h2 {
 	border-bottom: none;
@@ -503,7 +522,7 @@ nav.arc a.va:active { background-image: %s; }
 nav.arc a.vb:active { background-image: %s; }
 nav.arc a.vc:active { background-image: %s; }
 `,
-		u("flank"), u("ground"), u("plinth"), u("rule"), u("rule"), u("rulesoft"), u("tab"), u("chip"), u("frame"), u("frame"),
+		u("flank"), u("ground"), u("plinth"), u("plinthgrand"), u("rule"), u("rule"), u("rulesoft"), u("tab"), u("chip"), u("frame"), u("frame"),
 		u("circle-a"), u("circle-b"), u("circle-c"),
 		u("circle-b"), u("circle-c"), u("circle-a"),
 		u("circle-c"), u("circle-a"), u("circle-b"))
diff --git a/pages.go b/pages.go
index 580b4b8..129e5e5 100644
--- a/pages.go
+++ b/pages.go
@@ -88,12 +88,17 @@ func repoCrumbs(site, name string, more ...crumbLink) []display.Crumb {
 
 // ---- index ----
 
-// The entrance: every repo is an exhibit stand -- the name atop a pedestal
-// (the ground glyph's family), the description as its placard, and the newest
-// commit subject as a one-line "now showing" caption in soft ink.
-var indexTmpl = template.Must(template.New("index").Parse(`<h1>repositories</h1>
+// The entrance: the marquee first -- the site's own name on the grandest pedestal,
+// the gallery itself as the first exhibit -- then every repo as an exhibit stand:
+// the name atop a pedestal (the ground glyph's family), the description as its
+// placard, and the newest commit subject as a one-line "now showing" caption in soft ink.
+var indexTmpl = template.Must(template.New("index").Parse(`<header class="marquee">
+<p class="sitename">{{.SiteName}}</p>
+<div class="pedestal"></div>
+</header>
+<h1>repositories</h1>
 <ul class="entrance">
-{{range .}}<li class="stand">
+{{range .Rows}}<li class="stand">
 <p class="name"><a href="/{{.Name}}/">{{.Name}}</a></p>
 <div class="pedestal"></div>
 {{if or .Description .LangColor}}<p class="placard">{{if .LangColor}}<span class="swatch" style="background:{{.LangColor}}" title="{{.Lang}}"></span>{{end}}{{.Description}}</p>
@@ -135,7 +140,10 @@ func (s *server) serveIndex(w http.ResponseWriter, r *http.Request, snap *snapsh
 	if snap.baseURL != "" {
 		pd.Canon = snap.baseURL + "/"
 	}
-	s.render(w, snap, indexTmpl, rows, pd)
+	s.render(w, snap, indexTmpl, struct {
+		SiteName string
+		Rows     []indexRow
+	}{snap.face.siteName, rows}, pd)
 }
 
 // ---- repo home ----
diff --git a/sketch.go b/sketch.go
index adf619e..7d1582a 100644
--- a/sketch.go
+++ b/sketch.go
@@ -142,6 +142,7 @@ func sketchAssets(seed string) map[string][]byte {
 		m["flank-"+p.scheme+".svg"] = flankSVG(seed, p)
 		m["ground-"+p.scheme+".svg"] = groundSVG(seed, p)
 		m["plinth-"+p.scheme+".svg"] = plinthSVG(seed, p)
+		m["plinthgrand-"+p.scheme+".svg"] = plinthGrandSVG(seed, p)
 		m["chip-"+p.scheme+".svg"] = chipSVG(seed, p)
 		m["tab-"+p.scheme+".svg"] = tabSVG(seed, p)
 		for _, v := range []string{"a", "b", "c"} {
@@ -372,6 +373,27 @@ func faviconSVG(seed string) []byte {
 	return []byte(sb.String())
 }
 
+// plinthGrandSVG is the marquee's pedestal: the same cap/die/plinth family at the
+// entrance-masthead size, drawn natively rather than scaled so the stroke weight
+// stays in step with its siblings.  The site's own name stands on this one.
+func plinthGrandSVG(seed string, p sketchPalette) []byte {
+	rng := newSketchRand(seed + "/plinthgrand/" + p.scheme)
+	var sb strings.Builder
+	svgOpen(&sb, 220, 132)
+	boxes := func(d *strings.Builder, amp, over float64) {
+		roughBox(d, rng, 31, 16, 157, 22, amp, over)
+		roughBox(d, rng, 53, 38, 113, 63, amp, over)
+		roughBox(d, rng, 16, 101, 188, 25, amp, over)
+	}
+	var d1, d2 strings.Builder
+	boxes(&d1, 1.2, 3.0)
+	boxes(&d2, 1.8, 3.6)
+	svgPath(&sb, d1.String(), p.ink, 1.8, 0.75)
+	svgPath(&sb, d2.String(), p.ink, 1.3, 0.28)
+	sb.WriteString("</svg>\n")
+	return []byte(sb.String())
+}
+
 // chipSVG is the frame's small sibling: a border-image tile for inline chips
 // (the ledger's sha buttons).  A 48x48 tile sliced at 8 with lines at inset 4,
 // so a border a hair under the slice renders the stroke near 1:1; displacement
diff --git a/testdata/pages.md b/testdata/pages.md
index 90fea16..cb75185 100644
--- a/testdata/pages.md
+++ b/testdata/pages.md
@@ -43,7 +43,11 @@ Content-Type: text/html; charset=utf-8
 <nav class="crumbs">
 test
 </nav>
-<main><article><h1>repositories</h1>
+<main><article><header class="marquee">
+<p class="sitename">test</p>
+<div class="pedestal"></div>
+</header>
+<h1>repositories</h1>
 <ul class="entrance">
 <li class="stand">
 <p class="name"><a href="/fixturama/">fixturama</a></p>
diff --git a/testdata/sketch.md b/testdata/sketch.md
index 129b07b..fd1eca3 100644
--- a/testdata/sketch.md
+++ b/testdata/sketch.md
@@ -237,3 +237,23 @@ Regenerate with `go test -run TestSketchSnapshots -testmark.regen` and review th
 </svg>
 ```
 
+### plinthgrand-light.svg
+
+[testmark]:# (plinthgrand-light.svg)
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="132" viewBox="0 0 220 132">
+<path d="M29.5 15.7C82.6 16.6 135.8 15.2 189.0 15.8M188.4 14.8C187.8 22.4 188.2 30.0 187.5 37.6M189.4 37.4C136.6 38.4 83.8 39.1 30.9 38.4M30.4 37.8C29.5 29.9 29.6 22.1 30.5 14.2M52.6 37.6C90.7 37.5 128.9 38.3 167.0 38.3M166.2 36.4C165.7 58.1 166.2 79.8 166.3 101.5M168.1 101.3C129.5 102.3 91.0 102.6 52.4 101.4M53.1 103.5C53.7 81.1 52.5 58.7 52.8 36.4M13.4 101.4C77.6 100.1 141.8 101.9 206.0 101.0M203.9 98.3C203.5 107.9 203.6 117.5 204.5 127.0M206.6 126.0C143.1 126.1 79.5 124.7 16.0 125.8M16.1 128.7C14.8 119.4 15.2 110.0 15.6 100.7" fill="none" stroke="#24292f" stroke-width="1.8" stroke-opacity="0.75" stroke-linecap="round"/>
+<path d="M30.3 15.7C83.6 15.7 136.8 16.8 190.1 16.0M188.7 13.3C189.9 21.9 188.5 30.4 188.4 39.0M188.6 37.3C134.8 38.4 81.0 39.0 27.3 37.4M30.3 40.8C28.6 31.5 31.1 22.2 30.4 12.9M52.1 37.4C90.4 39.0 128.7 39.6 167.1 38.0M165.9 38.8C164.5 60.3 166.8 81.7 166.6 103.2M167.4 100.5C128.9 102.3 90.4 100.9 51.9 101.2M53.6 103.7C52.6 81.7 53.5 59.6 53.7 37.6M14.6 101.8C78.7 99.5 142.9 101.8 207.1 100.2M203.8 97.5C205.1 108.1 205.2 118.6 203.4 129.0M204.8 126.6C140.6 128.2 76.4 125.6 12.2 126.4M16.4 128.1C14.8 119.1 16.8 110.2 16.1 101.3" fill="none" stroke="#24292f" stroke-width="1.3" stroke-opacity="0.28" stroke-linecap="round"/>
+</svg>
+```
+
+### plinthgrand-dark.svg
+
+[testmark]:# (plinthgrand-dark.svg)
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="132" viewBox="0 0 220 132">
+<path d="M27.7 15.7C81.4 16.5 135.0 15.5 188.7 15.7M188.4 15.7C188.5 23.8 188.9 31.9 187.5 39.9M188.6 38.4C135.3 37.9 81.9 37.9 28.5 38.2M31.1 41.2C31.3 32.3 30.9 23.5 30.9 14.7M51.2 37.7C89.3 37.6 127.5 38.7 165.7 38.2M165.8 37.3C165.3 59.0 166.3 80.6 166.4 102.3M165.9 100.4C127.9 100.6 90.0 100.8 52.1 101.3M53.2 103.7C52.4 81.0 53.7 58.3 53.3 35.6M16.0 100.9C79.0 101.5 142.1 101.9 205.1 101.5M204.4 99.9C203.1 109.4 204.1 118.8 203.5 128.3M205.6 126.5C142.3 125.1 78.9 126.9 15.6 125.8M15.5 127.4C15.4 117.9 15.8 108.3 16.1 98.8" fill="none" stroke="#e6edf3" stroke-width="1.8" stroke-opacity="0.75" stroke-linecap="round"/>
+<path d="M28.8 15.4C82.4 14.8 135.9 14.3 189.4 15.6M188.5 12.3C188.8 21.7 187.9 31.0 187.6 40.3M187.6 37.3C134.1 37.2 80.6 39.9 27.1 38.7M31.6 38.6C31.2 30.6 30.5 22.6 31.5 14.6M50.9 37.1C89.4 36.6 128.0 35.6 166.6 37.3M165.9 36.3C165.2 58.4 164.8 80.5 165.9 102.6M168.3 100.2C128.9 99.7 89.5 100.7 50.2 101.6M53.8 101.0C52.5 79.5 54.3 58.0 53.4 36.5M14.2 101.2C78.6 100.4 143.1 103.3 207.5 101.8M204.3 97.9C205.4 108.5 202.9 119.1 203.7 129.8M207.5 125.8C143.3 126.6 79.1 124.7 14.9 125.9M15.4 126.1C16.9 117.6 14.4 109.1 16.1 100.6" fill="none" stroke="#e6edf3" stroke-width="1.3" stroke-opacity="0.28" stroke-linecap="round"/>
+</svg>
+```
+