rename board-banner to board-header, board-nav to topbar

src/components/topbar/topbar.module.css

@@ -0,0 +1,78 @@
+
+.boardNavDesktop {
+  font-size: var(--topbar-font-size);
+  color: var(--topbar-separator-color);
+}
+
+.boardNavDesktop a {
+  color: var(--topbar-desktop-link-text-color);
+  text-decoration: var(--topbar-desktop-link-text-decoration);
+}
+
+.boardNavDesktop a:hover {
+  color: var(--topbar-desktop-link-text-color-hover);
+  text-decoration: var(--topbar-desktop-link-text-decoration-hover);
+}
+
+.navTopRight {
+  float: right;
+  text-transform: capitalize;
+}
+
+.boardNavMobile {
+  padding: 2px 4px;
+  background-color: var(--topbar-mobile-background-color);
+  border-bottom: var(--topbar-mobile-border-bottom);
+  font-size: var(--topbar-mobile-font-size);
+  position: fixed;
+  width: 100%;
+  z-index: 3;
+  transition: top 0.3s ease-in-out;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.boardNavMobile .pageJump a {
+  color: var(--button-text-color-mobile);
+  text-decoration: var(--button-text-decoration-mobile);
+}
+
+.boardNavMobile strong {
+  text-transform: capitalize;
+  padding-right: 5px;
+}
+
+.boardNavMobile select {
+  font-size: var(--topbar-mobile-font-size);
+  border: var(--select-border, revert);
+  background-color: var(--select-background-color, revert);
+  color: var(--select-color, revert);
+}
+
+.boardSelect {
+  float: left;
+}
+
+.pageJump {
+  float: right;
+  padding: 3px 5px 0 0;
+}
+
+.pageJump a, .mobileSearchButton {
+  padding-right: 5px;
+  color: var(--homepage-box-link-text-color);
+  text-decoration: var(--homepage-box-link-text-decoration);
+  text-transform: capitalize;
+}
+
+@media (max-width: 640px) {
+  .boardNavDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .boardNavMobile {
+    display: none;
+  }
+}