merge navbar.css into style.css

index.html

@@ -17,10 +17,10 @@
         <img src="resources/icons/ttt-org.svg" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;"> 
         <h4 class="logo">TechTransThai</h4>
       </a>
-      <div style="display: flex; align-items: center">
+      <div style="display: flex; align-items: center;">
-        <a href="/team" class="headerbutton">ทีม</a>
+        <a href="/team" class="button header">ทีม</a>
-        <a target="_blank" rel="noopener noreferrer" href="https://webring.wonderful.software#techtransthai.org" class="headerbutton">วงแหวนเว็บ</a>
+        <a target="_blank" rel="noopener noreferrer" href="https://webring.wonderful.software#techtransthai.org" class="button header">วงแหวนเว็บ</a>
-        <a target="_blank" rel="noopener noreferrer" href="https://status.techtransthai.org/" class="headerbutton">สถานะการให้บริการ</a>
+        <a target="_blank" rel="noopener noreferrer" href="https://status.techtransthai.org/" class="button header">สถานะการให้บริการ</a>
       </div>
     </div>
   </div>

navbar.css

@@ -1,143 +0,0 @@
-.headerbutton {
-  border: none;
-  border-radius: 8px;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  display: flex;
-  font-size: 16px;
-  margin: 4px 2px;
-  padding-left: 0.3cm;
-  padding-right: 0.3cm;
-  cursor: pointer;
-  height: 35px;
-  transition-duration: 0.2s;
-}
-
-.topbar {
-  position: fixed;
-  width: 100%;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-}
-
-.topbar-group {
-  display: flex;
-  justify-content: space-between;
-  margin-left: 1cm;
-  margin-right: 1cm;
-}
-
-.simple-topbar {
-  position: fixed;
-  width: 100%;
-  height: 1.2cm;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-}
-
-.simple-topbar-backbutton {
-  position: absolute;
-  border-radius:10px;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  display: grid;
-  font-size: 14px;
-  cursor: pointer;
-  margin: 0.1cm;
-  transition-duration: 0.2s;
-  width: 1cm;
-  height: 1cm;
-}
-
-@media only screen and (max-width: 750px) {
-  .topbar-group {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    margin-left: 0cm;
-    margin-right: 0cm;
-  }
-
-  .headerbutton {
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 14px;
-    margin: 4px 2px;
-    padding-left: 0.2cm;
-    padding-right: 0.2cm;
-    cursor: pointer;
-    height: 35px;
-    transition-duration: 0.2s;
-  }
-
-}
-@media (prefers-color-scheme: light) {
-
-  .headerbutton {
-    color: black;
-  }
-
-  .headerbutton:hover {
-    background-color: #fafafa;
-  }
-
-  .topbar {
-    background-color: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(224, 224, 224, 1);
-    color: #000000;
-  }
-
-  .simple-topbar {
-    background-color: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(224, 224, 224, 1);
-    color: #000000;
-  }
-
-  .simple-topbar-backbutton {
-    color: black;
-  }
-
-  .simple-topbar-backbutton:hover {
-    background-color: #DEDEDE;
-  }
-
-}
-
-@media (prefers-color-scheme: dark) {
-
-  .headerbutton {
-    color: #ffffff;
-  }
-
-  .headerbutton:hover {
-    background-color: #4a4a4a;
-  }
-
-  .topbar {
-    background-color: #303030;
-    border: 1px solid #1f1f1f;
-    color: #ffffff;
-  }
-
-  .simple-topbar {
-    background-color: #303030;
-    border: 1px solid #1f1f1f;
-    color: #ffffff;
-  }
-
-  .simple-topbar-backbutton {
-    color: #ffffff;
-  }
-
-  .simple-topbar-backbutton:hover {
-    background-color: #3e3e3e;
-  }
-}

style.css

@@ -3,8 +3,10 @@
 :root {
   --white: 255, 255, 255;
   --whitebg: 250, 250, 250;
+  --whiteitem: 255, 255, 255;
   --black: 0, 0, 0;
   --blackbg: 34, 34, 34;
+  --blackitem: 50, 50, 50;
   --accent1: 153, 193, 241;
   --accent3: 53, 132, 228;
   --accent5: 26, 95, 180;
@@ -110,6 +112,20 @@ h1 {margin-top: 3vh;}
   padding: 0cm 0.75cm 0cm 0.75cm;
 }
 
+.button.header {
+  font-weight: normal;
+  margin-top: 0.25cm;
+}
+
+.button.back {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.1cm;
+  height: 1cm;
+}
+
 .itemcard {
   display: grid;
   border-radius: 12px;
@@ -221,6 +237,23 @@ h1 {margin-top: 3vh;}
   flex-wrap: wrap;
 }
 
+.topbar {
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+}
+
+.topbar.simple {height: 1.2cm;}
+
+.topbar-group {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 1cm;
+  margin-right: 1cm;
+}
+
 /* For tablet screens */
 @media only screen and (max-width: 1366px) {
   .middle.large {width: 90vw;}
@@ -229,6 +262,13 @@ h1 {margin-top: 3vh;}
 /* For phone screens */
 @media only screen and (max-width: 750px) {
   .middle.large {margin-top: 1cm;}
+
+  .topbar-group {
+    align-items: center;
+    flex-direction: column;
+    margin-left: 0cm;
+    margin-right: 0cm;
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -236,29 +276,39 @@ h1 {margin-top: 3vh;}
   html * {color: rgb(var(--black));}
   .list {background-color: rgb(var(--white));}
   .button {background-color: rgba(var(--black), 0.08);}
+  .button.header {background-color: rgb(var(--white));}
+  .button.back {background-color: rgb(var(--white));}
   .button:hover {background-color: rgba(var(--black), 0.18);}
   .togglegroups-background {background-color: rgba(var(--black), 0.08);}
   .togglegroups-highlighted {background-color: rgb(var(--white));}
-  .itemcard {background-color: rgb(var(--white));}
+  .itemcard {background-color: rgb(var(--whiteitem));}
   .itemcard:hover {background-color: rgb(var(--whitebg));}
   .itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
-  .infocard {background-color: rgb(var(--white));}
+  .infocard {background-color: rgb(var(--whiteitem));}
   .separator {background-color: rgba(var(--blackbg), 0.1);}
   .banner {background-color: rgba(var(--accent1), 0.6);}
+  .topbar {
+    background-color: rgb(var(--whiteitem));
+    border: 1px solid rgba(var(--blackbg), 0.1);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
   body {background-color: rgb(var(--blackbg));}
   html * {color: rgb(var(--white));}
   .list {background-color: rgba(var(--white), 0.07);}
-  .button {background: rgba(var(--white), 0.1);}
+  .button {background: rgb(var(--blackitem));}
   .button:hover {background: rgba(var(--white), 0.18);}
   .togglegroups-background {background: rgba(var(--white), 0.1);}
   .togglegroups-highlighted {background-color: rgba(var(--white), 0.15);}
-  .itemcard {background-color: rgba(var(--white), 0.07);}
+  .itemcard {background-color: rgb(var(--blackitem));}
   .itemcard:hover {background-color: rgba(var(--white), 0.15);}
   .itemcard-stealth:hover {background-color: rgba(var(--white), 0.15);}
-  .infocard {background-color: rgba(var(--white), 0.07);}
+  .infocard {background-color: rgb(var(--blackitem));}
   .separator {background-color: rgb(var(--blackbg));}
   .banner {background-color: rgba(var(--accent5), 0.5);}
+  .topbar {
+    background-color: rgb(var(--blackitem));
+    border: 1px solid rgba(var(--blackbg), 0.1);
+  }
 }