aboutsummaryrefslogtreecommitdiff
path: root/src/web/components/nav_bar/NavBar.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/components/nav_bar/NavBar.css')
-rw-r--r--src/web/components/nav_bar/NavBar.css304
1 files changed, 304 insertions, 0 deletions
diff --git a/src/web/components/nav_bar/NavBar.css b/src/web/components/nav_bar/NavBar.css
new file mode 100644
index 0000000..d9e315e
--- /dev/null
+++ b/src/web/components/nav_bar/NavBar.css
@@ -0,0 +1,304 @@
+:root {
+ --nav-bar-color: var(--black-10);
+ --nav-bar-font-color: var(--black-98);
+ --nav-bar-height: 4rem;
+ --nav-bar-shadow: 0 0.05em 0.16em var(--nav-bar-color);
+}
+
+.navBar {
+ /* sticky footer */
+ flex-shrink: 0;
+
+ min-width: 100%;
+ height: var(--nav-bar-height);
+
+ z-index: var(--nav-bar-z-index);
+ position: sticky;
+ top: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ background-color: var(--nav-bar-color);
+ box-shadow: var(--nav-bar-shadow);
+ font-weight: bolder;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ min-height: var(--nav-bar-height);
+}
+.bannerContainer > a {
+ display: inherit;
+ justify-content: inherit;
+ align-items: inherit;
+ min-height: var(--nav-bar-height);
+ text-decoration: none;
+}
+
+.bannerContainer {
+ display: flex;
+ align-items: center;
+ min-height: var(--nav-bar-height);
+}
+.logo {
+ margin-left: 0.5em;
+ height: calc(var(--nav-bar-height) - 0.5em);
+ width: calc(var(--nav-bar-height) - 0.5em);
+}
+
+.bannerContainer h1 {
+ font-size: 1.5em;
+ margin: 0;
+
+ color: var(--nav-bar-font-color);
+ text-decoration: none;
+ text-transform: none;
+ font-weight: bold;
+}
+
+.burgerButton {
+ height: var(--nav-bar-height);
+ width: var(--nav-bar-height);
+ margin-left: 0.5em;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border: 0;
+ background-color: transparent;
+ cursor: pointer;
+ background: url(assets/svg/burger.svg) center center no-repeat;
+ background-size: 3em;
+ filter: invert(95%);
+}
+
+:root {
+ --menu-width: calc(100vw * 0.7);
+}
+
+.menu {
+ position: fixed;
+ inset: 0 calc(100vw - var(--menu-width)) 0 0;
+ translate: calc(var(--menu-width) * -1);
+ z-index: var(--menu-z-index);
+
+ display: flex;
+ flex-direction: column;
+
+ background-color: var(--nav-bar-color);
+
+ transition: translate var(--transition-time) ease-in;
+}
+.menuActive {
+ translate: initial;
+}
+
+.darken {
+ z-index: calc(var(--menu-z-index) - 1);
+}
+
+.itemListContainer {
+ display: inherit;
+ flex-direction: inherit;
+ overflow: scroll;
+ height: 100%;
+}
+.itemList {
+ position: static;
+ display: block;
+ margin: 0;
+ overflow: visible;
+ padding: 0 0.5em;
+}
+.itemList + .itemList {
+ border-top: solid hsl(0, 0%, 35%) 1px;
+}
+.itemList > p {
+ margin-bottom: 1em;
+ height: var(--nav-bar-height);
+ padding-top: 1.5em;
+
+ text-align: center;
+ color: var(--nav-bar-font-color);
+ font-style: italic;
+ font-weight: 100;
+}
+
+.titleContainer {
+ display: flex;
+ align-items: end;
+ margin: 1em 0 0.5em 0.5em;
+}
+.titleContainer h3 {
+ color: var(--nav-bar-font-color);
+ font-size: 1.25em;
+ text-transform: uppercase;
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 0 1.0rem;
+ min-height: var(--nav-bar-height);
+
+ background-color: transparent;
+ border-radius: 1.5rem;
+ text-decoration: none;
+ color: var(--nav-bar-font-color);
+ font-size: 1.75em;
+ text-transform: uppercase;
+}
+.item:hover {
+ background-color: hsl(0, 0%, 25%);
+}
+.itemActive {
+ background-color: var(--brand-80);
+}
+.itemActive:hover {
+ color: white;
+ background-color: var(--brand-90);
+}
+.itemIcon {
+ width: 1em;
+}
+.item h4 {
+ margin-left: 2rem;
+ font-size: 0.675em;
+ text-transform: capitalize;
+ font-weight: 100;
+}
+.itemActive h4 {
+ font-weight: 800;
+}
+
+.menu span {
+ font-size: 0.8em;
+ width: 100%;
+ margin-top: auto;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: var(--nav-bar-font-color);
+}
+
+.loginStatus {
+ font-size: 0.8em;
+
+ padding: 0.75em 1em;
+
+ margin: 0em 1.5em 0em 0.7em;
+ font-weight: 600;
+}
+
+.accountContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 1em;
+ width: 12em;
+
+ color: var(--black-98);
+ background-color: hsl(0, 0%, 15%);
+ padding: 0.5em 1em;
+ border-radius: 1em;
+}
+.accountIcon {
+ height: 1.75em;
+ color: hsl(186, 90%, 50%);
+}
+.accountContainer h2 {
+ margin: 0 0.4em 0 0.25em;
+}
+.accountArrow {
+ height: 0.8em;
+ rotate: -90deg;
+}
+.accountInfoItemList {
+ display: none;
+ padding-top: 0.5em;
+
+ position: absolute;
+ right: 1em;
+ top: 3em;
+ width: 12em;
+
+ flex-direction: column;
+ background-color: inherit;
+ border-radius: 1em;
+ border-top-right-radius: 0em;
+ border-top-left-radius: 0em;
+}
+.accountInfoItem {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ color: var(--black-98);
+ text-decoration: none;
+ padding: 1em 0;
+}
+.accountInfoItem + .accountInfoItem {
+ border-top: 1px hsl(0, 0%, 50%) solid;
+}
+.accountInfoItem h3 {
+ font-weight: 200;
+}
+@media (max-width: 40em) {
+ .accountContainerActive {
+ background-color: hsl(0, 0%, 25%);
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .accountArrowActive {
+ rotate: 90deg;
+ }
+ .accountInfoItemListActive {
+ display: flex;
+ }
+}
+
+@media (min-width: 40em) {
+ :root {
+ --menu-width: 15em;
+ }
+ .darken {
+ display: none;
+ }
+ .burgerButton {
+ display: none;
+ }
+ .menu {
+ translate: initial;
+ transition: none;
+
+ }
+ .itemListContainer {
+ font-size: 0.8em;
+ box-shadow: var(--nav-bar-shadow);
+ }
+
+ .accountInfoListActive {
+ display: unset;
+ }
+ .accountContainer:hover {
+ background-color: hsl(0, 0%, 25%);
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .accountContainer:hover .accountInfoItemList {
+ display: flex;
+ }
+ .accountContainer:hover .accountArrow {
+ rotate: 90deg;
+ }
+ .accountInfoItem:hover h3 {
+ color: white;
+ font-weight: bolder;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-13 14:14:35 +0000