fix faq, overflowing sponsor button, and simplify header

src/components/faq.svelte

@@ -1,5 +1,5 @@
 <script>
- import Icon from '@iconify/svelte';
+ import Icon from "@iconify/svelte";
 
  let features = [
  {
@@ -12,60 +12,65 @@
  question: "What is a writeup?",
  answer:
  "A writeup is a collection of all the evidence and flags you have collected, and how you found them. Check out b1c's excellent writeup for MCPS HSF 2023.",
-  icon: "mdi:chevron-down",
+ icon: "mdi:chevron-down",
  },
  {
  question: "What are the divisions?",
  answer:
  "The competition is divided into a novice and advanced division. The novice division is for beginners, and the advanced division is for more experienced hackers.",
-  icon: "mdi:chevron-down",
+ icon: "mdi:chevron-down",
  },
  {
  question: "Do I need experience?",
  answer:
  "No! This competition is for people for all skill levels. Also, winners are determined by the writeup and number of flags.",
-  icon: "mdi:chevron-down",
+ icon: "mdi:chevron-down",
  },
  {
  question: "Are there prizes?",
  answer:
  "Yes! We had drones and GoPros last year. The top three in both the novice and advanced division win prizes.",
-  icon: "mdi:chevron-down",
+ icon: "mdi:chevron-down",
  },
  {
  question: "I have more questions!",
  answer:
  "Join our Discord server below and ask away! We'll be happy to answer any questions you have.",
-  icon: "mdi:chevron-down",
+ icon: "mdi:chevron-down",
  },
  ];
 
  function toggleAnswer(event) {
- const button = event.currentTarget;
- const question = button.nextElementSibling;
+ const entry = event.currentTarget;
+ const question = entry.firstElementChild;
  const answer = question.nextElementSibling;
  if (answer) {
  answer.classList.toggle("hidden");
  // change the icon in the features array
  const questionText = question.textContent;
- const index = features.findIndex((feature) => feature.question === questionText);
+ const index = features.findIndex(
+ (feature) => feature.question === questionText
+ );
  const feature = features[index];
  if (feature.icon === "mdi:chevron-down") {
  feature.icon = "mdi:chevron-up";
  } else {
  feature.icon = "mdi:chevron-down";
  }
  features[index] = feature;
- 
  }
  }
 </script>
 
 <span id="faq" class="font-heading font-semibold text-center">
- <span class="hidden md:block md:text-3xl lg:text-5xl border-x-8 border-dashed border-x-primary px-8">
+ <span
+ class="hidden md:block md:text-3xl lg:text-5xl border-x-8 border-dashed border-x-primary px-8"
+ >
  Frequently Asked Questions
  </span>
- <span class="block md:hidden text-5xl border-x-8 border-dashed border-x-primary px-8">
+ <span
+ class="block md:hidden text-5xl border-x-8 border-dashed border-x-primary px-8"
+ >
  FAQ
  </span>
 </span>
@@ -77,51 +82,45 @@
  {#if question !== "What is a writeup?"}
  <li
  class="relative flex flex-col items-center gap-2 border md:border-4 md:border-double border-primary p-2 xs:p-4 rounded-md xs:rounded-lg"
+ on:click={toggleAnswer}
+ on:keypress={toggleAnswer}
  >
- <a
- class="md:hidden absolute top-3 right-1 xs:top-5 xs:right-2"
- on:click={toggleAnswer}
- >
- <Icon class="w-6 h-6" icon={icon} />
- </a>
  <p
  class="xs:text-lg font-medium xs:font-semibold font-heading tracking-tighter md:tracking-normal"
  >
  {question}
  </p>
- <p
- class="hidden md:block text-offset text-sm"
- >
+ <p class="hidden md:block text-offset text-sm">
  {answer}
  </p>
+ <Icon
+ class="md:hidden absolute top-3 right-1 xs:top-5 xs:right-2 w-6 h-6"
+ {icon}
+ />
  </li>
  {:else}
  <li
  class="relative flex flex-col items-center gap-2 border md:border-4 md:border-double border-primary p-2 xs:p-4 rounded-md xs:rounded-lg"
  >
- <a
- class="md:hidden absolute top-3 right-1 xs:top-5 xs:right-2 h-8"
- on:click={toggleAnswer}
- >
- <Icon class="w-6 h-6" icon={icon} />
- </a>
  <p
  class="xs:text-lg font-medium xs:font-semibold font-heading tracking-tighter md:tracking-normal"
  >
  What is a writeup?
  </p>
- <p
- class="hidden md:block font-light text-offset text-sm"
- >
+ <p class="hidden md:block font-light text-offset text-sm">
  A writeup is a collection of all the evidence and flags you have
  collected, and how you found them. Check out b1c's{" "}
  <a
  class="text-primary underline hover:decoration-wavy underline-offset-4"
  href="pdfs/b1c_HSFReport.pdf"
- >excellent writeup
+  >excellent writeup
  </a>
  for MCPS HSF 2023.
  </p>
+ <Icon
+ class="md:hidden absolute top-3 right-1 xs:top-5 xs:right-2 w-6 h-6"
+ {icon}
+ />
  </li>
  {/if}
  {/each}

src/components/header.astro

@@ -32,16 +32,16 @@ const socialLinks: Array<FooterLink> = [
 
 <header
  id="page-header"
- class="absolute top-0 z-20 flex w-full items-center gap-16 xs:gap-0 justify-center xs:justify-between border-b-2 border-transparent px-5 sm:px-12 lg:px-24 py-6 ease-linear transition-all duration-250"
+ class="absolute top-0 z-20 flex w-full items-center justify-between border-b-2 border-transparent px-5 sm:px-12 lg:px-24 py-6 ease-linear transition-all duration-250"
 >
- <div class="flex items-center gap-3 xs:gap-4 sm:gap-8">
+ <div class="flex items-center gap-0 xs:gap-4 sm:gap-8">
  <button
  id="open-nav-button"
  type="button"
  class="btn md:hidden"
  aria-label="Navigation"
  >
- <Icon pack="mdi" name="menu" class="h-8" />
+ <Icon pack="mdi" name="menu" class="h-8 w-8" />
  </button>
  <a class="hidden xs:inline relative hover:opacity-50" href="#">
  <Logo sizeAdjust />

src/components/sponsor-button.svelte

@@ -10,7 +10,7 @@
  .flat();
 </script>
 
-<div class="relative">
+<div class="relative overflow-hidden">
  <div id="seal" class="relative h-56 md:h-64 mt-4 md:mt-8 animate-spin-slow">
  {#each array as char, index}
  <div

src/components/theme-switcher.astro

@@ -12,11 +12,11 @@ import { Icon } from "astro-icon";
  class="origin-[right_center] text-icon hover:text-primary hover:scale-110 hover:ease-in-out"
 >
  <div id="icon-theme-light">
- <Icon name="theme/light" class="h-8" />
+ <Icon name="theme/light" class="h-8 w-8" />
  <span class="sr-only">Use light theme</span>
  </div>
  <div id="icon-theme-dark" class="hidden">
- <Icon name="theme/dark" class="h-8" />
+ <Icon name="theme/dark" class="h-8 w-8" />
  <span class="sr-only">Use dark theme</span>
  </div>
 </button>