Faq new style.

Author: nikoshell

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 #