1---
2/**
3 * Tiny inline alchemical glyph used as a heading prefix/suffix flourish.
4 *
5 * Glyph vocabulary is drawn from Nicolas Lemery's Cours de chymie
6 * (1675/1757) and the broader 17th–18th c. alchemical alphabet — the
7 * same glyphs the Principia-era natural philosophers used. Sized to
8 * ~0.85em so it sits as a printer's mark next to the heading rather
9 * than competing with it.
10 */
11type Variant =
12 | "sol" // ☉ Gold / Sun — mastery, production, completion
13 | "sulphur" // 🜍 Sulphur — fixation, transformation, deploy
14 | "fleuron"; // printer's leaf flourish
15
16interface Props {
17 variant?: Variant;
18 position?: "prefix" | "suffix";
19 size?: string;
20 class?: string;
21}
22
23const {
24 variant = "sol",
25 position = "prefix",
26 size = "0.85em",
27 class: className,
28} = Astro.props;
29---
30
31<span
32 class:list={["alc-orn", `alc-orn--${position}`, className]}
33 style={`--alc-orn-size:${size};`}
34 aria-hidden="true"
35>
36 <svg
37 viewBox="0 0 24 24"
38 fill="none"
39 stroke="currentColor"
40 stroke-width="1.1"
41 stroke-linecap="round"
42 stroke-linejoin="round"
43 >
44 {variant === "sol" && (
45 <>
46 <circle cx="12" cy="12" r="6" />
47 <circle cx="12" cy="12" r="1.2" fill="var(--alc-accent-deep)" stroke="none" />
48 </>
49 )}
50 {variant === "sulphur" && (
51 <>
52 {/* upward triangle */}
53 <path d="M12 3 L19 15 L5 15 Z" />
54 {/* cross beneath */}
55 <path d="M12 15 V21 M9 18 H15" />
56 </>
57 )}
58 {variant === "fleuron" && (
59 <>
60 <path d="M12 7 L15 12 L12 17 L9 12 Z" />
61 <path d="M9 12 C 5 12, 3 10, 2.5 7.5" />
62 <path d="M15 12 C 19 12, 21 14, 21.5 16.5" />
63 <circle cx="12" cy="12" r="0.9" fill="var(--alc-accent-deep)" stroke="none" />
64 </>
65 )}
66 </svg>
67</span>
68
69<style>
70 .alc-orn {
71 display: inline-flex;
72 align-items: center;
73 justify-content: center;
74 width: var(--alc-orn-size, 0.85em);
75 height: var(--alc-orn-size, 0.85em);
76 vertical-align: -0.08em;
77 color: var(--alc-fg-3);
78 opacity: 0.55;
79 flex: none;
80 }
81 .alc-orn--prefix {
82 margin-right: 0.5em;
83 }
84 .alc-orn--suffix {
85 margin-left: 0.5em;
86 }
87 .alc-orn svg {
88 width: 100%;
89 height: 100%;
90 display: block;
91 }
92</style>