2 Commits

Author SHA1 Message Date
Alexander 58247dab89 style(faith/apologetik): pulse rings + larger labels in cumulative svg
CI / update (push) Successful in 1m24s
- Numbers move to left of dots (text-anchor end).
- ViewBox widened (W 700→820, H 240→320) so the converge label fits and
  bigger fonts/dots have breathing room.
- Strand thickness, dot/orb radii, and label font sizes bumped.
- Replace static rings with two pulse-out ripples (4.8s period, 2.4s
  offset) emanating from the orb; reduced-motion falls back to static.
2026-04-28 21:29:12 +02:00
Alexander f7ae3f20af chore: drop unused CSS selectors flagged by svelte compiler
- zehn-gebote: orphan `ul` rule left over from inline-toc removal.
- fitness/active: orphan .exercise-header*, .move-exercise*, .remove-exercise*,
  .add-exercise-btn rules left over from rail/focus refactor.
2026-04-28 21:24:16 +02:00
4 changed files with 54 additions and 81 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.49.0",
"version": "1.49.2",
"private": true,
"type": "module",
"scripts": {
@@ -93,14 +93,14 @@
return POS_ARGUMENTS.filter((a) => a.layer === lid);
}
const W = 700;
const H = 240;
const targetX = W - 110;
const W = 820;
const H = 320;
const targetX = W - 200;
const targetY = H / 2;
const bands: Record<string, [number, number]> = {
natural: [20, 80],
theism: [90, 150],
christianity: [160, 220]
natural: [25, 105],
theism: [120, 200],
christianity: [215, 295]
};
type Item = PosArgument & { y: number };
@@ -173,10 +173,10 @@
{#each cumulativeItems as it (it.id)}
{@const stroke = POS_LAYER_COLORS[it.layer]}
{@const opacity = 0.25 + (it.strength / 5) * 0.55}
{@const sw = 0.8 + it.strength * 0.6}
{@const sw = 1.6 + it.strength * 1.0}
<a href="/{faithLang}/{slug}/pro/{it.id}" aria-label={it.title}>
<path
d="M 8 {it.y} C {W * 0.45} {it.y}, {W * 0.55} {targetY}, {targetX} {targetY}"
d="M 38 {it.y} C {W * 0.45} {it.y}, {W * 0.55} {targetY}, {targetX} {targetY}"
fill="none"
stroke={stroke}
stroke-width={sw}
@@ -185,11 +185,12 @@
>
<title>{String(it.n).padStart(2, '0')}{it.title}</title>
</path>
<circle cx="8" cy={it.y} r="3.5" fill={stroke} />
<circle cx="38" cy={it.y} r="5" fill={stroke} />
<text
x="18"
y={it.y + 3.5}
font-size="9"
x="26"
y={it.y + 4}
font-size="12"
text-anchor="end"
fill="var(--color-text-secondary)"
font-family="ui-monospace, Menlo, monospace"
>
@@ -197,33 +198,31 @@
</text>
</a>
{/each}
<circle cx={targetX} cy={targetY} r="14" fill="var(--color-text-primary)" />
<circle
class="pulse pulse-1"
cx={targetX}
cy={targetY}
r="22"
r="18"
fill="none"
stroke="var(--color-text-primary)"
stroke-width="0.6"
opacity="0.5"
/>
<circle
class="pulse pulse-2"
cx={targetX}
cy={targetY}
r="34"
r="18"
fill="none"
stroke="var(--color-text-primary)"
stroke-width="0.4"
opacity="0.25"
/>
<circle cx={targetX} cy={targetY} r="18" fill="var(--color-text-primary)" />
<text
x={targetX + 44}
x={targetX + 56}
y={targetY - 4}
font-size="13"
font-size="17"
font-weight="700"
fill="var(--color-text-primary)">{labels.convergeLabel}</text
>
<text x={targetX + 44} y={targetY + 12} font-size="10" fill="var(--color-text-secondary)"
<text x={targetX + 56} y={targetY + 16} font-size="13" fill="var(--color-text-secondary)"
>{labels.convergeSub}</text
>
</svg>
@@ -360,6 +359,38 @@
width: 100%;
height: auto;
display: block;
overflow: visible;
}
@keyframes pulse-out {
0% {
r: 18;
opacity: 0.55;
stroke-width: 1.2;
}
100% {
r: 64;
opacity: 0;
stroke-width: 0.3;
}
}
.pulse {
animation: pulse-out 4.8s ease-out infinite both;
}
.pulse-2 {
animation-delay: 2.4s;
}
@media (prefers-reduced-motion: reduce) {
.pulse {
animation: none;
r: 28;
opacity: 0.4;
stroke-width: 0.8;
}
.pulse-2 {
r: 42;
opacity: 0.2;
stroke-width: 0.5;
}
}
.cum-svg a {
cursor: pointer;
@@ -393,10 +393,6 @@
line-height: 1.6;
margin: 0.75em 0;
}
ul {
padding-left: 1.5em;
margin: 0.5em 0;
}
li {
line-height: 1.6;
margin-bottom: 0.25em;
@@ -2030,44 +2030,6 @@
box-shadow: none;
padding: 0.25rem 0 0;
}
.exercise-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.exercise-header-actions {
display: flex;
align-items: center;
gap: 0.15rem;
}
.move-exercise {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
opacity: 0.6;
}
.move-exercise:hover:not(:disabled) {
opacity: 1;
color: var(--color-primary);
}
.move-exercise:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.remove-exercise {
background: none;
border: none;
color: var(--nord11);
cursor: pointer;
padding: 0.25rem;
opacity: 0.6;
}
.remove-exercise:hover {
opacity: 1;
}
.add-set-btn {
display: block;
width: 100%;
@@ -2092,22 +2054,6 @@
gap: 0.75rem;
padding: 1rem 0 0;
}
.add-exercise-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.75rem;
background: var(--color-primary);
color: var(--primary-contrast);
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
letter-spacing: 0.03em;
}
/* Cancel: ghost style (less prominent) — matches body-parts .ghost pattern */
.cancel-btn {
background: transparent;