Enable automatic light/dark mode based on browser preference

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="#programing_compe">競プロ班</a></li>
         <li><a href="#web">web班</a></li>
@@ -32,42 +27,57 @@ <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>
+
+    <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 id="system">システム班</h2>
-    <p>システム班は毎週金曜日に楽しく集まっています。</p>
-    <p>システム班ではCTF、自作コンパイラ、自作OSをやっているそうです。</p>
-    <p>エースは<b>らてさん！！</b>とても優しくてかっこいいです！</p>
-
-    <h2 id="programing_compe">競プロ班</h2>
-    <p>競プロ班は毎週水曜日にわいわい集まっています。</p>
-    <p>みんなで毎週土曜日の<b>21:00~22:40</b>の<b>ABC</b>に参加しています。</p>
-    <p>水曜日には分からなかった問題の解説をしてもらえます。</p>
-    <p>エースは<b>Lazzさん！！</b></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 id="web">Web班</h2>
-    <p>Web班では毎週火曜日に活動があります。</p>
-    <p>Web班では<b>てみずさん</b>の面白いスライドを毎週見ることができます！</p>
-    <p>最近はHTML、CSSとかを学びます。</p>
-    <p>夏休みにはNext.jsの講習会をやります。</p>
+    <div id="cg" class="groups">
+        <h2 class="heading">cg班</h2>
+        <p>すごくきれいなものを作っています。</p>
+    </div>
 
-    <h2 id="ai">ai班</h2>
-    <p>AI班は毎週木曜日にみんなでAIを作ります。</p>
-    <p>班長は<b>Lazzさん！！</b></p>
-    <p>AI班は人数がたくさんいます。</p>
-    <p>夏休みには<b>しのさん</b>によるPyTorchの講習会もあります。</p>
+    <div id="game" class="groups">
+        <h2 class="heading">ゲーム開発班</h2>
+        <p>おもしろいゲームを作っています。</p>
+        <p>七夕祭とか矢上祭で遊ぶことができます。</p>
+    </div> 
 
-    <h2 id="cg">cg班</h2>
-    <p>すごくきれいなものを作っています。</p>
+    <div id="music" class="groups">
+        <h2 class="heading">音楽班</h2>
+        <p>うつくし音楽を作成しています。</p>
+    </div>
 
-    <h2 id="game">ゲーム開発班</h2>
-    <p>おもしろいゲームを作っています。</p>
-    <p>七夕祭とか矢上祭で遊ぶことができます。</p>
-
-    <h2 id="music">音楽班</h2>
-    <p>うつくし音楽を作成しています。</p>
-
-    <h2 id="movie">映像制作班</h2>
-    <p>たぶんですが、映像を作っています。</p>
+    <div id="movie" class="groups">
+        <h2 class="heading" >映像制作班</h2>
+        <p>たぶんですが、映像を作っています。</p>
+    </div>
+</body>
 
     <h2>KCSゲーム部班</h2>
     <ul>

index.html

@@ -12,7 +12,7 @@
             <li><a href="./events.html">イベント情報</a></li>
         </ul>
   </header>
-
+  
     <h1>KCS について</h1>
     <ul>
         <li>KCS について</li>
@@ -42,5 +42,9 @@ <h1>KCSとは</h1>
     <p>Youtubeに動画を投稿しています。PythonやRustなどの基本文法について扱った動画が人気です。</p>
     <p>1年を通していつでも入れます。複数班所属も可能です。</p>
   </div>
+
+  <footer>
+
+  </footer>
   </body>
 </html>

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: aliceblue; 
-    background-color: black;
 }
 
 ul.menu {
@@ -22,15 +42,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 +50,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;
 }