fix: wcag improvements
This commit is contained in:
Tim Rijkse
359
README.md
Normal file
359
README.md
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
# Milinda Uitgevers — Herontwerp Mobiele Webshop
|
||||||
|
|
||||||
|
> **Pitch voor het herontwerp van de webshop van Milinda Uitgevers**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📖 Over dit project
|
||||||
|
|
||||||
|
Dit project is een pitch voor het herontwerp van de webshop van Milinda Uitgevers. De huidige website is ruim vijftien jaar oud en voldoet niet meer aan de eisen van vandaag op het gebied van responsive design en toegankelijkheid.
|
||||||
|
|
||||||
|
### Doelstelling
|
||||||
|
|
||||||
|
Het doel van dit herontwerp is om:
|
||||||
|
|
||||||
|
1. **Gebruiksgemak op alle platforms** — Een volledig responsieve mobiele ervaring die naadloos werkt op smartphones, tablets en desktops
|
||||||
|
2. **Toegankelijkheid** — Volledige ondersteuning voor gebruikers met een beperking (WCAG-richtlijnen)
|
||||||
|
3. **Behoud van de "feel"** — De oorspronkelijke sfeer en identiteit van de website behouden terwijl de visuele presentatie wordt gemoderniseerd
|
||||||
|
|
||||||
|
### Waarom deze aanpak?
|
||||||
|
|
||||||
|
We hebben gekozen voor een **Web Components-architectuur** om de volgende redenen:
|
||||||
|
|
||||||
|
- **Geen externe frameworks** — Werkt met vanilla JavaScript, geen React/Vue/Angular nodig
|
||||||
|
- **Eenvoudige integratie** — De componenten kunnen gemakkelijk worden geïntegreerd met de bestaande back-end
|
||||||
|
- **Toekomstbestendig** — Web Components zijn een webstandaard en werken in alle moderne browsers
|
||||||
|
- **Modulair** — Elk component is zelfstandig en herbruikbaar
|
||||||
|
- **Geen server-side libraries** — Volledig client-side, zoals gevraagd in de opdracht
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Project starten
|
||||||
|
|
||||||
|
### Vereisten
|
||||||
|
|
||||||
|
- Node.js 18.0.0 of hoger
|
||||||
|
|
||||||
|
### Installatie
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Installeer dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Start de development server
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
De applicatie is vervolgens beschikbaar op `http://localhost:3000`.
|
||||||
|
|
||||||
|
### Beschikbare pagina's
|
||||||
|
|
||||||
|
| Pagina | URL | Beschrijving |
|
||||||
|
|--------|-----|--------------|
|
||||||
|
| Homepage | `/index.html` | Overzicht met uitgelichte boeken, categorieën en nieuwsbrief |
|
||||||
|
| Boekdetail | `/book.html` | Detailpagina voor "Zen is opendoen" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 Projectstructuur
|
||||||
|
|
||||||
|
```
|
||||||
|
milinda-pitch/
|
||||||
|
├── css/
|
||||||
|
│ └── styles.css # Globale stijlen en design tokens
|
||||||
|
├── images/ # Afbeeldingen en iconen
|
||||||
|
├── js/
|
||||||
|
│ ├── app.js # Hoofdapplicatie entry point
|
||||||
|
│ ├── components/ # Web Components
|
||||||
|
│ ├── icons/ # SVG icon components
|
||||||
|
│ └── store/ # State management (winkelwagen)
|
||||||
|
├── index.html # Homepage
|
||||||
|
├── book.html # Boekdetailpagina
|
||||||
|
└── package.json # Project configuratie
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧩 Componenten
|
||||||
|
|
||||||
|
### Layout Componenten
|
||||||
|
|
||||||
|
| Component | Bestand | Beschrijving |
|
||||||
|
|-----------|---------|--------------|
|
||||||
|
| `<site-header>` | `site-header.js` | Sticky header met scroll-gedrag: klapt in bij scrollen naar beneden, verschijnt bij omhoog scrollen |
|
||||||
|
| `<top-bar>` | `top-bar.js` | Bovenste balk met logo, menu-knop en acties (profiel, winkelwagen) |
|
||||||
|
| `<horizontal-scroll-nav>` | `horizontal-scroll-nav.js` | Horizontaal scrollbare categorie-navigatie met pill-vormige knoppen |
|
||||||
|
| `<search-bar>` | `search-bar.js` | Zoekbalk met spraakherkenning (Nederlands) en zoek-icoon |
|
||||||
|
| `<site-content>` | `site-content.js` | Wrapper voor de hoofdinhoud van de pagina |
|
||||||
|
| `<site-footer>` | `site-footer.js` | Footer met accordion-secties en linkkolommen |
|
||||||
|
| `<mobile-drawer>` | `mobile-drawer.js` | Slide-in navigatiemenu vanaf de linkerzijde met backdrop |
|
||||||
|
|
||||||
|
### Content Componenten
|
||||||
|
|
||||||
|
| Component | Bestand | Beschrijving |
|
||||||
|
|-----------|---------|--------------|
|
||||||
|
| `<book-card>` | `book-card.js` | Boekkaart met cover, titel, beschrijving, auteur en prijs. Ondersteunt licht/donker thema |
|
||||||
|
| `<book-details>` | `book-details.js` | Uitgebreide boekdetails met metadata, categorieën en koopknoppen |
|
||||||
|
| `<book-description>` | `book-description.js` | Gestileerde boekbeschrijving met citaten |
|
||||||
|
| `<book-reviews>` | `book-reviews.js` | Container voor boekrecensies |
|
||||||
|
| `<book-review-item>` | `book-review-item.js` | Individuele recensie met sterren, auteur en datum |
|
||||||
|
| `<category-card>` | `category-card.js` | Categoriekaart met icoon en titel |
|
||||||
|
| `<image-gallery>` | `image-gallery.js` | Afbeeldingsgalerij met thumbnails |
|
||||||
|
| `<content-tabs>` | `content-tabs.js` | Tabblad-interface voor verschillende secties (Beschrijving, Inzage, Recensies) met volledige keyboard navigatie |
|
||||||
|
|
||||||
|
### Interactieve Componenten
|
||||||
|
|
||||||
|
| Component | Bestand | Beschrijving |
|
||||||
|
|-----------|---------|--------------|
|
||||||
|
| `<push-box>` | `push-box.js` | Promotionele container met logo, titel en CTA. Ondersteunt `variant="purple"` |
|
||||||
|
| `<newsletter-signup>` | `newsletter-signup.js` | Nieuwsbrief aanmeldformulier met e-mail input |
|
||||||
|
| `<footer-accordion-item>` | `footer-accordion-item.js` | Inklapbare sectie voor de footer met ARIA-ondersteuning |
|
||||||
|
| `<add-to-cart-button>` | `add-to-cart-button.js` | Plus-knop voor toevoegen aan winkelwagen |
|
||||||
|
|
||||||
|
### Button Componenten
|
||||||
|
|
||||||
|
| Component | Bestand | Beschrijving |
|
||||||
|
|-----------|---------|--------------|
|
||||||
|
| `<arrow-button>` | `arrow-button.js` | Link met ronde pijl-icoon |
|
||||||
|
| `<cta-button>` | `cta-button.js` | Full-width call-to-action knop |
|
||||||
|
| `<icon-cta-button>` | `icon-cta-button.js` | CTA knop met icoon (winkelwagen, e-book) |
|
||||||
|
| `<icon-link-button>` | `icon-link-button.js` | Link met icoon (verlanglijstje, recensie) |
|
||||||
|
| `<action-links-list>` | `action-links-list.js` | Gegroepeerde actie-links |
|
||||||
|
|
||||||
|
### Utility Componenten
|
||||||
|
|
||||||
|
| Component | Bestand | Beschrijving |
|
||||||
|
|-----------|---------|--------------|
|
||||||
|
| `<section-title>` | `section-title.js` | Consistente sectietitel |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Iconen
|
||||||
|
|
||||||
|
Alle iconen zijn geïmplementeerd als Web Components en/of exporteerbare functies. Ze ondersteunen `size`, `color` en `stroke-width` attributen.
|
||||||
|
|
||||||
|
| Icon Component | Bestand | Beschrijving |
|
||||||
|
|----------------|---------|--------------|
|
||||||
|
| `<menu-icon>` | `menu-icon.js` | Hamburger menu icoon (3 lijnen) |
|
||||||
|
| `<user-icon>` | `user-icon.js` | Gebruikersprofiel icoon |
|
||||||
|
| `<shopping-bag-icon>` | `shopping-bag-icon.js` | Boodschappentas icoon |
|
||||||
|
| `<arrow-circle-right-icon>` | `arrow-circle-right-icon.js` | Pijl in cirkel (rechts) |
|
||||||
|
| `<book-open-icon>` | `book-open-icon.js` | Open boek icoon (placeholder) |
|
||||||
|
| `<clipboard-icon>` | `clipboard-icon.js` | Klembord icoon |
|
||||||
|
| `<chevron-down-icon>` | `chevron-down-icon.js` | Pijl naar beneden (accordion) |
|
||||||
|
| `<close-icon>` | `close-icon.js` | Sluiten/kruis icoon |
|
||||||
|
|
||||||
|
### Icon Functies
|
||||||
|
|
||||||
|
| Functie | Bestand | Beschrijving |
|
||||||
|
|---------|---------|--------------|
|
||||||
|
| `micIcon()` | `mic.js` | Microfoon icoon (spraakherkenning) |
|
||||||
|
| `searchIcon()` | `search.js` | Vergrootglas icoon |
|
||||||
|
| `sendIcon()` | `send-icon.js` | Verstuur/pijl icoon (nieuwsbrief) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Design System
|
||||||
|
|
||||||
|
### Lettertypen
|
||||||
|
|
||||||
|
| Font | Gewichten | Gebruik |
|
||||||
|
|------|-----------|---------|
|
||||||
|
| **Outfit** | 400 (Regular), 700 (Bold) | Primair lettertype voor alle tekst, titels en UI elementen |
|
||||||
|
| System fonts | - | Fallback: system-ui, -apple-system, etc. |
|
||||||
|
|
||||||
|
Het Outfit lettertype wordt geladen via Google Fonts CDN.
|
||||||
|
|
||||||
|
### Kleuren
|
||||||
|
|
||||||
|
#### Primaire Kleuren
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable | Gebruik |
|
||||||
|
|------|--------|--------------|---------|
|
||||||
|
| **Purple (primair)** | `#951D51` | `--color-button-primary`, `--color-purple` | Knoppen, links, accenten |
|
||||||
|
| **Purple Dark** | `#7A1842` | `--color-purple-dark` | Hover states |
|
||||||
|
|
||||||
|
#### Tekst Kleuren
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable | Gebruik |
|
||||||
|
|------|--------|--------------|---------|
|
||||||
|
| **Text** | `#1E293B` | `--color-text` | Primaire tekst |
|
||||||
|
| **Text Light** | `#64748B` | `--color-text-light` | Secundaire tekst |
|
||||||
|
| **Text Inverse** | `#FFFFFF` | `--color-text-inverse` | Tekst op donkere achtergrond |
|
||||||
|
| **Black** | `#000000` | `--color-black` | Titels en koppen |
|
||||||
|
|
||||||
|
#### Achtergrond Kleuren
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable | Gebruik |
|
||||||
|
|------|--------|--------------|---------|
|
||||||
|
| **Background** | `#FFFFFF` | `--color-background` | Primaire achtergrond |
|
||||||
|
| **Background Secondary** | `#F8FAFC` | `--color-background-secondary` | Pagina achtergrond |
|
||||||
|
| **Background Tertiary** | `#F1F5F9` | `--color-background-tertiary` | Cards, secties |
|
||||||
|
| **Push Box BG** | `#EBEEF4` | `--color-push-box-bg` | Promotie blokken |
|
||||||
|
| **Card Dark BG** | `#EBEEF4` | `--color-card-dark-bg` | Donkere kaarten |
|
||||||
|
| **Category Card** | `#F5F4FC` | - | Categorie kaarten |
|
||||||
|
|
||||||
|
#### Overige Kleuren
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable | Gebruik |
|
||||||
|
|------|--------|--------------|---------|
|
||||||
|
| **Border** | `#E2E8F0` | `--color-border` | Borders en scheidingslijnen |
|
||||||
|
| **Accent** | `#F59E0B` | `--color-accent` | Sterren, favoriet icoon |
|
||||||
|
| **Success** | `#22C55E` | `--color-success` | Bevestigingen |
|
||||||
|
| **Error** | `#EF4444` | `--color-error` | Foutmeldingen |
|
||||||
|
|
||||||
|
### Spacing
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable |
|
||||||
|
|------|--------|--------------|
|
||||||
|
| **XS** | 4px (0.25rem) | `--spacing-xs` |
|
||||||
|
| **SM** | 8px (0.5rem) | `--spacing-sm` |
|
||||||
|
| **MD** | 16px (1rem) | `--spacing-md` |
|
||||||
|
| **LG** | 24px (1.5rem) | `--spacing-lg` |
|
||||||
|
| **XL** | 32px (2rem) | `--spacing-xl` |
|
||||||
|
| **2XL** | 48px (3rem) | `--spacing-2xl` |
|
||||||
|
|
||||||
|
### Typografie Schaal
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable |
|
||||||
|
|------|--------|--------------|
|
||||||
|
| **XS** | 12px (0.75rem) | `--font-size-xs` |
|
||||||
|
| **SM** | 14px (0.875rem) | `--font-size-sm` |
|
||||||
|
| **Base** | 16px (1rem) | `--font-size-base` |
|
||||||
|
| **LG** | 18px (1.125rem) | `--font-size-lg` |
|
||||||
|
| **XL** | 20px (1.25rem) | `--font-size-xl` |
|
||||||
|
| **2XL** | 24px (1.5rem) | `--font-size-2xl` |
|
||||||
|
| **3XL** | 30px (1.875rem) | `--font-size-3xl` |
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable |
|
||||||
|
|------|--------|--------------|
|
||||||
|
| **SM** | 4px (0.25rem) | `--radius-sm` |
|
||||||
|
| **MD** | 8px (0.5rem) | `--radius-md` |
|
||||||
|
| **LG** | 12px (0.75rem) | `--radius-lg` |
|
||||||
|
| **XL** | 16px (1rem) | `--radius-xl` |
|
||||||
|
| **Full** | 9999px | `--radius-full` |
|
||||||
|
|
||||||
|
### Transities
|
||||||
|
|
||||||
|
| Naam | Waarde | CSS Variable |
|
||||||
|
|------|--------|--------------|
|
||||||
|
| **Fast** | 150ms ease | `--transition-fast` |
|
||||||
|
| **Normal** | 250ms ease | `--transition-normal` |
|
||||||
|
| **Slow** | 350ms ease | `--transition-slow` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ♿ Toegankelijkheid (WCAG)
|
||||||
|
|
||||||
|
Dit project is gebouwd met toegankelijkheid als prioriteit en volgt de WCAG 2.1 richtlijnen.
|
||||||
|
|
||||||
|
### Geïmplementeerde functies
|
||||||
|
|
||||||
|
#### Skip-to-content link
|
||||||
|
- Verborgen link die verschijnt bij keyboard focus
|
||||||
|
- Stelt gebruikers in staat direct naar de hoofdinhoud te navigeren
|
||||||
|
- Slaat herhalende navigatie-elementen over
|
||||||
|
|
||||||
|
#### Semantische HTML
|
||||||
|
- Correcte gebruik van `<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`
|
||||||
|
- Logische heading hiërarchie (h1, h2, h3)
|
||||||
|
- `<main>` element met `id="main-content"` voor skip-link target
|
||||||
|
|
||||||
|
#### ARIA Labels en Rollen
|
||||||
|
- `aria-label` op alle icon buttons (menu, profiel, winkelwagen, zoeken, etc.)
|
||||||
|
- `aria-expanded` en `aria-controls` op accordion componenten
|
||||||
|
- `role="tablist"`, `role="tab"`, en `role="tabpanel"` voor tabbed interfaces
|
||||||
|
- `aria-selected` voor actieve tabs
|
||||||
|
- `aria-current` voor actieve navigatie-items
|
||||||
|
- `aria-pressed` voor toggle buttons
|
||||||
|
|
||||||
|
#### Keyboard Navigatie
|
||||||
|
- Alle interactieve elementen zijn bereikbaar met Tab
|
||||||
|
- Tab componenten ondersteunen pijltjestoetsen (←/→), Home, en End
|
||||||
|
- Escape sluit de mobile drawer
|
||||||
|
- Zichtbare focus indicators op alle focusable elementen
|
||||||
|
- Logische focus volgorde
|
||||||
|
|
||||||
|
#### Formulieren
|
||||||
|
- `aria-label` op input velden
|
||||||
|
- Associatie tussen labels en inputs
|
||||||
|
- Duidelijke foutmeldingen
|
||||||
|
|
||||||
|
#### Spraakherkenning
|
||||||
|
- Zoekfunctie met Nederlandse spraakherkenning (`lang="nl-NL"`)
|
||||||
|
- Visuele feedback tijdens luisteren (pulse animatie)
|
||||||
|
- Graceful degradation in browsers zonder ondersteuning
|
||||||
|
|
||||||
|
#### Taal
|
||||||
|
- `lang="nl"` attribuut op HTML element
|
||||||
|
- Correcte taalinstelling voor screenreaders
|
||||||
|
|
||||||
|
### Focus Stijlen
|
||||||
|
|
||||||
|
Alle interactieve elementen hebben duidelijke focus indicators:
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Voorbeeld focus stijl */
|
||||||
|
element:focus {
|
||||||
|
outline: 2px solid var(--color-purple);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 Responsive Design
|
||||||
|
|
||||||
|
Het ontwerp is mobile-first gebouwd met een maximale breedte van **430px** voor de mobiele container. Op grotere schermen wordt de mobiele weergave gecentreerd weergegeven met een schaduw.
|
||||||
|
|
||||||
|
### Breakpoints
|
||||||
|
|
||||||
|
| Breakpoint | Gedrag |
|
||||||
|
|------------|--------|
|
||||||
|
| < 431px | Volledige breedte, mobiele ervaring |
|
||||||
|
| ≥ 431px | Gecentreerde container met afgeronde hoeken en schaduw |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Technische details
|
||||||
|
|
||||||
|
### Browser ondersteuning
|
||||||
|
|
||||||
|
- Chrome 90+
|
||||||
|
- Firefox 90+
|
||||||
|
- Safari 14+
|
||||||
|
- Edge 90+
|
||||||
|
|
||||||
|
### Geen build stap nodig
|
||||||
|
|
||||||
|
Het project maakt gebruik van native ES modules en heeft geen build tooling nodig. Alle JavaScript wordt direct door de browser geladen.
|
||||||
|
|
||||||
|
### State management
|
||||||
|
|
||||||
|
Een eenvoudige winkelwagen store (`js/store/cart.js`) beheert de winkelwagen state met:
|
||||||
|
- `addItem()` — Voeg item toe
|
||||||
|
- `removeItem()` — Verwijder item
|
||||||
|
- `getItems()` — Haal alle items op
|
||||||
|
- `getTotal()` — Bereken totaal
|
||||||
|
- `getItemCount()` — Tel items
|
||||||
|
|
||||||
|
Events worden gedispatched voor reactieve updates.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 Contact
|
||||||
|
|
||||||
|
**Tim Rijkse**
|
||||||
|
Front-end Developer
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📄 Licentie
|
||||||
|
|
||||||
|
Dit project is gemaakt als onderdeel van een pitch voor Milinda Uitgevers en mag uitsluitend worden gebruikt indien de opdracht wordt gegund.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Gemaakt met ❤️ voor boeken en boeddhisme*
|
||||||
221
book.html
221
book.html
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="nl">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
@@ -18,6 +18,7 @@
|
|||||||
<link rel="stylesheet" href="css/styles.css" />
|
<link rel="stylesheet" href="css/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<a href="#main-content" class="skip-to-content">Ga naar inhoud</a>
|
||||||
<mobile-drawer></mobile-drawer>
|
<mobile-drawer></mobile-drawer>
|
||||||
<div class="mobile-container">
|
<div class="mobile-container">
|
||||||
<site-header>
|
<site-header>
|
||||||
@@ -45,119 +46,123 @@
|
|||||||
</site-header>
|
</site-header>
|
||||||
|
|
||||||
<site-content>
|
<site-content>
|
||||||
<section class="section">
|
<main id="main-content">
|
||||||
<book-details
|
<section class="section">
|
||||||
title="Zen is opendoen"
|
<book-details
|
||||||
author="Ayya Khema"
|
title="Zen is opendoen"
|
||||||
author-href="#"
|
author="Ayya Khema"
|
||||||
price="€ 24,95"
|
author-href="#"
|
||||||
isbn="9789056703691"
|
price="€ 24,95"
|
||||||
format="Paperback"
|
isbn="9789056703691"
|
||||||
delivery="Direct leverbaar"
|
format="Paperback"
|
||||||
categories="Zen|#,Integrale spiritualiteit|#"
|
delivery="Direct leverbaar"
|
||||||
ebook-available
|
categories="Zen|#,Integrale spiritualiteit|#"
|
||||||
></book-details>
|
ebook-available
|
||||||
|
></book-details>
|
||||||
|
|
||||||
<action-links-list>
|
<action-links-list>
|
||||||
<icon-link-button icon="wishlist" href="#">
|
<icon-link-button icon="wishlist" href="#">
|
||||||
Voeg toe aan verlanglijstje
|
Voeg toe aan verlanglijstje
|
||||||
</icon-link-button>
|
</icon-link-button>
|
||||||
<icon-link-button icon="review" href="#">
|
<icon-link-button icon="review" href="#">
|
||||||
Schrijf een recensie
|
Schrijf een recensie
|
||||||
</icon-link-button>
|
</icon-link-button>
|
||||||
</action-links-list>
|
</action-links-list>
|
||||||
|
|
||||||
<content-tabs tabs="Beschrijving,Inzage,Recensies">
|
<content-tabs tabs="Beschrijving,Inzage,Recensies">
|
||||||
<book-description slot="panel-0">
|
<book-description slot="panel-0">
|
||||||
<p>
|
<p>
|
||||||
Zen is opendoen bevat een selectie van zeventig columns die Dick
|
Zen is opendoen bevat een selectie van zeventig columns die
|
||||||
Verstegen schreef tussen 2002 en 2017. Hij schreef ze als
|
Dick Verstegen schreef tussen 2002 en 2017. Hij schreef ze als
|
||||||
columnist voor o.a. het boeddhistisch kwartaalblad Vorm &
|
columnist voor o.a. het boeddhistisch kwartaalblad Vorm &
|
||||||
Leegte, het Boeddhistisch Dagblad, Centrum Waerbeke, het Han
|
Leegte, het Boeddhistisch Dagblad, Centrum Waerbeke, het Han
|
||||||
Fortmann Centrum en de Wijkkrant van Nijmegen-Oost. Zijn columns
|
Fortmann Centrum en de Wijkkrant van Nijmegen-Oost. Zijn
|
||||||
wijzen zonder uitzondering naar het mysterie van het leven en
|
columns wijzen zonder uitzondering naar het mysterie van het
|
||||||
geven blijk van bewogenheid en overgave, maar de lichte toets
|
leven en geven blijk van bewogenheid en overgave, maar de
|
||||||
ontbreekt nooit. Ze gaan over zeer uiteenlopende onderwerpen,
|
lichte toets ontbreekt nooit. Ze gaan over zeer uiteenlopende
|
||||||
zoals: lente, de ware stem van je hart, compassie, ontroering,
|
onderwerpen, zoals: lente, de ware stem van je hart,
|
||||||
woorden, de dood van zijn vrouw, de kathedraal van Royan, het
|
compassie, ontroering, woorden, de dood van zijn vrouw, de
|
||||||
windorgel in Vlissingen, liefde, boeddhaschap, bedelen, emoties,
|
kathedraal van Royan, het windorgel in Vlissingen, liefde,
|
||||||
relaties, management, overgave, gedachten, Nepal, leerling zijn,
|
boeddhaschap, bedelen, emoties, relaties, management,
|
||||||
theekommen, zijn vader, stilte, licht en opendoen.
|
overgave, gedachten, Nepal, leerling zijn, theekommen, zijn
|
||||||
</p>
|
vader, stilte, licht en opendoen.
|
||||||
<p class="quote">
|
</p>
|
||||||
Uit zijn columns blijkt hoezeer hij zich ervan bewust is dat
|
<p class="quote">
|
||||||
zenboeddhisme geen mening is, maar een non-duale zienswijze.
|
Uit zijn columns blijkt hoezeer hij zich ervan bewust is dat
|
||||||
Non-dualiteit is zien dat de dualiteiten geen hindernissen zijn
|
zenboeddhisme geen mening is, maar een non-duale zienswijze.
|
||||||
voor een bevrijd bestaan. (...) zo te spreken of te schrijven
|
Non-dualiteit is zien dat de dualiteiten geen hindernissen
|
||||||
dat het mysteriekarakter onaangetast blijft. Wat mij betreft is
|
zijn voor een bevrijd bestaan. (...) zo te spreken of te
|
||||||
Dick hierin volkomen geslaagd. Hoe hem dit gelukt is, is mij een
|
schrijven dat het mysteriekarakter onaangetast blijft. Wat mij
|
||||||
raadsel. Misschien wel dankzij zijn grote liefde voor de taal
|
betreft is Dick hierin volkomen geslaagd. Hoe hem dit gelukt
|
||||||
die spreekt uit elke bladzijde van deze verzameling literaire
|
is, is mij een raadsel. Misschien wel dankzij zijn grote
|
||||||
miniaturen.
|
liefde voor de taal die spreekt uit elke bladzijde van deze
|
||||||
</p>
|
verzameling literaire miniaturen.
|
||||||
<p class="author">—Nico Tydeman</p>
|
</p>
|
||||||
</book-description>
|
<p class="author">—Nico Tydeman</p>
|
||||||
|
</book-description>
|
||||||
|
|
||||||
<image-gallery
|
<image-gallery
|
||||||
slot="panel-1"
|
slot="panel-1"
|
||||||
images="images/book-insight.jpg,images/book-insight.jpg,images/book-insight.jpg"
|
images="images/book-insight.jpg,images/book-insight.jpg,images/book-insight.jpg"
|
||||||
></image-gallery>
|
></image-gallery>
|
||||||
|
|
||||||
<book-reviews slot="panel-2">
|
<book-reviews slot="panel-2">
|
||||||
<book-review-item
|
<book-review-item
|
||||||
rating="5"
|
rating="5"
|
||||||
author="Maria van der Berg"
|
author="Maria van der Berg"
|
||||||
date="12 januari 2026"
|
date="12 januari 2026"
|
||||||
>
|
>
|
||||||
Een prachtige verzameling columns die je aan het denken zet.
|
Een prachtige verzameling columns die je aan het denken zet.
|
||||||
Dick Verstegen schrijft met zoveel warmte en wijsheid. Elk
|
Dick Verstegen schrijft met zoveel warmte en wijsheid. Elk
|
||||||
stukje is een kleine meditatie op zich. Aanrader voor iedereen
|
stukje is een kleine meditatie op zich. Aanrader voor iedereen
|
||||||
die geïnteresseerd is in zen en het dagelijks leven.
|
die geïnteresseerd is in zen en het dagelijks leven.
|
||||||
</book-review-item>
|
</book-review-item>
|
||||||
<book-review-item
|
<book-review-item
|
||||||
rating="5"
|
rating="5"
|
||||||
author="Jan Pietersen"
|
author="Jan Pietersen"
|
||||||
date="8 december 2025"
|
date="8 december 2025"
|
||||||
>
|
>
|
||||||
Dit boek heeft mijn kijk op zen volledig veranderd. De columns
|
Dit boek heeft mijn kijk op zen volledig veranderd. De columns
|
||||||
zijn toegankelijk geschreven en toch diepgaand. Ik lees elke
|
zijn toegankelijk geschreven en toch diepgaand. Ik lees elke
|
||||||
avond een column voor het slapen gaan. Een boek om te koesteren.
|
avond een column voor het slapen gaan. Een boek om te
|
||||||
</book-review-item>
|
koesteren.
|
||||||
<book-review-item
|
</book-review-item>
|
||||||
rating="4"
|
<book-review-item
|
||||||
author="Sophie de Vries"
|
rating="4"
|
||||||
date="23 november 2025"
|
author="Sophie de Vries"
|
||||||
>
|
date="23 november 2025"
|
||||||
Mooie, poëtische teksten die je uitnodigen om stil te staan bij
|
>
|
||||||
het leven. Soms wat abstract, maar overall een waardevolle
|
Mooie, poëtische teksten die je uitnodigen om stil te staan
|
||||||
toevoeging aan mijn boekenplank. De quote van Nico Tydeman op de
|
bij het leven. Soms wat abstract, maar overall een waardevolle
|
||||||
achterkant vat het perfect samen.
|
toevoeging aan mijn boekenplank. De quote van Nico Tydeman op
|
||||||
</book-review-item>
|
de achterkant vat het perfect samen.
|
||||||
</book-reviews>
|
</book-review-item>
|
||||||
</content-tabs>
|
</book-reviews>
|
||||||
</section>
|
</content-tabs>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="content-padding">
|
<div class="content-padding">
|
||||||
<push-box variant="purple">
|
<push-box variant="purple">
|
||||||
<h2 slot="title">
|
<h2 slot="title">
|
||||||
Kom je er niet uit of heb je een vraag? Neem contact op met de
|
Kom je er niet uit of heb je een vraag? Neem contact op met de
|
||||||
klantenservice.
|
klantenservice.
|
||||||
</h2>
|
</h2>
|
||||||
<div slot="cta" class="cta-buttons">
|
<div slot="cta" class="cta-buttons">
|
||||||
<arrow-button href="#">Klantenservice</arrow-button>
|
<arrow-button href="#">Klantenservice</arrow-button>
|
||||||
<arrow-button href="#">Neem contact op</arrow-button>
|
<arrow-button href="#">Neem contact op</arrow-button>
|
||||||
</div>
|
</div>
|
||||||
</push-box>
|
</push-box>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-padding">
|
<div class="content-padding">
|
||||||
<newsletter-signup
|
<newsletter-signup
|
||||||
title="Blijf op de hoogte"
|
title="Blijf op de hoogte"
|
||||||
description="Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
|
description="Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
|
||||||
button-text="Inschrijven"
|
button-text="Inschrijven"
|
||||||
placeholder="Je e-mailadres"
|
placeholder="Je e-mailadres"
|
||||||
></newsletter-signup>
|
></newsletter-signup>
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</site-content>
|
</site-content>
|
||||||
|
|
||||||
<site-footer>
|
<site-footer>
|
||||||
|
|||||||
@@ -1,25 +1,3 @@
|
|||||||
/* ==========================================================================
|
|
||||||
Font Definitions
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Outline";
|
|
||||||
src: url("../fonts/Outline-Regular.woff2") format("woff2"),
|
|
||||||
url("../fonts/Outline-Regular.woff") format("woff");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Outline";
|
|
||||||
src: url("../fonts/Outline-Light.woff2") format("woff2"),
|
|
||||||
url("../fonts/Outline-Light.woff") format("woff");
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
CSS Reset & Normalize (Modern Best Practices)
|
CSS Reset & Normalize (Modern Best Practices)
|
||||||
Based on normalize.css v8.0.1 + modern resets
|
Based on normalize.css v8.0.1 + modern resets
|
||||||
@@ -110,22 +88,6 @@ textarea:not([rows]) {
|
|||||||
scroll-margin-block: 5ex;
|
scroll-margin-block: 5ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
html:focus-within {
|
|
||||||
scroll-behavior: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
animation-duration: 0.01ms !important;
|
|
||||||
animation-iteration-count: 1 !important;
|
|
||||||
transition-duration: 0.01ms !important;
|
|
||||||
scroll-behavior: auto !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove the inner border and padding in Firefox */
|
/* Remove the inner border and padding in Firefox */
|
||||||
::-moz-focus-inner {
|
::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
@@ -212,12 +174,10 @@ table {
|
|||||||
--color-warning: #f59e0b;
|
--color-warning: #f59e0b;
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--font-family-base: "Outline", system-ui, -apple-system, BlinkMacSystemFont,
|
--font-family-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||||
sans-serif;
|
sans-serif;
|
||||||
--font-family-heading: var(--font-family-base);
|
--font-family-heading: var(--font-family-base);
|
||||||
--font-family-outfit: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
|
|
||||||
"Segoe UI", Roboto, sans-serif;
|
|
||||||
|
|
||||||
--font-size-xs: 0.75rem; /* 12px */
|
--font-size-xs: 0.75rem; /* 12px */
|
||||||
--font-size-sm: 0.875rem; /* 14px */
|
--font-size-sm: 0.875rem; /* 14px */
|
||||||
@@ -367,6 +327,30 @@ site-content {
|
|||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Skip to Content Link */
|
||||||
|
.skip-to-content {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 9999;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
background-color: var(--color-button-primary);
|
||||||
|
color: var(--color-text-inverse);
|
||||||
|
font-family: var(--font-family-base);
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: top var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-to-content:focus {
|
||||||
|
top: var(--spacing-sm);
|
||||||
|
outline: 2px solid var(--color-text-inverse);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.truncate {
|
.truncate {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|||||||
341
index.html
341
index.html
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="nl">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
@@ -18,6 +18,7 @@
|
|||||||
<link rel="stylesheet" href="css/styles.css" />
|
<link rel="stylesheet" href="css/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<a href="#main-content" class="skip-to-content">Ga naar inhoud</a>
|
||||||
<mobile-drawer></mobile-drawer>
|
<mobile-drawer></mobile-drawer>
|
||||||
<div class="mobile-container">
|
<div class="mobile-container">
|
||||||
<site-header>
|
<site-header>
|
||||||
@@ -45,177 +46,181 @@
|
|||||||
</site-header>
|
</site-header>
|
||||||
|
|
||||||
<site-content>
|
<site-content>
|
||||||
<div class="content-padding">
|
<main id="main-content">
|
||||||
<push-box>
|
<div class="content-padding">
|
||||||
<img slot="logo" src="images/logo-asoka.png" alt="Asoka Logo" />
|
<push-box>
|
||||||
<h2 slot="title">
|
<img slot="logo" src="images/logo-asoka.png" alt="Asoka Logo" />
|
||||||
Gespecialiseerd op het vlak van boeddhisme en aanverwante
|
<h2 slot="title">
|
||||||
Oost-West thema's
|
Gespecialiseerd op het vlak van boeddhisme en aanverwante
|
||||||
</h2>
|
Oost-West thema's
|
||||||
<arrow-button slot="cta" href="#">Meer over Asoka</arrow-button>
|
</h2>
|
||||||
</push-box>
|
<arrow-button slot="cta" href="#">Meer over Asoka</arrow-button>
|
||||||
</div>
|
</push-box>
|
||||||
|
|
||||||
<section class="section section">
|
|
||||||
<section-title text="Recent verschenen boeken"></section-title>
|
|
||||||
<div class="book-grid">
|
|
||||||
<book-card
|
|
||||||
title="The Midnight Library"
|
|
||||||
description="A library of infinite possibilities"
|
|
||||||
author="Matt Haig"
|
|
||||||
price="$14.99"
|
|
||||||
rating="4.5"
|
|
||||||
href="book.html"
|
|
||||||
theme="dark"
|
|
||||||
></book-card>
|
|
||||||
<book-card
|
|
||||||
title="Atomic Habits"
|
|
||||||
description="A simple, proven system for breaking bad habits and forming good ones"
|
|
||||||
author="James Clear"
|
|
||||||
price="$16.99"
|
|
||||||
rating="5"
|
|
||||||
href="book.html"
|
|
||||||
theme="dark"
|
|
||||||
></book-card>
|
|
||||||
<book-card
|
|
||||||
title="The Psychology of Money"
|
|
||||||
description="A book about the psychology of money and how it affects our lives"
|
|
||||||
author="Morgan Housel"
|
|
||||||
price="$12.99"
|
|
||||||
rating="4"
|
|
||||||
href="book.html"
|
|
||||||
theme="dark"
|
|
||||||
></book-card>
|
|
||||||
<book-card
|
|
||||||
title="Project Hail Mary"
|
|
||||||
description="A book about the science of space travel and the future of humanity"
|
|
||||||
author="Andy Weir"
|
|
||||||
price="$18.99"
|
|
||||||
rating="4.5"
|
|
||||||
href="book.html"
|
|
||||||
theme="dark"
|
|
||||||
></book-card>
|
|
||||||
<cta-button href="#">Toon meer recent verschenen boeken</cta-button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section section-dark">
|
<section class="section section">
|
||||||
<section-title text="Meest verkochte boeken"></section-title>
|
<section-title text="Recent verschenen boeken"></section-title>
|
||||||
<div class="book-grid">
|
<div class="book-grid">
|
||||||
<book-card
|
<book-card
|
||||||
title="The Midnight Library"
|
title="The Midnight Library"
|
||||||
description="A library of infinite possibilities"
|
description="A library of infinite possibilities"
|
||||||
author="Matt Haig"
|
author="Matt Haig"
|
||||||
price="$14.99"
|
price="$14.99"
|
||||||
rating="4.5"
|
rating="4.5"
|
||||||
href="book.html"
|
href="book.html"
|
||||||
></book-card>
|
theme="dark"
|
||||||
<book-card
|
></book-card>
|
||||||
title="Atomic Habits"
|
<book-card
|
||||||
description="A simple, proven system for breaking bad habits and forming good ones"
|
title="Atomic Habits"
|
||||||
author="James Clear"
|
description="A simple, proven system for breaking bad habits and forming good ones"
|
||||||
price="$16.99"
|
author="James Clear"
|
||||||
rating="5"
|
price="$16.99"
|
||||||
href="book.html"
|
rating="5"
|
||||||
></book-card>
|
href="book.html"
|
||||||
<book-card
|
theme="dark"
|
||||||
title="The Psychology of Money"
|
></book-card>
|
||||||
description="A book about the psychology of money and how it affects our lives"
|
<book-card
|
||||||
author="Morgan Housel"
|
title="The Psychology of Money"
|
||||||
price="$12.99"
|
description="A book about the psychology of money and how it affects our lives"
|
||||||
rating="4"
|
author="Morgan Housel"
|
||||||
href="book.html"
|
price="$12.99"
|
||||||
></book-card>
|
rating="4"
|
||||||
<book-card
|
href="book.html"
|
||||||
title="Project Hail Mary"
|
theme="dark"
|
||||||
description="A book about the science of space travel and the future of humanity"
|
></book-card>
|
||||||
author="Andy Weir"
|
<book-card
|
||||||
price="$18.99"
|
title="Project Hail Mary"
|
||||||
rating="4.5"
|
description="A book about the science of space travel and the future of humanity"
|
||||||
href="book.html"
|
author="Andy Weir"
|
||||||
></book-card>
|
price="$18.99"
|
||||||
<cta-button href="#">Toon meer meest verkochte boeken</cta-button>
|
rating="4.5"
|
||||||
</div>
|
href="book.html"
|
||||||
</section>
|
theme="dark"
|
||||||
|
></book-card>
|
||||||
<section class="section">
|
<cta-button href="#"
|
||||||
<section-title text="Onderwerpen"></section-title>
|
>Toon meer recent verschenen boeken</cta-button
|
||||||
<div class="category-grid">
|
>
|
||||||
<category-card
|
|
||||||
title="Biografie / autobiografie"
|
|
||||||
icon="images/biografieautobiografie.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Boeddhisme (algemeen)"
|
|
||||||
icon="images/boeddhismealgemeen.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Boeddhisme en het Westen"
|
|
||||||
icon="images/boeddhisme-en-het-westen.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Kinderboeken"
|
|
||||||
icon="images/kinderboeken.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Meditatie"
|
|
||||||
icon="images/meditatie.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Mindfulness"
|
|
||||||
icon="images/mindfulness.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Pali-canon"
|
|
||||||
icon="images/palicanon.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Theravada"
|
|
||||||
icon="images/theravada.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Tibetaans boeddhisme"
|
|
||||||
icon="images/tibetaans-boeddhisme.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
<category-card
|
|
||||||
title="Vipassana"
|
|
||||||
icon="images/vipassana.png"
|
|
||||||
href="category.html"
|
|
||||||
></category-card>
|
|
||||||
</div>
|
|
||||||
<cta-button href="#">Toon alle onderwerpen</cta-button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="content-padding">
|
|
||||||
<push-box>
|
|
||||||
<h2 slot="title">
|
|
||||||
Gespecialiseerd op het vlak van boeddhisme en aanverwante
|
|
||||||
Oost-West thema's
|
|
||||||
</h2>
|
|
||||||
<div slot="cta" class="cta-buttons">
|
|
||||||
<arrow-button href="#">Klantenservice</arrow-button>
|
|
||||||
<arrow-button href="#">Neem contact op</arrow-button>
|
|
||||||
</div>
|
</div>
|
||||||
</push-box>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-padding">
|
<section class="section section-dark">
|
||||||
<newsletter-signup
|
<section-title text="Meest verkochte boeken"></section-title>
|
||||||
title="Blijf op de hoogte"
|
<div class="book-grid">
|
||||||
description="Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
|
<book-card
|
||||||
button-text="Inschrijven"
|
title="The Midnight Library"
|
||||||
placeholder="Je e-mailadres"
|
description="A library of infinite possibilities"
|
||||||
></newsletter-signup>
|
author="Matt Haig"
|
||||||
</div>
|
price="$14.99"
|
||||||
|
rating="4.5"
|
||||||
|
href="book.html"
|
||||||
|
></book-card>
|
||||||
|
<book-card
|
||||||
|
title="Atomic Habits"
|
||||||
|
description="A simple, proven system for breaking bad habits and forming good ones"
|
||||||
|
author="James Clear"
|
||||||
|
price="$16.99"
|
||||||
|
rating="5"
|
||||||
|
href="book.html"
|
||||||
|
></book-card>
|
||||||
|
<book-card
|
||||||
|
title="The Psychology of Money"
|
||||||
|
description="A book about the psychology of money and how it affects our lives"
|
||||||
|
author="Morgan Housel"
|
||||||
|
price="$12.99"
|
||||||
|
rating="4"
|
||||||
|
href="book.html"
|
||||||
|
></book-card>
|
||||||
|
<book-card
|
||||||
|
title="Project Hail Mary"
|
||||||
|
description="A book about the science of space travel and the future of humanity"
|
||||||
|
author="Andy Weir"
|
||||||
|
price="$18.99"
|
||||||
|
rating="4.5"
|
||||||
|
href="book.html"
|
||||||
|
></book-card>
|
||||||
|
<cta-button href="#">Toon meer meest verkochte boeken</cta-button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<section-title text="Onderwerpen"></section-title>
|
||||||
|
<div class="category-grid">
|
||||||
|
<category-card
|
||||||
|
title="Biografie / autobiografie"
|
||||||
|
icon="images/biografieautobiografie.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Boeddhisme (algemeen)"
|
||||||
|
icon="images/boeddhismealgemeen.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Boeddhisme en het Westen"
|
||||||
|
icon="images/boeddhisme-en-het-westen.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Kinderboeken"
|
||||||
|
icon="images/kinderboeken.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Meditatie"
|
||||||
|
icon="images/meditatie.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Mindfulness"
|
||||||
|
icon="images/mindfulness.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Pali-canon"
|
||||||
|
icon="images/palicanon.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Theravada"
|
||||||
|
icon="images/theravada.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Tibetaans boeddhisme"
|
||||||
|
icon="images/tibetaans-boeddhisme.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
<category-card
|
||||||
|
title="Vipassana"
|
||||||
|
icon="images/vipassana.png"
|
||||||
|
href="category.html"
|
||||||
|
></category-card>
|
||||||
|
</div>
|
||||||
|
<cta-button href="#">Toon alle onderwerpen</cta-button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="content-padding">
|
||||||
|
<push-box>
|
||||||
|
<h2 slot="title">
|
||||||
|
Gespecialiseerd op het vlak van boeddhisme en aanverwante
|
||||||
|
Oost-West thema's
|
||||||
|
</h2>
|
||||||
|
<div slot="cta" class="cta-buttons">
|
||||||
|
<arrow-button href="#">Klantenservice</arrow-button>
|
||||||
|
<arrow-button href="#">Neem contact op</arrow-button>
|
||||||
|
</div>
|
||||||
|
</push-box>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-padding">
|
||||||
|
<newsletter-signup
|
||||||
|
title="Blijf op de hoogte"
|
||||||
|
description="Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
|
||||||
|
button-text="Inschrijven"
|
||||||
|
placeholder="Je e-mailadres"
|
||||||
|
></newsletter-signup>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</site-content>
|
</site-content>
|
||||||
|
|
||||||
<site-footer>
|
<site-footer>
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ class AddToCartButton extends HTMLElement {
|
|||||||
color: var(--color-text-inverse, #ffffff);
|
color: var(--color-text-inverse, #ffffff);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<button class="add-to-cart-button" type="button">
|
<button class="add-to-cart-button" type="button" aria-label="Voeg toe aan winkelwagen">
|
||||||
${plusIcon({ size: 16, color: "#ffffff" })}
|
${plusIcon({ size: 16, color: "#ffffff" })}
|
||||||
${shoppingBagIcon({ size: 16, color: "#ffffff" })}
|
${shoppingBagIcon({ size: 16, color: "#ffffff" })}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -25,6 +25,33 @@ class ContentTabs extends HTMLElement {
|
|||||||
button.addEventListener("click", () => {
|
button.addEventListener("click", () => {
|
||||||
this.setActiveTab(index);
|
this.setActiveTab(index);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
button.addEventListener("keydown", (e) => {
|
||||||
|
const tabCount = this.tabs.length;
|
||||||
|
let newIndex = this.activeTab;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case "ArrowLeft":
|
||||||
|
newIndex = (this.activeTab - 1 + tabCount) % tabCount;
|
||||||
|
break;
|
||||||
|
case "ArrowRight":
|
||||||
|
newIndex = (this.activeTab + 1) % tabCount;
|
||||||
|
break;
|
||||||
|
case "Home":
|
||||||
|
newIndex = 0;
|
||||||
|
break;
|
||||||
|
case "End":
|
||||||
|
newIndex = tabCount - 1;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
this.setActiveTab(newIndex);
|
||||||
|
this.shadowRoot.querySelectorAll(".tab-button")[newIndex]?.focus();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -44,10 +71,19 @@ class ContentTabs extends HTMLElement {
|
|||||||
// Update tab buttons
|
// Update tab buttons
|
||||||
const tabButtons = this.shadowRoot.querySelectorAll(".tab-button");
|
const tabButtons = this.shadowRoot.querySelectorAll(".tab-button");
|
||||||
tabButtons.forEach((button, index) => {
|
tabButtons.forEach((button, index) => {
|
||||||
button.classList.toggle("active", index === this.activeTab);
|
const isActive = index === this.activeTab;
|
||||||
|
button.classList.toggle("active", isActive);
|
||||||
|
button.setAttribute("aria-selected", isActive.toString());
|
||||||
|
button.setAttribute("tabindex", isActive ? "0" : "-1");
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update panels
|
// Update panels in shadow DOM
|
||||||
|
const shadowPanels = this.shadowRoot.querySelectorAll("[role='tabpanel']");
|
||||||
|
shadowPanels.forEach((panel, index) => {
|
||||||
|
panel.style.display = index === this.activeTab ? "block" : "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update slotted panels
|
||||||
const panels = this.querySelectorAll("[slot^='panel-']");
|
const panels = this.querySelectorAll("[slot^='panel-']");
|
||||||
panels.forEach((panel, index) => {
|
panels.forEach((panel, index) => {
|
||||||
panel.style.display = index === this.activeTab ? "block" : "none";
|
panel.style.display = index === this.activeTab ? "block" : "none";
|
||||||
@@ -62,7 +98,10 @@ class ContentTabs extends HTMLElement {
|
|||||||
class="tab-button ${index === this.activeTab ? "active" : ""}"
|
class="tab-button ${index === this.activeTab ? "active" : ""}"
|
||||||
type="button"
|
type="button"
|
||||||
role="tab"
|
role="tab"
|
||||||
|
id="tab-${index}"
|
||||||
aria-selected="${index === this.activeTab}"
|
aria-selected="${index === this.activeTab}"
|
||||||
|
aria-controls="panel-${index}"
|
||||||
|
tabindex="${index === this.activeTab ? "0" : "-1"}"
|
||||||
>
|
>
|
||||||
${tab}
|
${tab}
|
||||||
</button>
|
</button>
|
||||||
@@ -117,6 +156,11 @@ class ContentTabs extends HTMLElement {
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-button:focus {
|
||||||
|
outline: 2px solid var(--color-purple, #951d51);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.tab-panels {
|
.tab-panels {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
background: var(--color-border, #e2e8f0);
|
background: var(--color-border, #e2e8f0);
|
||||||
@@ -129,9 +173,15 @@ class ContentTabs extends HTMLElement {
|
|||||||
${tabsHtml}
|
${tabsHtml}
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-panels">
|
<div class="tab-panels">
|
||||||
<slot name="panel-0"></slot>
|
<div id="panel-0" role="tabpanel" aria-labelledby="tab-0">
|
||||||
<slot name="panel-1"></slot>
|
<slot name="panel-0"></slot>
|
||||||
<slot name="panel-2"></slot>
|
</div>
|
||||||
|
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
|
||||||
|
<slot name="panel-1"></slot>
|
||||||
|
</div>
|
||||||
|
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2">
|
||||||
|
<slot name="panel-2"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -3,10 +3,13 @@
|
|||||||
* Expandable accordion item for footer navigation
|
* Expandable accordion item for footer navigation
|
||||||
*/
|
*/
|
||||||
class FooterAccordionItem extends HTMLElement {
|
class FooterAccordionItem extends HTMLElement {
|
||||||
|
static _idCounter = 0;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.attachShadow({ mode: "open" });
|
this.attachShadow({ mode: "open" });
|
||||||
this._expanded = false;
|
this._expanded = false;
|
||||||
|
this._uniqueId = `accordion-${FooterAccordionItem._idCounter++}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
@@ -34,6 +37,7 @@ class FooterAccordionItem extends HTMLElement {
|
|||||||
this._expanded = !this._expanded;
|
this._expanded = !this._expanded;
|
||||||
const content = this.shadowRoot.querySelector(".accordion-content");
|
const content = this.shadowRoot.querySelector(".accordion-content");
|
||||||
const icon = this.shadowRoot.querySelector(".accordion-icon");
|
const icon = this.shadowRoot.querySelector(".accordion-icon");
|
||||||
|
const header = this.shadowRoot.querySelector(".accordion-header");
|
||||||
|
|
||||||
if (content) {
|
if (content) {
|
||||||
content.classList.toggle("expanded", this._expanded);
|
content.classList.toggle("expanded", this._expanded);
|
||||||
@@ -41,6 +45,9 @@ class FooterAccordionItem extends HTMLElement {
|
|||||||
if (icon) {
|
if (icon) {
|
||||||
icon.classList.toggle("rotated", this._expanded);
|
icon.classList.toggle("rotated", this._expanded);
|
||||||
}
|
}
|
||||||
|
if (header) {
|
||||||
|
header.setAttribute("aria-expanded", this._expanded.toString());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@@ -57,7 +64,10 @@ class FooterAccordionItem extends HTMLElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
padding: var(--spacing-lg, 1.5rem) 0;
|
padding: var(--spacing-lg, 1.5rem) 0;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
@@ -66,6 +76,11 @@ class FooterAccordionItem extends HTMLElement {
|
|||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.accordion-header:focus {
|
||||||
|
outline: 2px solid var(--color-text-inverse, #ffffff);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.accordion-title {
|
.accordion-title {
|
||||||
font-size: var(--font-size-base, 1rem);
|
font-size: var(--font-size-base, 1rem);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -98,11 +113,21 @@ class FooterAccordionItem extends HTMLElement {
|
|||||||
color: var(--color-text-inverse, #ffffff);
|
color: var(--color-text-inverse, #ffffff);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="accordion-header">
|
<button
|
||||||
|
class="accordion-header"
|
||||||
|
type="button"
|
||||||
|
aria-expanded="${this._expanded}"
|
||||||
|
aria-controls="accordion-content-${this._uniqueId}"
|
||||||
|
>
|
||||||
<h3 class="accordion-title">${title}</h3>
|
<h3 class="accordion-title">${title}</h3>
|
||||||
<chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
|
<chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
|
||||||
</div>
|
</button>
|
||||||
<div class="accordion-content">
|
<div
|
||||||
|
id="accordion-content-${this._uniqueId}"
|
||||||
|
class="accordion-content"
|
||||||
|
role="region"
|
||||||
|
aria-labelledby="accordion-header-${this._uniqueId}"
|
||||||
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user