first commit

2022-04-03 02:36:18 +08:00
commit 03f5abf96b
37 changed files with 10380 additions and 0 deletions
--- a/frontend/components/layout/MainNavigation.module.css
+++ b/frontend/components/layout/MainNavigation.module.css
@ -0,0 +1,61 @@
+.header {
+  width: 100%;
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #77002e;
+  padding: 0 10%;
+}
+
+.logo {
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+}
+
+.header ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: baseline;
+}
+
+.header li {
+  margin-left: 3rem;
+}
+
+.header a {
+  text-decoration: none;
+  font-size: 1.5rem;
+  color: #fcb8d2;
+}
+
+.header a:hover,
+.header a:active,
+.header a.active {
+  color: white;
+}
+
+.badge {
+  background-color: #cc2062;
+  color: white;
+  border-radius: 12px;
+  padding: 0 1rem;
+  margin-left: 0.5rem;
+}
+
+/*  if display < 600px then hide logo */
+@media screen and (max-width: 600px) {
+  .header .logo {
+    display: none;
+  }
+  
+  /*  set the li from left to right */
+  .header li {
+    margin-left: 0;
+    /* add  space between li */
+    margin-right: 1rem;
+  }
+}