Release: one log page, grouped dishes, live search #1
+11
-15
@@ -123,21 +123,17 @@ html[data-theme="light"] .themetoggle .i-moon { display: none; }
|
|||||||
}
|
}
|
||||||
.tabbar a[aria-current] { color: var(--accent); }
|
.tabbar a[aria-current] { color: var(--accent); }
|
||||||
|
|
||||||
.dot {
|
/* Category marks carry colour and shape together, so they are readable
|
||||||
width: 9px;
|
without having learned which hue means what. */
|
||||||
height: 9px;
|
.cat { flex: none; display: block; }
|
||||||
border-radius: 2px;
|
.cat svg { display: block; width: 16px; height: 16px; }
|
||||||
flex: none;
|
.pill.xl .cat svg { width: 19px; height: 19px; }
|
||||||
display: inline-block;
|
.logged .cat svg { width: 22px; height: 22px; }
|
||||||
}
|
|
||||||
.d-liha { background: var(--liha); }
|
.c-liha { color: var(--liha); }
|
||||||
.d-kana { background: var(--kana); }
|
.c-kana { color: var(--kana); }
|
||||||
.d-kala { background: var(--kala); }
|
.c-kala { color: var(--kala); }
|
||||||
.d-kasvis { background: var(--kasvis); }
|
.c-kasvis { color: var(--kasvis); }
|
||||||
.d-sek {
|
|
||||||
background: conic-gradient(var(--liha) 0 25%, var(--kana) 25% 50%,
|
|
||||||
var(--kala) 50% 75%, var(--kasvis) 75% 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Day switcher */
|
/* Day switcher */
|
||||||
.dayseg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
|
.dayseg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
|
||||||
|
|||||||
@@ -141,6 +141,88 @@ templ iconMoon() {
|
|||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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":
|
||||||
|
<span class="cat c-liha">
|
||||||
|
@glyphLiha()
|
||||||
|
</span>
|
||||||
|
case "kana":
|
||||||
|
<span class="cat c-kana">
|
||||||
|
@glyphKana()
|
||||||
|
</span>
|
||||||
|
case "kala":
|
||||||
|
<span class="cat c-kala">
|
||||||
|
@glyphKala()
|
||||||
|
</span>
|
||||||
|
case "kasvis":
|
||||||
|
<span class="cat c-kasvis">
|
||||||
|
@glyphKasvis()
|
||||||
|
</span>
|
||||||
|
default:
|
||||||
|
<span class="cat">
|
||||||
|
@glyphSekalaiset()
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// A steak, its bone knocked out with fill-rule so the hole is transparent on
|
||||||
|
// whatever background the icon lands on.
|
||||||
|
templ glyphLiha() {
|
||||||
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
// A drumstick. The bone is what keeps it apart from the steak at small sizes,
|
||||||
|
// where both are otherwise warm blobs.
|
||||||
|
templ glyphKana() {
|
||||||
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" d="M7.8 8.2l3.1-3.1"></path>
|
||||||
|
<circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"></circle>
|
||||||
|
<circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"></circle>
|
||||||
|
<circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"></circle>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ glyphKala() {
|
||||||
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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() {
|
||||||
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Quartered, one wedge per category: the mark already means "all of them".
|
||||||
|
templ glyphSekalaiset() {
|
||||||
|
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
||||||
|
<path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"></path>
|
||||||
|
<path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"></path>
|
||||||
|
<path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"></path>
|
||||||
|
<path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
templ tabbar(current string) {
|
templ tabbar(current string) {
|
||||||
<nav class="tabbar">
|
<nav class="tabbar">
|
||||||
@tab("/", "Kirjaa", current)
|
@tab("/", "Kirjaa", current)
|
||||||
@@ -196,7 +278,7 @@ templ historyList(v logView) {
|
|||||||
<time>{ dayLabelFI(row.Date) }</time>
|
<time>{ dayLabelFI(row.Date) }</time>
|
||||||
<div>
|
<div>
|
||||||
<div class="nm">
|
<div class="nm">
|
||||||
<i class={ "dot", "d-" + row.Entry.Main.CategoryKey() }></i>
|
@categoryIcon(row.Entry.Main.CategoryKey())
|
||||||
{ row.Entry.Main.Name }
|
{ row.Entry.Main.Name }
|
||||||
</div>
|
</div>
|
||||||
<div class="sd">{ row.Entry.SidesLabel() }</div>
|
<div class="sd">{ row.Entry.SidesLabel() }</div>
|
||||||
@@ -308,7 +390,7 @@ templ dishPill(d Dish, v logView) {
|
|||||||
class={ "pill", d.Size() }
|
class={ "pill", d.Size() }
|
||||||
href={ templ.SafeURL(dayURL("/", v.Date, v.Today) + pickSeparator(v) + "ruoka=" + strconv.FormatInt(d.ID, 10)) }
|
href={ templ.SafeURL(dayURL("/", v.Date, v.Today) + pickSeparator(v) + "ruoka=" + strconv.FormatInt(d.ID, 10)) }
|
||||||
>
|
>
|
||||||
<i class={ "dot", "d-" + d.CategoryKey() }></i>
|
@categoryIcon(d.CategoryKey())
|
||||||
{ d.Name }
|
{ d.Name }
|
||||||
if d.TimesEaten > 0 {
|
if d.TimesEaten > 0 {
|
||||||
<span class="n">{ strconv.Itoa(d.TimesEaten) }</span>
|
<span class="n">{ strconv.Itoa(d.TimesEaten) }</span>
|
||||||
@@ -319,7 +401,7 @@ templ dishPill(d Dish, v logView) {
|
|||||||
templ sidesStep(v logView) {
|
templ sidesStep(v logView) {
|
||||||
<section class="card">
|
<section class="card">
|
||||||
<h3>
|
<h3>
|
||||||
<i class={ "dot", "d-" + v.Chosen.CategoryKey() }></i>
|
@categoryIcon(v.Chosen.CategoryKey())
|
||||||
{ v.Chosen.Name }
|
{ v.Chosen.Name }
|
||||||
</h3>
|
</h3>
|
||||||
<form method="post" action="/kirjaa">
|
<form method="post" action="/kirjaa">
|
||||||
@@ -358,7 +440,7 @@ templ loggedCard(v logView) {
|
|||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
<p class="nm">
|
<p class="nm">
|
||||||
<i class={ "dot", "d-" + v.Entry.Main.CategoryKey() }></i>
|
@categoryIcon(v.Entry.Main.CategoryKey())
|
||||||
{ v.Entry.Main.Name }
|
{ v.Entry.Main.Name }
|
||||||
</p>
|
</p>
|
||||||
<p class="sd">{ v.Entry.SidesLabel() }</p>
|
<p class="sd">{ v.Entry.SidesLabel() }</p>
|
||||||
@@ -410,7 +492,7 @@ templ catalogPage(v catalogView) {
|
|||||||
<h3 class="sechead">{ g.Label }</h3>
|
<h3 class="sechead">{ g.Label }</h3>
|
||||||
for _, d := range g.Dishes {
|
for _, d := range g.Dishes {
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<i class={ "dot", "d-" + d.CategoryKey() }></i>
|
@categoryIcon(d.CategoryKey())
|
||||||
<div class="rowtext">
|
<div class="rowtext">
|
||||||
<div class="nm">{ d.Name }</div>
|
<div class="nm">{ d.Name }</div>
|
||||||
if !d.HasSides {
|
if !d.HasSides {
|
||||||
@@ -537,7 +619,7 @@ templ categoryChip(value, label string, f mainForm) {
|
|||||||
} else {
|
} else {
|
||||||
<input type="checkbox" name="kategoria" value={ value }/>
|
<input type="checkbox" name="kategoria" value={ value }/>
|
||||||
}
|
}
|
||||||
<i class={ "dot", "d-" + categoryFI[value] }></i>
|
@categoryIcon(categoryFI[value])
|
||||||
<span>{ label }</span>
|
<span>{ label }</span>
|
||||||
</label>
|
</label>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,145 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fi" data-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Foodster — kategoriakuvakkeet</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
color-scheme: light dark;
|
||||||
|
--paper: light-dark(#ECEDE8, #121316);
|
||||||
|
--card: light-dark(#FFFFFF, #1C1E22);
|
||||||
|
--sunk: light-dark(#E3E4DE, #17181B);
|
||||||
|
--ink: light-dark(#14161A, #E9EAE5);
|
||||||
|
--muted: light-dark(#6B6F6A, #8B8F89);
|
||||||
|
--line: light-dark(#D5D6D0, #2C2F34);
|
||||||
|
--liha: light-dark(#AF4230, #DE7561);
|
||||||
|
--kana: light-dark(#B57E10, #DFA83B);
|
||||||
|
--kala: light-dark(#25688F, #63AAD8);
|
||||||
|
--kasvis:light-dark(#457A3C, #82BE7A);
|
||||||
|
}
|
||||||
|
html[data-theme="light"]{color-scheme:only light;}
|
||||||
|
html[data-theme="dark"] {color-scheme:only dark;}
|
||||||
|
*{box-sizing:border-box;}
|
||||||
|
body{margin:0;background:var(--paper);color:var(--ink);
|
||||||
|
font-family:system-ui,sans-serif;font-size:16px;line-height:1.45;}
|
||||||
|
.wrap{max-width:900px;margin:0 auto;padding:22px 20px 60px;}
|
||||||
|
h1{font-size:19px;letter-spacing:-.02em;margin:0 0 4px;}
|
||||||
|
.lede{margin:0 0 18px;color:var(--muted);font-size:14px;}
|
||||||
|
button.t{font:inherit;font-size:13px;background:var(--card);border:1px solid var(--line);
|
||||||
|
color:var(--muted);padding:7px 12px;border-radius:7px;cursor:pointer;margin-bottom:20px;}
|
||||||
|
|
||||||
|
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;
|
||||||
|
padding:16px 18px;margin-bottom:14px;}
|
||||||
|
.panel h2{font-size:14px;margin:0 0 12px;letter-spacing:-.01em;}
|
||||||
|
|
||||||
|
table{border-collapse:collapse;width:100%;}
|
||||||
|
th{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
|
||||||
|
text-align:left;font-weight:600;padding:0 10px 8px 0;}
|
||||||
|
td{padding:7px 10px 7px 0;vertical-align:middle;}
|
||||||
|
td.name{font-size:13px;color:var(--muted);}
|
||||||
|
|
||||||
|
.i-liha { color: var(--liha); }
|
||||||
|
.i-kana { color: var(--kana); }
|
||||||
|
.i-kala { color: var(--kala); }
|
||||||
|
.i-kasvis{ color: var(--kasvis); }
|
||||||
|
svg{display:block;}
|
||||||
|
|
||||||
|
/* in context */
|
||||||
|
.board{display:flex;flex-wrap:wrap;gap:8px;}
|
||||||
|
.pill{display:flex;align-items:center;gap:9px;background:var(--card);
|
||||||
|
border:1px solid var(--line);border-radius:11px;color:var(--ink);
|
||||||
|
font-weight:600;letter-spacing:-.022em;padding:11px 15px;font-size:16px;}
|
||||||
|
.pill.big{font-size:21px;padding:14px 18px;}
|
||||||
|
.n{font-family:ui-monospace,monospace;font-weight:400;font-size:10px;color:var(--muted);}
|
||||||
|
.row{display:flex;align-items:center;gap:11px;padding:11px 0;
|
||||||
|
border-bottom:1px solid var(--line);}
|
||||||
|
.row .nm{font-size:16px;font-weight:600;}
|
||||||
|
.dotrow{display:flex;align-items:center;gap:11px;padding:11px 0;
|
||||||
|
border-bottom:1px solid var(--line);}
|
||||||
|
.dot{width:9px;height:9px;border-radius:2px;flex:none;}
|
||||||
|
.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%);}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1>Kategoriakuvakkeet</h1>
|
||||||
|
<p class="lede">Colour and shape together. The 14 px column and the pill row are the sizes that actually ship.</p>
|
||||||
|
<button class="t" id="t">Teema: tumma</button>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Every size</h2>
|
||||||
|
<table>
|
||||||
|
<tr><th>Kategoria</th><th>12</th><th>14</th><th>18</th><th>26</th></tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name">liha</td>
|
||||||
|
<td class="i-liha"><svg width="12" height="12" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"/></svg></td>
|
||||||
|
<td class="i-liha"><svg width="14" height="14" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"/></svg></td>
|
||||||
|
<td class="i-liha"><svg width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"/></svg></td>
|
||||||
|
<td class="i-liha"><svg width="26" height="26" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"/></svg></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name">kana</td>
|
||||||
|
<td class="i-kana"><svg width="12" height="12" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M7.8 8.2l3.1-3.1"/></g><circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"/><circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"/><circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"/></svg></td>
|
||||||
|
<td class="i-kana"><svg width="14" height="14" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M7.8 8.2l3.1-3.1"/></g><circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"/><circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"/><circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"/></svg></td>
|
||||||
|
<td class="i-kana"><svg width="18" height="18" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M7.8 8.2l3.1-3.1"/></g><circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"/><circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"/><circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"/></svg></td>
|
||||||
|
<td class="i-kana"><svg width="26" height="26" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M7.8 8.2l3.1-3.1"/></g><circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"/><circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"/><circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"/></svg></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name">kala</td>
|
||||||
|
<td class="i-kala"><svg width="12" height="12" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"/></svg></td>
|
||||||
|
<td class="i-kala"><svg width="14" height="14" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"/></svg></td>
|
||||||
|
<td class="i-kala"><svg width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"/></svg></td>
|
||||||
|
<td class="i-kala"><svg width="26" height="26" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"/></svg></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name">kasvis</td>
|
||||||
|
<td class="i-kasvis"><svg width="12" height="12" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"/><path fill="none" stroke="var(--card)" stroke-width="1.1" stroke-linecap="round" d="M12.4 3.4L5.1 10.7"/></svg></td>
|
||||||
|
<td class="i-kasvis"><svg width="14" height="14" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"/><path fill="none" stroke="var(--card)" stroke-width="1.1" stroke-linecap="round" d="M12.4 3.4L5.1 10.7"/></svg></td>
|
||||||
|
<td class="i-kasvis"><svg width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"/><path fill="none" stroke="var(--card)" stroke-width="1.1" stroke-linecap="round" d="M12.4 3.4L5.1 10.7"/></svg></td>
|
||||||
|
<td class="i-kasvis"><svg width="26" height="26" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"/><path fill="none" stroke="var(--card)" stroke-width="1.1" stroke-linecap="round" d="M12.4 3.4L5.1 10.7"/></svg></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="name">sekalaiset</td>
|
||||||
|
<td><svg width="12" height="12" viewBox="0 0 16 16"><path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"/><path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"/><path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"/><path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"/></svg></td>
|
||||||
|
<td><svg width="14" height="14" viewBox="0 0 16 16"><path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"/><path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"/><path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"/><path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"/></svg></td>
|
||||||
|
<td><svg width="18" height="18" viewBox="0 0 16 16"><path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"/><path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"/><path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"/><path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"/></svg></td>
|
||||||
|
<td><svg width="26" height="26" viewBox="0 0 16 16"><path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"/><path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"/><path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"/><path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"/></svg></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<h2>On the board, at 16 px</h2>
|
||||||
|
<div class="board">
|
||||||
|
<span class="pill big"><span class="i-liha"><svg width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1.8c3.4 0 6.1 2.3 6.1 5.1 0 1.7-1 3.2-2.5 4.1-.4 1.9-1.9 3.2-3.6 3.2-3.4 0-6.1-2.5-6.1-5.6C1.9 5 4.6 1.8 8 1.8zm2.7 7.5a1.6 1.6 0 1 0-3.2 0 1.6 1.6 0 0 0 3.2 0z"/></svg></span>Lihapullat <span class="n">12</span></span>
|
||||||
|
<span class="pill"><span class="i-kana"><svg width="16" height="16" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M7.8 8.2l3.1-3.1"/></g><circle cx="5.4" cy="10.6" r="3.6" fill="currentColor"/><circle cx="12.2" cy="3.8" r="2.1" fill="currentColor"/><circle cx="13.4" cy="5.6" r="1.7" fill="currentColor"/></svg></span>Kanacurry <span class="n">8</span></span>
|
||||||
|
<span class="pill"><span class="i-kala"><svg width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14.4 8c-1.8 2.7-4.4 4.2-7 4.2-1.3 0-2.6-.4-3.6-1.1L1.4 13.2V2.8l2.4 2.1c1-.7 2.3-1.1 3.6-1.1 2.6 0 5.2 1.5 7 4.2zm-3.6-1.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9z"/></svg></span>Lohikeitto <span class="n">9</span></span>
|
||||||
|
<span class="pill"><span class="i-kasvis"><svg width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.6C6.9 1.4 2.6 4.7 2.6 9.5c0 1.2.3 2.2.8 3.1l-1.7 1.7 1.3 1.3 1.7-1.7c.9.5 1.9.8 3.1.8 4.8 0 7-4.4 6.2-13z"/><path fill="none" stroke="var(--card)" stroke-width="1.1" stroke-linecap="round" d="M12.4 3.4L5.1 10.7"/></svg></span>Hernekeitto <span class="n">4</span></span>
|
||||||
|
<span class="pill"><svg width="16" height="16" viewBox="0 0 16 16"><path fill="var(--liha)" d="M8 8V1.4A6.6 6.6 0 0 1 14.6 8z"/><path fill="var(--kana)" d="M8 8h6.6A6.6 6.6 0 0 1 8 14.6z"/><path fill="var(--kala)" d="M8 8v6.6A6.6 6.6 0 0 1 1.4 8z"/><path fill="var(--kasvis)" d="M8 8H1.4A6.6 6.6 0 0 1 8 1.4z"/></svg>Tortillat <span class="n">4</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<h2>What it replaces</h2>
|
||||||
|
<div class="dotrow"><i class="dot d-liha"></i><span>Lihapullat</span></div>
|
||||||
|
<div class="dotrow"><i class="dot d-kana"></i><span>Kanacurry</span></div>
|
||||||
|
<div class="dotrow"><i class="dot d-kala"></i><span>Lohikeitto</span></div>
|
||||||
|
<div class="dotrow"><i class="dot d-kasvis"></i><span>Hernekeitto</span></div>
|
||||||
|
<div class="dotrow"><i class="dot d-sek"></i><span>Tortillat</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const h=document.documentElement,b=document.getElementById('t'),m=['dark','light'];
|
||||||
|
b.onclick=()=>{const n=m[(m.indexOf(h.dataset.theme)+1)%2];h.dataset.theme=n;b.textContent='Teema: '+(n==='dark'?'tumma':'vaalea');};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user