From 5556215a991f9813be8b25cd026deb1543ee2ac2 Mon Sep 17 00:00:00 2001
From: Yuito Fujiwara <yuito6187@gmail.com>
Date: Thu, 7 Aug 2025 02:23:44 -0700
Subject: [PATCH 1/2] Refine layout and spacing in header

---
 groups.html | 83 +++++++++++++++++++++++++++++------------------------
 index.html  | 20 ++++---------
 style.css   | 32 ++++++++++++++-------
 3 files changed, 72 insertions(+), 63 deletions(-)

diff --git a/groups.html b/groups.html
index 2b48b9e..7dcb472 100644
--- a/groups.html
+++ b/groups.html
@@ -16,13 +16,8 @@
     </header>
 
     <h1>班紹介</h1>
-    <ul>
-        <li><a href="./index.html">KCS について</a></li>
-        <li>班紹介</li>
-        <li><a href="./events.html">イベント情報</a></li>
-    </ul>
-    <h2>班一覧</h2>
-    <ul>
+    <h2 class="heading">班一覧</h2>
+    <ul class="groupMenu">
         <li><a href="#system">system班</a></li>
         <li><a href="#prgraming_compe">競プロ班</a></li>
         <li><a href="#web">web班</a></li>
@@ -32,42 +27,56 @@ <h2>班一覧</h2>
         <li><a href="#music">音楽班</a></li>
         <li><a href="#movie">映像制作班</a></li>
     </ul>
+    <div id="system" class="groups">
+        <h2 class="heading">システム班</h2>
+        <p>システム班は毎週金曜日に楽しく集まっています。</p>
+        <p>システム班ではCTF、自作コンパイラ、自作OSをやっているそうです。</p>
+        <p>エースは<b>らてさん！！</b>とても優しくてかっこいいです！</p>
+    </div>
 
-    <h2>システム班</h2>
-    <p>システム班は毎週金曜日に楽しく集まっています。</p>
-    <p>システム班ではCTF、自作コンパイラ、自作OSをやっているそうです。</p>
-    <p>エースは<b>らてさん！！</b>とても優しくてかっこいいです！</p>
-
-    <h2>競プロ班</h2>
-    <p>競プロ班は毎週水曜日にわいわい集まっています。</p>
-    <p>みんなで毎週土曜日の<b>21:00~22:40</b>の<b>ABC</b>に参加しています。</p>
-    <p>水曜日には分からなかった問題の解説をしてもらえます。</p>
-    <p>エースは<b>Lazzさん！！</b></p>
-
-    <h2>Web班</h2>
-    <p>Web班では毎週火曜日に活動があります。</p>
-    <p>Web班では<b>てみずさん</b>の面白いスライドを毎週見ることができます！</p>
-    <p>最近はHTML、CSSとかを学びます。</p>
-    <p>夏休みにはNext.jsの講習会をやります。</p>
+    <div id="prgraming_compe" class="groups">
+        <h2 class="heading">競プロ班</h2>
+        <p>競プロ班は毎週水曜日にわいわい集まっています。</p>
+        <p>みんなで毎週土曜日の<b>21:00~22:40</b>の<b>ABC</b>に参加しています。</p>
+        <p>水曜日には分からなかった問題の解説をしてもらえます。</p>
+        <p>エースは<b>Lazzさん！！</b></p>
+    </div>
+    <div id="web" class="groups">
+        <h2 class="heading">Web班</h2>
+        <p>Web班では毎週火曜日に活動があります。</p>
+        <p>Web班では<b>てみずさん</b>の面白いスライドを毎週見ることができます！</p>
+        <p>最近はHTML、CSSとかを学びます。</p>
+        <p>夏休みにはNext.jsの講習会をやります。</p>
+    </div>
 
-    <h2>ai班</h2>
-    <p>AI班は毎週木曜日にみんなでAIを作ります。</p>
-    <p>班長は<b>Lazzさん！！</b></p>
-    <p>AI班は人数がたくさんいます。</p>
-    <p>夏休みには<b>しのさん</b>によるPyTorchの講習会もあります。</p>
+    <div id="ai" class="groups">
+        <h2 class="heading">ai班</h2>
+        <p>AI班は毎週木曜日にみんなでAIを作ります。</p>
+        <p>班長は<b>Lazzさん！！</b></p>
+        <p>AI班は人数がたくさんいます。</p>
+        <p>夏休みには<b>しのさん</b>によるPyTorchの講習会もあります。</p>
+    </div>
 
