Add CalVer versioning and rebuild the song page's fact line
Versions are YYYY.MM.DD-N, injected with -ldflags from a git tag, so no file in the repo carries the number and a local build honestly says dev. The version shows in the footer, the startup log and /healthz. The song page's metadata was five different kinds of fact — artist, genre, duration, provenance and a badge about the viewer — in one flat run with two competing pills. Now the artist has its own line in the display face, and the facts sit in four labelled cells like the spine of a cassette insert. The submitter links to their profile, "oma kappale" became "lähetti: sinä", and the clock time is gone: nobody needs the minute a song was published.
This commit is contained in:
+45
-2
@@ -282,8 +282,48 @@ footer.sitefooter {
|
||||
|
||||
/* --- song page and reviews --- */
|
||||
|
||||
.songmeta { color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-2);
|
||||
align-items: center; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
|
||||
/* The artist is the second most important thing on the page, so it gets the display face and a
|
||||
line of its own rather than being one bold word inside a run of metadata. */
|
||||
.by {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
/* Four kinds of fact, four labelled cells — the spine of a cassette insert. */
|
||||
.spec {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 var(--space-5);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spec > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 6rem;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-right: 1px solid var(--hairline);
|
||||
}
|
||||
|
||||
.spec > div:last-child { border-right: 0; }
|
||||
|
||||
.spec dt {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.spec dd { margin: 0; font-size: 0.95rem; }
|
||||
|
||||
.intro { white-space: pre-wrap; background: var(--surface); padding: var(--space-4);
|
||||
border-left: 3px solid var(--hairline); border-radius: 0 var(--radius) var(--radius) 0; }
|
||||
@@ -937,3 +977,6 @@ img.avatar { object-fit: cover; }
|
||||
|
||||
.copyright { color: var(--muted); }
|
||||
.copyright::before { content: "·"; margin: 0 var(--space-2); }
|
||||
|
||||
.version { color: var(--muted); font-family: var(--font-display); }
|
||||
.version::before { content: "·"; margin: 0 var(--space-2); }
|
||||
|
||||
Reference in New Issue
Block a user