Merge pull request #11 from coderdojo-japan/install-tailwind-css

update: Bootstrap の削除、Tailwind CSS の導入

Author: mucho613

_includes/head.html

@@ -60,9 +60,8 @@
   <!-- CSS Framework -------------------------- -->
   <!-- Font Awasome https://fontawesome.com/ -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <!-- Bootstrap https://getbootstrap.jp/ -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
   <!-- CSS -------------------------- -->
   <!-- DojoCon CSS -->

_includes/top/sections/contact.html

@@ -1,5 +1,5 @@
 <section id="contact">
-  <div class="d-flex flex-column align-items-center text-center">
+  <div class="flex flex-col items-center text-center">
     <h2 class="title">お問い合わせ</h2>
     <p class="subtitle">CONTACT</p>
     <p class="text">DojoCon Japan {{ site.year }}についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>

_layouts/condition.html

@@ -1,12 +1,11 @@
 ---
 layout: default
 ---
-<div class="container" style="margin-top: 140px; margin-bottom: 140px">
-  <div class="text-center">
-      <h1>{{ page.title }}</h1>
-      <p>{{ page.subtitle }}</p>
+<div style="margin-top: 140px; margin-bottom: 140px">
+  <div class="text-center mb-8">
+    <h1 class="text-4xl">{{ page.title }}</h1>
+    <p>{{ page.subtitle }}</p>
   </div>
-  <div class="air"></div>
   <div id='condition'>
     <div class="post">
       <div class='post-content'>

_layouts/page.html

@@ -1,12 +1,11 @@
 ---
 layout: default
 ---
-<div class="container" style="margin-top: 140px; margin-bottom: 140px">
-  <div class="text-center mb-4">
+<div style="margin-top: 140px; margin-bottom: 140px">
+  <div class="text-center mb-8">
     <p class="my-0"><strong>{{ page.subtitle }}</strong></p>
-    <h2 class="my-1">{{ page.title }}</h2>
+    <h2 class="text-4xl my-1">{{ page.title }}</h2>
   </div>
-  <div class="air"></div>
   <div id=''>
     <div class="post">
       <div class='post-content'>