-    <h2>cg班</h2>
-    <p>すごくきれいなものを作っています。</p>
+    <div id="cg" class="groups">
+        <h2 class="heading">cg班</h2>
+        <p>すごくきれいなものを作っています。</p>
+    </div>
 
-    <h2>ゲーム開発班</h2>
-    <p>おもしろいゲームを作っています。</p>
-    <p>七夕祭とか矢上祭で遊ぶことができます。</p>
+    <div id="game" class="groups">
+        <h2 class="heading">ゲーム開発班</h2>
+        <p>おもしろいゲームを作っています。</p>
+        <p>七夕祭とか矢上祭で遊ぶことができます。</p>
+    </div> 
 
-    <h2>音楽班</h2>
-    <p>うつくし音楽を作成しています。</p>
+    <div id="music" class="groups">
+        <h2 class="heading">音楽班</h2>
+        <p>うつくし音楽を作成しています。</p>
+    </div>
 
-    <h2>映像制作班</h2>
-    <p>たぶんですが、映像を作っています。</p>
+    <div id="movie" class="groups">
+        <h2 class="heading" >映像制作班</h2>
+        <p>たぶんですが、映像を作っています。</p>
+    </div>
 </body>
 
 </html>
diff --git a/index.html b/index.html
index dd2ce7f..b2e544f 100644
--- a/index.html
+++ b/index.html
@@ -14,25 +14,15 @@
         </ul>
     </header>
 
-    <h1>KCS について</h1>
-<<<<<<< HEAD
+    <div id="introduction">
+        <h1>KCSとは</h1>
+        <p><b>KCSは慶應義塾大学で唯一のコンピュータサークルであり、日本で最も歴史の長いコンピュータサークルです。個人やグループで興味のある技術の習得や勉強会や、矢上祭や三田祭の展示物の制作が主な活動です。</b></p>
+        <p><b>多くのメンバーがプログラミングを行っていますが、音楽や3Dモデルの製作も行っています。</b></p>
+    </div>
 
     <footer>
 
     </footer>
-=======
-    <ul>
-        <li>KCS について</li>
-        <li><a href="./groups.html">班紹介</a></li>
-        <li><a href="./events.html">イベント情報</a></li>
-    </ul>
 
-    
->>>>>>> 239acb37e1bc92cc5b2a8955e52d315ed998183a
 </body>
-<div id="introduction">
-    <h1>KCSとは</h1>
-    <p><b>KCSは慶應義塾大学で唯一のコンピュータサークルであり、日本で最も歴史の長いコンピュータサークルです。個人やグループで興味のある技術の習得や勉強会や、矢上祭や三田祭の展示物の制作が主な活動です。</b></p>
-    <p><b>多くのメンバーがプログラミングを行っていますが、音楽や3Dモデルの製作も行っています。</b></p>
-</div>
 </html>
diff --git a/style.css b/style.css
index 496d7c6..f01fe6f 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 * {
     font-family: "ヒラギノ角ゴシック", "游ゴシック", "メイリオ", Arial, Helvetica, sans-serif;
-    color: aliceblue; 
-    background-color: black;
+    color: black; 
+    background-color: white;
 }
 
 ul.menu {
@@ -22,15 +22,6 @@ h1 {
 #introduction {
     width: 80vw;
     margin: 0 auto;
-    padding: 30px;
-    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    color: white;
-    text-align: center;
 }
 
 #introduction h1{
@@ -39,4 +30,23 @@ h1 {
 
 #introduction p{
     background-color: transparent;
+}
+
+.heading {
+    text-align: center;
+}
+
+.groups {
+    width: 80vw;
+    margin: 5em auto;
+}
+
+.groupMenu{
+    display: flex;
+    justify-content: center;
+}
+
+.groupMenu li{
+    display: inline;
+    margin: auto;
 }
\ No newline at end of file

From 43af0338b17ad4f0fdf9594e1c7a83754836c1a9 Mon Sep 17 00:00:00 2001
From: Yuito Fujiwara <yuito6187@gmail.com>
Date: Thu, 7 Aug 2025 02:32:53 -0700
Subject: [PATCH 2/2] Enable automatic light/dark mode based on browser
 preference

---
 style.css | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index f01fe6f..3d353d4 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,27 @@
+@media (prefers-color-scheme: dark) {
+    body {
+        color: white; 
+        background-color: black;
+    }
+
+    a {
+        color: white;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        color: black;
+        background-color: white;
+    }
+
+    a {
+        color: black;
+    }
+}
+
 * {
     font-family: "ヒラギノ角ゴシック", "游ゴシック", "メイリオ", Arial, Helvetica, sans-serif;
-    color: black; 
-    background-color: white;
 }
 
 ul.menu {