/* Theme Name: Piccardthof Theme URI: https://piccardthofplas.nl/ Description: Thema voor Bewonersvereniging Piccardthofplas. Child theme van Twenty Twenty-Five, met het eigen ontwerpsysteem in theme.json: marineblauw voor koppen, koraal uit het logo als accent, Sora en Inter, en een leesbreedte van 680 pixels. Author: iWink Template: twentytwentyfive Version: 1.0.10 Requires at least: 6.7 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: piccardthof Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style */ /* * Bijna alle vormgeving staat in theme.json, zodat wie een pagina bijwerkt * dezelfde kleuren en maten uit de editor kan kiezen. Wat hieronder staat, * kan niet in theme.json worden uitgedrukt. */ /* Lange e-mailadressen mogen afbreken; anders lopen ze op een telefoon buiten hun kolom. */ a { overflow-wrap: anywhere; } /* Accordeons (het details-blok). Zonder dit zijn het kale driehoekjes: geen kader, geen ruimte, geen raakvlak dat je met een duim kunt treffen. */ .wp-block-details { border-top: 1px solid var(--wp--preset--color--lijn); border-bottom: 1px solid var(--wp--preset--color--lijn); margin-top: -1px; padding: 0; } .wp-block-details + .wp-block-details { border-top: 0; } .wp-block-details > summary { font-family: var(--wp--preset--font-family--kop); font-size: var(--wp--preset--font-size--tussenkop); font-weight: 600; color: var(--wp--preset--color--marineblauw); line-height: 1.25; min-height: 68px; display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; list-style: none; } .wp-block-details > summary::-webkit-details-marker { display: none; } /* Eigen chevron, zodat hij meedraait bij openen en de koraalkleur volgt. */ .wp-block-details > summary::after { content: ""; flex-shrink: 0; margin-left: auto; width: 20px; height: 20px; background-color: currentColor; color: var(--wp--preset--color--inkt-zacht); transition: transform 0.18s ease; -webkit-mask: var(--piccardthof-chevron) center / contain no-repeat; mask: var(--piccardthof-chevron) center / contain no-repeat; } .wp-block-details[open] > summary::after { transform: rotate(180deg); color: var(--wp--preset--color--koraal); } .wp-block-details > summary:hover { color: var(--wp--preset--color--koraal-tekst); } .wp-block-details > :not(summary) { padding-left: 4px; padding-right: 4px; padding-bottom: 26px; margin-top: 0; } :root { --piccardthof-chevron: url('data:image/svg+xml;utf8,'); } /* --------------------------------------------------------------------------- Navigatie Core's Navigatie-blok levert de hamburger en het overlay functioneel op, maar kaal: een overlay over het volle scherm zonder rijen. Hieronder wordt dat de menulade uit het ontwerp — een paneel van 316px links, met een sluier over de rest van het scherm. --------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; } /* De sluier. Drie dingen om te weten: - Geef het Navigatie-blok géén overlayBackgroundColor; die zet een achtergrondkleur op deze container en dekt de sluier af. - Core zet zelf `background-color: #fff` via de regel `.wp-block-navigation:not(.has-background) …is-menu-open`. Die CSS staat inline in de en dus ná deze stylesheet; bij gelijke specificiteit wint core. Vandaar dezelfde selector plus een dubbele klasse én !important — er staat elders ook een `background: transparent !important`. - `height: 100%` moet door de hele keten van wrappers, anders rekent het paneel tegen een tussenlaag die zelf niet volledig hoog is. */ .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open.is-menu-open { background-color: rgba(10, 8, 59, 0.42) !important; padding: 0; display: block; height: 100%; } .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog { height: 100%; max-width: none; padding: 0; margin: 0; } /* Het paneel zelf. */ .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content { background-color: var(--wp--preset--color--wit); width: min(316px, 86vw); height: 100%; padding: 64px 0 0; display: block; overflow-y: auto; box-shadow: 0 0 40px rgba(10, 8, 59, 0.18); } .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-page-list { display: block; gap: 0; } /* Sluitknop rechtsboven ín het paneel, niet op de sluier. */ .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close { top: 8px; right: auto; inset-inline-start: calc(min(316px, 86vw) - 56px); color: var(--wp--preset--color--marineblauw); } /* Rijen over de volle breedte, met een raakvlak van 56px. */ .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item { width: 100%; display: block; border-bottom: 1px solid var(--wp--preset--color--lijn); } .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--kop); font-size: 17px; font-weight: 500; color: var(--wp--preset--color--marineblauw); min-height: 56px; display: flex; align-items: center; width: 100%; padding: 0 20px; border-left: 3px solid transparent; } /* Actieve pagina: koraal streepje links, zachte vulling. */ .wp-block-navigation__responsive-container.is-menu-open.is-menu-open .current-menu-item > .wp-block-navigation-item__content { font-weight: 600; box-shadow: none; border-left-color: var(--wp--preset--color--koraal); background-color: var(--wp--preset--color--koraal-waas); } /* Op desktop: koraal streepje onder de actieve pagina. Uitsluitend in de koptekst. Zonder die inperking pakt deze regel ook de footer-navigatie, en dan wordt de actieve pagina daar marineblauw op marineblauw — contrast 1:1, dus letterlijk onleesbaar. */ @media (min-width: 600px) { header .wp-block-navigation:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--marineblauw); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--koraal); } } /* --------------------------------------------------------------------------- Categorielabels Een bericht kan in meer dan één categorie staan. Het Categorieën-blok zet die achter elkaar met een komma ertussen; met een achtergrond op het blok zelf wordt dat één brede pil met een komma erin. Daarom krijgt elk label zijn eigen chip en gaat het scheidingsteken uit. Gebruik: --------------------------------------------------------------------------- */ .wp-block-post-terms.labels { display: inline-flex; flex-wrap: wrap; gap: 8px; } .wp-block-post-terms.labels a { display: inline-block; background-color: var(--wp--preset--color--koraal-waas); color: var(--wp--preset--color--koraal-diep); font-family: var(--wp--preset--font-family--tekst); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; padding: 4px 9px; border-radius: 2px; text-decoration: none; } .wp-block-post-terms.labels a:hover { background-color: var(--wp--preset--color--koraal); color: var(--wp--preset--color--wit); text-decoration: none; } .wp-block-post-terms.labels .wp-block-post-terms__separator { display: none; } /* --------------------------------------------------------------------------- Footer: contrast op de donkerblauwe grond Twee dingen gingen hier mis en zijn allebei hier opgelost, omdat de footer één plek is waar de kleurregels van elders niet kloppen: 1. theme.json zet het Navigatie-blok op inkt (#3C4053) — bedoeld voor de koptekst op wit. Op marineblauw is dat 1,85:1. 2. theme.json zet links op koraal-tekst (#C4451F). Prima op wit (5,0:1), maar op marineblauw 3,8:1. Beide onder de 4,5:1 die WCAG 2.1 AA voor gewone tekst eist. Let op de specificiteit: theme.json genereert `:root :where(a…)`, dus `footer a` alleen is niet genoeg — vandaar de klasse erbij. --------------------------------------------------------------------------- */ footer.wp-block-group a, footer.wp-block-group .wp-block-navigation, footer.wp-block-group .wp-block-navigation-item__content { color: var(--wp--preset--color--footer-link); } footer.wp-block-group a:hover, footer.wp-block-group a:focus, footer.wp-block-group .wp-block-navigation-item__content:hover, footer.wp-block-group .wp-block-navigation-item__content:focus { color: var(--wp--preset--color--wit); text-decoration: underline; } /* Bijschriften onder afbeeldingen. */ .wp-block-image figcaption { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--inkt-zacht); text-align: left; margin-top: 12px; } /* Citaten: koraal maatstreepje in plaats van een kaartje. */ .wp-block-quote { border-left: 3px solid var(--wp--preset--color--koraal); padding-left: 26px; margin-block: 38px; font-style: normal; } .wp-block-quote p { font-family: var(--wp--preset--font-family--kop); font-size: var(--wp--preset--font-size--citaat); font-weight: 500; line-height: 1.4; color: var(--wp--preset--color--marineblauw); letter-spacing: -0.01em; } .wp-block-quote cite { font-family: var(--wp--preset--font-family--tekst); font-size: var(--wp--preset--font-size--klein); font-style: normal; font-weight: 400; color: var(--wp--preset--color--inkt-zacht); }