Initial commit

2024-11-27 15:42:04 +13:00
commit c8f05290e8
23 changed files with 5421 additions and 0 deletions
@@ -0,0 +1,123 @@
+.navbar {
+  /* Make navbar stay at top of screen (static) */
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: #fff;
+}
+
+/* Reset default styling on lists */
+.navbar .container ul {
+  list-style-type: none;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+/* Position nav items correctly */
+.navbar .container li {
+  display: inline;
+}
+
+/* Padding betweeen nav items */
+.navbar .container li:not(:last-of-type) {
+  padding-right: 1rem;
+}
+
+/* Reset default styling on links */
+.navbar .container li a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Underline links on hover */
+.navbar .container li a:hover {
+  text-decoration: underline;
+}
+
+/* Make active link bold */
+.navbar .container li a.active {
+  font-weight: bold;
+}
+
+.menuIcon {
+  font-size: 1.5rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+/* Add styles for mobile view */
+@media (max-width: 500px) {
+  .links {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
+
+    position: absolute;
+    top: -10em;
+    left: 0;
+    right: 0;
+    z-index: -2;
+
+    font-size: 1rem;
+
+    transition-property: top border-radius;
+    transition-duration: 0.3s;
+
+  }
+
+  .links {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .links li {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .links.active {
+    top: 60px;
+    border-radius: 0 0 0.5em 0.5em;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    background-color: #fff;
+  }
+}
+
+/* Styles for desktop view */
+@media (min-width: 501px) {
+  .links {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .menuIcon {
+    display: none;
+  }
+
+  .navbar .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}