From 796e707b0b297eb1f8af5eeaf66276dee74cf50e Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 3 Apr 2025 14:35:39 +0200
Subject: [PATCH 1/2] Faq new style.

---
 src/components/accordion/accordion.astro | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/accordion/accordion.astro b/src/components/accordion/accordion.astro
index d4a3ca670..7617e1658 100644
--- a/src/components/accordion/accordion.astro
+++ b/src/components/accordion/accordion.astro
@@ -11,18 +11,26 @@ const { title, id } = Astro.props;
   <summary
     aria-expanded="false"
     aria-controls={id}
-    class="cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+    class="cursor-pointer flex justify-between p-2 bg-[#d4d5e5] focus:ring-2"
   >
     <span class="font-semibold">{title}</span>
-    <span aria-hidden="true" class="group-open:hidden">+</span>
-    <span aria-hidden="true" class="group-open:block hidden">−</span>
+    <span aria-hidden="true" class="group-open:hidden arrow">▼</span>
+    <span aria-hidden="true" class="group-open:block hidden arrow">▲</span>
   </summary>
 
   <div class="pl-4">
     <slot />
   </div>
 </details>
-
+<style>
+  details {
+    width:65ch;
+  }
+  .arrow {
+    font-size:25px;
+    line-height: 1.25;
+  }
+</style>
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const hash = window.location.hash.substring(1); // Remove #

From c1f5546585f5edb17e871f2815b0cee7313a9123 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 3 Apr 2025 23:13:42 +0200
Subject: [PATCH 2/2] Fix responsive design of accordian.

---
 src/components/accordion/accordion.astro | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/accordion/accordion.astro b/src/components/accordion/accordion.astro
index 7617e1658..fa74a2379 100644
--- a/src/components/accordion/accordion.astro
+++ b/src/components/accordion/accordion.astro
@@ -7,7 +7,7 @@ export interface Props {
 const { title, id } = Astro.props;
 ---
 
-<details class="group mb-4" id={id} data-faq>
+<details class="group mb-4 md:w-[65ch]" id={id} data-faq>
   <summary
     aria-expanded="false"
     aria-controls={id}
@@ -23,9 +23,6 @@ const { title, id } = Astro.props;
   </div>
 </details>
 <style>
-  details {
-    width:65ch;
-  }
   .arrow {
     font-size:25px;
     line-height: 1.25;