Fundamenten

Afgestemd op DamseZaken

DamseZaken is de dorpssite van dezelfde organisatie. Om eenheid te krijgen leunt deze site op de maatvoering en opbouw van DamseZaken, maar houdt eigen lettertype en kleuren (uit het logo van het dorpshuis). Analyse van damsezaken.nu (WordPress, Astra + Elementor), oktober 2026:

Spacing

Toegankelijkheid (WCAG 2.2 AA)

Getest met axe-core op alle pagina’s, desktop en mobiel: 0 overtredingen (oktober 2026). Afspraken:

• Contrast: tekst minstens 4.5:1, grote tekst 3:1. Daarom links #0062CC en grijze tekst #5C636A; wit nooit op het lichtblauw of geel uit het logo (die zijn voor vlakken en randen).
• Tekst op foto’s: altijd op een donkere laag (verloop in de hero, zwart 60% achter bijschriften), zodat het contrast ook op een witte foto klopt.
• Focus: elke focusbare plek krijgt een lichtblauwe rand (:focus-visible); de eerste tab gaat naar de skiplink “Naar de inhoud”.
• Klikdoelen minstens 24×24px (WCAG 2.5.8).
• Links zonder tekst (zoals foto’s) krijgen een aria-label; decoratieve beelden een lege alt.
• Beweging (hover, inkleuren) staat uit bij prefers-reduced-motion.

Social preview

Bij het delen van een link tonen WhatsApp, Mastodon, Facebook, LinkedIn en Signal titel, beschrijving en afbeelding uit de Open Graph-tags in _layouts/default.html:

• Titel: hero.title, anders title van de pagina.
• Beschrijving: description in de front matter, anders die van de site (_config.yml).
• Afbeelding (1200×630): og_image in de front matter, anders assets/images/og/default.jpg.

Breedtes

--container-max (1240px) is de buitenmaat van header, hero en footer. Lopende tekst blijft binnen --text-max (720px), zodat regels goed leesbaar blijven.

Atoms

Kleuren

Typografie

Het logo gebruikt Endless Journey JNL, een (commerciële) letter gebaseerd op Amerikaanse snelwegborden. Op de site gebruiken we daarom de gratis Overpass (OFL-licentie), die op dezelfde snelwegletter (Highway Gothic) is gebaseerd en dezelfde ronde, open vormen heeft. Het is een variabel font (gewicht 100–900, plus cursief), lokaal geladen uit assets/fonts/ — er gaan geen verzoeken naar Google Fonts of andere externe servers.

Logo

atoms/logo.html — standaard en met class="logo--small".

Hamburgerknop

atoms/menu-toggle.html — opent en sluit het menu op mobiel. Staat standaard op hidden; assets/js/menu.js maakt hem actief in de header.

Iconen

atoms/icon.html — eenvoudige lijniconen, kleur via color. Parameter: name.

Kantelen

atoms/battlements.html — rand met kantelen in de vier kleuren van het logo, puur CSS (mask).

Zwaan

atoms/swan.html — de zwaan uit het logo als inline SVG; kleur via color.

Lees-verder-link

.more-link — link onder een tekstblok naar een pagina met meer, met een pijl die bij hover meeschuift. In Markdown: [Tekst](/pagina/){: .more-link}.

Download

atoms/download.html — link naar een document, met het bestandstype als label. Parameters: file en title.

Nog invullen

atoms/todo.html — markeert gegevens die nog ontbreken, met optioneel text="...". Alleen zichtbaar lokaal; op de live site (JEKYLL_ENV=production) wordt niets getoond.

Molecules

Brand

molecules/brand.html — logo en sitenaam, linkt naar de homepage.

Dorpshuis Zwammerdam

Menu

molecules/menu.html — items komen uit _data/menu.yml. Horizontaal (standaard) en met class="menu--vertical".

Adres

molecules/address.html — gegevens komen uit organisation in _config.yml.

Bestuur

molecules/board.html — functies en namen uit _data/bestuur.yml. De opmaak .board werkt voor elke gegevenslijst (<dl>): regels met een lijn ertussen, zoals de nieuwslijst op DamseZaken. Op mobiel komen label en waarde onder elkaar.

Agenda

