mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Merge pull request #12 from Patiun/claude/patiun-rebrand-gjoo9f
Light mode with a dark and light toggle
This commit is contained in:
Greg Kilmer
+3
-1
@@ -76,4 +76,6 @@ import PageShell from "@gk/ui/components/PageShell.astro";
|
|||||||
</PageShell>
|
</PageShell>
|
||||||
```
|
```
|
||||||
|
|
||||||
The site is dark only for now; light mode comes in a later phase.
|
The site follows the device's light or dark setting until the visitor presses the sun and moon toggle in the header (`ThemeToggle`), which saves their choice in the browser. A script in PageShell's head sets `<html data-theme="light">` or `"dark"` before the page paints; without script the site stays dark. Style light mode with `:root[data-theme="light"]` (in a component, `:global(:root[data-theme="light"]) .x`), not a `prefers-color-scheme` media query, so the toggle can override it. Colors come from the tokens in `tokens.css`, which has the light values too, so a component that uses `var(--gk-…)` needs nothing more. For a translucent color use a channel token, as in `rgba(var(--gk-gold-rgb), 0.35)`, never a hardcoded rgba. In SVG markup use `style="fill:var(--gk-gold)"`.
|
||||||
|
|
||||||
|
Motif images come in a light recolor and, for seals, a gold foil version for each mode. Show a motif with `Motif` (or `Seal`), which renders both files and shows the one for the current mode; a plain `<img>` stays dark. Pass `foil` only to a seal standing alone at 120px or more and half opacity or more. After changing a motif SVG, run `node packages/ui/scripts/light-motifs.mjs` to rewrite the `light/`, `foil/` and `foil-light/` versions.
|
||||||
|
|||||||
@@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* Writes the light and foil versions of the motif SVGs from the dark originals
|
||||||
|
* in src/assets/motifs, using the inks Greg picked on the light motif board
|
||||||
|
* (2026-10-18). Run after a motif changes: node packages/ui/scripts/light-motifs.mjs
|
||||||
|
*
|
||||||
|
* light/ deep gold line: the dark inks swapped for Starlight-page inks, glow removed
|
||||||
|
* foil/ the dark seal with its gold as foil, glow kept
|
||||||
|
* foil-light/ the light seal with its gold as foil
|
||||||
|
*/
|
||||||
|
import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
|
||||||
|
import { join } from "node:path";
|
||||||
|
|
||||||
|
const dir = join(import.meta.dirname, "../src/assets/motifs");
|
||||||
|
|
||||||
|
// Dark colors as they appear in the motif files, and their light inks.
|
||||||
|
const LIGHT = {
|
||||||
|
"#C9A24A": "#8A6516",
|
||||||
|
"#14A39A": "#0F8C84",
|
||||||
|
"#0E1522": "#F4F2ED",
|
||||||
|
"#101A2A": "#ECE8DF",
|
||||||
|
"#F4F2ED": "#131C2B",
|
||||||
|
"#F2D58A": "#A57C1F",
|
||||||
|
"#F6E7B8": "#8A6516",
|
||||||
|
"#2BC2B7": "#0F8C84",
|
||||||
|
"#9A70F5": "#6A2FE0",
|
||||||
|
"#FFF": "#F4F2ED",
|
||||||
|
};
|
||||||
|
const GOLD = ["#C9A24A", "#F2D58A"];
|
||||||
|
|
||||||
|
const stops = (s) => s.map(([o, c]) => `<stop offset="${o}" stop-color="${c}"/>`).join("");
|
||||||
|
const DARK_FOIL = stops([[0, "#8A6516"], [0.3, "#C9A24A"], [0.5, "#F6E7B8"], [0.68, "#C9A24A"], [1, "#8A6516"]]);
|
||||||
|
const LIGHT_FOIL = stops([[0, "#6F5112"], [0.35, "#A57C1F"], [0.5, "#C9A24A"], [0.65, "#8A6516"], [1, "#6F5112"]]);
|
||||||
|
|
||||||
|
const hex = (c) => new RegExp(c.replace("#", "#") + "(?![0-9A-Fa-f])", "gi");
|
||||||
|
|
||||||
|
function recolor(svg, map) {
|
||||||
|
// One pass, so a swapped color is never swapped again.
|
||||||
|
const keys = Object.keys(map).sort((a, b) => b.length - a.length);
|
||||||
|
const any = new RegExp(`(${keys.join("|")})(?![0-9A-Fa-f])`, "gi");
|
||||||
|
return svg.replace(any, (m) => map[keys.find((k) => k.toLowerCase() === m.toLowerCase())]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function foil(svg, gradStops, golds) {
|
||||||
|
const [, , , w, h] = svg.match(/viewBox="([-\d.]+) ([-\d.]+) ([\d.]+) ([\d.]+)"/) ?? [0, 0, 0, 400, 400];
|
||||||
|
const grad = `<linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="${w}" y2="${h}">${gradStops}</linearGradient>`;
|
||||||
|
for (const g of golds) svg = svg.replace(hex(g), "url(#gkfoil)");
|
||||||
|
return svg.includes("<defs>") ? svg.replace("<defs>", `<defs>${grad}`) : svg.replace(/(<svg[^>]*>)/, `$1<defs>${grad}</defs>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Glow filters are for the night sky only.
|
||||||
|
const unglow = (svg) => svg.replace(/\sfilter="url\(#[^)]*\)"/g, "");
|
||||||
|
|
||||||
|
for (const sub of ["light", "foil", "foil-light"]) mkdirSync(join(dir, sub), { recursive: true });
|
||||||
|
const files = readdirSync(dir).filter((f) => f.endsWith(".svg"));
|
||||||
|
for (const f of files) {
|
||||||
|
const dark = readFileSync(join(dir, f), "utf8");
|
||||||
|
const light = recolor(unglow(dark), LIGHT);
|
||||||
|
writeFileSync(join(dir, "light", f), light);
|
||||||
|
// Only the seals stand alone large enough for foil.
|
||||||
|
if (/seal|astrolabe|transmutation/.test(f) && !f.startsWith("mini-") && !f.startsWith("filament-banner")) {
|
||||||
|
writeFileSync(join(dir, "foil", f), foil(dark, DARK_FOIL, ["#C9A24A"]));
|
||||||
|
writeFileSync(join(dir, "foil-light", f), foil(light, LIGHT_FOIL, ["#8A6516", "#A57C1F"]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(`${files.length} motifs written`);
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#F4F2ED" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Moon"><path d="M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z"/><path d="M17 3.5v2.4M15.8 4.7h2.4" stroke="#C9A24A"/></svg>
|
||||||
|
After Width: | Height: | Size: 305 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#F4F2ED" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Sun"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6"/></svg>
|
||||||
|
After Width: | Height: | Size: 349 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Dice craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#6F5112"/><stop offset="0.35" stop-color="#A57C1F"/><stop offset="0.5" stop-color="#C9A24A"/><stop offset="0.65" stop-color="#8A6516"/><stop offset="1" stop-color="#6F5112"/></linearGradient><path id="cscrdice" d="M 200,30.53 A 169.47,169.47 0 1 1 199.99,30.53"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="10.745" fill="url(#gkfoil)"><textPath href="#cscrdice">DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,142.3 L250.0,171.1 L250.0,228.9 L200.0,257.7 L150.0,228.9 L150.0,171.1Z" fill="none" stroke="#131C2B" stroke-width="1.4" stroke-linejoin="round"/><path d="M200.0,228.9 L175.0,185.6 L225.0,185.6Z" fill="none" stroke="#131C2B" stroke-width="1.2" stroke-linejoin="round"/><line x1="200.0" y1="142.3" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="200.0" y1="142.3" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="171.1" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="200.0" y1="257.7" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="171.1" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><text x="200.0" y="206.9" font-family="Cinzel,serif" font-weight="700" font-size="18.5" fill="#131C2B" text-anchor="middle" dominant-baseline="middle">20</text><circle cx="103.0" cy="144.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜄</text><circle cx="297.0" cy="144.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Leather craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#6F5112"/><stop offset="0.35" stop-color="#A57C1F"/><stop offset="0.5" stop-color="#C9A24A"/><stop offset="0.65" stop-color="#8A6516"/><stop offset="1" stop-color="#6F5112"/></linearGradient><path id="cscrleather" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="8.973" fill="url(#gkfoil)"><textPath href="#cscrleather">LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><line x1="162.2" y1="290.5" x2="237.8" y2="290.5" stroke="#0F8C84" stroke-width="1.2"/><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M164.2,145.2 Q188.5,155.0 200.0,155.0 Q211.5,155.0 223.7,150.1 Q235.8,145.2 238.7,159.6 Q241.6,174.0 248.2,181.2 Q254.8,188.5 249.9,201.4 Q245.0,214.4 247.9,228.0 Q250.8,241.6 236.9,248.2 Q223.1,254.8 211.5,250.5 Q200.0,246.2 188.5,250.5 Q176.9,254.8 163.1,248.2 Q149.2,241.6 152.1,228.0 Q155.0,214.4 150.1,201.4 Q145.2,188.5 151.8,181.2 Q158.4,174.0 161.3,159.6 Z" fill="none" stroke="#131C2B" stroke-width="1.4" stroke-linejoin="round"/><path d="M174.2,160.5 Q191.7,167.6 200.0,167.6 Q208.3,167.6 217.0,164.1 Q225.8,160.5 227.8,170.9 Q229.9,181.3 234.7,186.5 Q239.5,191.7 235.9,201.0 Q232.4,210.4 234.5,220.2 Q236.6,229.9 226.6,234.7 Q216.6,239.5 208.3,236.4 Q200.0,233.2 191.7,236.4 Q183.4,239.5 173.4,234.7 Q163.4,229.9 165.5,220.2 Q167.6,210.4 164.1,201.0 Q160.5,191.7 165.3,186.5 Q170.1,181.3 172.2,170.9 Z" fill="none" stroke="#131C2B" stroke-width="1" stroke-dasharray="4 3"/><circle cx="103.0" cy="144.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜃</text><circle cx="297.0" cy="144.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Print craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#6F5112"/><stop offset="0.35" stop-color="#A57C1F"/><stop offset="0.5" stop-color="#C9A24A"/><stop offset="0.65" stop-color="#8A6516"/><stop offset="1" stop-color="#6F5112"/></linearGradient><path id="cscrprint" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="9.692" fill="url(#gkfoil)"><textPath href="#cscrprint">PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,44.00 L335.10,278.00 L64.90,278.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,148.1 L245.2,174.0 L200.0,200.0 L154.8,174.0Z" fill="none" stroke="#131C2B" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,174.0 L154.8,226.0 L200.0,251.9 L245.2,226.0 L245.2,174.0 M200.0,200.0 L200.0,251.9" fill="none" stroke="#131C2B" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,184.4 L200.0,210.4 L245.2,184.4" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,194.8 L200.0,220.8 L245.2,194.8" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,205.2 L200.0,231.2 L245.2,205.2" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,215.6 L200.0,241.6 L245.2,215.6" fill="none" stroke="#131C2B" stroke-width=".6"/><circle cx="297.0" cy="256.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><text x="289.95" y="261.92" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜂</text><circle cx="103.0" cy="256.0" r="15" fill="#F4F2ED" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(95.22,249.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Kepler nest seal"><circle cx="200" cy="200" r="194" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="178" fill="none" stroke="url(#gkfoil)" stroke-width="0.8" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#6F5112"/><stop offset="0.35" stop-color="#A57C1F"/><stop offset="0.5" stop-color="#C9A24A"/><stop offset="0.65" stop-color="#8A6516"/><stop offset="1" stop-color="#6F5112"/></linearGradient><path id="kpkp" d="M 200,17.4675 A 182.5325,182.5325 0 1 1 199.99,17.4675"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="9.50" letter-spacing="5.187" fill="url(#gkfoil)"><textPath href="#kpkp">HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ </textPath></text><circle cx="200" cy="200" r="176" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" /><path d="M200.00,24.00 L337.60,90.27 L371.59,239.16 L276.36,358.57 L123.64,358.57 L28.41,239.16 L62.40,90.27Z" fill="none" stroke="url(#gkfoil)" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="24.00" r="3.2" fill="#131C2B"/><circle cx="337.60" cy="90.27" r="3.2" fill="#131C2B"/><circle cx="371.59" cy="239.16" r="3.2" fill="#131C2B"/><circle cx="276.36" cy="358.57" r="3.2" fill="#131C2B"/><circle cx="123.64" cy="358.57" r="3.2" fill="#131C2B"/><circle cx="28.41" cy="239.16" r="3.2" fill="#131C2B"/><circle cx="62.40" cy="90.27" r="3.2" fill="#131C2B"/><circle cx="200" cy="200" r="158.57052075082578" fill="none" stroke="#0F8C84" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,41.43 L337.33,120.71 L337.33,279.29 L200.00,358.57 L62.67,279.29 L62.67,120.71Z" fill="none" stroke="#0F8C84" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="41.43" r="2.4" fill="#131C2B"/><circle cx="337.33" cy="120.71" r="2.4" fill="#131C2B"/><circle cx="337.33" cy="279.29" r="2.4" fill="#131C2B"/><circle cx="200.00" cy="358.57" r="2.4" fill="#131C2B"/><circle cx="62.67" cy="279.29" r="2.4" fill="#131C2B"/><circle cx="62.67" cy="120.71" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="137.32609926154262" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,62.67 L330.60,157.56 L280.72,311.10 L119.28,311.10 L69.40,157.56Z" fill="none" stroke="url(#gkfoil)" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="62.67" r="2.4" fill="#131C2B"/><circle cx="330.60" cy="157.56" r="2.4" fill="#131C2B"/><circle cx="280.72" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="119.28" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="69.40" cy="157.56" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="111.0991480738089" fill="none" stroke="#0F8C84" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,88.90 L311.10,200.00 L200.00,311.10 L88.90,200.00Z" fill="none" stroke="#0F8C84" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="88.90" r="2.4" fill="#131C2B"/><circle cx="311.10" cy="200.00" r="2.4" fill="#131C2B"/><circle cx="200.00" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="88.90" cy="200.00" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="78.55896098703865" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,121.44 L268.03,239.28 L131.97,239.28Z" fill="none" stroke="url(#gkfoil)" stroke-width="1.3" stroke-linejoin="round" /><circle cx="200.00" cy="121.44" r="2.4" fill="#131C2B"/><circle cx="268.03" cy="239.28" r="2.4" fill="#131C2B"/><circle cx="131.97" cy="239.28" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="39.27948049351933" fill="none" stroke="#0F8C84" stroke-width="1.2" /><g transform="translate(177.67,181.34) scale(0.2938) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,-4.00 201.56,4.44 210.00,6.00 201.56,7.56 200.00,16.00 198.44,7.56 190.00,6.00 198.44,4.44" fill="url(#gkfoil)"/><polygon points="394.00,190.00 395.56,198.44 404.00,200.00 395.56,201.56 394.00,210.00 392.44,201.56 384.00,200.00 392.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,384.00 201.56,392.44 210.00,394.00 201.56,395.56 200.00,404.00 198.44,395.56 190.00,394.00 198.44,392.44" fill="url(#gkfoil)"/><polygon points="6.00,190.00 7.56,198.44 16.00,200.00 7.56,201.56 6.00,210.00 4.44,201.56 -4.00,200.00 4.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Layered seal"><circle cx="200" cy="200" r="192" fill="none" stroke="#0F8C84" stroke-width="2" /><circle cx="200" cy="200" r="170" fill="none" stroke="#0F8C84" stroke-width="0.8" /><text x="240.34" y="30.28" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♈︎</text><text x="321.90" y="77.12" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♉︎</text><text x="368.88" y="158.05" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♊︎</text><text x="368.18" y="251.89" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♋︎</text><text x="322.60" y="331.42" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♌︎</text><text x="240.76" y="378.40" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♍︎</text><text x="146.57" y="379.73" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♎︎</text><text x="65.29" y="331.63" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♏︎</text><text x="19.64" y="251.75" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♐︎</text><text x="18.38" y="156.79" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♑︎</text><text x="65.43" y="76.91" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♒︎</text><text x="147.41" y="30.49" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♓︎</text><line x1="200.00" y1="30.00" x2="200.00" y2="8.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="285.00" y1="52.78" x2="296.00" y2="33.72" stroke="#0F8C84" stroke-width="0.8"/><line x1="347.22" y1="115.00" x2="366.28" y2="104.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="370.00" y1="200.00" x2="392.00" y2="200.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="347.22" y1="285.00" x2="366.28" y2="296.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="285.00" y1="347.22" x2="296.00" y2="366.28" stroke="#0F8C84" stroke-width="0.8"/><line x1="200.00" y1="370.00" x2="200.00" y2="392.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="115.00" y1="347.22" x2="104.00" y2="366.28" stroke="#0F8C84" stroke-width="0.8"/><line x1="52.78" y1="285.00" x2="33.72" y2="296.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="30.00" y1="200.00" x2="8.00" y2="200.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="52.78" y1="115.00" x2="33.72" y2="104.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="115.00" y1="52.78" x2="104.00" y2="33.72" stroke="#0F8C84" stroke-width="0.8"/><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#6F5112"/><stop offset="0.35" stop-color="#A57C1F"/><stop offset="0.5" stop-color="#C9A24A"/><stop offset="0.65" stop-color="#8A6516"/><stop offset="1" stop-color="#6F5112"/></linearGradient><path id="ltf" d="M 200,49.379999999999995 A 150.62,150.62 0 1 1 199.99,49.379999999999995"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="12.00" letter-spacing="10.483" fill="url(#gkfoil)"><textPath href="#ltf">PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="140" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,60.0 L340.0,200.0 L200.0,340.0 L60.0,200.0Z" fill="none" stroke="#0F8C84" stroke-width="1.2"/><path d="M299.0,101.0 L299.0,299.0 L101.0,299.0 L101.0,101.0Z" fill="none" stroke="#0F8C84" stroke-width="1.2"/><circle cx="200" cy="200" r="99" fill="none" stroke="url(#gkfoil)" stroke-width="0.9" /><text x="238.56" y="96.53" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜂</text><text x="302.42" y="250.33" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜄</text><text x="148.24" y="314.57" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜁</text><text x="84.38" y="160.02" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜃</text><path d="M200.0,101.0 L285.7,249.5 L114.3,249.5Z" fill="none" stroke="url(#gkfoil)" stroke-width=".9"/><path d="M200.0,299.0 L114.3,150.5 L285.7,150.5Z" fill="none" stroke="url(#gkfoil)" stroke-width=".9"/><circle cx="200" cy="200" r="48" fill="none" stroke="#0F8C84" stroke-width="1.4" /><g transform="translate(173.67,178.00) scale(0.3465) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Dice craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#8A6516"/><stop offset="0.3" stop-color="#C9A24A"/><stop offset="0.5" stop-color="#F6E7B8"/><stop offset="0.68" stop-color="#C9A24A"/><stop offset="1" stop-color="#8A6516"/></linearGradient><path id="cscrdice" d="M 200,30.53 A 169.47,169.47 0 1 1 199.99,30.53"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="10.745" fill="url(#gkfoil)"><textPath href="#cscrdice">DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#14A39A" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,142.3 L250.0,171.1 L250.0,228.9 L200.0,257.7 L150.0,228.9 L150.0,171.1Z" fill="none" stroke="#F4F2ED" stroke-width="1.4" stroke-linejoin="round"/><path d="M200.0,228.9 L175.0,185.6 L225.0,185.6Z" fill="none" stroke="#F4F2ED" stroke-width="1.2" stroke-linejoin="round"/><line x1="200.0" y1="142.3" x2="175.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><line x1="200.0" y1="142.3" x2="225.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><line x1="250.0" y1="171.1" x2="225.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="225.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="200.0" y2="228.9" stroke="#F4F2ED" stroke-width=".9"/><line x1="200.0" y1="257.7" x2="200.0" y2="228.9" stroke="#F4F2ED" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="200.0" y2="228.9" stroke="#F4F2ED" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="175.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><line x1="150.0" y1="171.1" x2="175.0" y2="185.6" stroke="#F4F2ED" stroke-width=".9"/><text x="200.0" y="206.9" font-family="Cinzel,serif" font-weight="700" font-size="18.5" fill="#F4F2ED" text-anchor="middle" dominant-baseline="middle">20</text><circle cx="103.0" cy="144.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#F4F2ED" >🜄</text><circle cx="297.0" cy="144.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#14A39A" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#14A39A"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Leather craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#8A6516"/><stop offset="0.3" stop-color="#C9A24A"/><stop offset="0.5" stop-color="#F6E7B8"/><stop offset="0.68" stop-color="#C9A24A"/><stop offset="1" stop-color="#8A6516"/></linearGradient><path id="cscrleather" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="8.973" fill="url(#gkfoil)"><textPath href="#cscrleather">LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#14A39A" stroke-width="1.6" stroke-linejoin="round" /><line x1="162.2" y1="290.5" x2="237.8" y2="290.5" stroke="#14A39A" stroke-width="1.2"/><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M164.2,145.2 Q188.5,155.0 200.0,155.0 Q211.5,155.0 223.7,150.1 Q235.8,145.2 238.7,159.6 Q241.6,174.0 248.2,181.2 Q254.8,188.5 249.9,201.4 Q245.0,214.4 247.9,228.0 Q250.8,241.6 236.9,248.2 Q223.1,254.8 211.5,250.5 Q200.0,246.2 188.5,250.5 Q176.9,254.8 163.1,248.2 Q149.2,241.6 152.1,228.0 Q155.0,214.4 150.1,201.4 Q145.2,188.5 151.8,181.2 Q158.4,174.0 161.3,159.6 Z" fill="none" stroke="#F4F2ED" stroke-width="1.4" stroke-linejoin="round"/><path d="M174.2,160.5 Q191.7,167.6 200.0,167.6 Q208.3,167.6 217.0,164.1 Q225.8,160.5 227.8,170.9 Q229.9,181.3 234.7,186.5 Q239.5,191.7 235.9,201.0 Q232.4,210.4 234.5,220.2 Q236.6,229.9 226.6,234.7 Q216.6,239.5 208.3,236.4 Q200.0,233.2 191.7,236.4 Q183.4,239.5 173.4,234.7 Q163.4,229.9 165.5,220.2 Q167.6,210.4 164.1,201.0 Q160.5,191.7 165.3,186.5 Q170.1,181.3 172.2,170.9 Z" fill="none" stroke="#F4F2ED" stroke-width="1" stroke-dasharray="4 3"/><circle cx="103.0" cy="144.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#F4F2ED" >🜃</text><circle cx="297.0" cy="144.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#14A39A" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#14A39A"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Print craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="url(#gkfoil)" stroke-width="0.6" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#8A6516"/><stop offset="0.3" stop-color="#C9A24A"/><stop offset="0.5" stop-color="#F6E7B8"/><stop offset="0.68" stop-color="#C9A24A"/><stop offset="1" stop-color="#8A6516"/></linearGradient><path id="cscrprint" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="9.692" fill="url(#gkfoil)"><textPath href="#cscrprint">PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="url(#gkfoil)" stroke-width="1.2" /><path d="M200.00,44.00 L335.10,278.00 L64.90,278.00Z" fill="none" stroke="#14A39A" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,148.1 L245.2,174.0 L200.0,200.0 L154.8,174.0Z" fill="none" stroke="#F4F2ED" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,174.0 L154.8,226.0 L200.0,251.9 L245.2,226.0 L245.2,174.0 M200.0,200.0 L200.0,251.9" fill="none" stroke="#F4F2ED" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,184.4 L200.0,210.4 L245.2,184.4" fill="none" stroke="#F4F2ED" stroke-width=".6"/><path d="M154.8,194.8 L200.0,220.8 L245.2,194.8" fill="none" stroke="#F4F2ED" stroke-width=".6"/><path d="M154.8,205.2 L200.0,231.2 L245.2,205.2" fill="none" stroke="#F4F2ED" stroke-width=".6"/><path d="M154.8,215.6 L200.0,241.6 L245.2,215.6" fill="none" stroke="#F4F2ED" stroke-width=".6"/><circle cx="297.0" cy="256.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><text x="289.95" y="261.92" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#F4F2ED" >🜂</text><circle cx="103.0" cy="256.0" r="15" fill="#0E1522" stroke="url(#gkfoil)" stroke-width="1"/><g transform="translate(95.22,249.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#14A39A" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#14A39A"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="url(#gkfoil)"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="url(#gkfoil)"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Kepler nest seal"><circle cx="200" cy="200" r="194" fill="none" stroke="url(#gkfoil)" stroke-width="2" /><circle cx="200" cy="200" r="178" fill="none" stroke="url(#gkfoil)" stroke-width="0.8" /><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#8A6516"/><stop offset="0.3" stop-color="#C9A24A"/><stop offset="0.5" stop-color="#F6E7B8"/><stop offset="0.68" stop-color="#C9A24A"/><stop offset="1" stop-color="#8A6516"/></linearGradient><path id="kpkp" d="M 200,17.4675 A 182.5325,182.5325 0 1 1 199.99,17.4675"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="9.50" letter-spacing="5.187" fill="url(#gkfoil)"><textPath href="#kpkp">HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ </textPath></text><circle cx="200" cy="200" r="176" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" /><path d="M200.00,24.00 L337.60,90.27 L371.59,239.16 L276.36,358.57 L123.64,358.57 L28.41,239.16 L62.40,90.27Z" fill="none" stroke="url(#gkfoil)" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="24.00" r="3.2" fill="#F4F2ED"/><circle cx="337.60" cy="90.27" r="3.2" fill="#F4F2ED"/><circle cx="371.59" cy="239.16" r="3.2" fill="#F4F2ED"/><circle cx="276.36" cy="358.57" r="3.2" fill="#F4F2ED"/><circle cx="123.64" cy="358.57" r="3.2" fill="#F4F2ED"/><circle cx="28.41" cy="239.16" r="3.2" fill="#F4F2ED"/><circle cx="62.40" cy="90.27" r="3.2" fill="#F4F2ED"/><circle cx="200" cy="200" r="158.57052075082578" fill="none" stroke="#14A39A" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,41.43 L337.33,120.71 L337.33,279.29 L200.00,358.57 L62.67,279.29 L62.67,120.71Z" fill="none" stroke="#14A39A" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="41.43" r="2.4" fill="#F4F2ED"/><circle cx="337.33" cy="120.71" r="2.4" fill="#F4F2ED"/><circle cx="337.33" cy="279.29" r="2.4" fill="#F4F2ED"/><circle cx="200.00" cy="358.57" r="2.4" fill="#F4F2ED"/><circle cx="62.67" cy="279.29" r="2.4" fill="#F4F2ED"/><circle cx="62.67" cy="120.71" r="2.4" fill="#F4F2ED"/><circle cx="200" cy="200" r="137.32609926154262" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,62.67 L330.60,157.56 L280.72,311.10 L119.28,311.10 L69.40,157.56Z" fill="none" stroke="url(#gkfoil)" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="62.67" r="2.4" fill="#F4F2ED"/><circle cx="330.60" cy="157.56" r="2.4" fill="#F4F2ED"/><circle cx="280.72" cy="311.10" r="2.4" fill="#F4F2ED"/><circle cx="119.28" cy="311.10" r="2.4" fill="#F4F2ED"/><circle cx="69.40" cy="157.56" r="2.4" fill="#F4F2ED"/><circle cx="200" cy="200" r="111.0991480738089" fill="none" stroke="#14A39A" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,88.90 L311.10,200.00 L200.00,311.10 L88.90,200.00Z" fill="none" stroke="#14A39A" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="88.90" r="2.4" fill="#F4F2ED"/><circle cx="311.10" cy="200.00" r="2.4" fill="#F4F2ED"/><circle cx="200.00" cy="311.10" r="2.4" fill="#F4F2ED"/><circle cx="88.90" cy="200.00" r="2.4" fill="#F4F2ED"/><circle cx="200" cy="200" r="78.55896098703865" fill="none" stroke="url(#gkfoil)" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,121.44 L268.03,239.28 L131.97,239.28Z" fill="none" stroke="url(#gkfoil)" stroke-width="1.3" stroke-linejoin="round" /><circle cx="200.00" cy="121.44" r="2.4" fill="#F4F2ED"/><circle cx="268.03" cy="239.28" r="2.4" fill="#F4F2ED"/><circle cx="131.97" cy="239.28" r="2.4" fill="#F4F2ED"/><circle cx="200" cy="200" r="39.27948049351933" fill="none" stroke="#14A39A" stroke-width="1.2" /><g transform="translate(177.67,181.34) scale(0.2938) translate(-20,-33)"><g fill="none" stroke="#14A39A" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#14A39A"/></g><polygon points="200.00,-4.00 201.56,4.44 210.00,6.00 201.56,7.56 200.00,16.00 198.44,7.56 190.00,6.00 198.44,4.44" fill="url(#gkfoil)"/><polygon points="394.00,190.00 395.56,198.44 404.00,200.00 395.56,201.56 394.00,210.00 392.44,201.56 384.00,200.00 392.44,198.44" fill="url(#gkfoil)"/><polygon points="200.00,384.00 201.56,392.44 210.00,394.00 201.56,395.56 200.00,404.00 198.44,395.56 190.00,394.00 198.44,392.44" fill="url(#gkfoil)"/><polygon points="6.00,190.00 7.56,198.44 16.00,200.00 7.56,201.56 6.00,210.00 4.44,201.56 -4.00,200.00 4.44,198.44" fill="url(#gkfoil)"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Layered seal"><circle cx="200" cy="200" r="192" fill="none" stroke="#14A39A" stroke-width="2" /><circle cx="200" cy="200" r="170" fill="none" stroke="#14A39A" stroke-width="0.8" /><text x="240.34" y="30.28" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♈︎</text><text x="321.90" y="77.12" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♉︎</text><text x="368.88" y="158.05" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♊︎</text><text x="368.18" y="251.89" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♋︎</text><text x="322.60" y="331.42" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♌︎</text><text x="240.76" y="378.40" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♍︎</text><text x="146.57" y="379.73" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♎︎</text><text x="65.29" y="331.63" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♏︎</text><text x="19.64" y="251.75" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♐︎</text><text x="18.38" y="156.79" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♑︎</text><text x="65.43" y="76.91" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♒︎</text><text x="147.41" y="30.49" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#14A39A" >♓︎</text><line x1="200.00" y1="30.00" x2="200.00" y2="8.00" stroke="#14A39A" stroke-width="0.8"/><line x1="285.00" y1="52.78" x2="296.00" y2="33.72" stroke="#14A39A" stroke-width="0.8"/><line x1="347.22" y1="115.00" x2="366.28" y2="104.00" stroke="#14A39A" stroke-width="0.8"/><line x1="370.00" y1="200.00" x2="392.00" y2="200.00" stroke="#14A39A" stroke-width="0.8"/><line x1="347.22" y1="285.00" x2="366.28" y2="296.00" stroke="#14A39A" stroke-width="0.8"/><line x1="285.00" y1="347.22" x2="296.00" y2="366.28" stroke="#14A39A" stroke-width="0.8"/><line x1="200.00" y1="370.00" x2="200.00" y2="392.00" stroke="#14A39A" stroke-width="0.8"/><line x1="115.00" y1="347.22" x2="104.00" y2="366.28" stroke="#14A39A" stroke-width="0.8"/><line x1="52.78" y1="285.00" x2="33.72" y2="296.00" stroke="#14A39A" stroke-width="0.8"/><line x1="30.00" y1="200.00" x2="8.00" y2="200.00" stroke="#14A39A" stroke-width="0.8"/><line x1="52.78" y1="115.00" x2="33.72" y2="104.00" stroke="#14A39A" stroke-width="0.8"/><line x1="115.00" y1="52.78" x2="104.00" y2="33.72" stroke="#14A39A" stroke-width="0.8"/><defs><linearGradient id="gkfoil" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="400"><stop offset="0" stop-color="#8A6516"/><stop offset="0.3" stop-color="#C9A24A"/><stop offset="0.5" stop-color="#F6E7B8"/><stop offset="0.68" stop-color="#C9A24A"/><stop offset="1" stop-color="#8A6516"/></linearGradient><path id="ltf" d="M 200,49.379999999999995 A 150.62,150.62 0 1 1 199.99,49.379999999999995"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="12.00" letter-spacing="10.483" fill="url(#gkfoil)"><textPath href="#ltf">PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="140" fill="none" stroke="url(#gkfoil)" stroke-width="1" /><path d="M200.0,60.0 L340.0,200.0 L200.0,340.0 L60.0,200.0Z" fill="none" stroke="#14A39A" stroke-width="1.2"/><path d="M299.0,101.0 L299.0,299.0 L101.0,299.0 L101.0,101.0Z" fill="none" stroke="#14A39A" stroke-width="1.2"/><circle cx="200" cy="200" r="99" fill="none" stroke="url(#gkfoil)" stroke-width="0.9" /><text x="238.56" y="96.53" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜂</text><text x="302.42" y="250.33" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜄</text><text x="148.24" y="314.57" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜁</text><text x="84.38" y="160.02" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="url(#gkfoil)" >🜃</text><path d="M200.0,101.0 L285.7,249.5 L114.3,249.5Z" fill="none" stroke="url(#gkfoil)" stroke-width=".9"/><path d="M200.0,299.0 L114.3,150.5 L285.7,150.5Z" fill="none" stroke="url(#gkfoil)" stroke-width=".9"/><circle cx="200" cy="200" r="48" fill="none" stroke="#14A39A" stroke-width="1.4" /><g transform="translate(173.67,178.00) scale(0.3465) translate(-20,-33)"><g fill="none" stroke="#14A39A" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#14A39A"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Dice craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="#8A6516" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="#8A6516" stroke-width="0.6" /><defs><path id="cscrdice" d="M 200,30.53 A 169.47,169.47 0 1 1 199.99,30.53"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="10.745" fill="#8A6516"><textPath href="#cscrdice">DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ DICE ✦ AQUA ✦ RESIN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="#8A6516" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="#8A6516" stroke-width="1" /><path d="M200.0,142.3 L250.0,171.1 L250.0,228.9 L200.0,257.7 L150.0,228.9 L150.0,171.1Z" fill="none" stroke="#131C2B" stroke-width="1.4" stroke-linejoin="round"/><path d="M200.0,228.9 L175.0,185.6 L225.0,185.6Z" fill="none" stroke="#131C2B" stroke-width="1.2" stroke-linejoin="round"/><line x1="200.0" y1="142.3" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="200.0" y1="142.3" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="171.1" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="225.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="250.0" y1="228.9" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="200.0" y1="257.7" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="200.0" y2="228.9" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="228.9" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><line x1="150.0" y1="171.1" x2="175.0" y2="185.6" stroke="#131C2B" stroke-width=".9"/><text x="200.0" y="206.9" font-family="Cinzel,serif" font-weight="700" font-size="18.5" fill="#131C2B" text-anchor="middle" dominant-baseline="middle">20</text><circle cx="103.0" cy="144.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜄</text><circle cx="297.0" cy="144.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="#8A6516"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="#8A6516"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="#8A6516"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="#8A6516"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Leather craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="#8A6516" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="#8A6516" stroke-width="0.6" /><defs><path id="cscrleather" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="8.973" fill="#8A6516"><textPath href="#cscrleather">LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ LEATHER ✦ TERRA ✦ HIDE ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="#8A6516" stroke-width="1.2" /><path d="M200.00,356.00 L64.90,122.00 L335.10,122.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><line x1="162.2" y1="290.5" x2="237.8" y2="290.5" stroke="#0F8C84" stroke-width="1.2"/><circle cx="200" cy="200" r="78.0" fill="none" stroke="#8A6516" stroke-width="1" /><path d="M164.2,145.2 Q188.5,155.0 200.0,155.0 Q211.5,155.0 223.7,150.1 Q235.8,145.2 238.7,159.6 Q241.6,174.0 248.2,181.2 Q254.8,188.5 249.9,201.4 Q245.0,214.4 247.9,228.0 Q250.8,241.6 236.9,248.2 Q223.1,254.8 211.5,250.5 Q200.0,246.2 188.5,250.5 Q176.9,254.8 163.1,248.2 Q149.2,241.6 152.1,228.0 Q155.0,214.4 150.1,201.4 Q145.2,188.5 151.8,181.2 Q158.4,174.0 161.3,159.6 Z" fill="none" stroke="#131C2B" stroke-width="1.4" stroke-linejoin="round"/><path d="M174.2,160.5 Q191.7,167.6 200.0,167.6 Q208.3,167.6 217.0,164.1 Q225.8,160.5 227.8,170.9 Q229.9,181.3 234.7,186.5 Q239.5,191.7 235.9,201.0 Q232.4,210.4 234.5,220.2 Q236.6,229.9 226.6,234.7 Q216.6,239.5 208.3,236.4 Q200.0,233.2 191.7,236.4 Q183.4,239.5 173.4,234.7 Q163.4,229.9 165.5,220.2 Q167.6,210.4 164.1,201.0 Q160.5,191.7 165.3,186.5 Q170.1,181.3 172.2,170.9 Z" fill="none" stroke="#131C2B" stroke-width="1" stroke-dasharray="4 3"/><circle cx="103.0" cy="144.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><text x="95.97" y="149.52" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜃</text><circle cx="297.0" cy="144.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><g transform="translate(289.21,137.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="#8A6516"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="#8A6516"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="#8A6516"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="#8A6516"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Print craft seal"><circle cx="200" cy="200" r="190" fill="none" stroke="#8A6516" stroke-width="2" /><circle cx="200" cy="200" r="184" fill="none" stroke="#8A6516" stroke-width="0.6" /><defs><path id="cscrprint" d="M 200,32.014999999999986 A 167.985,167.985 0 1 1 199.99,32.014999999999986"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="11.00" letter-spacing="9.692" fill="#8A6516"><textPath href="#cscrprint">PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ PRINT ✦ IGNIS ✦ LAYER ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="160" fill="none" stroke="#8A6516" stroke-width="1.2" /><path d="M200.00,44.00 L335.10,278.00 L64.90,278.00Z" fill="none" stroke="#0F8C84" stroke-width="1.6" stroke-linejoin="round" /><circle cx="200" cy="200" r="78.0" fill="none" stroke="#8A6516" stroke-width="1" /><path d="M200.0,148.1 L245.2,174.0 L200.0,200.0 L154.8,174.0Z" fill="none" stroke="#131C2B" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,174.0 L154.8,226.0 L200.0,251.9 L245.2,226.0 L245.2,174.0 M200.0,200.0 L200.0,251.9" fill="none" stroke="#131C2B" stroke-width="1.3" stroke-linejoin="round"/><path d="M154.8,184.4 L200.0,210.4 L245.2,184.4" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,194.8 L200.0,220.8 L245.2,194.8" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,205.2 L200.0,231.2 L245.2,205.2" fill="none" stroke="#131C2B" stroke-width=".6"/><path d="M154.8,215.6 L200.0,241.6 L245.2,215.6" fill="none" stroke="#131C2B" stroke-width=".6"/><circle cx="297.0" cy="256.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><text x="289.95" y="261.92" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="16" fill="#131C2B" >🜂</text><circle cx="103.0" cy="256.0" r="15" fill="#F4F2ED" stroke="#8A6516" stroke-width="1"/><g transform="translate(95.22,249.50) scale(0.1024) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,3.00 201.56,11.44 210.00,13.00 201.56,14.56 200.00,23.00 198.44,14.56 190.00,13.00 198.44,11.44" fill="#8A6516"/><polygon points="387.00,190.00 388.56,198.44 397.00,200.00 388.56,201.56 387.00,210.00 385.44,201.56 377.00,200.00 385.44,198.44" fill="#8A6516"/><polygon points="200.00,377.00 201.56,385.44 210.00,387.00 201.56,388.56 200.00,397.00 198.44,388.56 190.00,387.00 198.44,385.44" fill="#8A6516"/><polygon points="13.00,190.00 14.56,198.44 23.00,200.00 14.56,201.56 13.00,210.00 11.44,201.56 3.00,200.00 11.44,198.44" fill="#8A6516"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Kepler nest seal"><circle cx="200" cy="200" r="194" fill="none" stroke="#8A6516" stroke-width="2" /><circle cx="200" cy="200" r="178" fill="none" stroke="#8A6516" stroke-width="0.8" /><defs><path id="kpkp" d="M 200,17.4675 A 182.5325,182.5325 0 1 1 199.99,17.4675"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="9.50" letter-spacing="5.187" fill="#8A6516"><textPath href="#kpkp">HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ HARMONICES MUNDI ✦ PATIUN ✦ DICE · LEATHER · PRINT ✦ </textPath></text><circle cx="200" cy="200" r="176" fill="none" stroke="#8A6516" stroke-width="0.5" /><path d="M200.00,24.00 L337.60,90.27 L371.59,239.16 L276.36,358.57 L123.64,358.57 L28.41,239.16 L62.40,90.27Z" fill="none" stroke="#8A6516" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="24.00" r="3.2" fill="#131C2B"/><circle cx="337.60" cy="90.27" r="3.2" fill="#131C2B"/><circle cx="371.59" cy="239.16" r="3.2" fill="#131C2B"/><circle cx="276.36" cy="358.57" r="3.2" fill="#131C2B"/><circle cx="123.64" cy="358.57" r="3.2" fill="#131C2B"/><circle cx="28.41" cy="239.16" r="3.2" fill="#131C2B"/><circle cx="62.40" cy="90.27" r="3.2" fill="#131C2B"/><circle cx="200" cy="200" r="158.57052075082578" fill="none" stroke="#0F8C84" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,41.43 L337.33,120.71 L337.33,279.29 L200.00,358.57 L62.67,279.29 L62.67,120.71Z" fill="none" stroke="#0F8C84" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="41.43" r="2.4" fill="#131C2B"/><circle cx="337.33" cy="120.71" r="2.4" fill="#131C2B"/><circle cx="337.33" cy="279.29" r="2.4" fill="#131C2B"/><circle cx="200.00" cy="358.57" r="2.4" fill="#131C2B"/><circle cx="62.67" cy="279.29" r="2.4" fill="#131C2B"/><circle cx="62.67" cy="120.71" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="137.32609926154262" fill="none" stroke="#8A6516" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,62.67 L330.60,157.56 L280.72,311.10 L119.28,311.10 L69.40,157.56Z" fill="none" stroke="#8A6516" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="62.67" r="2.4" fill="#131C2B"/><circle cx="330.60" cy="157.56" r="2.4" fill="#131C2B"/><circle cx="280.72" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="119.28" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="69.40" cy="157.56" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="111.0991480738089" fill="none" stroke="#0F8C84" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,88.90 L311.10,200.00 L200.00,311.10 L88.90,200.00Z" fill="none" stroke="#0F8C84" stroke-width="1" stroke-linejoin="round" /><circle cx="200.00" cy="88.90" r="2.4" fill="#131C2B"/><circle cx="311.10" cy="200.00" r="2.4" fill="#131C2B"/><circle cx="200.00" cy="311.10" r="2.4" fill="#131C2B"/><circle cx="88.90" cy="200.00" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="78.55896098703865" fill="none" stroke="#8A6516" stroke-width="0.5" stroke-dasharray="1 3"/><path d="M200.00,121.44 L268.03,239.28 L131.97,239.28Z" fill="none" stroke="#8A6516" stroke-width="1.3" stroke-linejoin="round" /><circle cx="200.00" cy="121.44" r="2.4" fill="#131C2B"/><circle cx="268.03" cy="239.28" r="2.4" fill="#131C2B"/><circle cx="131.97" cy="239.28" r="2.4" fill="#131C2B"/><circle cx="200" cy="200" r="39.27948049351933" fill="none" stroke="#0F8C84" stroke-width="1.2" /><g transform="translate(177.67,181.34) scale(0.2938) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g><polygon points="200.00,-4.00 201.56,4.44 210.00,6.00 201.56,7.56 200.00,16.00 198.44,7.56 190.00,6.00 198.44,4.44" fill="#8A6516"/><polygon points="394.00,190.00 395.56,198.44 404.00,200.00 395.56,201.56 394.00,210.00 392.44,201.56 384.00,200.00 392.44,198.44" fill="#8A6516"/><polygon points="200.00,384.00 201.56,392.44 210.00,394.00 201.56,395.56 200.00,404.00 198.44,395.56 190.00,394.00 198.44,392.44" fill="#8A6516"/><polygon points="6.00,190.00 7.56,198.44 16.00,200.00 7.56,201.56 6.00,210.00 4.44,201.56 -4.00,200.00 4.44,198.44" fill="#8A6516"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Layered seal"><circle cx="200" cy="200" r="192" fill="none" stroke="#0F8C84" stroke-width="2" /><circle cx="200" cy="200" r="170" fill="none" stroke="#0F8C84" stroke-width="0.8" /><text x="240.34" y="30.28" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♈︎</text><text x="321.90" y="77.12" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♉︎</text><text x="368.88" y="158.05" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♊︎</text><text x="368.18" y="251.89" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♋︎</text><text x="322.60" y="331.42" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♌︎</text><text x="240.76" y="378.40" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♍︎</text><text x="146.57" y="379.73" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♎︎</text><text x="65.29" y="331.63" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♏︎</text><text x="19.64" y="251.75" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♐︎</text><text x="18.38" y="156.79" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♑︎</text><text x="65.43" y="76.91" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♒︎</text><text x="147.41" y="30.49" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="14" fill="#0F8C84" >♓︎</text><line x1="200.00" y1="30.00" x2="200.00" y2="8.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="285.00" y1="52.78" x2="296.00" y2="33.72" stroke="#0F8C84" stroke-width="0.8"/><line x1="347.22" y1="115.00" x2="366.28" y2="104.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="370.00" y1="200.00" x2="392.00" y2="200.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="347.22" y1="285.00" x2="366.28" y2="296.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="285.00" y1="347.22" x2="296.00" y2="366.28" stroke="#0F8C84" stroke-width="0.8"/><line x1="200.00" y1="370.00" x2="200.00" y2="392.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="115.00" y1="347.22" x2="104.00" y2="366.28" stroke="#0F8C84" stroke-width="0.8"/><line x1="52.78" y1="285.00" x2="33.72" y2="296.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="30.00" y1="200.00" x2="8.00" y2="200.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="52.78" y1="115.00" x2="33.72" y2="104.00" stroke="#0F8C84" stroke-width="0.8"/><line x1="115.00" y1="52.78" x2="104.00" y2="33.72" stroke="#0F8C84" stroke-width="0.8"/><defs><path id="ltf" d="M 200,49.379999999999995 A 150.62,150.62 0 1 1 199.99,49.379999999999995"/></defs><text font-family="Cinzel,serif" font-weight="700" font-size="12.00" letter-spacing="10.483" fill="#8A6516"><textPath href="#ltf">PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ PATIUN ✦ </textPath></text><circle cx="200" cy="200" r="140" fill="none" stroke="#8A6516" stroke-width="1" /><path d="M200.0,60.0 L340.0,200.0 L200.0,340.0 L60.0,200.0Z" fill="none" stroke="#0F8C84" stroke-width="1.2"/><path d="M299.0,101.0 L299.0,299.0 L101.0,299.0 L101.0,101.0Z" fill="none" stroke="#0F8C84" stroke-width="1.2"/><circle cx="200" cy="200" r="99" fill="none" stroke="#8A6516" stroke-width="0.9" /><text x="238.56" y="96.53" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="#8A6516" >🜂</text><text x="302.42" y="250.33" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="#8A6516" >🜄</text><text x="148.24" y="314.57" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="#8A6516" >🜁</text><text x="84.38" y="160.02" font-family="'Noto Sans Symbols','Segoe UI Symbol',serif" font-size="15" fill="#8A6516" >🜃</text><path d="M200.0,101.0 L285.7,249.5 L114.3,249.5Z" fill="none" stroke="#8A6516" stroke-width=".9"/><path d="M200.0,299.0 L114.3,150.5 L285.7,150.5Z" fill="none" stroke="#8A6516" stroke-width=".9"/><circle cx="200" cy="200" r="48" fill="none" stroke="#0F8C84" stroke-width="1.4" /><g transform="translate(173.67,178.00) scale(0.3465) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Small astrolabe"><circle cx="50" cy="56" r="40" fill="#F4F2ED" stroke="#8A6516" stroke-width="3"/><circle cx="50" cy="8" r="5" fill="none" stroke="#8A6516" stroke-width="2.4" /><path d="M36,18 Q50,10 64,18" fill="none" stroke="#8A6516" stroke-width="2.4"/><line x1="50.00" y1="24.00" x2="50.00" y2="16.00" stroke="#8A6516" stroke-width="2.2"/><line x1="66.00" y1="28.29" x2="70.00" y2="21.36" stroke="#8A6516" stroke-width="2.2"/><line x1="77.71" y1="40.00" x2="84.64" y2="36.00" stroke="#8A6516" stroke-width="2.2"/><line x1="82.00" y1="56.00" x2="90.00" y2="56.00" stroke="#8A6516" stroke-width="2.2"/><line x1="77.71" y1="72.00" x2="84.64" y2="76.00" stroke="#8A6516" stroke-width="2.2"/><line x1="66.00" y1="83.71" x2="70.00" y2="90.64" stroke="#8A6516" stroke-width="2.2"/><line x1="50.00" y1="88.00" x2="50.00" y2="96.00" stroke="#8A6516" stroke-width="2.2"/><line x1="34.00" y1="83.71" x2="30.00" y2="90.64" stroke="#8A6516" stroke-width="2.2"/><line x1="22.29" y1="72.00" x2="15.36" y2="76.00" stroke="#8A6516" stroke-width="2.2"/><line x1="18.00" y1="56.00" x2="10.00" y2="56.00" stroke="#8A6516" stroke-width="2.2"/><line x1="22.29" y1="40.00" x2="15.36" y2="36.00" stroke="#8A6516" stroke-width="2.2"/><line x1="34.00" y1="28.29" x2="30.00" y2="21.36" stroke="#8A6516" stroke-width="2.2"/><circle cx="50" cy="48" r="22" fill="none" stroke="#8A6516" stroke-width="2.2" /><line x1="73.1" y1="28.4" x2="26.9" y2="83.6" stroke="#0F8C84" stroke-width="4" stroke-linecap="round"/><circle cx="50" cy="56" r="7" fill="#F4F2ED" stroke="#8A6516" stroke-width="2"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Small layered seal"><circle cx="50" cy="50" r="46" fill="none" stroke="#0F8C84" stroke-width="3" /><circle cx="50" cy="50" r="36" fill="none" stroke="#8A6516" stroke-width="2" /><path d="M50.0,14.0 L86.0,50.0 L50.0,86.0 L14.0,50.0Z" fill="none" stroke="#0F8C84" stroke-width="2"/><path d="M75.5,24.5 L75.5,75.5 L24.5,75.5 L24.5,24.5Z" fill="none" stroke="#0F8C84" stroke-width="2"/><g transform="translate(35.64,38.00) scale(0.1890) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Small tome medallion"><rect x="8" y="4" width="84" height="92" rx="5" fill="#1E2348"/><rect x="15" y="11" width="70" height="78" fill="none" stroke="#8A6516" stroke-width="2.6"/><path transform="translate(15,11) rotate(90)" d="M0,-14 A14,14 0 0 1 14,0" fill="none" stroke="#8A6516" stroke-width="2"/><path transform="translate(85,11) rotate(180)" d="M0,-14 A14,14 0 0 1 14,0" fill="none" stroke="#8A6516" stroke-width="2"/><path transform="translate(85,89) rotate(270)" d="M0,-14 A14,14 0 0 1 14,0" fill="none" stroke="#8A6516" stroke-width="2"/><path transform="translate(15,89) rotate(0)" d="M0,-14 A14,14 0 0 1 14,0" fill="none" stroke="#8A6516" stroke-width="2"/><circle cx="50" cy="50" r="20" fill="none" stroke="#8A6516" stroke-width="2.4" /><g transform="translate(39.22,41.00) scale(0.1417) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Small transmutation seal"><circle cx="50" cy="50" r="47" fill="none" stroke="#8A6516" stroke-width="3" /><path d="M50.00,14.00 L85.10,58.01 L34.38,82.43 L21.85,27.55 L78.15,27.55 L65.62,82.43 L14.90,58.01 L50.00,14.00" fill="none" stroke="#0F8C84" stroke-width="2.2" stroke-linejoin="round"/><circle cx="50.00" cy="14.00" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="78.15" cy="27.55" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="85.10" cy="58.01" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="65.62" cy="82.43" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="34.38" cy="82.43" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="14.90" cy="58.01" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><circle cx="21.85" cy="27.55" r="5.2" fill="#F4F2ED" stroke="#8A6516" stroke-width="1.8"/><g transform="translate(36.83,39.00) scale(0.1732) translate(-20,-33)"><g fill="none" stroke="#0F8C84" stroke-width="7.2" stroke-linejoin="round">
|
||||||
|
<path d="M31,46.75 A54.3,54.3 0 1 1 31,146.25 A53.4,53.4 0 0 0 31,46.75 Z"/><circle cx="134" cy="96.5" r="26.9"/></g><circle cx="134" cy="96.5" r="10.3" fill="#0F8C84"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 400"><line x1="565.0" y1="34.9" x2="578.5" y2="43.6" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="591.7" y1="55.4" x2="605.3" y2="72.1" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-dasharray="2 5" stroke-linecap="round"/><line x1="582.8" y1="56.8" x2="567.6" y2="96.5" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="559.7" y1="112.7" x2="557.7" y2="116.1" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="552.6" y1="132.8" x2="552.2" y2="140.5" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="553.1" y1="158.4" x2="561.7" y2="216.6" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="567.7" y1="233.2" x2="580.0" y2="253.6" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="588.7" y1="269.4" x2="603.1" y2="298.0" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="601.1" y1="312.7" x2="584.4" y2="330.7" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="570.7" y1="342.2" x2="535.2" y2="365.1" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="519.1" y1="367.2" x2="497.5" y2="360.0" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="490.2" y1="348.3" x2="490.0" y2="349.4" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><line x1="492.8" y1="331.6" x2="495.0" y2="319.5" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-dasharray="2 5" stroke-linecap="round"/><line x1="505.2" y1="307.9" x2="495.2" y2="311.0" stroke="#0F8C84" stroke-width="1.2" opacity="0.8" stroke-linecap="round"/><polygon points="557.4,23.0 558.5,28.9 564.4,30.0 558.5,31.1 557.4,37.0 556.3,31.1 550.4,30.0 556.3,28.9" fill="#6A2FE0"/><polygon points="586.1,41.4 587.2,47.3 593.1,48.4 587.2,49.6 586.1,55.4 584.9,49.6 579.1,48.4 584.9,47.3" fill="#6A2FE0"/><circle cx="611.0" cy="79.1" r="2.4" fill="#131C2B"/><circle cx="564.3" cy="104.9" r="2.4" fill="#131C2B"/><polygon points="553.1,110.8 555.2,121.7 566.1,123.8 555.2,125.9 553.1,136.8 551.0,125.9 540.1,123.8 551.0,121.7" fill="#8A6516"/><circle cx="551.8" cy="149.5" r="2.4" fill="#131C2B"/><polygon points="563.0,218.5 564.2,224.4 570.0,225.5 564.2,226.7 563.0,232.5 561.9,226.7 556.0,225.5 561.9,224.4" fill="#6A2FE0"/><circle cx="584.6" cy="261.3" r="2.4" fill="#131C2B"/><circle cx="607.2" cy="306.1" r="2.4" fill="#131C2B"/><circle cx="578.3" cy="337.3" r="2.4" fill="#131C2B"/><polygon points="527.7,363.0 528.8,368.9 534.7,370.0 528.8,371.1 527.7,377.0 526.6,371.1 520.7,370.0 526.6,368.9" fill="#6A2FE0"/><circle cx="489.0" cy="357.2" r="2.4" fill="#131C2B"/><circle cx="491.3" cy="340.5" r="2.4" fill="#131C2B"/><circle cx="503.8" cy="308.3" r="2.4" fill="#131C2B"/><polygon points="496.6,303.6 497.7,309.5 503.6,310.6 497.7,311.7 496.6,317.6 495.5,311.7 489.6,310.6 495.5,309.5" fill="#6A2FE0"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
@@ -18,17 +18,17 @@ const left = starPath({ x1: 540, x2: 76, y, steps: 8, seed: s, openEnds: false,
|
|||||||
const right = starPath({ x1: 660, x2: 1124, y, steps: 8, seed: s + 1, openEnds: false, dot: 2, star: 4.5 });
|
const right = starPath({ x1: 660, x2: 1124, y, steps: 8, seed: s + 1, openEnds: false, dot: 2, star: 4.5 });
|
||||||
---
|
---
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${W} 40`} aria-hidden="true" class={className} width="100%" style="display: block; width: 100%; height: auto">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${W} 40`} aria-hidden="true" class={className} width="100%" style="display: block; width: 100%; height: auto">
|
||||||
<line x1="40" y1={y} x2="566" y2={y} stroke="#C9A24A" stroke-width="1" />
|
<line x1="40" y1={y} x2="566" y2={y} style="stroke:var(--gk-gold)" stroke-width="1" />
|
||||||
<line x1="634" y1={y} x2="1160" y2={y} stroke="#C9A24A" stroke-width="1" />
|
<line x1="634" y1={y} x2="1160" y2={y} style="stroke:var(--gk-gold)" stroke-width="1" />
|
||||||
<polygon points={starPoints(600, y, 14)} fill="#C9A24A" />
|
<polygon points={starPoints(600, y, 14)} style="fill:var(--gk-gold)" />
|
||||||
<polygon points={starPoints(40, y, 5)} fill="#C9A24A" />
|
<polygon points={starPoints(40, y, 5)} style="fill:var(--gk-gold)" />
|
||||||
<polygon points={starPoints(1160, y, 5)} fill="#C9A24A" />
|
<polygon points={starPoints(1160, y, 5)} style="fill:var(--gk-gold)" />
|
||||||
{
|
{
|
||||||
[left, right].map((p) => (
|
[left, right].map((p) => (
|
||||||
<>
|
<>
|
||||||
{p.links.map((l) => <line {...l} stroke="#2BC2B7" stroke-width="1" stroke-dasharray="1.5 4" stroke-linecap="round" />)}
|
{p.links.map((l) => <line {...l} style="stroke:var(--gk-orn-link)" stroke-width="1" stroke-dasharray="1.5 4" stroke-linecap="round" />)}
|
||||||
{p.marks.map((m) =>
|
{p.marks.map((m) =>
|
||||||
m.kind === "dot" ? <circle cx={m.x} cy={m.y} r={m.r} fill="#F4F2ED" opacity="0.85" /> : <polygon points={starPoints(m.x, m.y, m.r)} fill="#9A70F5" />,
|
m.kind === "dot" ? <circle cx={m.x} cy={m.y} r={m.r} style="fill:var(--gk-orn-dot)" opacity="0.85" /> : <polygon points={starPoints(m.x, m.y, m.r)} style="fill:var(--gk-violet)" />,
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
))
|
))
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
* alternating sides. Never more than two, and a section with a photo gets no
|
* alternating sides. Never more than two, and a section with a photo gets no
|
||||||
* seal: place this in the page background, not in a photo section.
|
* seal: place this in the page background, not in a photo section.
|
||||||
*/
|
*/
|
||||||
|
import Motif from "./Motif.astro";
|
||||||
import { pageSeals, seals, type PageFamily, type SealName } from "./seals.ts";
|
import { pageSeals, seals, type PageFamily, type SealName } from "./seals.ts";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -18,8 +19,8 @@ const first = seal ?? pageSeals[family];
|
|||||||
const other = second === false ? null : (second ?? first);
|
const other = second === false ? null : (second ?? first);
|
||||||
---
|
---
|
||||||
<div class="gk-edge-seals" aria-hidden="true">
|
<div class="gk-edge-seals" aria-hidden="true">
|
||||||
<img src={seals[first]} alt="" class="seal left" width="620" height="620" loading="lazy" decoding="async" />
|
<Motif src={seals[first]} alt="" class="seal left" width="620" height="620" loading="lazy" decoding="async" />
|
||||||
{other && <img src={seals[other]} alt="" class="seal right" width="560" height="560" loading="lazy" decoding="async" />}
|
{other && <Motif src={seals[other]} alt="" class="seal right" width="560" height="560" loading="lazy" decoding="async" />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -39,6 +39,6 @@ const common = { id, name, class: "gk-field", "aria-describedby": describedBy, "
|
|||||||
<style>
|
<style>
|
||||||
.error {
|
.error {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #f0857a;
|
color: var(--gk-danger);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -18,9 +18,9 @@ const corners = [
|
|||||||
{
|
{
|
||||||
corners.map((c) => (
|
corners.map((c) => (
|
||||||
<svg aria-hidden="true" class="gk-corner" width={size} height={size} viewBox="0 0 38 38" style={`${c.pos};transform:${c.t}`}>
|
<svg aria-hidden="true" class="gk-corner" width={size} height={size} viewBox="0 0 38 38" style={`${c.pos};transform:${c.t}`}>
|
||||||
<path d="M2 30 V8 a6 6 0 0 1 6 -6 H30" fill="none" stroke="#C9A24A" stroke-width="1.4" />
|
<path d="M2 30 V8 a6 6 0 0 1 6 -6 H30" fill="none" style="stroke:var(--gk-gold)" stroke-width="1.4" />
|
||||||
<path d="M7 30 V12 a5 5 0 0 1 5 -5 H30" fill="none" stroke="#C9A24A" stroke-width="0.6" opacity="0.7" />
|
<path d="M7 30 V12 a5 5 0 0 1 5 -5 H30" fill="none" style="stroke:var(--gk-gold)" stroke-width="0.6" opacity="0.7" />
|
||||||
<polygon points="2,36 2.6,33.6 5,33 2.6,32.4 2,30 1.4,32.4 -1,33 1.4,33.6" fill="#C9A24A" />
|
<polygon points="2,36 2.6,33.6 5,33 2.6,32.4 2,30 1.4,32.4 -1,33 1.4,33.6" style="fill:var(--gk-gold)" />
|
||||||
</svg>
|
</svg>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,6 @@ import Star from "./Star.astro";
|
|||||||
.line {
|
.line {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.7) 30%, rgba(201, 162, 74, 0.7) 70%, transparent);
|
background: linear-gradient(90deg, transparent, rgba(var(--gk-gold-rgb), 0.7) 30%, rgba(var(--gk-gold-rgb), 0.7) 70%, transparent);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* A motif image that follows the site's light or dark mode: the dark
|
||||||
|
* original, or its light recolor. Both are in the page and CSS shows one
|
||||||
|
* (base.css); the hidden one is lazy, so it never loads. Pass `foil` for a
|
||||||
|
* large standalone seal.
|
||||||
|
*/
|
||||||
|
import type { HTMLAttributes } from "astro/types";
|
||||||
|
import { motifSources } from "./seals.ts";
|
||||||
|
|
||||||
|
interface Props extends Omit<HTMLAttributes<"img">, "src"> {
|
||||||
|
src: string;
|
||||||
|
foil?: boolean;
|
||||||
|
}
|
||||||
|
const { src, foil, class: className, loading = "lazy", ...rest } = Astro.props;
|
||||||
|
const v = motifSources(src, { foil });
|
||||||
|
---
|
||||||
|
{
|
||||||
|
v.light === v.dark ? (
|
||||||
|
<img src={v.dark} class={className} loading={loading} {...rest} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<img src={v.dark} class:list={[className, "gk-motif-dark"]} loading={loading} {...rest} />
|
||||||
|
<img src={v.light} class:list={[className, "gk-motif-light"]} loading={loading} {...rest} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -35,8 +35,32 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="color-scheme" content="dark" />
|
<meta name="color-scheme" content="dark light" />
|
||||||
<meta name="theme-color" content="#0E1522" />
|
<meta name="theme-color" content="#0E1522" />
|
||||||
|
<!-- Before first paint: the visitor's saved mode, else the device's. Without script the site stays dark. -->
|
||||||
|
<script is:inline>
|
||||||
|
(() => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
const device = matchMedia("(prefers-color-scheme: light)");
|
||||||
|
const saved = () => {
|
||||||
|
try {
|
||||||
|
const t = localStorage.getItem("gk-theme");
|
||||||
|
return t === "light" || t === "dark" ? t : null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const apply = () => {
|
||||||
|
const t = saved() ?? (device.matches ? "light" : "dark");
|
||||||
|
root.dataset.theme = t;
|
||||||
|
document.querySelector('meta[name="theme-color"]')?.setAttribute("content", t === "light" ? "#F4F2ED" : "#0E1522");
|
||||||
|
};
|
||||||
|
apply();
|
||||||
|
device.addEventListener("change", apply);
|
||||||
|
window.addEventListener("storage", apply);
|
||||||
|
window.gkApplyTheme = apply;
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<link rel="icon" href="/favicon.ico" sizes="48x48" />
|
<link rel="icon" href="/favicon.ico" sizes="48x48" />
|
||||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
@@ -64,10 +88,12 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
|
|||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-x: clip;
|
overflow-x: clip;
|
||||||
/* The page's nebula: violet from the top right, teal from the bottom left. */
|
/* The page's nebula: violet from the top right, teal from the bottom left.
|
||||||
|
In light mode it is the dawn wash over faint star chart lines. */
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at 100% 0%, rgba(106, 47, 224, 0.28), transparent 50%),
|
radial-gradient(ellipse at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 50%),
|
||||||
radial-gradient(ellipse at 0% 100%, rgba(20, 163, 154, 0.2), transparent 55%),
|
radial-gradient(ellipse at 0% 100%, rgba(var(--gk-teal-deep-rgb), calc(0.2 * var(--gk-wash))), transparent 55%),
|
||||||
|
var(--gk-chart),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
.gk-main {
|
.gk-main {
|
||||||
|
|||||||
@@ -1,12 +1,15 @@
|
|||||||
---
|
---
|
||||||
/** One seal as an image, for seal marks, medallions and placeholder art. */
|
/** One seal as an image, for seal marks, medallions and placeholder art. */
|
||||||
|
import Motif from "./Motif.astro";
|
||||||
import { seals, type SealName } from "./seals.ts";
|
import { seals, type SealName } from "./seals.ts";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
name: SealName;
|
name: SealName;
|
||||||
size?: number;
|
size?: number;
|
||||||
class?: string;
|
class?: string;
|
||||||
|
/** Gold foil, for a seal standing alone at 120px or more. */
|
||||||
|
foil?: boolean;
|
||||||
}
|
}
|
||||||
const { name, size = 40, class: className } = Astro.props;
|
const { name, size = 40, class: className, foil } = Astro.props;
|
||||||
---
|
---
|
||||||
<img src={seals[name]} alt="" aria-hidden="true" width={size} height={size} class={className} loading="lazy" decoding="async" />
|
<Motif src={seals[name]} foil={foil} alt="" aria-hidden="true" width={size} height={size} class={className} loading="lazy" decoding="async" />
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const H = `h${level}` as "h1" | "h2" | "h3";
|
|||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -8,7 +8,9 @@
|
|||||||
*/
|
*/
|
||||||
import monogram from "../assets/brand/gk-monogram.svg?url";
|
import monogram from "../assets/brand/gk-monogram.svg?url";
|
||||||
import Divider from "./Divider.astro";
|
import Divider from "./Divider.astro";
|
||||||
|
import Motif from "./Motif.astro";
|
||||||
import Star from "./Star.astro";
|
import Star from "./Star.astro";
|
||||||
|
import ThemeToggle from "./ThemeToggle.astro";
|
||||||
import { main, tail, world, type NavKey, type StoreNav } from "./nav.ts";
|
import { main, tail, world, type NavKey, type StoreNav } from "./nav.ts";
|
||||||
import { filamentBanner } from "./seals.ts";
|
import { filamentBanner } from "./seals.ts";
|
||||||
|
|
||||||
@@ -22,11 +24,15 @@ interface Props {
|
|||||||
const { current, store, hero = Astro.slots.has("default") } = Astro.props;
|
const { current, store, hero = Astro.slots.has("default") } = Astro.props;
|
||||||
const inWorld = world.some((w) => w.key === current);
|
const inWorld = world.some((w) => w.key === current);
|
||||||
const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
||||||
|
// Light mode's atlas marks: right ascension hours along the top of the hero,
|
||||||
|
// declination down its right side.
|
||||||
|
const hours = Array.from({ length: 12 }, (_, i) => ({ at: (i / 12) * 100, label: `${i * 2}h` }));
|
||||||
|
const decs = [60, 30, 0, -30].map((d, i) => ({ at: (i / 4) * 100, label: `${d > 0 ? "+" : d < 0 ? "\u2212" : "+"}${Math.abs(d)}°` }));
|
||||||
---
|
---
|
||||||
<header class="gk-site-header">
|
<header class="gk-site-header">
|
||||||
<div class="decor" aria-hidden="true">
|
<div class="decor" aria-hidden="true">
|
||||||
<div class="nebula"></div>
|
<div class="nebula"></div>
|
||||||
<img src={filamentBanner} alt="" class="banner" />
|
<Motif src={filamentBanner} alt="" class="banner" />
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
store ? (
|
store ? (
|
||||||
@@ -38,10 +44,11 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
<span class="store-tag">a Patiun LLC workshop</span>
|
<span class="store-tag">a Patiun LLC workshop</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="links">
|
<ul class="links store-links">
|
||||||
{store.links.map((l) => <li><a href={l.href} aria-current={l.href === store.current ? "page" : undefined}>{l.label}</a></li>)}
|
{store.links.map((l) => <li><a href={l.href} aria-current={l.href === store.current ? "page" : undefined}>{l.label}</a></li>)}
|
||||||
<li class="sep" aria-hidden="true"><Star size={12} /></li>
|
<li class="sep" aria-hidden="true"><Star size={12} /></li>
|
||||||
<li><a href="/" class="dim">Back to GregKilmer.com</a></li>
|
<li><a href="/" class="dim">Back to GregKilmer.com</a></li>
|
||||||
|
<li class="mode"><ThemeToggle /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
) : (
|
) : (
|
||||||
@@ -75,6 +82,7 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
{tail.map((l) => <li><a href={l.href} aria-current={aria(l.key)} class="dim">{l.label}</a></li>)}
|
{tail.map((l) => <li><a href={l.href} aria-current={aria(l.key)} class="dim">{l.label}</a></li>)}
|
||||||
|
<li class="mode"><ThemeToggle /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
@@ -82,6 +90,10 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
{
|
{
|
||||||
hero && (
|
hero && (
|
||||||
<div class="gk-wrap hero">
|
<div class="gk-wrap hero">
|
||||||
|
<div class="atlas" aria-hidden="true">
|
||||||
|
<span class="ra">{hours.map((h) => <span style={`left:${h.at}%`}>{h.label}</span>)}</span>
|
||||||
|
<span class="dec">{decs.map((d) => <span style={`top:${d.at}%`}>{d.label}</span>)}</span>
|
||||||
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -109,8 +121,8 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
|
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 70%),
|
||||||
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%);
|
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(var(--gk-teal-deep-rgb), calc(0.18 * var(--gk-wash))), transparent 70%);
|
||||||
-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
|
-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
|
||||||
mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
|
mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
|
||||||
}
|
}
|
||||||
@@ -133,7 +145,7 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
gap: 16px;
|
gap: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
border-bottom: 1px solid rgba(201, 162, 74, 0.35);
|
border-bottom: 1px solid rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.brand {
|
.brand {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -150,7 +162,7 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
}
|
}
|
||||||
.brand:hover .mono,
|
.brand:hover .mono,
|
||||||
.brand:focus-visible .mono {
|
.brand:focus-visible .mono {
|
||||||
filter: drop-shadow(0 0 6px rgba(216, 179, 90, 0.7)) drop-shadow(0 0 16px rgba(43, 194, 183, 0.45));
|
filter: drop-shadow(0 0 6px rgba(var(--gk-gold-bright-rgb), 0.7)) drop-shadow(0 0 16px rgba(var(--gk-teal-rgb), 0.45));
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.mono {
|
.mono {
|
||||||
@@ -197,6 +209,10 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
/* The Store's longer links fit one row at desktop width. */
|
||||||
|
.store-links {
|
||||||
|
column-gap: 14px;
|
||||||
|
}
|
||||||
.links a {
|
.links a {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -215,7 +231,8 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
.links a[aria-current] {
|
.links a[aria-current] {
|
||||||
color: var(--gk-teal-bright);
|
color: var(--gk-teal-bright);
|
||||||
}
|
}
|
||||||
.sep {
|
.sep,
|
||||||
|
.mode {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.mw {
|
.mw {
|
||||||
@@ -253,7 +270,7 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
}
|
}
|
||||||
.mw-menu a:hover,
|
.mw-menu a:hover,
|
||||||
.mw-menu a:focus-visible {
|
.mw-menu a:focus-visible {
|
||||||
background: rgba(201, 162, 74, 0.1);
|
background: rgba(var(--gk-gold-rgb), 0.1);
|
||||||
}
|
}
|
||||||
.mw-name {
|
.mw-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -276,6 +293,49 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.atlas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .atlas {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 9px;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--gk-muted);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.ra {
|
||||||
|
position: absolute;
|
||||||
|
left: var(--gk-gutter);
|
||||||
|
right: var(--gk-gutter);
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.ra span {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.ra span:first-child {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
/* Declination sits in the right gutter, clear of the hero's content. */
|
||||||
|
.dec {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 44px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
.dec span {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.dec,
|
||||||
|
.ra span:nth-child(even) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.divider {
|
.divider {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-bottom: 24px;
|
padding-bottom: 24px;
|
||||||
|
|||||||
@@ -11,5 +11,5 @@ const { size = 10, tone = "gold", class: className } = Astro.props;
|
|||||||
const fill = { gold: "var(--gk-gold)", violet: "var(--gk-violet)", teal: "var(--gk-teal-bright)", starlight: "var(--gk-starlight)", outline: "none" }[tone];
|
const fill = { gold: "var(--gk-gold)", violet: "var(--gk-violet)", teal: "var(--gk-teal-bright)", starlight: "var(--gk-starlight)", outline: "none" }[tone];
|
||||||
---
|
---
|
||||||
<svg aria-hidden="true" class={className} width={size} height={size} viewBox="0 0 20 20" style="flex: none">
|
<svg aria-hidden="true" class={className} width={size} height={size} viewBox="0 0 20 20" style="flex: none">
|
||||||
<polygon points={starPoints(10, 10, 10)} fill={fill} stroke={tone === "outline" ? "#4A5F6B" : undefined} stroke-width={tone === "outline" ? 1 : undefined} />
|
<polygon points={starPoints(10, 10, 10)} fill={fill} stroke={tone === "outline" ? "var(--gk-orn-dim)" : undefined} stroke-width={tone === "outline" ? 1 : undefined} />
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -31,16 +31,25 @@ const { seal = "transmutation", ratio = "4 / 3", src, alt = "", class: className
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
|
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 70%),
|
||||||
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%),
|
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(var(--gk-teal-deep-rgb), calc(0.18 * var(--gk-wash))), transparent 70%),
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
|
/* Light mode: a morning sky tile, a touch cooler than the page. */
|
||||||
|
:global(:root[data-theme="light"]) .gk-art {
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.16), transparent 70%),
|
||||||
|
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(15, 140, 132, 0.14), transparent 70%),
|
||||||
|
repeating-linear-gradient(0deg, rgba(19, 28, 43, 0.06) 0 1px, transparent 1px 40px),
|
||||||
|
repeating-linear-gradient(90deg, rgba(19, 28, 43, 0.06) 0 1px, transparent 1px 40px),
|
||||||
|
#e9e6ee;
|
||||||
|
}
|
||||||
.mat {
|
.mat {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 10px;
|
inset: 10px;
|
||||||
border: 1px solid rgba(201, 162, 74, 0.45);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.45);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,13 +25,13 @@ const bottom = Math.max(...p.marks.map((m) => m.y + m.r)) + 2;
|
|||||||
const span = bottom - top;
|
const span = bottom - top;
|
||||||
---
|
---
|
||||||
<svg aria-hidden="true" class={className} viewBox={`-6 ${top} ${width + 12} ${span}`} width="100%" height={height ?? Math.ceil(span)} preserveAspectRatio="xMidYMid meet" style="display: block">
|
<svg aria-hidden="true" class={className} viewBox={`-6 ${top} ${width + 12} ${span}`} width="100%" height={height ?? Math.ceil(span)} preserveAspectRatio="xMidYMid meet" style="display: block">
|
||||||
{p.links.map((l) => <line {...l} stroke="#2BC2B7" stroke-width="1" stroke-dasharray="1.5 4" stroke-linecap="round" opacity="0.7" />)}
|
{p.links.map((l) => <line {...l} style="stroke:var(--gk-orn-link)" stroke-width="1" stroke-dasharray="1.5 4" stroke-linecap="round" opacity="0.7" />)}
|
||||||
{
|
{
|
||||||
p.marks.map((m) =>
|
p.marks.map((m) =>
|
||||||
m.kind === "dot" ? (
|
m.kind === "dot" ? (
|
||||||
<circle cx={m.x} cy={m.y} r={m.r} fill="#F4F2ED" opacity="0.85" />
|
<circle cx={m.x} cy={m.y} r={m.r} style="fill:var(--gk-orn-dot)" opacity="0.85" />
|
||||||
) : (
|
) : (
|
||||||
<polygon points={starPoints(m.x, m.y, m.r * (m.gold ? 0.75 : 1))} fill={m.gold ? "#C9A24A" : "#9A70F5"} />
|
<polygon points={starPoints(m.x, m.y, m.r * (m.gold ? 0.75 : 1))} fill={m.gold ? "var(--gk-gold)" : "var(--gk-violet)"} />
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* Swaps between dark and light mode. Shows the moon in dark mode and the sun
|
||||||
|
* in light. Until it is pressed the site follows the device setting; a press
|
||||||
|
* saves the choice in this browser (PageShell's head script reads it back).
|
||||||
|
*/
|
||||||
|
import Icon from "./Icon.astro";
|
||||||
|
---
|
||||||
|
<button type="button" class="gk-theme-toggle" data-theme-toggle aria-label="Switch to light mode" title="Switch to light mode">
|
||||||
|
<Icon name="moon" size={20} class="moon" />
|
||||||
|
<Icon name="sun" size={20} class="sun" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
for (const b of document.querySelectorAll<HTMLButtonElement>("[data-theme-toggle]")) {
|
||||||
|
const label = () => {
|
||||||
|
const next = document.documentElement.dataset.theme === "light" ? "dark" : "light";
|
||||||
|
b.setAttribute("aria-label", `Switch to ${next} mode`);
|
||||||
|
b.title = `Switch to ${next} mode`;
|
||||||
|
};
|
||||||
|
label();
|
||||||
|
new MutationObserver(label).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
|
||||||
|
b.addEventListener("click", () => {
|
||||||
|
const next = document.documentElement.dataset.theme === "light" ? "dark" : "light";
|
||||||
|
try {
|
||||||
|
localStorage.setItem("gk-theme", next);
|
||||||
|
} catch {
|
||||||
|
// Private browsing can refuse storage; the swap still holds for this page.
|
||||||
|
}
|
||||||
|
document.documentElement.dataset.theme = next;
|
||||||
|
(window as { gkApplyTheme?: () => void }).gkApplyTheme?.();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.gk-theme-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
margin: 0 -10px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--gk-soft);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color var(--gk-ease), background var(--gk-ease);
|
||||||
|
}
|
||||||
|
.gk-theme-toggle:hover {
|
||||||
|
color: var(--gk-teal-bright);
|
||||||
|
background: var(--gk-gold-tint);
|
||||||
|
}
|
||||||
|
.gk-theme-toggle:focus-visible {
|
||||||
|
outline: 2px solid var(--gk-teal-bright);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .gk-theme-toggle :global(.moon),
|
||||||
|
:global(:root:not([data-theme="light"])) .gk-theme-toggle :global(.sun) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -16,7 +16,7 @@ const marks = ringTicks(size, size >= 60 ? 48 : 32, 4);
|
|||||||
---
|
---
|
||||||
<span class:list={["gk-ring", { medallion }, className]} style={`width:${size}px;height:${size}px`}>
|
<span class:list={["gk-ring", { medallion }, className]} style={`width:${size}px;height:${size}px`}>
|
||||||
<svg aria-hidden="true" width={size} height={size} viewBox={`0 0 ${size} ${size}`} class="ticks">
|
<svg aria-hidden="true" width={size} height={size} viewBox={`0 0 ${size} ${size}`} class="ticks">
|
||||||
{marks.map((m) => <line x1={m.x1} y1={m.y1} x2={m.x2} y2={m.y2} stroke="#C9A24A" stroke-width="0.9" opacity={m.long ? 0.85 : 0.5} />)}
|
{marks.map((m) => <line x1={m.x1} y1={m.y1} x2={m.x2} y2={m.y2} style="stroke:var(--gk-gold)" stroke-width="0.9" opacity={m.long ? 0.85 : 0.5} />)}
|
||||||
</svg>
|
</svg>
|
||||||
<span class="inner"><slot /></span>
|
<span class="inner"><slot /></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -35,7 +35,7 @@ const marks = ringTicks(size, size >= 60 ? 48 : 32, 4);
|
|||||||
}
|
}
|
||||||
.medallion {
|
.medallion {
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.55), 0 0 18px rgba(201, 162, 74, 0.25);
|
box-shadow: 0 0 0 1px rgba(var(--gk-gold-rgb), 0.55), 0 0 18px rgba(var(--gk-gold-rgb), 0.25);
|
||||||
}
|
}
|
||||||
.ticks {
|
.ticks {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const lit = (x: number) => value === undefined || x <= width * value + 0.6;
|
|||||||
y1="0"
|
y1="0"
|
||||||
x2={m.x}
|
x2={m.x}
|
||||||
y2={m.long ? height : height / 2}
|
y2={m.long ? height : height / 2}
|
||||||
stroke={lit(m.x) ? "var(--gk-gold)" : "#4A5F6B"}
|
stroke={lit(m.x) ? "var(--gk-gold)" : "var(--gk-orn-dim)"}
|
||||||
stroke-width="1"
|
stroke-width="1"
|
||||||
opacity={m.long ? 0.8 : 0.45}
|
opacity={m.long ? 0.8 : 0.45}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -46,6 +46,27 @@ export type SealName = keyof typeof seals;
|
|||||||
|
|
||||||
export { filamentBanner };
|
export { filamentBanner };
|
||||||
|
|
||||||
|
// Light mode and foil versions, written by scripts/light-motifs.mjs.
|
||||||
|
const byFile = (m: Record<string, string>) => Object.fromEntries(Object.entries(m).map(([p, u]) => [p.slice(p.lastIndexOf("/") + 1), u]));
|
||||||
|
const darkFiles = byFile(import.meta.glob<string>("../assets/motifs/*.svg", { query: "?url", import: "default", eager: true }));
|
||||||
|
const lightFiles = byFile(import.meta.glob<string>("../assets/motifs/light/*.svg", { query: "?url", import: "default", eager: true }));
|
||||||
|
const foilFiles = byFile(import.meta.glob<string>("../assets/motifs/foil/*.svg", { query: "?url", import: "default", eager: true }));
|
||||||
|
const foilLightFiles = byFile(import.meta.glob<string>("../assets/motifs/foil-light/*.svg", { query: "?url", import: "default", eager: true }));
|
||||||
|
const fileOf = Object.fromEntries(Object.entries(darkFiles).map(([f, u]) => [u, f]));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A motif's image for each mode. Foil is only for a seal standing alone at
|
||||||
|
* 120px or more and half opacity or more; smaller or fainter seals stay flat.
|
||||||
|
*/
|
||||||
|
export function motifSources(url: string, { foil = false } = {}): { dark: string; light: string } {
|
||||||
|
const f = fileOf[url];
|
||||||
|
if (!f) return { dark: url, light: url };
|
||||||
|
return {
|
||||||
|
dark: (foil && foilFiles[f]) || url,
|
||||||
|
light: (foil && foilLightFiles[f]) || lightFiles[f] || url,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/** Each page family's edge seal. A craft page uses its own craft seal. */
|
/** Each page family's edge seal. A craft page uses its own craft seal. */
|
||||||
export const pageSeals = {
|
export const pageSeals = {
|
||||||
landing: "transmutation-star-paths",
|
landing: "transmutation-star-paths",
|
||||||
|
|||||||
@@ -146,7 +146,8 @@ export function ringTicks(size: number, count = 48, major = 4): { x1: number; y1
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Constellation dust: sparse specks for a page background as CSS
|
* Constellation dust: sparse specks for a page background as CSS
|
||||||
* radial-gradients, about one in five gold. Static by design.
|
* radial-gradients, about one in five gold and, where the theme sets an
|
||||||
|
* accent (violet in light mode), one in five of the rest in it. Static by design.
|
||||||
*/
|
*/
|
||||||
export function dust(count: number, seed: number): string {
|
export function dust(count: number, seed: number): string {
|
||||||
const rand = seeded(seed);
|
const rand = seeded(seed);
|
||||||
@@ -155,7 +156,8 @@ export function dust(count: number, seed: number): string {
|
|||||||
const size = [1, 1, 1.2, 1.6][Math.floor(rand() * 4)];
|
const size = [1, 1, 1.2, 1.6][Math.floor(rand() * 4)];
|
||||||
const alpha = [0.25, 0.35, 0.6][Math.floor(rand() * 3)];
|
const alpha = [0.25, 0.35, 0.6][Math.floor(rand() * 3)];
|
||||||
const gold = rand() < 0.2;
|
const gold = rand() < 0.2;
|
||||||
const color = gold ? `rgba(216,179,90,${alpha})` : `rgba(236,233,226,${alpha})`;
|
const ink = gold ? "--gk-gold-bright-rgb" : i % 4 === 1 ? "--gk-dust-accent-rgb" : "--gk-text-rgb";
|
||||||
|
const color = `rgba(var(${ink}), ${alpha})`;
|
||||||
specks.push(`radial-gradient(${size}px ${size}px at ${r1(rand() * 100)}% ${r1(rand() * 100)}%, ${color}, transparent)`);
|
specks.push(`radial-gradient(${size}px ${size}px at ${r1(rand() * 100)}% ${r1(rand() * 100)}%, ${color}, transparent)`);
|
||||||
}
|
}
|
||||||
return specks.join(", ");
|
return specks.join(", ");
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ a {
|
|||||||
p a:not([class]) {
|
p a:not([class]) {
|
||||||
color: var(--gk-teal-bright);
|
color: var(--gk-teal-bright);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: rgba(43, 194, 183, 0.5);
|
text-decoration-color: rgba(var(--gk-teal-rgb), 0.5);
|
||||||
text-underline-offset: 3px;
|
text-underline-offset: 3px;
|
||||||
transition: color var(--gk-ease), text-decoration-color var(--gk-ease);
|
transition: color var(--gk-ease), text-decoration-color var(--gk-ease);
|
||||||
}
|
}
|
||||||
@@ -65,7 +65,7 @@ p a:not([class]):hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: rgba(43, 194, 183, 0.35);
|
background: rgba(var(--gk-teal-rgb), 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gk-visually-hidden {
|
.gk-visually-hidden {
|
||||||
@@ -92,3 +92,9 @@ p a:not([class]):hover {
|
|||||||
animation-duration: 0.01ms !important;
|
animation-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* A motif has a dark and a light image; show the one for the mode. */
|
||||||
|
:root:not([data-theme="light"]) .gk-motif-light,
|
||||||
|
:root[data-theme="light"] .gk-motif-dark {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -39,7 +39,18 @@
|
|||||||
.gk-pri:hover {
|
.gk-pri:hover {
|
||||||
background: var(--gk-teal-bright);
|
background: var(--gk-teal-bright);
|
||||||
color: var(--gk-sky);
|
color: var(--gk-sky);
|
||||||
box-shadow: 0 0 0 4px rgba(43, 194, 183, 0.16);
|
box-shadow: 0 0 0 4px rgba(var(--gk-teal-rgb), 0.16);
|
||||||
|
}
|
||||||
|
/* On Starlight the deep teal carries white text (5.8:1); the lighter teal is too faint. */
|
||||||
|
:root[data-theme="light"] .gk-pri,
|
||||||
|
:root[data-theme="light"] .gk-pri:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
:root[data-theme="light"] .gk-pri {
|
||||||
|
background: var(--gk-teal-bright);
|
||||||
|
}
|
||||||
|
:root[data-theme="light"] .gk-pri:hover {
|
||||||
|
background: #085e58;
|
||||||
}
|
}
|
||||||
.gk-sec {
|
.gk-sec {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -92,7 +103,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.gk-pill.live {
|
.gk-pill.live {
|
||||||
border-color: rgba(43, 194, 183, 0.6);
|
border-color: rgba(var(--gk-teal-rgb), 0.6);
|
||||||
color: var(--gk-teal-bright);
|
color: var(--gk-teal-bright);
|
||||||
}
|
}
|
||||||
.gk-pill.live::before {
|
.gk-pill.live::before {
|
||||||
@@ -102,11 +113,11 @@
|
|||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--gk-teal-bright);
|
background: var(--gk-teal-bright);
|
||||||
box-shadow: 0 0 6px rgba(43, 194, 183, 0.8);
|
box-shadow: 0 0 6px rgba(var(--gk-teal-rgb), 0.8);
|
||||||
}
|
}
|
||||||
/* A state that is not happening now keeps the round pill without the lit dot. */
|
/* A state that is not happening now keeps the round pill without the lit dot. */
|
||||||
.gk-pill.state {
|
.gk-pill.state {
|
||||||
border-color: rgba(43, 194, 183, 0.6);
|
border-color: rgba(var(--gk-teal-rgb), 0.6);
|
||||||
color: var(--gk-teal-bright);
|
color: var(--gk-teal-bright);
|
||||||
}
|
}
|
||||||
.gk-pill.cur {
|
.gk-pill.cur {
|
||||||
@@ -128,7 +139,7 @@
|
|||||||
transition: border-color var(--gk-ease), color var(--gk-ease);
|
transition: border-color var(--gk-ease), color var(--gk-ease);
|
||||||
}
|
}
|
||||||
.gk-chip.core {
|
.gk-chip.core {
|
||||||
border-color: rgba(43, 194, 183, 0.55);
|
border-color: rgba(var(--gk-teal-rgb), 0.55);
|
||||||
color: var(--gk-text);
|
color: var(--gk-text);
|
||||||
}
|
}
|
||||||
a.gk-chip:hover {
|
a.gk-chip:hover {
|
||||||
@@ -206,7 +217,7 @@ a.gk-chip:hover {
|
|||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
border-left: 2px solid var(--gk-gold);
|
border-left: 2px solid var(--gk-gold);
|
||||||
border-radius: 0 var(--gk-radius) var(--gk-radius) 0;
|
border-radius: 0 var(--gk-radius) var(--gk-radius) 0;
|
||||||
background: rgba(201, 162, 74, 0.08);
|
background: rgba(var(--gk-gold-rgb), 0.08);
|
||||||
color: var(--gk-text);
|
color: var(--gk-text);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
@@ -262,7 +273,7 @@ textarea.gk-field {
|
|||||||
background-size: 92% 2px;
|
background-size: 92% 2px;
|
||||||
}
|
}
|
||||||
.gk-field[aria-invalid="true"] {
|
.gk-field[aria-invalid="true"] {
|
||||||
border-color: #f0857a;
|
border-color: var(--gk-danger);
|
||||||
}
|
}
|
||||||
.gk-search {
|
.gk-search {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -324,7 +335,7 @@ textarea.gk-field {
|
|||||||
}
|
}
|
||||||
a.gk-card:hover,
|
a.gk-card:hover,
|
||||||
.gk-card.gk-linked:hover {
|
.gk-card.gk-linked:hover {
|
||||||
border-color: rgba(201, 162, 74, 0.55);
|
border-color: rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
a.gk-card:hover::before,
|
a.gk-card:hover::before,
|
||||||
.gk-card.gk-linked:hover::before {
|
.gk-card.gk-linked:hover::before {
|
||||||
@@ -332,7 +343,7 @@ a.gk-card:hover::before,
|
|||||||
}
|
}
|
||||||
.gk-featured {
|
.gk-featured {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* Brand tokens for the all-dark site (Greg's decision, 2026-10-11). Light mode
|
* Brand tokens. Dark is the default (Greg's decision, 2026-10-11); the light
|
||||||
* is a later phase and gets its own values and graphics; nothing here assumes
|
* values below (picked 2026-10-18 on the light motif board: Dawn chart sky,
|
||||||
* it yet.
|
* deep gold line seals) apply when <html data-theme="light">. PageShell sets
|
||||||
|
* that from the device setting, or from the visitor's choice on the toggle.
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
@@ -24,6 +25,30 @@
|
|||||||
/* Violet only ever marks a star. On the sky it is lifted to read (#6A2FE0 is 2.7:1). */
|
/* Violet only ever marks a star. On the sky it is lifted to read (#6A2FE0 is 2.7:1). */
|
||||||
--gk-violet: #9a70f5;
|
--gk-violet: #9a70f5;
|
||||||
|
|
||||||
|
--gk-danger: #f0857a;
|
||||||
|
|
||||||
|
/* Ornament inks: star path links and dots, and unlit ticks. */
|
||||||
|
--gk-orn-link: #2bc2b7;
|
||||||
|
--gk-orn-dot: #f4f2ed;
|
||||||
|
--gk-orn-dim: #4a5f6b;
|
||||||
|
|
||||||
|
/* Channels for translucent colors, as rgba(var(--gk-gold-rgb), 0.35). */
|
||||||
|
--gk-gold-rgb: 201, 162, 74;
|
||||||
|
--gk-gold-bright-rgb: 216, 179, 90;
|
||||||
|
--gk-star-rgb: 244, 242, 237;
|
||||||
|
--gk-text-rgb: 236, 233, 226;
|
||||||
|
--gk-teal-rgb: 43, 194, 183;
|
||||||
|
--gk-teal-deep-rgb: 20, 163, 154;
|
||||||
|
--gk-violet-rgb: 106, 47, 224;
|
||||||
|
--gk-sky-rgb: 14, 21, 34;
|
||||||
|
--gk-midnight-rgb: 19, 28, 43;
|
||||||
|
/* Constellation dust: one in five specks takes this instead of the text color. */
|
||||||
|
--gk-dust-accent-rgb: 236, 233, 226;
|
||||||
|
/* How strong the violet and teal washes are; light mode halves them. */
|
||||||
|
--gk-wash: 1;
|
||||||
|
/* The star chart grid behind the page; off in dark, faint ink lines in light. */
|
||||||
|
--gk-chart: none;
|
||||||
|
|
||||||
--gk-filament: linear-gradient(90deg, transparent, var(--gk-gold) 25%, var(--gk-teal-bright) 75%, transparent);
|
--gk-filament: linear-gradient(90deg, transparent, var(--gk-gold) 25%, var(--gk-teal-bright) 75%, transparent);
|
||||||
|
|
||||||
--gk-font-display: Cinzel, "Trajan Pro", Georgia, serif;
|
--gk-font-display: Cinzel, "Trajan Pro", Georgia, serif;
|
||||||
@@ -50,6 +75,49 @@
|
|||||||
--gk-ease: 0.15s;
|
--gk-ease: 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
|
--gk-sky: #f4f2ed;
|
||||||
|
--gk-midnight: #ffffff;
|
||||||
|
--gk-lines: #d9d2c2;
|
||||||
|
--gk-lines-strong: #b8ad97;
|
||||||
|
--gk-starlight: #131c2b;
|
||||||
|
--gk-text: #131c2b;
|
||||||
|
--gk-soft: #33465a;
|
||||||
|
--gk-muted: #52646f;
|
||||||
|
--gk-placeholder: #5e6e78;
|
||||||
|
/* Teal graphics; teal text, links and the primary button use the deeper teal-bright. */
|
||||||
|
--gk-teal: #0f8c84;
|
||||||
|
--gk-teal-bright: #0a726b;
|
||||||
|
--gk-gold: #8a6516;
|
||||||
|
--gk-gold-bright: #6f5112;
|
||||||
|
--gk-gold-line: rgba(138, 101, 22, 0.55);
|
||||||
|
--gk-gold-tint: rgba(138, 101, 22, 0.1);
|
||||||
|
--gk-violet: #6a2fe0;
|
||||||
|
--gk-danger: #b3261e;
|
||||||
|
|
||||||
|
--gk-orn-link: #0f8c84;
|
||||||
|
--gk-orn-dot: #131c2b;
|
||||||
|
--gk-orn-dim: #a9b3b9;
|
||||||
|
|
||||||
|
--gk-gold-rgb: 138, 101, 22;
|
||||||
|
--gk-gold-bright-rgb: 111, 81, 18;
|
||||||
|
--gk-star-rgb: 19, 28, 43;
|
||||||
|
--gk-text-rgb: 19, 28, 43;
|
||||||
|
--gk-teal-rgb: 10, 114, 107;
|
||||||
|
--gk-teal-deep-rgb: 15, 140, 132;
|
||||||
|
--gk-sky-rgb: 244, 242, 237;
|
||||||
|
--gk-midnight-rgb: 255, 255, 255;
|
||||||
|
--gk-dust-accent-rgb: 106, 47, 224;
|
||||||
|
--gk-wash: 0.5;
|
||||||
|
--gk-chart:
|
||||||
|
repeating-linear-gradient(0deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px),
|
||||||
|
repeating-linear-gradient(90deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px);
|
||||||
|
|
||||||
|
--gk-filament: linear-gradient(90deg, transparent, #8a6516 25%, #0f8c84 75%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
:root {
|
:root {
|
||||||
--gk-gutter: 16px;
|
--gk-gutter: 16px;
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ const facts = d.facts ?? [];
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding-left: 14px;
|
padding-left: 14px;
|
||||||
border-left: 1px solid rgba(201, 162, 74, 0.45);
|
border-left: 1px solid rgba(var(--gk-gold-rgb), 0.45);
|
||||||
}
|
}
|
||||||
dt {
|
dt {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
*/
|
*/
|
||||||
import Button from "@gk/ui/components/Button.astro";
|
import Button from "@gk/ui/components/Button.astro";
|
||||||
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
||||||
|
import Motif from "@gk/ui/components/Motif.astro";
|
||||||
import Seal from "@gk/ui/components/Seal.astro";
|
import Seal from "@gk/ui/components/Seal.astro";
|
||||||
import Star from "@gk/ui/components/Star.astro";
|
import Star from "@gk/ui/components/Star.astro";
|
||||||
import StarPath from "@gk/ui/components/StarPath.astro";
|
import StarPath from "@gk/ui/components/StarPath.astro";
|
||||||
@@ -39,10 +40,10 @@ const now = nowStatuses(s, post);
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<img src={filamentBanner} alt="" aria-hidden="true" class="banner" />
|
<Motif src={filamentBanner} alt="" aria-hidden="true" class="banner" />
|
||||||
<StarPath strength="wild" steps={7} centerStar={false} class="path" seed={post.slug} />
|
<StarPath strength="wild" steps={7} centerStar={false} class="path" seed={post.slug} />
|
||||||
<TickRing size={196} class="ring">
|
<TickRing size={196} class="ring">
|
||||||
<Seal name="transmutation" size={150} class="seal" />
|
<Seal name="transmutation" size={150} class="seal" foil />
|
||||||
</TickRing>
|
</TickRing>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
@@ -75,11 +76,11 @@ const now = nowStatuses(s, post);
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 0 4px var(--gk-midnight),
|
inset 0 0 0 4px var(--gk-midnight),
|
||||||
inset 0 0 0 5px rgba(201, 162, 74, 0.35);
|
inset 0 0 0 5px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.art {
|
.art {
|
||||||
flex: 1 1 440px;
|
flex: 1 1 440px;
|
||||||
@@ -90,10 +91,10 @@ const now = nowStatuses(s, post);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
|
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 70%),
|
||||||
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%),
|
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(var(--gk-teal-deep-rgb), calc(0.18 * var(--gk-wash))), transparent 70%),
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
.art.photo {
|
.art.photo {
|
||||||
@@ -116,7 +117,12 @@ const now = nowStatuses(s, post);
|
|||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.art :global(.seal) {
|
.art :global(.seal) {
|
||||||
filter: drop-shadow(0 0 16px rgba(201, 162, 74, 0.35));
|
filter: drop-shadow(0 0 16px rgba(var(--gk-gold-rgb), 0.35));
|
||||||
|
}
|
||||||
|
/* Glow is for the night sky; on Starlight the foil stands on its own. */
|
||||||
|
:global(:root[data-theme="light"]) .art :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
}
|
}
|
||||||
.cover {
|
.cover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -129,13 +135,13 @@ const now = nowStatuses(s, post);
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
linear-gradient(to top, rgba(14, 21, 34, 0.88), transparent 42%),
|
linear-gradient(to top, rgba(var(--gk-sky-rgb), 0.88), transparent 42%),
|
||||||
linear-gradient(to bottom, rgba(14, 21, 34, 0.45), transparent 30%);
|
linear-gradient(to bottom, rgba(var(--gk-sky-rgb), 0.45), transparent 30%);
|
||||||
}
|
}
|
||||||
.mat {
|
.mat {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 14px;
|
inset: 14px;
|
||||||
border: 1px solid rgba(201, 162, 74, 0.5);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.5);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
.no {
|
.no {
|
||||||
@@ -196,8 +202,8 @@ const now = nowStatuses(s, post);
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.summary {
|
.summary {
|
||||||
margin: 4px 0 0;
|
margin: 4px 0 0;
|
||||||
|
|||||||
@@ -206,11 +206,11 @@ const making = d.topic === "Making";
|
|||||||
gap: 18px;
|
gap: 18px;
|
||||||
padding: 48px 56px;
|
padding: 48px 56px;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 0 4px var(--gk-midnight),
|
inset 0 0 0 4px var(--gk-midnight),
|
||||||
inset 0 0 0 5px rgba(201, 162, 74, 0.3);
|
inset 0 0 0 5px rgba(var(--gk-gold-rgb), 0.3);
|
||||||
}
|
}
|
||||||
.cover {
|
.cover {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -60,9 +60,9 @@ const { posts, site: s, kicker, emptyTitle = "Nothing written here yet", emptyTe
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 28px;
|
padding: 28px;
|
||||||
border: 1px dashed rgba(201, 162, 74, 0.45);
|
border: 1px dashed rgba(var(--gk-gold-rgb), 0.45);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: rgba(19, 28, 43, 0.6);
|
background: rgba(var(--gk-midnight-rgb), 0.6);
|
||||||
}
|
}
|
||||||
.words {
|
.words {
|
||||||
flex: 1 1 260px;
|
flex: 1 1 260px;
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const now = nowStatuses(s, post);
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
padding: 22px 0 20px;
|
padding: 22px 0 20px;
|
||||||
border-top: 1px dashed rgba(244, 242, 237, 0.16);
|
border-top: 1px dashed rgba(var(--gk-star-rgb), 0.16);
|
||||||
}
|
}
|
||||||
.mark {
|
.mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -31,13 +31,13 @@ const mark = Math.round(Math.min(width, height) / 2);
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
outline: 1px solid rgba(201, 162, 74, 0.4);
|
outline: 1px solid rgba(var(--gk-gold-rgb), 0.4);
|
||||||
outline-offset: 3px;
|
outline-offset: 3px;
|
||||||
border: 1px solid var(--gk-lines);
|
border: 1px solid var(--gk-lines);
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at 30% 20%, rgba(106, 47, 224, 0.3), transparent 60%),
|
radial-gradient(ellipse at 30% 20%, rgba(var(--gk-violet-rgb), calc(0.3 * var(--gk-wash))), transparent 60%),
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 22px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 22px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 22px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 22px),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
.mono {
|
.mono {
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const H = `h${level}` as "h2" | "h3";
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -103,8 +103,8 @@ const topicHref = (topic: string) => `/blog/topic/${slugify(topic)}`;
|
|||||||
width: 180px;
|
width: 180px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.all {
|
.all {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ const { href, title, line, size = "large" } = Astro.props;
|
|||||||
.large {
|
.large {
|
||||||
min-height: 62px;
|
min-height: 62px;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px solid rgba(244, 242, 237, 0.35);
|
border-bottom: 1px solid rgba(var(--gk-star-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.small {
|
.small {
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
|
|||||||
border: 3px solid var(--gk-gold);
|
border: 3px solid var(--gk-gold);
|
||||||
border-radius: var(--gk-radius-lg);
|
border-radius: var(--gk-radius-lg);
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: rgba(106, 47, 224, 0.12);
|
background: rgba(var(--gk-violet-rgb), calc(0.12 * var(--gk-wash)));
|
||||||
}
|
}
|
||||||
.hero :global(.art) {
|
.hero :global(.art) {
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
@@ -59,7 +59,7 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
}
|
}
|
||||||
.panel :global(.art) {
|
.panel :global(.art) {
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ const postHref = post ? s.href(post) : null;
|
|||||||
height: 56px;
|
height: 56px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--gk-lines);
|
border: 1px solid var(--gk-lines);
|
||||||
outline: 1px solid rgba(201, 162, 74, 0.35);
|
outline: 1px solid rgba(var(--gk-gold-rgb), 0.35);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
.photo {
|
.photo {
|
||||||
@@ -81,9 +81,9 @@ const postHref = post ? s.href(post) : null;
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at 30% 20%, rgba(106, 47, 224, 0.3), transparent 60%),
|
radial-gradient(ellipse at 30% 20%, rgba(var(--gk-violet-rgb), calc(0.3 * var(--gk-wash))), transparent 60%),
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 14px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 14px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 14px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 14px),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
.tile img {
|
.tile img {
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
|
|||||||
</div>
|
</div>
|
||||||
<div class="sky">
|
<div class="sky">
|
||||||
<svg aria-hidden="true" class="line" viewBox="0 0 1000 154" preserveAspectRatio="none">
|
<svg aria-hidden="true" class="line" viewBox="0 0 1000 154" preserveAspectRatio="none">
|
||||||
<polyline points={points} fill="none" stroke="#C9A24A" stroke-width="1.4" stroke-dasharray="2 6" vector-effect="non-scaling-stroke" />
|
<polyline points={points} fill="none" style="stroke:var(--gk-gold)" stroke-width="1.4" stroke-dasharray="2 6" vector-effect="non-scaling-stroke" />
|
||||||
</svg>
|
</svg>
|
||||||
<ul style={`--n:${n}`}>
|
<ul style={`--n:${n}`}>
|
||||||
{
|
{
|
||||||
@@ -113,7 +113,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 2px var(--gk-gold),
|
0 0 0 2px var(--gk-gold),
|
||||||
0 0 22px rgba(201, 162, 74, 0.45);
|
0 0 22px rgba(var(--gk-gold-rgb), 0.45);
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
a :global(.orb .mat) {
|
a :global(.orb .mat) {
|
||||||
@@ -134,7 +134,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
|
|||||||
a:hover :global(.orb) {
|
a:hover :global(.orb) {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 2px var(--gk-gold-bright),
|
0 0 0 2px var(--gk-gold-bright),
|
||||||
0 0 30px rgba(201, 162, 74, 0.7);
|
0 0 30px rgba(var(--gk-gold-rgb), 0.7);
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ const { id, dot } = Astro.props;
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -162,8 +162,8 @@ const headId = `line-${line.slug}`;
|
|||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.summary {
|
.summary {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
|||||||
padding: 32px;
|
padding: 32px;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -245,7 +245,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
|||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: 1px solid rgba(236, 233, 226, 0.35);
|
border: 1px solid rgba(var(--gk-text-rgb), 0.35);
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
.stock {
|
.stock {
|
||||||
@@ -301,7 +301,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
|||||||
.err {
|
.err {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #f0857a;
|
color: var(--gk-danger);
|
||||||
}
|
}
|
||||||
.tnote {
|
.tnote {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ const { options, names, class: className } = Astro.props;
|
|||||||
height: 28px;
|
height: 28px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: var(--gk-lines);
|
background: var(--gk-lines);
|
||||||
box-shadow: 0 0 0 1px rgba(236, 233, 226, 0.25);
|
box-shadow: 0 0 0 1px rgba(var(--gk-text-rgb), 0.25);
|
||||||
}
|
}
|
||||||
.named {
|
.named {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@@ -78,7 +78,7 @@ const { options, names, class: className } = Astro.props;
|
|||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: 1px solid rgba(236, 233, 226, 0.35);
|
border: 1px solid rgba(var(--gk-text-rgb), 0.35);
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
.dot.none {
|
.dot.none {
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const kindLabel = { info: "Good to know", warning: "Please note", rule: "Rule" }
|
|||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
.terms :global(.term.warning) {
|
.terms :global(.term.warning) {
|
||||||
background: rgba(201, 162, 74, 0.12);
|
background: rgba(var(--gk-gold-rgb), 0.12);
|
||||||
}
|
}
|
||||||
.terms :global(.term.rule) {
|
.terms :global(.term.rule) {
|
||||||
border-left-color: var(--gk-gold-bright);
|
border-left-color: var(--gk-gold-bright);
|
||||||
|
|||||||
@@ -130,9 +130,9 @@ const facts = d.facts ?? [];
|
|||||||
height: 2px;
|
height: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent),
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent),
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px);
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.role {
|
.role {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|||||||
@@ -59,8 +59,8 @@ const { id, title, intro, class: className } = Astro.props;
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.intro {
|
.intro {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const groups = [
|
|||||||
<PageShell title="Off the star chart" family="notFound" description="This page isn't here.">
|
<PageShell title="Off the star chart" family="notFound" description="This page isn't here.">
|
||||||
<meta slot="head" name="robots" content="noindex" />
|
<meta slot="head" name="robots" content="noindex" />
|
||||||
<section class="lost" aria-labelledby="nf-title">
|
<section class="lost" aria-labelledby="nf-title">
|
||||||
<Seal name="zodiac" size={180} class="seal" />
|
<Seal name="zodiac" size={180} class="seal" foil />
|
||||||
<span class="eyebrow">404 · Page not found</span>
|
<span class="eyebrow">404 · Page not found</span>
|
||||||
<h1 id="nf-title">Off the star chart</h1>
|
<h1 id="nf-title">Off the star chart</h1>
|
||||||
<p class="lede">{lede}</p>
|
<p class="lede">{lede}</p>
|
||||||
@@ -80,7 +80,12 @@ const groups = [
|
|||||||
}
|
}
|
||||||
.lost :global(.seal) {
|
.lost :global(.seal) {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
filter: drop-shadow(0 0 22px rgba(43, 194, 183, 0.35));
|
filter: drop-shadow(0 0 22px rgba(var(--gk-teal-rgb), 0.35));
|
||||||
|
}
|
||||||
|
/* Glow is for the night sky; on Starlight the foil stands on its own. */
|
||||||
|
:global(:root[data-theme="light"]) .lost :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
}
|
}
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
*/
|
*/
|
||||||
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
||||||
import Icon from "@gk/ui/components/Icon.astro";
|
import Icon from "@gk/ui/components/Icon.astro";
|
||||||
|
import Motif from "@gk/ui/components/Motif.astro";
|
||||||
import PageShell from "@gk/ui/components/PageShell.astro";
|
import PageShell from "@gk/ui/components/PageShell.astro";
|
||||||
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
|
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
|
||||||
import Star from "@gk/ui/components/Star.astro";
|
import Star from "@gk/ui/components/Star.astro";
|
||||||
@@ -141,7 +142,7 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
|
|||||||
Two wings of the same house
|
Two wings of the same house
|
||||||
</SectionHeading>
|
</SectionHeading>
|
||||||
<div class="wing-wrap">
|
<div class="wing-wrap">
|
||||||
<div class="wing-stars" aria-hidden="true"><img src={scorpius} alt="" width="1100" height="400" /></div>
|
<div class="wing-stars" aria-hidden="true"><Motif src={scorpius} alt="" width="1100" height="400" /></div>
|
||||||
<div class="wing-row">
|
<div class="wing-row">
|
||||||
<div class="wing featured">
|
<div class="wing featured">
|
||||||
<GiltCorners inset={6} size={30} />
|
<GiltCorners inset={6} size={30} />
|
||||||
@@ -254,7 +255,7 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
.photo :global(.photo-art) {
|
.photo :global(.photo-art) {
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.photo figcaption {
|
.photo figcaption {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -427,11 +428,11 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 26px;
|
padding: 26px;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: rgba(19, 28, 43, 0.7);
|
background: rgba(var(--gk-midnight-rgb), 0.7);
|
||||||
border: 1px solid var(--gk-lines);
|
border: 1px solid var(--gk-lines);
|
||||||
}
|
}
|
||||||
.wing.featured {
|
.wing.featured {
|
||||||
border-color: rgba(201, 162, 74, 0.55);
|
border-color: rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.wing-eyebrow {
|
.wing-eyebrow {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|||||||
@@ -124,7 +124,7 @@ const lede = s.pageText(base)?.data.lede;
|
|||||||
padding: 18px 20px;
|
padding: 18px 20px;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--gk-text);
|
color: var(--gk-text);
|
||||||
transition: border-color var(--gk-ease);
|
transition: border-color var(--gk-ease);
|
||||||
|
|||||||
@@ -208,8 +208,8 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.work {
|
.work {
|
||||||
@@ -217,11 +217,11 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
|
|||||||
padding: 34px;
|
padding: 34px;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
color: var(--gk-starlight);
|
color: var(--gk-starlight);
|
||||||
background: radial-gradient(ellipse at 0% 0%, rgba(20, 163, 154, 0.22), transparent 55%), var(--gk-midnight);
|
background: radial-gradient(ellipse at 0% 0%, rgba(var(--gk-teal-deep-rgb), calc(0.22 * var(--gk-wash))), transparent 55%), var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.7);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.7);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 0 6px var(--gk-midnight),
|
inset 0 0 0 6px var(--gk-midnight),
|
||||||
inset 0 0 0 7px rgba(201, 162, 74, 0.45);
|
inset 0 0 0 7px rgba(var(--gk-gold-rgb), 0.45);
|
||||||
}
|
}
|
||||||
.work :global(.work-seal) {
|
.work :global(.work-seal) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -259,7 +259,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-top: 1px solid rgba(244, 242, 237, 0.35);
|
border-top: 1px solid rgba(var(--gk-star-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.door-foot {
|
.door-foot {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -275,7 +275,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
|
|||||||
.world {
|
.world {
|
||||||
flex: 2 1 360px;
|
flex: 2 1 360px;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.world :global(.world-photo) {
|
.world :global(.world-photo) {
|
||||||
height: 190px;
|
height: 190px;
|
||||||
@@ -291,9 +291,9 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse 60% 90% at 100% 100%, rgba(106, 47, 224, 0.18), transparent 70%),
|
radial-gradient(ellipse 60% 90% at 100% 100%, rgba(var(--gk-violet-rgb), calc(0.18 * var(--gk-wash))), transparent 70%),
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 32px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 32px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 32px);
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 32px);
|
||||||
}
|
}
|
||||||
.world-ticks {
|
.world-ticks {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
|
|
||||||
<div class="split">
|
<div class="split">
|
||||||
<div class="intro">
|
<div class="intro">
|
||||||
<Seal name="transmutation" size={140} class="seal" />
|
<Seal name="transmutation" size={140} class="seal" foil />
|
||||||
<span class="eyebrow">Inquiries</span>
|
<span class="eyebrow">Inquiries</span>
|
||||||
<h1>Let's make something</h1>
|
<h1>Let's make something</h1>
|
||||||
<span class="underline" aria-hidden="true"></span>
|
<span class="underline" aria-hidden="true"></span>
|
||||||
@@ -221,6 +221,11 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
height: 140px;
|
height: 140px;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
/* Glow is for the night sky; on Starlight the foil stands on its own. */
|
||||||
|
:global(:root[data-theme="light"]) .intro :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
letter-spacing: 0.3em;
|
letter-spacing: 0.3em;
|
||||||
@@ -241,9 +246,9 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
margin-top: -8px;
|
margin-top: -8px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent),
|
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent),
|
||||||
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px);
|
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px);
|
||||||
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
|
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
|
||||||
}
|
}
|
||||||
.lede {
|
.lede {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -278,7 +283,7 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
flex: 1 1 540px;
|
flex: 1 1 540px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
@@ -333,9 +338,9 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
.tile:has(:checked) {
|
.tile:has(:checked) {
|
||||||
border-color: var(--gk-gold);
|
border-color: var(--gk-gold);
|
||||||
background:
|
background:
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.04) 0 1px, transparent 1px 14px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.04) 0 1px, transparent 1px 14px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.04) 0 1px, transparent 1px 14px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.04) 0 1px, transparent 1px 14px),
|
||||||
rgba(201, 162, 74, 0.1);
|
rgba(var(--gk-gold-rgb), 0.1);
|
||||||
}
|
}
|
||||||
.tile:has(:focus-visible) {
|
.tile:has(:focus-visible) {
|
||||||
outline: 2px solid var(--gk-gold);
|
outline: 2px solid var(--gk-gold);
|
||||||
@@ -442,7 +447,7 @@ const turnstileKey = turnstileSiteKey();
|
|||||||
.err {
|
.err {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #f0857a;
|
color: var(--gk-danger);
|
||||||
}
|
}
|
||||||
.hp {
|
.hp {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ const steps = [
|
|||||||
<meta slot="head" name="robots" content="noindex" />
|
<meta slot="head" name="robots" content="noindex" />
|
||||||
<div class="split">
|
<div class="split">
|
||||||
<div class="intro">
|
<div class="intro">
|
||||||
<Seal name="transmutation" size={132} class="seal" />
|
<Seal name="transmutation" size={132} class="seal" foil />
|
||||||
<span class="eyebrow">Inquiry sent</span>
|
<span class="eyebrow">Inquiry sent</span>
|
||||||
<h1>Your note is on its way</h1>
|
<h1>Your note is on its way</h1>
|
||||||
<p class="lede">Thanks{firstName ? `, ${firstName}` : ""}. I read every inquiry myself and reply within {replyTime}.</p>
|
<p class="lede">Thanks{firstName ? `, ${firstName}` : ""}. I read every inquiry myself and reply within {replyTime}.</p>
|
||||||
@@ -104,7 +104,12 @@ const steps = [
|
|||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
.intro :global(.seal) {
|
.intro :global(.seal) {
|
||||||
filter: drop-shadow(0 0 18px rgba(201, 162, 74, 0.35));
|
filter: drop-shadow(0 0 18px rgba(var(--gk-gold-rgb), 0.35));
|
||||||
|
}
|
||||||
|
/* Glow is for the night sky; on Starlight the foil stands on its own. */
|
||||||
|
:global(:root[data-theme="light"]) .intro :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
}
|
}
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -168,7 +173,7 @@ const steps = [
|
|||||||
padding: 28px;
|
padding: 28px;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.kicker {
|
.kicker {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ const FIRST = 12;
|
|||||||
}
|
}
|
||||||
.types a[aria-current] {
|
.types a[aria-current] {
|
||||||
border-left-color: var(--gk-gold);
|
border-left-color: var(--gk-gold);
|
||||||
background: rgba(201, 162, 74, 0.08);
|
background: rgba(var(--gk-gold-rgb), 0.08);
|
||||||
color: var(--gk-text);
|
color: var(--gk-text);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -172,7 +172,7 @@ const sortHref = (key: string) => {
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(90deg, rgba(14, 21, 34, 0.9), rgba(14, 21, 34, 0.2));
|
background: linear-gradient(90deg, rgba(var(--gk-sky-rgb), 0.9), rgba(var(--gk-sky-rgb), 0.2));
|
||||||
}
|
}
|
||||||
.count-text {
|
.count-text {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
* Everything / Now / Up next filter.
|
* Everything / Now / Up next filter.
|
||||||
*/
|
*/
|
||||||
import FilterGroup from "@gk/ui/components/FilterGroup.astro";
|
import FilterGroup from "@gk/ui/components/FilterGroup.astro";
|
||||||
|
import Motif from "@gk/ui/components/Motif.astro";
|
||||||
import PageShell from "@gk/ui/components/PageShell.astro";
|
import PageShell from "@gk/ui/components/PageShell.astro";
|
||||||
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
|
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
|
||||||
import Star from "@gk/ui/components/Star.astro";
|
import Star from "@gk/ui/components/Star.astro";
|
||||||
@@ -74,7 +75,7 @@ const wrapped = s
|
|||||||
|
|
||||||
<aside aria-label="About this page" class="aside">
|
<aside aria-label="About this page" class="aside">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<img src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
|
<Motif src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
|
||||||
<span class="panel-kicker"><Star size={11} /><span>How this works</span></span>
|
<span class="panel-kicker"><Star size={11} /><span>How this works</span></span>
|
||||||
<TickScale width={200} height={10} count={30} class="panel-ticks" />
|
<TickScale width={200} height={10} count={30} class="panel-ticks" />
|
||||||
<p class="panel-text">
|
<p class="panel-text">
|
||||||
@@ -85,7 +86,7 @@ const wrapped = s
|
|||||||
{
|
{
|
||||||
wrapped.length > 0 && (
|
wrapped.length > 0 && (
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<img src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
|
<Motif src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
|
||||||
<span class="panel-kicker"><Star size={11} /><span>Recently wrapped up</span></span>
|
<span class="panel-kicker"><Star size={11} /><span>Recently wrapped up</span></span>
|
||||||
<TickScale width={200} height={10} count={30} class="panel-ticks" />
|
<TickScale width={200} height={10} count={30} class="panel-ticks" />
|
||||||
<ul class="wrapped">
|
<ul class="wrapped">
|
||||||
|
|||||||
@@ -253,7 +253,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
letter-spacing: 0.3em;
|
letter-spacing: 0.3em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--gk-gold-bright);
|
color: var(--gk-gold-bright);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 17px 60px;
|
padding: 17px 60px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
@@ -283,11 +283,11 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.6);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.6);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 0 5px var(--gk-midnight),
|
inset 0 0 0 5px var(--gk-midnight),
|
||||||
inset 0 0 0 6px rgba(201, 162, 74, 0.3);
|
inset 0 0 0 6px rgba(var(--gk-gold-rgb), 0.3);
|
||||||
padding: 32px 26px 24px;
|
padding: 32px 26px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -326,7 +326,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
border-top: 1px dashed rgba(244, 242, 237, 0.16);
|
border-top: 1px dashed rgba(var(--gk-star-rgb), 0.16);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--gk-soft);
|
color: var(--gk-soft);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -336,7 +336,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: var(--gk-teal-bright);
|
background: var(--gk-teal-bright);
|
||||||
box-shadow: 0 0 8px rgba(43, 194, 183, 0.7);
|
box-shadow: 0 0 8px rgba(var(--gk-teal-rgb), 0.7);
|
||||||
}
|
}
|
||||||
.stats {
|
.stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -510,8 +510,8 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
inset: -24px -24px -24px 0;
|
inset: -24px -24px -24px 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background:
|
background:
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.045) 0 1px, transparent 1px 40px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px);
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.045) 0 1px, transparent 1px 40px);
|
||||||
-webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
|
-webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
|
||||||
mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
|
mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
|
||||||
}
|
}
|
||||||
@@ -535,7 +535,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
|
|||||||
scroll-margin-top: 24px;
|
scroll-margin-top: 24px;
|
||||||
}
|
}
|
||||||
.role.current {
|
.role.current {
|
||||||
border-color: rgba(201, 162, 74, 0.55);
|
border-color: rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.marker {
|
.marker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -218,7 +218,7 @@ const terms = [...(d.terms ?? []), ...st.terms];
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.lead :global(.lead-art) {
|
.lead :global(.lead-art) {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -307,7 +307,7 @@ const terms = [...(d.terms ?? []), ...st.terms];
|
|||||||
.tables {
|
.tables {
|
||||||
margin-top: 28px;
|
margin-top: 28px;
|
||||||
padding: 24px 0 8px;
|
padding: 24px 0 8px;
|
||||||
border-top: 1px solid rgba(201, 162, 74, 0.35);
|
border-top: 1px solid rgba(var(--gk-gold-rgb), 0.35);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
|
|||||||
@@ -245,8 +245,8 @@ const colorStrips = selling.flatMap((l) =>
|
|||||||
border: 1px solid var(--gk-lines);
|
border: 1px solid var(--gk-lines);
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background:
|
background:
|
||||||
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 24px),
|
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 24px),
|
||||||
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 24px),
|
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 24px),
|
||||||
var(--gk-sky);
|
var(--gk-sky);
|
||||||
}
|
}
|
||||||
.colors-head {
|
.colors-head {
|
||||||
|
|||||||
@@ -132,7 +132,7 @@ const reopens = st.closed.filter((c) => c.reopens).map((c) => `${c.name} reopens
|
|||||||
padding: 32px;
|
padding: 32px;
|
||||||
border-radius: var(--gk-radius);
|
border-radius: var(--gk-radius);
|
||||||
background: var(--gk-midnight);
|
background: var(--gk-midnight);
|
||||||
border: 1px solid rgba(201, 162, 74, 0.55);
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
||||||
}
|
}
|
||||||
.closed :global(.gk-note) {
|
.closed :global(.gk-note) {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user