feat: レスポンシブ対応

Author: staticWagomU

2025/src/components/Footer.astro

@@ -1,7 +1,7 @@
-<footer class="bg-gray-900 py-8 text-white md:py-12">
+<footer class="bg-gray-900 py-6 text-white sm:py-8 md:py-12">
   <div class="container mx-auto px-4">
-    <div class="mb-6 flex flex-col items-center">
-      <div class="mb-3">
+    <div class="mb-4 flex flex-col items-center sm:mb-6">
+      <div class="mb-2 sm:mb-3">
         <svg
           width="40"
           height="40"
@@ -149,24 +149,30 @@
           ></path>
         </svg>
       </div>
-      <h2 class="text-xl font-bold md:text-2xl">VimConf 2025</h2>
+      <h2 class="text-lg font-bold sm:text-xl md:text-2xl">VimConf 2025</h2>
     </div>
-    <div class="mb-6 grid gap-6 md:grid-cols-2">
+    <div class="mb-4 grid gap-4 sm:mb-6 sm:gap-6 md:grid-cols-1 lg:grid-cols-2">
       <div>
-        <h3 class="mb-3 text-base font-semibold text-emerald-400 md:text-lg">
+        <h3
+          class="mb-2 text-sm font-semibold text-emerald-400 sm:mb-3 sm:text-base md:text-lg"
+        >
           VimConf 2025
         </h3>
-        <ul class="space-y-1 text-sm text-gray-300 md:text-base">
+        <ul class="space-y-1 text-xs text-gray-300 sm:text-sm md:text-base">
           <li>2025年11月2日（日）</li>
           <li>9:30 - 17:30</li>
           <li>アキバプラザ・アキバホール</li>
         </ul>
       </div>
       <div>
-        <h3 class="mb-3 text-base font-semibold text-emerald-400 md:text-lg">
+        <h3
+          class="mb-2 text-sm font-semibold text-emerald-400 sm:mb-3 sm:text-base md:text-lg"
+        >
           お問い合わせ
         </h3>
-        <ul class="space-y-2 text-sm text-gray-300 md:text-base">
+        <ul
+          class="space-y-1 text-xs text-gray-300 sm:space-y-2 sm:text-sm md:text-base"
+        >
           <li class="flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -213,17 +219,20 @@
               class="transition-colors hover:text-emerald-400">@vim_jp</a
             >
           </li>
-          <li class="flex items-center">
-            <span>and </span><a
+          <li class="flex items-center text-xs sm:text-sm">
+            <span>and </span>
+            <a
               href="https://kzmkbgzwl112s273gjeh.lite.vusercontent.net/#staff"
               class="ml-1 text-emerald-400 hover:underline">above Staff</a
             >
           </li>
         </ul>
       </div>
     </div>
-    <div class="border-t border-gray-800 pt-6">
-      <div class="mb-4 space-y-1 text-xs text-gray-400 md:text-sm">
+    <div class="border-t border-gray-800 pt-4 sm:pt-6">
+      <div
+        class="text-2xs mb-3 space-y-1 text-gray-400 sm:mb-4 sm:text-xs md:text-sm"
+      >
         <p>発表スライドはすべて英語です。</p>
         <p>発表は英語または日本語のいずれかの言語で行われます。</p>
         <p>登壇の様子を撮影し、後日YouTubeにアップロードします。</p>