molecules/agenda.html — komende activiteiten uit _data/agenda.yml (ook via ./sync-damsezaken.py), met datumblokje in het Nederlands. Optioneel limit=3. Toont alleen items vanaf de builddatum.

Gebruikerskaartje

molecules/user-card.html — één gebruiker van het dorpshuis (vereniging, kookclub, …): banner met kantelenrand (zonder banner: placeholder in de kleur van de gebruiker met de zwaan), logo dat de banner overlapt (of een monogram), naam, korte beschrijving in je-vorm (“Hier kom je om…”) en knoppen voor website, infopagina en mail. Banner en logo komen uit _data/gebruikers_extra.yml of, voor het logo, van de eigen website. Bij meerdere e-mailadressen klapt de mailknop een lijstje uit. Parameters: club, extra (uit _data/gebruikers_extra.yml) en kleur (green, yellow, blue, red).

GU

Gymnastiekvereniging UDI

Mail (4)

• udigymzwammerdam@gmail.com
• udidanszwammerdam@gmail.com
• udisportzwammerdam@gmail.com
• bestuurudi@gmail.com

Muziekvereniging Wilhelmina

Website Mail

Ouderensoos 55+

Al sinds 1991 om de week op woensdag gezelligheid voor 55-plussers. Schuif gerust aan!

Meer info

Organisms

Header

organisms/header.html — brand + menu. Onder 640px breed klapt het menu in achter de hamburgerknop (maak je venster smal om het te zien).

Dorpshuis Zwammerdam

Hero

organisms/hero.html — paginaheader met de titel in beeld en de kantelenrand uit het logo eronder. Elke pagina krijgt er automatisch een; de titel komt uit hero.title of title in de front matter.

Met foto (hero.image, hero.alt, hero.caption): de foto staat in duotoon (huisstijlblauw) en kleurt in bij hover. Het bijschrift staat klein in de afbeelding.

Welkom bij het dorpshuis

Zonder foto: blauw vlak met de zwaan uit het logo.

Mastodon-feed

organisms/mastodon-feed.html — berichten van het dorp (organisation.mastodon in _config.yml) en de gebruikers van het dorpshuis (mastodon: in _data/gebruikers_extra.yml), opgehaald door ./sync-damsezaken.py. In de browser vervangt assets/js/mastodon.js die door verse berichten van de API van Mastodon (zonder JavaScript blijven de opgeslagen berichten staan). Elk bericht is een molecules/toot.html: avatar, naam, datum, eventueel “gedeeld van”, foto’s (lokaal opgeslagen) en tekst. Op de homepage staat de feed in een zijkolom (.layout-sidebar): rechts naast de tekst op brede schermen, eronder op smalle schermen.

Brommers scheuren door de bocht

Zwammerdam 16 aug 2026 gedeeld van Johan Groenen

Zaterdag 4 juli Oldtimer Dag bij Ipse de Brugge, met lunchconcert Wilhelmina van 12.30 tot 13.30

Muziekvereniging Wilhelmina 26 jun 2026

Nu: Brandweer in het Ziendepark

Zwammerdam 26 jun 2026

damsezaken.nu/vrijdag-komt-de-…

Gebruikers

organisms/user-grid.html — raster met kaartjes van de gebruikers van het dorpshuis uit _data/gebruikers.yml, op de pagina Activiteiten getoond als “wat kun je er doen”: verenigingen van DamseZaken (via ./sync-damsezaken.py) en gebruikers die daar niet op staan, zoals de kookclub. Wie erin staat, bepaal je in _data/gebruikers_extra.yml. De kleuren rouleren groen, geel, blauw, rood, zoals de rand van het logo.

Kalender

organisms/calendar.html — maandkalender met de agenda uit _data/agenda.yml, van de eerste maand waarin nog iets gebeurt tot het laatste agenda-item. Met JavaScript (assets/js/calendar.js) blader je per maand; zonder JavaScript staan de maanden onder elkaar. Op mobiel krijgen dagen met activiteiten een gevuld bolletje en staat de lijst (molecules/agenda.html) onder het rooster.

Footer

organisms/footer.html — adres, menu en verwijzing naar DamseZaken, met onderaan het copyright en de maker van de website (apitecture.nl).