kantarciandClaude Opus 5
73719bae4a
The icon set had no drawing for people, music or a house - the three pictures
the Tagespflege Moldovan template asks for. They join as `people`, `music` and
`home`; a test keeps the list and the drawings together, because a missing path
renders an empty `<path d="">`: invisible, without an error.
An icon block's own colour never reached its drawing: the embedded SVG carries
the same `block-icon` class as its wrapper and set the accent colour again.
`.block-icon .block-icon{color:inherit}` fixes it at the root.
The menu button becomes a thing you can shape. `burgerLabel` chooses symbol and
text, text only or symbol only (which keeps the name for screen readers), and
the new style group `menu` targets the button itself, the way `img` targets an
image and `controls` the slider. Inside the header the opened menu now lies
under the header across the full width instead of pushing the header apart -
on a phone that looked like a missing navigation.
The back-to-top button no longer depends on `animation-timeline: scroll()`. A
browser that parses the property but does not run the timeline left it in the
first frame of the animation: permanently invisible. Two classes from
scrolled.js decide now, and without a script the button simply stays visible.
Also: the Tagespflege Moldovan rebuild as its own installation, built only by
`scripts/seed-tagespflege-moldovan.php`.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
35 lines
1.6 KiB
JavaScript
35 lines
1.6 KiB
JavaScript
/**
|
|
* Marks the page as scrolled.
|
|
*
|
|
* A header can carry a second set of colours for the scrolled page - transparent over the hero,
|
|
* solid once the reader has moved on, the way the Flatsome transparent header works. The
|
|
* stylesheet holds both states; this only says which one applies. Without the script the header
|
|
* keeps its normal colours, which is a readable page, not a broken one.
|
|
*/
|
|
export function initScrolled(doc = document) {
|
|
const view = doc.defaultView;
|
|
const root = doc.documentElement;
|
|
// Der Nach-oben-Knopf blendete sich ueber eine Scroll-Animation ein. Browser, die
|
|
// `animation-timeline: scroll()` zwar kennen, aber nicht ausfuehren, liessen ihn im ersten
|
|
// Bild der Animation stehen - unsichtbar, dauerhaft. Deshalb entscheidet jetzt eine Klasse.
|
|
// Ohne dieses Skript bleibt der Knopf sichtbar: erreichbar ist besser als unsichtbar.
|
|
const after = parseInt(getComputedStyle(root).getPropertyValue('--kant-top-after'), 10);
|
|
const schwelle = Number.isFinite(after) && after > 0 ? after : 400;
|
|
let queued = false;
|
|
const sync = () => {
|
|
queued = false;
|
|
root.classList.toggle('is-scrolled', view.scrollY > 40);
|
|
root.classList.toggle('kant-top-shown', view.scrollY > schwelle);
|
|
};
|
|
const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
|
|
view.addEventListener('scroll', onScroll, { passive: true });
|
|
root.classList.add('kant-top-armed');
|
|
sync();
|
|
return () => {
|
|
view.removeEventListener('scroll', onScroll);
|
|
root.classList.remove('is-scrolled', 'kant-top-armed', 'kant-top-shown');
|
|
};
|
|
}
|
|
|
|
if (!document.querySelector('#editor')) initScrolled();
|