diff --git a/cmd/foodster/static/app.css b/cmd/foodster/static/app.css
index fcd8c10..2c5fd57 100644
--- a/cmd/foodster/static/app.css
+++ b/cmd/foodster/static/app.css
@@ -123,21 +123,17 @@ html[data-theme="light"] .themetoggle .i-moon { display: none; }
}
.tabbar a[aria-current] { color: var(--accent); }
-.dot {
- width: 9px;
- height: 9px;
- border-radius: 2px;
- flex: none;
- display: inline-block;
-}
-.d-liha { background: var(--liha); }
-.d-kana { background: var(--kana); }
-.d-kala { background: var(--kala); }
-.d-kasvis { background: var(--kasvis); }
-.d-sek {
- background: conic-gradient(var(--liha) 0 25%, var(--kana) 25% 50%,
- var(--kala) 50% 75%, var(--kasvis) 75% 100%);
-}
+/* Category marks carry colour and shape together, so they are readable
+ without having learned which hue means what. */
+.cat { flex: none; display: block; }
+.cat svg { display: block; width: 16px; height: 16px; }
+.pill.xl .cat svg { width: 19px; height: 19px; }
+.logged .cat svg { width: 22px; height: 22px; }
+
+.c-liha { color: var(--liha); }
+.c-kana { color: var(--kana); }
+.c-kala { color: var(--kala); }
+.c-kasvis { color: var(--kasvis); }
/* Day switcher */
.dayseg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
diff --git a/cmd/foodster/views.templ b/cmd/foodster/views.templ
index 18fe049..25e0a8e 100644
--- a/cmd/foodster/views.templ
+++ b/cmd/foodster/views.templ
@@ -141,6 +141,88 @@ templ iconMoon() {
}
+// categoryIcon draws a dish's category as colour *and* shape. Colour on its
+// own was not telling: a red blob and a yellow blob only differ once you have
+// learned the legend.
+templ categoryIcon(key string) {
+ switch key {
+ case "liha":
+
+ @glyphLiha()
+
+ case "kana":
+
+ @glyphKana()
+
+ case "kala":
+
+ @glyphKala()
+
+ case "kasvis":
+
+ @glyphKasvis()
+
+ default:
+
+ @glyphSekalaiset()
+
+ }
+}
+
+// A steak, its bone knocked out with fill-rule so the hole is transparent on
+// whatever background the icon lands on.
+templ glyphLiha() {
+
+}
+
+// A drumstick. The bone is what keeps it apart from the steak at small sizes,
+// where both are otherwise warm blobs.
+templ glyphKana() {
+
+}
+
+templ glyphKala() {
+
+}
+
+// No midrib: stroking one in the card colour only works on a card, and these
+// also sit on the page background in the history list.
+templ glyphKasvis() {
+
+}
+
+// Quartered, one wedge per category: the mark already means "all of them".
+templ glyphSekalaiset() {
+
+}
+
templ tabbar(current string) {