/* * Statisch thema, opvolger van em-blog-base voor sites op Cloudflare Pages. * * Kleuren en fonts komen per site uit branding.json en staan als custom * properties in de (--c-*, --f-body, --f-kop). Dit bestand is voor * alle sites gelijk; een opmaakvariant hangt achter body.em-layout-. * * Drie regels uit de beoordelingsronde van em-blog-base gelden hier ook: * 1. Niets beweegt bij hover. * 2. Beelden blijven klein: aspect-ratio 16/11. * 3. Minstens 24 artikelen op de homepage, in vier kolommen. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65; color: var(--c-tekst); background: var(--c-achtergrond); } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary); text-underline-offset: 2px; } a:hover { color: var(--c-primary-dark); } h1, h2, h3, h4 { font-family: var(--f-kop); line-height: 1.2; color: var(--c-primary-dark); font-weight: 600; } .breed { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .smal { max-width: 740px; margin: 0 auto; padding: 0 20px; } /* Kop en voet */ .kop { background: var(--c-cream); border-bottom: 1px solid var(--c-rand); } .kop__rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .kop__merk { font-family: var(--f-kop); font-size: 1.5rem; font-weight: 700; color: var(--c-primary-dark); text-decoration: none; } .kop__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95rem; } .kop__nav a { color: var(--c-tekst); text-decoration: none; } .kop__nav a:hover { color: var(--c-primary); text-decoration: underline; } .voet { margin-top: 72px; background: var(--c-primary-dark); color: var(--c-cream); } .voet__rij { padding-top: 40px; padding-bottom: 40px; } .voet__merk { font-family: var(--f-kop); font-size: 1.3rem; font-weight: 700; margin: 0; } .voet__tagline { margin: 4px 0 18px; opacity: .8; } .voet__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .voet a { color: var(--c-cream); } .voet__klein { margin: 24px 0 0; font-size: .85rem; opacity: .7; } /* Homepage */ .intro { padding: 40px 0 8px; } .intro__kop { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; } .intro__tekst { font-size: 1.15rem; color: var(--c-tekst-zacht); margin: 8px 0 0; max-width: 46rem; } .sectiekop { font-size: 1.35rem; margin: 40px 0 16px; } .sectiekop--los { margin-top: 32px; } .hubs__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .hubs__lijst--klein { margin-bottom: 8px; } .hub a { display: block; height: 100%; padding: 14px 16px; background: var(--c-cream); border: 1px solid var(--c-rand); border-radius: 6px; text-decoration: none; color: var(--c-tekst); } .hub a:hover { border-color: var(--c-primary); } .hub__naam { display: block; font-weight: 600; color: var(--c-primary-dark); } .hub__aantal { display: block; font-size: .85rem; color: var(--c-tekst-zacht); } /* Kaarten */ .raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; } .kaart__link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--c-tekst); } .kaart__beeld { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 4px; background: var(--c-muted); } .kaart__meta { font-size: .8rem; color: var(--c-tekst-zacht); text-transform: uppercase; letter-spacing: .03em; } .kaart__titel { font-family: var(--f-kop); font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: var(--c-primary-dark); } .kaart__link:hover .kaart__titel { text-decoration: underline; } .kaart__samenvatting { font-size: .92rem; color: var(--c-tekst-zacht); } .paginering { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--c-rand); font-size: .95rem; } /* Archief */ .kruimels { font-size: .85rem; color: var(--c-tekst-zacht); margin: 24px 0 8px; } .kruimels a { color: var(--c-tekst-zacht); } .archief__kop h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 8px; } .archief__pagina { font-size: 1rem; color: var(--c-tekst-zacht); font-weight: 400; } .archief__intro { max-width: 46rem; color: var(--c-tekst-zacht); margin-bottom: 24px; } /* Artikel */ .artikel__titel { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 4px 0 10px; } .artikel__meta { font-size: .9rem; color: var(--c-tekst-zacht); margin: 0 0 20px; } .artikel__meta a { color: var(--c-tekst-zacht); } .artikel__beeld { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 6px; margin-bottom: 28px; } .artikel__tekst h2 { font-size: 1.6rem; margin: 2.2em 0 .5em; } .artikel__tekst h3 { font-size: 1.25rem; margin: 1.8em 0 .4em; } .artikel__tekst p, .artikel__tekst ul, .artikel__tekst ol { margin: 0 0 1.1em; } .artikel__tekst li { margin-bottom: .35em; } .artikel__tekst blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-accent); color: var(--c-tekst-zacht); } .artikel__tekst blockquote p:last-child { margin-bottom: 0; } .artikel__tekst table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; display: block; overflow-x: auto; } .artikel__tekst th, .artikel__tekst td { border: 1px solid var(--c-rand); padding: 8px 10px; text-align: left; vertical-align: top; } .artikel__tekst th { background: var(--c-muted); } .artikel__tekst figure { margin: 1.6em 0; } .artikel__tekst figure img { border-radius: 6px; } .artikel__tekst figcaption { font-size: .85rem; color: var(--c-tekst-zacht); margin-top: 6px; } .artikel__tekst details { border: 1px solid var(--c-rand); border-radius: 6px; padding: 10px 14px; margin: 0 0 10px; background: var(--c-cream); } .artikel__tekst summary { font-weight: 600; cursor: pointer; } .hublinks { margin: 48px 0 0; padding: 24px; background: var(--c-cream); border: 1px solid var(--c-rand); border-radius: 6px; } .hublinks__intro { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-tekst-zacht); } .hublinks__titel { font-size: 1.1rem; margin: 16px 0 6px; } .hublinks__titel a { color: var(--c-primary-dark); } .hublinks ul { margin: 0; padding-left: 1.1em; } .hublinks li { margin-bottom: 4px; } .auteur { margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--c-rand); } .auteur__naam { font-weight: 600; margin: 0 0 4px; } .auteur__bio { margin: 0; color: var(--c-tekst-zacht); font-size: .95rem; } .lees-ook { margin-top: 24px; } /* Variant: compact (ondernemen, geld, techniek). Zoveel mogelijk artikelen in beeld: klein liggend beeld, geen samenvatting. */ .em-layout-compact .raster { gap: 22px 18px; } .em-layout-compact .kaart__titel { font-size: 1rem; } /* Variant: verhalend. Zelfde dichtheid, met samenvatting en rustiger typografie. */ .em-layout-verhalend .kaart__titel { font-weight: 500; } @media (max-width: 1024px) { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .breed, .smal { padding: 0 16px; } .artikel__tekst h2 { font-size: 1.4rem; } } @media (max-width: 420px) { .raster { grid-template-columns: minmax(0, 1fr); } }