fix RWD

official-scint · Oct 22, 2023 · e769725 · e769725
1 parent 80b85c1
commit e769725
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/components/navbar.html b/components/navbar.html
@@ -1,10 +1,10 @@
 <nav class="navbar">
     <ul>
-        <li class="navbar-item"><a href="/">關於我們</a></li>
-        <li class="navbar-item"><a href="/">合作社團</a></li>
-        <li class="navbar-item"><a href="/">合作單位</a></li>
+        <li class="navbar-item"><a href="#about-us">關於我們</a></li>
+        <li class="navbar-item"><a href="#clubs">合作社團</a></li>
+        <li class="navbar-item"><a href="#sponsors">合作單位</a></li>
         <a target="_blank" class="navbar-item discord-button" href="https://discord.gg/7sgwT3a77Z">
             <i class="fa-brands fa-discord"></i>Discord
         </a>
     </ul>
-</nav>
+</nav>
diff --git a/css/global/navbar.css b/css/global/navbar.css
@@ -37,6 +37,12 @@
     margin-right: -0.5rem;
 }
 
+@media (max-width: 500px) {
+    .discord-button {
+        display: none;
+    }
+}
+
 .discord-button > i {
     margin-right: 0.7rem;
 }

diff --git a/css/home/clubs.css b/css/home/clubs.css
@@ -94,13 +94,16 @@
 }
 
 .club-avatar {
+    position: relative;
     width: 2.8rem;
     border-radius: 10rem;
+    z-index: -1;
 }
 
 .club-small-card {
     position: relative;
     transition: 200ms;
+    /* z-index: 1; */
 }
 
 .club-small-card::after {
@@ -112,7 +115,7 @@
     background-color: #1a1e4b;
     padding: 1rem;
     top: 3.5rem;
-    z-index: 1;
+    z-index: 100;
     display: block;
     border-radius: 1rem;
     white-space: nowrap;

diff --git a/index.html b/index.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
+
     <link type="text/css" rel="stylesheet" href="css/global/style.css">
     <link type="text/css" rel="stylesheet" href="css/home/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    
+
     <script defer src="js/hehe.js"></script>
     <script defer src="js/home.js"></script>
     <script defer src="js/global.js"></script>
@@ -30,7 +30,7 @@ <h1 class="banner-title">北臺灣學生資訊社群</h1>
         <i class="fa-solid fa-chevron-down down-arrow"></i>
     </div>
     <div class="container">
-        <h1 class="title">關於我們</h1>
+        <h1 class="title" id="about-us">關於我們</h1>
         <div class="fade-up about-us">
             <section>
                 <h2>社群理念</h2>
@@ -45,7 +45,7 @@ <h2>成員組成</h2>
                 <p>Loading...</p>
             </section>
         </div>
-        <h1 class="title">合作社團</h1>
+        <h1 class="title" id="clubs">合作社團</h1>
         <div class="clubs">
             <div class="fade-up clubs-row">
                 <div class="club-card">
@@ -93,7 +93,7 @@ <h1 class="title">合作社團</h1>
             </div>
             <div class="fade-up club-avatars"></div>
         </div>
-        <h1 class="title">合作單位</h1>
+        <h1 class="title" id="sponsors">合作單位</h1>
         <div class="fade-up sponsors">
         </div>
     </div>