diff --git a/app/styles.css b/app/styles.css
index a3a1abe..3e6436e 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -4386,6 +4386,12 @@
color: #e0d0ff;
text-decoration-color: currentColor;
}
+ .detail-inline-link.is-selected,
+ .detail-inline-link[aria-pressed="true"] {
+ color: #e0d0ff;
+ text-decoration-color: currentColor;
+ font-weight: 600;
+ }
/* ── Alphabet section ────────────────────────────────────────────────── */
#alphabet-section,
diff --git a/app/ui-alphabet-detail.js b/app/ui-alphabet-detail.js
index d986d0a..9e1a50e 100644
--- a/app/ui-alphabet-detail.js
+++ b/app/ui-alphabet-detail.js
@@ -49,14 +49,13 @@
const countText = entries.length ? ` of ${entries.length}` : "";
const orderText = orderLabel ? ` (${orderLabel})` : "";
const reductionText = describeDigitalRootReduction(position, digitalRoot);
- const openNumberBtn = context.navBtn(`View Number ${digitalRoot}`, "nav:number", { value: digitalRoot });
+ const openNumberBtn = context.inlineNavBtn(`${digitalRoot}`, "nav:number", { value: digitalRoot });
return context.card("Position Digital Root", `
- Position
- #${position}${countText}${orderText}
- - Digital Root
- ${digitalRoot}${reductionText ? ` (${reductionText})` : ""}
+ - Digital Root
- ${openNumberBtn}${reductionText ? ` (${reductionText})` : ""}
- ${openNumberBtn}
`);
}
@@ -74,12 +73,11 @@
}
const monthButtons = monthRefs
- .map((month) => context.navBtn(month.label || month.name, "nav:calendar-month", { "month-id": month.id }))
- .join("");
+ .map((month) => context.inlineNavBtn(month.label || month.name, "nav:calendar-month", { "month-id": month.id }))
+ .join(", ");
return context.card("Calendar Months", `
- ${titleLabel}
- ${monthButtons}
+ ${titleLabel} ${monthButtons}
`);
}
@@ -91,31 +89,25 @@
if (type === "planet") {
const sym = context.PLANET_SYMBOLS[id] || "";
const cubePlacement = context.getCubePlacementForPlanet(id);
- const cubeBtn = context.cubePlacementBtn(cubePlacement, { "planet-id": id });
+ const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, { "planet-id": id });
return context.card("Astrology", `
- Type
- Planet
- - Ruler
- ${sym} ${context.cap(id)}
+ - Ruler
- ${sym} ${context.inlineNavBtn(context.cap(id), "nav:planet", { "planet-id": id })}
-
-
- ${cubeBtn}
-
+ ${cubeBtn ? `Cube placement ${cubeBtn}
` : ""}
`);
}
if (type === "zodiac") {
const sym = context.ZODIAC_SYMBOLS[id] || "";
const cubePlacement = context.getCubePlacementForSign(id);
- const cubeBtn = context.cubePlacementBtn(cubePlacement, { "sign-id": id });
+ const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, { "sign-id": id });
return context.card("Astrology", `
- Type
- Zodiac Sign
- - Sign
- ${sym} ${context.cap(id)}
+ - Sign
- ${sym} ${context.inlineNavBtn(context.cap(id), "nav:zodiac", { "sign-id": id })}
-
-
- ${cubeBtn}
-
+ ${cubeBtn ? `Cube placement ${cubeBtn}
` : ""}
`);
}
if (type === "element") {
@@ -163,7 +155,7 @@
const body = rows.map((entry) => {
const pathBtn = Number.isFinite(Number(entry?.pathNumber))
- ? context.navBtn(`View Path ${entry.pathNumber}`, "nav:kabbalah-path", { "path-no": Number(entry.pathNumber) })
+ ? context.inlineNavBtn(`Path ${entry.pathNumber}`, "nav:kabbalah-path", { "path-no": Number(entry.pathNumber) })
: "";
return `
@@ -174,7 +166,7 @@
${entry.worldLayer}${entry.worldDescription ? ` · ${entry.worldDescription}` : ""}
${entry.soulLayer}${entry.soulTitle ? ` — ${entry.soulTitle}` : ""}${entry.soulDescription ? `: ${entry.soulDescription}` : ""}
- ${pathBtn}
+ ${pathBtn ? `Linked path ${pathBtn}
` : ""}
`;
}).join("");
@@ -393,21 +385,21 @@
const tarotPart = letter.tarot
? `Tarot Card${letter.tarot.card} (Trump ${letter.tarot.trumpNumber})`
: "";
- const kabBtn = context.navBtn("View Kabbalah Path", "tarot:view-kab-path", { "path-number": letter.kabbalahPathNumber });
+ const kabBtn = context.inlineNavBtn(`Path ${letter.kabbalahPathNumber}`, "tarot:view-kab-path", { "path-number": letter.kabbalahPathNumber });
const tarotBtn = letter.tarot
- ? context.navBtn("View Tarot Card", "kab:view-trump", { "trump-number": letter.tarot.trumpNumber })
+ ? context.inlineNavBtn(letter.tarot.card, "kab:view-trump", { "trump-number": letter.tarot.trumpNumber })
: "";
const cubePlacement = context.getCubePlacementForHebrewLetter(letter.hebrewLetterId, letter.kabbalahPathNumber);
- const cubeBtn = context.cubePlacementBtn(cubePlacement, {
+ const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, {
"hebrew-letter-id": letter.hebrewLetterId,
"path-no": letter.kabbalahPathNumber
});
sections.push(context.card("Kabbalah & Tarot", `
- - Path Number
- ${letter.kabbalahPathNumber}
- ${tarotPart}
+ - Path Number
- ${kabBtn}
+ ${letter.tarot ? `- Tarot Card
- ${tarotBtn} (Trump ${letter.tarot.trumpNumber})
` : ""}
- ${kabBtn}${tarotBtn}${cubeBtn}
+ ${cubeBtn ? `Cube placement ${cubeBtn}
` : ""}
`));
}
diff --git a/app/ui-alphabet.js b/app/ui-alphabet.js
index b153274..2cba150 100644
--- a/app/ui-alphabet.js
+++ b/app/ui-alphabet.js
@@ -296,11 +296,23 @@
return alphabetKabbalahUi.buildCubePlacementButton(placement, navBtn, fallbackDetail);
}
+ function cubePlacementInlineBtn(placement, fallbackDetail = null) {
+ return alphabetKabbalahUi.buildCubePlacementButton(placement, inlineNavBtn, fallbackDetail);
+ }
+
function cap(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ""; }
- function navBtn(label, event, detail) {
+ function buildNavButton(label, event, detail, className, suffix = "") {
const attrs = Object.entries(detail).map(([k, v]) => `data-${k}="${v}"`).join(" ");
- return ``;
+ return ``;
+ }
+
+ function navBtn(label, event, detail) {
+ return buildNavButton(label, event, detail, "alpha-nav-btn", " ↗");
+ }
+
+ function inlineNavBtn(label, event, detail) {
+ return buildNavButton(label, event, detail, "detail-inline-link");
}
function getDetailRenderContext(letter, alphabet) {
@@ -317,6 +329,7 @@
HEBREW_DOUBLE_DUALITY,
card,
navBtn,
+ inlineNavBtn,
cap,
normalizeId,
normalizeLetterId,
@@ -324,6 +337,7 @@
getCubePlacementForSign,
getCubePlacementForHebrewLetter,
cubePlacementBtn,
+ cubePlacementInlineBtn,
arabicDisplayName,
enochianGlyphImageHtml,
attachDetailListeners
@@ -357,7 +371,7 @@
if (!detailBodyEl) return;
// Nav buttons — generic: forward all data-* (except data-event) as the event detail
- detailBodyEl.querySelectorAll(".alpha-nav-btn[data-event]").forEach((btn) => {
+ detailBodyEl.querySelectorAll(".alpha-nav-btn[data-event], .detail-inline-link[data-event]").forEach((btn) => {
btn.addEventListener("click", () => {
const evtName = btn.dataset.event;
const detail = {};
diff --git a/app/ui-calendar-detail-panels.js b/app/ui-calendar-detail-panels.js
index 2563413..a436cd1 100644
--- a/app/ui-calendar-detail-panels.js
+++ b/app/ui-calendar-detail-panels.js
@@ -19,6 +19,14 @@
return null;
}
+ function inlineNavButton(label, nav, attrs = {}, extraClass = "") {
+ const dataAttrs = Object.entries(attrs)
+ .map(([key, value]) => `data-${key}="${value}"`)
+ .join(" ");
+ const className = ["detail-inline-link", extraClass].filter(Boolean).join(" ");
+ return ``;
+ }
+
function buildMajorArcanaRowsForMonth(context) {
const { month, api, getState } = context;
const currentState = getState();
@@ -142,10 +150,10 @@
${row.rangeLabel}
${row.signSymbol} ${row.signName} · Hebrew: ${label}
-
-
-
- ${row.hebrewLetterId ? `
` : ""}
+
+ Days ${inlineNavButton(row.rangeLabel, "calendar-day-range", { "range-start": row.dayStart, "range-end": row.dayEnd })}
+ · Tarot ${inlineNavButton(displayCardName, "tarot-card", { "card-name": row.cardName, "trump-number": row.trumpNumber ?? "" })}
+ ${row.hebrewLetterId ? ` · Hebrew ${inlineNavButton(label, "alphabet", { alphabet: "hebrew", "hebrew-letter-id": row.hebrewLetterId })}` : ""}
-
-
+ Tarot ${inlineNavButton(displayCardName, "tarot-card", { "card-name": row.cardName })}
`;
}).join("");
@@ -233,11 +239,15 @@
}
const isSelected = selectedDaySet.has(Number(row.day));
- return ``;
+ return inlineNavButton(String(row.day), "calendar-day", {
+ "day-number": row.day,
+ "gregorian-date": row.gregorianDate,
+ "aria-pressed": isSelected ? "true" : "false"
+ }, isSelected ? "is-selected" : "").replace("data-aria-pressed", "aria-pressed");
}).join("");
const clearButton = selectedContext
- ? ''
+ ? inlineNavButton("Show All Days", "calendar-day-clear")
: "";
const helperText = selectedContext
@@ -249,8 +259,8 @@
Day Links
Filter this month to events, holidays, and data connected to a specific day.
${helperText}
- ${links}
- ${clearButton ? `${clearButton}
` : ""}
+ Days ${links}
+ ${clearButton ? `${clearButton}
` : ""}
`;
}
@@ -376,7 +386,7 @@
const god = getState().godsById?.get(godId);
const label = god?.name || cleanName;
- buttons.push(``);
+ buttons.push(inlineNavButton(label, "god", { "god-id": godId, "god-name": label }));
});
return buttons;
}
@@ -410,7 +420,7 @@
const deityButtons = buildWheelDeityButtons(assoc?.deities, context);
const deityLinksCard = deityButtons.length
- ? ``
+ ? ``
: "";
const monthOrder = Number(month?.order);
diff --git a/app/ui-calendar-detail.js b/app/ui-calendar-detail.js
index 5fb152c..a1f2745 100644
--- a/app/ui-calendar-detail.js
+++ b/app/ui-calendar-detail.js
@@ -123,23 +123,26 @@
return current;
}
+ function buildInlineNavButton(label, nav, attrs = {}) {
+ const dataAttrs = Object.entries(attrs)
+ .map(([key, value]) => `data-${key}="${value}"`)
+ .join(" ");
+ return ``;
+ }
+
function buildAssociationButtons(associations) {
if (!associations || typeof associations !== "object") {
return '--
';
}
- const buttons = [];
+ const rows = [];
if (associations.planetId) {
- buttons.push(
- ``
- );
+ rows.push(`Planet ${buildInlineNavButton(planetLabel(associations.planetId), "planet", { "planet-id": associations.planetId })}
`);
}
if (associations.zodiacSignId) {
- buttons.push(
- ``
- );
+ rows.push(`Zodiac ${buildInlineNavButton(zodiacLabel(associations.zodiacSignId), "zodiac", { "sign-id": associations.zodiacSignId })}
`);
}
if (Number.isFinite(Number(associations.numberValue))) {
@@ -150,9 +153,7 @@
const label = rawNumber === numberValue
? `Number ${numberValue}`
: `Number ${numberValue} (from ${rawNumber})`;
- buttons.push(
- ``
- );
+ rows.push(`Number ${buildInlineNavButton(label, "number", { "number-value": numberValue })}
`);
}
}
}
@@ -161,41 +162,31 @@
const explicitTrumpNumber = Number(associations.tarotTrumpNumber);
const tarotTrumpNumber = Number.isFinite(explicitTrumpNumber) ? explicitTrumpNumber : null;
const tarotLabel = api.getDisplayTarotName(associations.tarotCard, tarotTrumpNumber);
- buttons.push(
- ``
- );
+ rows.push(`Tarot ${buildInlineNavButton(tarotLabel, "tarot-card", { "card-name": associations.tarotCard, "trump-number": tarotTrumpNumber ?? "" })}
`);
}
if (associations.godId || associations.godName) {
const label = godLabel(associations.godId, associations.godName);
- buttons.push(
- ``
- );
+ rows.push(`Deity ${buildInlineNavButton(label, "god", { "god-id": associations.godId || "", "god-name": associations.godName || label })}
`);
}
if (associations.hebrewLetterId) {
- buttons.push(
- ``
- );
+ rows.push(`Hebrew ${buildInlineNavButton(hebrewLabel(associations.hebrewLetterId), "alphabet", { alphabet: "hebrew", "hebrew-letter-id": associations.hebrewLetterId })}
`);
}
if (associations.kabbalahPathNumber != null) {
- buttons.push(
- ``
- );
+ rows.push(`Kabbalah ${buildInlineNavButton(`Path ${associations.kabbalahPathNumber}`, "kabbalah", { "path-no": associations.kabbalahPathNumber })}
`);
}
if (associations.iChingPlanetaryInfluence) {
- buttons.push(
- ``
- );
+ rows.push(`I Ching ${buildInlineNavButton(associations.iChingPlanetaryInfluence, "iching", { "planetary-influence": associations.iChingPlanetaryInfluence })}
`);
}
- if (!buttons.length) {
+ if (!rows.length) {
return '--
';
}
- return `${buttons.join("")}
`;
+ return rows.join("");
}
function renderFactsCard(month) {
diff --git a/app/ui-cycles.js b/app/ui-cycles.js
index 7f25c49..2ef138e 100644
--- a/app/ui-cycles.js
+++ b/app/ui-cycles.js
@@ -253,14 +253,13 @@
if (!relatedEntry) {
return `${escapeHtml(label)}`;
}
- return ``;
+ return ``;
})
- .join("");
+ .join(", ");
body.push([
"",
- "
Related:",
- `
${relatedButtons}
`,
+ `
Related: ${relatedButtons}
`,
"
--
';
}
- const buttons = [];
+ const rows = [];
if (associations.planetId) {
- buttons.push(
- ``
- );
+ rows.push(`Planet ${buildInlineNavButton(planetLabel(associations.planetId, context), "planet", { "planet-id": associations.planetId })}
`);
}
if (associations.zodiacSignId) {
- buttons.push(
- ``
- );
+ rows.push(`Zodiac ${buildInlineNavButton(zodiacLabel(associations.zodiacSignId, context), "zodiac", { "sign-id": associations.zodiacSignId })}
`);
}
if (Number.isFinite(Number(associations.numberValue))) {
@@ -101,9 +104,7 @@
const label = rawNumber === numberValue
? `Number ${numberValue}`
: `Number ${numberValue} (from ${rawNumber})`;
- buttons.push(
- ``
- );
+ rows.push(`Number ${buildInlineNavButton(label, "number", { "number-value": numberValue })}
`);
}
}
}
@@ -113,41 +114,31 @@
const explicitTrumpNumber = Number(associations.tarotTrumpNumber);
const tarotTrumpNumber = Number.isFinite(explicitTrumpNumber) ? explicitTrumpNumber : trumpNumber;
const tarotLabel = getDisplayTarotName(associations.tarotCard, tarotTrumpNumber);
- buttons.push(
- ``
- );
+ rows.push(`Tarot ${buildInlineNavButton(tarotLabel, "tarot-card", { "card-name": associations.tarotCard, "trump-number": tarotTrumpNumber ?? "" })}
`);
}
if (associations.godId || associations.godName) {
const label = godLabel(associations.godId, associations.godName, context);
- buttons.push(
- ``
- );
+ rows.push(`Deity ${buildInlineNavButton(label, "god", { "god-id": associations.godId || "", "god-name": associations.godName || label })}
`);
}
if (associations.hebrewLetterId) {
- buttons.push(
- ``
- );
+ rows.push(`Hebrew ${buildInlineNavButton(hebrewLabel(associations.hebrewLetterId, context), "alphabet", { alphabet: "hebrew", "hebrew-letter-id": associations.hebrewLetterId })}
`);
}
if (associations.kabbalahPathNumber != null) {
- buttons.push(
- ``
- );
+ rows.push(`Kabbalah ${buildInlineNavButton(`Path ${associations.kabbalahPathNumber}`, "kabbalah", { "path-no": associations.kabbalahPathNumber })}
`);
}
if (associations.iChingPlanetaryInfluence) {
- buttons.push(
- ``
- );
+ rows.push(`I Ching ${buildInlineNavButton(associations.iChingPlanetaryInfluence, "iching", { "planetary-influence": associations.iChingPlanetaryInfluence })}
`);
}
- if (!buttons.length) {
+ if (!rows.length) {
return '--
';
}
- return `${buttons.join("")}
`;
+ return rows.join("");
}
function associationSearchText(associations, context) {
@@ -263,7 +254,7 @@
const monthName = monthLabelForCalendar(holiday?.calendarId, holiday?.monthId);
const holidayDate = holiday?.dateText || holiday?.date || holiday?.dateRange || "--";
const sourceMonthLink = holiday?.monthId
- ? ``
+ ? `Source month ${buildInlineNavButton(`${calendarLabel(holiday?.calendarId)} ${monthName}`, "calendar-month", { "calendar-id": holiday.calendarId || "", "month-id": holiday.monthId })}
`
: "";
return `
diff --git a/app/ui-iching.js b/app/ui-iching.js
index 8fbf5bc..b431704 100644
--- a/app/ui-iching.js
+++ b/app/ui-iching.js
@@ -366,7 +366,7 @@
}
const buttonRow = document.createElement("div");
- buttonRow.className = "alpha-nav-btns";
+ buttonRow.className = "planet-text detail-inline-value";
cards.forEach((cardName) => {
const target = buildTarotTarget(cardName);
@@ -374,10 +374,14 @@
return;
}
+ if (buttonRow.childNodes.length) {
+ buttonRow.appendChild(document.createTextNode(", "));
+ }
+
const button = document.createElement("button");
button.type = "button";
- button.className = "alpha-nav-btn";
- button.textContent = `${target.label} ↗`;
+ button.className = "detail-inline-link";
+ button.textContent = target.label;
button.addEventListener("click", () => {
document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
detail: target.detail
@@ -416,10 +420,14 @@
}
rows.forEach((month) => {
+ if (elements.ichingDetailCalendarEl.childNodes.length) {
+ elements.ichingDetailCalendarEl.appendChild(document.createTextNode(", "));
+ }
+
const button = document.createElement("button");
button.type = "button";
- button.className = "alpha-nav-btn";
- button.textContent = `${month.label || month.name} ↗`;
+ button.className = "detail-inline-link";
+ button.textContent = month.label || month.name;
button.addEventListener("click", () => {
document.dispatchEvent(new CustomEvent("nav:calendar-month", {
detail: { monthId: month.id }
diff --git a/app/ui-tarot-detail.js b/app/ui-tarot-detail.js
index 23c6a62..4ecad2a 100644
--- a/app/ui-tarot-detail.js
+++ b/app/ui-tarot-detail.js
@@ -461,14 +461,18 @@
const btn = document.createElement("button");
btn.type = "button";
- btn.className = "kab-tarot-link";
- btn.textContent = `View Path ${kabPath.pathNumber} in Kabbalah Tree`;
+ btn.className = "detail-inline-link";
+ btn.textContent = `Path ${kabPath.pathNumber}`;
btn.addEventListener("click", () => {
document.dispatchEvent(new CustomEvent("tarot:view-kab-path", {
detail: { pathNumber: kabPath.pathNumber }
}));
});
- kabPathEl.appendChild(btn);
+ const inline = document.createElement("div");
+ inline.className = "planet-text detail-inline-value";
+ inline.appendChild(document.createTextNode("Kabbalah "));
+ inline.appendChild(btn);
+ kabPathEl.appendChild(inline);
kabPathEl.hidden = false;
} else if (kabSeph) {
const hebrewName = kabSeph.nameHebrew ? ` (${kabSeph.nameHebrew})` : "";
@@ -488,14 +492,18 @@
const btn = document.createElement("button");
btn.type = "button";
- btn.className = "kab-tarot-link";
- btn.textContent = `View Sephirah ${kabSeph.number} in Kabbalah Tree`;
+ btn.className = "detail-inline-link";
+ btn.textContent = `Sephirah ${kabSeph.number}`;
btn.addEventListener("click", () => {
document.dispatchEvent(new CustomEvent("tarot:view-kab-path", {
detail: { pathNumber: kabSeph.number }
}));
});
- kabPathEl.appendChild(btn);
+ const inline = document.createElement("div");
+ inline.className = "planet-text detail-inline-value";
+ inline.appendChild(document.createTextNode("Kabbalah "));
+ inline.appendChild(btn);
+ kabPathEl.appendChild(inline);
kabPathEl.hidden = false;
} else {
kabPathEl.hidden = true;
diff --git a/index.html b/index.html
index b9f6459..834d463 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
-
+
@@ -1195,25 +1195,25 @@
-
-
+
+
-
+
-
+
-
+
-
+
@@ -1226,9 +1226,9 @@
-
+
-
+