/* ============================================
BASIS
============================================ */
#pitane-cartoon-archief {
--pb-bg: #0b1220;
--pb-card: #172235;
--pb-border: #2b3a50;
--pb-blue: #2563eb;
--pb-blue-light: #60a5fa;
--pb-text: #f8fafc;
--pb-muted: #a7b5c9;
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: clamp(16px, 3vw, 42px);
border-radius: 18px;
background: var(--pb-bg);
color: var(--pb-text);
font-family: system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI",
Arial, sans-serif;
}
#pitane-cartoon-archief *,
#pitane-cartoon-archief *::before,
#pitane-cartoon-archief *::after {
box-sizing: border-box;
}
/* ============================================
HEADER
============================================ */
#pitane-cartoon-archief .pb-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 30px 0 35px;
border-bottom: 1px solid var(--pb-border);
}
#pitane-cartoon-archief .pb-kicker {
display: flex;
align-items: center;
gap: 9px;
color: var(--pb-blue-light);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
#pitane-cartoon-archief .pb-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #3b82f6;
box-shadow: 0 0 12px #3b82f6;
}
#pitane-cartoon-archief .pb-header h2 {
margin: 14px 0 12px;
padding: 0;
color: #fff;
font-size: clamp(27px, 4vw, 46px);
font-weight: 850;
line-height: 1.15;
letter-spacing: -1px;
}
#pitane-cartoon-archief .pb-header p {
max-width: 620px;
margin: 0;
color: var(--pb-muted);
font-size: 15px;
line-height: 1.7;
}
#pitane-cartoon-archief .pb-header-icon {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 75px;
border-radius: 18px;
background: linear-gradient(135deg, #2563eb, #1e40af);
color: #fff;
font-size: 42px;
transform: rotate(-7deg);
}
/* ============================================
TOOLBAR
============================================ */
#pitane-cartoon-archief .pb-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin: 25px 0;
color: var(--pb-muted);
font-size: 13px;
}
#pitane-cartoon-archief .pb-toolbar-label {
color: var(--pb-blue-light);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
/* ============================================
CARTOON GRID
============================================ */
#pitane-cartoon-archief .pb-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 28px;
}
/* ============================================
CARTOONKAART
============================================ */
#pitane-cartoon-archief .pb-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--pb-border);
border-radius: 16px;
background: var(--pb-card);
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
#pitane-cartoon-archief .pb-card:hover {
transform: translateY(-5px);
border-color: var(--pb-blue);
box-shadow: 0 15px 35px rgba(0,0,0,.3);
}
/* ============================================
VOLLEDIGE LIGGENDE CARTOON
Geen uitsnede, geen vaste hoogte
============================================ */
#pitane-cartoon-archief .pb-image-link {
display: block;
background: #fff;
padding: 10px;
line-height: 0;
text-decoration: none;
}
#pitane-cartoon-archief .pb-image {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
border-radius: 5px;
}
/* ============================================
ONDERKANT KAART
============================================ */
#pitane-cartoon-archief .pb-card-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 17px;
}
#pitane-cartoon-archief .pb-card-label {
display: flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
}
#pitane-cartoon-archief .pb-card-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pb-blue-light);
}
#pitane-cartoon-archief .pb-read {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 11px 17px;
border-radius: 9px;
background: var(--pb-blue);
color: #fff !important;
font-size: 13px;
font-weight: 750;
line-height: 1.2;
text-decoration: none !important;
transition: background .2s ease;
}
#pitane-cartoon-archief .pb-read:hover {
background: #1d4ed8;
color: #fff;
}
#pitane-cartoon-archief .pb-read span {
font-size: 18px;
}
/* ============================================
PAGINERING
============================================ */
#pitane-cartoon-archief .pb-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 9px;
margin: 40px 0 20px;
}
#pitane-cartoon-archief .pb-pagination[hidden] {
display: none;
}
#pitane-cartoon-archief .pb-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 8px 14px;
border: 1px solid var(--pb-border);
border-radius: 10px;
background: #1e293b;
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .2s ease;
}
#pitane-cartoon-archief .pb-page-btn:hover {
background: #334155;
}
#pitane-cartoon-archief .pb-page-btn.active {
border-color: var(--pb-blue);
background: var(--pb-blue);
}
#pitane-cartoon-archief .pb-page-btn:disabled {
opacity: .3;
cursor: not-allowed;
}
/* ============================================
FOOTER
============================================ */
#pitane-cartoon-archief .pb-footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 35px;
padding-top: 20px;
border-top: 1px solid var(--pb-border);
color: var(--pb-muted);
font-size: 11px;
letter-spacing: 1px;
}
#pitane-cartoon-archief .pb-footer span:first-child {
color: var(--pb-blue-light);
font-weight: 900;
}
/* ============================================
TABLET
============================================ */
@media (max-width: 800px) {
#pitane-cartoon-archief .pb-grid {
gap: 16px;
}
#pitane-cartoon-archief .pb-card-bottom {
align-items: stretch;
}
}
/* ============================================
MOBIEL
============================================ */
@media (max-width: 650px) {
#pitane-cartoon-archief .pb-grid {
grid-template-columns: 1fr;
gap: 22px;
}
#pitane-cartoon-archief .pb-header {
padding: 18px 0 25px;
}
#pitane-cartoon-archief .pb-header-icon {
display: none;
}
#pitane-cartoon-archief .pb-card-bottom {
padding: 14px;
}
#pitane-cartoon-archief .pb-read {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
#pitane-cartoon-archief *,
#pitane-cartoon-archief *::before,
#pitane-cartoon-archief *::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
(function () {
"use strict";
/* ==========================================
CARTOON DATABASE
Iedere cartoon heeft 2 parameters:
1. URL cartoonafbeelding
2. URL nieuwsartikel
Nieuwste cartoon bovenaan plaatsen.
========================================== */
const cartoons = [
// ========================================
// CARTOON 3 - TAALTEST
// 12 NOVEMBER 2026
// ========================================
[
"https://pitane.blue/wp-content/uploads/2026/11/pitane_taaltest.jpg",
"https://pitane.blue/2026/11/12/rijbewijs-voor-taxi-in-gevaar-honderden-chauffeurs-spreken-onvoldoende-nederlands/"
],
// ========================================
// CARTOON 2 - KNV STEMMEN
// 9 NOVEMBER 2026
// ========================================
[
"https://pitane.blue/wp-content/uploads/2026/11/pitane_knv_stemmen.jpg",
"https://pitane.blue/2026/11/09/grote-jongens-aan-tafel-duizenden-zelfstandige-taxichauffeurs-missen-eigen-stem/"
],
// ========================================
// CARTOON 1 - TREVVEL / REIZI
// 1 AUGUSTUS 2026
// ========================================
[
"https://pitane.blue/wp-content/uploads/2026/11/pitane_cartoon_Trevvel_kleur.jpg",
"https://pitane.blue/2026/08/01/rmc-neemt-stokje-over-nieuwe-naam-reizi-moet-rust-brengen-in-rotterdam/"
]
];
/* ==========================================
INSTELLINGEN
========================================== */
const PER_PAGE = 20;
let currentPage = 1;
const root = document.getElementById(
"pitane-cartoon-archief"
);
if (!root || root.dataset.initialized === "true") {
return;
}
root.dataset.initialized = "true";
const grid = root.querySelector("#pb-cartoon-grid");
const pagination = root.querySelector("#pb-pagination");
const count = root.querySelector("#pb-count");
const totalPages = Math.ceil(
cartoons.length / PER_PAGE
);
/* ==========================================
CARTOONKAART MAKEN
========================================== */
function createCard(cartoon, number) {
const [imageUrl, articleUrl] = cartoon;
const card = document.createElement("article");
card.className = "pb-card";
// Cartoonafbeelding
const imageLink = document.createElement("a");
imageLink.className = "pb-image-link";
imageLink.href = articleUrl;
imageLink.target = "_blank";
imageLink.rel = "noopener noreferrer";
imageLink.setAttribute(
"aria-label",
"Lees artikel bij cartoon " + number
);
const image = document.createElement("img");
image.className = "pb-image";
image.src = imageUrl;
image.alt = "Pitane Blue cartoon " + number;
image.loading = number <= 2 ? "eager" : "lazy";
image.decoding = "async";
imageLink.appendChild(image);
// Onderkant van de kaart
const bottom = document.createElement("div");
bottom.className = "pb-card-bottom";
const label = document.createElement("div");
label.className = "pb-card-label";
label.textContent = "PITANE CARTOON";
const read = document.createElement("a");
read.className = "pb-read";
read.href = articleUrl;
read.target = "_blank";
read.rel = "noopener noreferrer";
read.textContent = "Lees het artikel ";
const arrow = document.createElement("span");
arrow.textContent = "↗";
arrow.setAttribute("aria-hidden", "true");
read.appendChild(arrow);
bottom.append(label, read);
card.append(imageLink, bottom);
return card;
}
/* ==========================================
PAGINAKNOP MAKEN
========================================== */
function createPageButton(
label,
page,
disabled,
active
) {
const button = document.createElement("button");
button.type = "button";
button.className = "pb-page-btn";
button.textContent = label;
button.disabled = disabled;
if (active) {
button.classList.add("active");
button.setAttribute("aria-current", "page");
}
button.addEventListener("click", function () {
if (disabled || page === currentPage) {
return;
}
render(page);
root.scrollIntoView({
behavior: window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches ? "auto" : "smooth",
block: "start"
});
});
return button;
}
/* ==========================================
PAGINA TONEN
========================================== */
function render(page) {
currentPage = Math.max(
1,
Math.min(page, totalPages || 1)
);
grid.replaceChildren();
pagination.replaceChildren();
const start = (currentPage - 1) * PER_PAGE;
const end = start + PER_PAGE;
const visible = cartoons.slice(start, end);
visible.forEach(function (cartoon, index) {
grid.appendChild(
createCard(cartoon, start + index + 1)
);
});
// Teller
const first = cartoons.length ? start + 1 : 0;
const last = Math.min(end, cartoons.length);
count.textContent =
first + " - " + last +
" van " + cartoons.length + " cartoons";
// Paginering alleen bij meer dan 20 cartoons
if (totalPages <= 1) {
pagination.hidden = true;
return;
}
pagination.hidden = false;
// Vorige pagina
pagination.appendChild(
createPageButton(
"❮",
currentPage - 1,
currentPage === 1,
false
)
);
// Paginanummers
for (let p = 1; p <= totalPages; p++) {
pagination.appendChild(
createPageButton(
String(p),
p,
false,
p === currentPage
)
);
}
// Volgende pagina
pagination.appendChild(
createPageButton(
"❯",
currentPage + 1,
currentPage === totalPages,
false
)
);
}
/* ==========================================
INITIALISATIE
========================================== */
render(1);
})();
