feat: updated accordion aria labels and home margins

site/snippets/blocks/accordion.php

@@ -1,17 +1,17 @@
 <?php if (isset($block)) : ?>
  <div class="grid-container">
  <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl pb-m border-t-2">
- <?php foreach ($block->items()->toStructure() as $item) : ?>
+ <?php foreach ($block->items()->toStructure() as $index => $item) : ?>
  <div x-data="{ activeAccordion: false }" class="group border-b-2">
- <button @click="activeAccordion = !activeAccordion" :aria-expanded="activeAccordion" aria-controls="accordion-panel-<?= $block->id() ?>" class="group flex justify-between items-center py-m w-full text-left">
+ <button @click="activeAccordion = !activeAccordion" :aria-expanded="activeAccordion" aria-controls="accordion-panel-<?= $index ?>" class="group flex justify-between items-center py-m w-full text-left">
  <p class="copy font-bold"><?= $item->title() ?></p>
 
  <div class="group-aria-expanded:rotate-180 w-s">
  <?= svg('assets/icons/chevron-down.svg') ?>
  </div>
  </button>
 
- <section :hidden="!activeAccordion" id="accordion-panel-<?= $block->id() ?>" aria-labelledby="accordion-header-<?= $block->id() ?>" class="pb-m">
+ <section :hidden="!activeAccordion" id="accordion-panel-<?= $index ?>" aria-labelledby="accordion-header-<?= $index ?>" class="pb-m">
  <div class="richtext">
  <?= $item->text() ?>
  </div>

site/templates/home.php

@@ -4,22 +4,22 @@
 
 <main class="grid-container">
  <?php if (isset($articles)) : ?>
- <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl flex gap-xs flex-wrap mt-xxxl">
+ <div class="col-span-4 ml-xl md:ml-auto mb-m md:mb-xl md:col-start-3 md:col-span-8 flex gap-xs flex-wrap mt-xxxl">
  <h2 class="headline-1"><?= $articles['headline'] ?></h2>
 
  <div class="richtext">
  <?= $articles['intro'] ?>
  </div>
  </div>
 
- <div class="flex flex-col col-span-12 md:grid md:grid-cols-2 lg:grid-cols-3 gap-x-m gap-y-xl">
+ <div class="flex flex-col col-span-4 md:col-span-12 md:grid md:grid-cols-2 lg:grid-cols-3 gap-x-m gap-y-xl">
  <?php foreach ($articles['items'] ?? [] as $article) : ?>
  <?php snippet('components/teaser', [
-  'topline' => $article->created()->toDate('d.m.Y'),
-  'title' => $article->title(),
-  'excerpt' => $article->excerpt(),
-  'url' => $article->url(),
-  'image' => $article->cover()->toFile(),
+ 'topline' => $article->created()->toDate('d.m.Y'),
+ 'title' => $article->title(),
+ 'excerpt' => $article->excerpt(),
+ 'url' => $article->url(),
+ 'image' => $article->cover()->toFile(),
  ]) ?>
  <?php endforeach ?>
  </div>

tailwind.config.js

@@ -20,13 +20,13 @@ export default {
  xxxl: "120px"
  },
  fontSize: {
- "headline-1": ["24px", "24px"],
+ "headline-1": ["32px", "32px"],
  "headline-1-md": ["45px", "54px"],
 
- "headline-2": ["20px", "22px"],
+ "headline-2": ["24px", "28px"],
  "headline-2-md": ["35px", "42px"],
 
- "headline-3": ["17px", "21px"],
+ "headline-3": ["20px", "24px"],
  "headline-3-md": ["24px", "36px"],
 
  copy: ["14px", "21px"],