From 4ed5b41f9c662a26b281ff28f53bf21f5094a915 Mon Sep 17 00:00:00 2001
From: Johannes Eslage <hello@johanneseslage.de>
Date: Sat, 15 Apr 2023 11:39:09 +0200
Subject: [PATCH] feat: updated accordion aria labels and home margins

---
 site/snippets/blocks/accordion.php |  6 +++---
 site/templates/home.php            | 14 +++++++-------
 tailwind.config.js                 |  6 +++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/site/snippets/blocks/accordion.php b/site/snippets/blocks/accordion.php
index 9bd5a0e..c29311d 100644
--- a/site/snippets/blocks/accordion.php
+++ b/site/snippets/blocks/accordion.php
@@ -1,9 +1,9 @@
 <?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">
@@ -11,7 +11,7 @@
             </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>
diff --git a/site/templates/home.php b/site/templates/home.php
index eb61d5e..97a5aa0 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -4,7 +4,7 @@
 
 <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">
@@ -12,14 +12,14 @@
       </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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 530087b..20d1fd9 100644
--- a/tailwind.config.js
+++ b/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"],