Add light mode that follows the device setting
Dark stays the default. A device set to light gets the picks from the light motif board: the Dawn chart sky (dawn wash over faint star chart lines, atlas marks in the hero), deep gold line seals, Midnight, violet and gold dust, the deep gold to teal filament and the morning sky placeholder. Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are gold foil in both modes. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
@@ -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 is dark by default and turns light when the device is set to light (`prefers-color-scheme`). 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 picks the right file for the device; 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`);
|
||||||
|
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 |
|
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 |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
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 |
|
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 |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
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 |
|
After Width: | Height: | Size: 26 KiB |
|
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 |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
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,16 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* A motif image that follows the device's light or dark setting: the dark
|
||||||
|
* original, or its light recolor. 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, ...rest } = Astro.props;
|
||||||
|
const v = motifSources(src, { foil });
|
||||||
|
---
|
||||||
|
<picture class="gk-motif"><source media="(prefers-color-scheme: light)" srcset={v.light} /><img src={v.dark} {...rest} /></picture>
|
||||||
@@ -35,8 +35,9 @@ 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" media="(prefers-color-scheme: dark)" />
|
||||||
|
<meta name="theme-color" content="#F4F2ED" media="(prefers-color-scheme: light)" />
|
||||||
<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 +65,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,6 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
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 { 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 +23,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 ? (
|
||||||
@@ -82,6 +87,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 +118,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 +142,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 +159,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 {
|
||||||
@@ -253,7 +262,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 +285,51 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.atlas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: 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,27 @@ 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. */
|
||||||
|
@media (prefers-color-scheme: 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)"} />
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,8 @@ p a:not([class]):hover {
|
|||||||
animation-duration: 0.01ms !important;
|
animation-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* A motif's picture adds no box: its image lays out as if it stood alone. */
|
||||||
|
picture.gk-motif {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|||||||
@@ -39,7 +39,20 @@
|
|||||||
.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. */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.gk-pri,
|
||||||
|
.gk-pri:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.gk-pri {
|
||||||
|
background: var(--gk-teal-bright);
|
||||||
|
}
|
||||||
|
.gk-pri:hover {
|
||||||
|
background: #085e58;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.gk-sec {
|
.gk-sec {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -92,7 +105,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 +115,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 +141,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 +219,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 +275,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 +337,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 +345,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,7 @@
|
|||||||
/*
|
/*
|
||||||
* 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); a device set
|
||||||
* is a later phase and gets its own values and graphics; nothing here assumes
|
* to light gets the light values below (picked 2026-10-18 on the light motif
|
||||||
* it yet.
|
* board: Dawn chart sky, deep gold line seals).
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
@@ -24,6 +24,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 +74,51 @@
|
|||||||
--gk-ease: 0.15s;
|
--gk-ease: 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
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,14 @@ 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. */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.art :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.cover {
|
.cover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -129,13 +137,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 +204,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,14 @@ 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. */
|
||||||
|
@media (prefers-color-scheme: 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,13 @@ 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. */
|
||||||
|
@media (prefers-color-scheme: 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 +248,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 +285,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 +340,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 +449,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,14 @@ 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. */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.intro :global(.seal) {
|
||||||
|
opacity: 1;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -168,7 +175,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;
|
||||||
|
|||||||
@@ -160,7 +160,7 @@ const steps = [
|
|||||||
padding: 24px;
|
padding: 24px;
|
||||||
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;
|
||||||
|
|||||||
@@ -158,9 +158,9 @@ const lede = text?.data.lede ?? "Employer work told as written case studies, plu
|
|||||||
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);
|
||||||
}
|
}
|
||||||
.cta-sub {
|
.cta-sub {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|||||||
@@ -369,7 +369,7 @@ const postCover = (p: Note<"post">) => mediaSrc((p.data as { cover?: string }).c
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
height: 164px;
|
height: 164px;
|
||||||
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);
|
||||||
}
|
}
|
||||||
.log :global(.l-art) {
|
.log :global(.l-art) {
|
||||||
flex: 0 0 176px;
|
flex: 0 0 176px;
|
||||||
|
|||||||