diff --git a/index.html b/index.html
index 0e4b235..f538ea2 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,10 @@
TechTransThai
-
diff --git a/navbar.css b/navbar.css
deleted file mode 100644
index bd9910f..0000000
--- a/navbar.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index 8683721..fdcfc3c 100644
--- a/style.css
+++ b/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);
+ }
}