huge changes
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 88aa580..ecbf786 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -1,134 +1,45 @@
-.container {
- display: flex;
- flex-direction: column;
- justify-content: top;
- align-items: center;
+.icon {
+ height: 32px;
+ margin: 0;
+ padding: 0;
+ width: 32px;
+}
+.container {
position: fixed;
top: 0;
- left: 0;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ flex-direction: row;
+ gap: 10px;
+
+ height: 42px;
+ padding: 5px;
+ padding-left: 25px;
+
+ z-index: 69;
+}
+
+.divider {
+ height: 100%;
+ width: 3px;
+ border-radius: 100vh;
+ background-color: #424242;
+}
+
+.skipNav {
+ width: 0%;
overflow: hidden;
- margin: 20px;
-
- width: 64px;
- max-height: 64px;
- padding-bottom: -1px;
- height: auto;
-
- border-radius: 32px;
- transition: 0.5s ease-in-out;
-}
-.group {
- display: flex;
- flex-direction: column;
- justify-content: top;
- align-items: center;
-
- background-color: var(--theme-ui-colors-cardBackground);
- transition: background-color 0.3s ease-in-out;
- backdrop-filter: blur(2px);
- border-radius: 32px;
-
- width: 64px;
- margin-bottom: 20px;
- padding-top: 7px;
+ color: white;
+ max-lines: 1;
+ text-overflow: clip;
+ -webkit-line-clamp: 1;
+ height: 20px;
+ transition: width 0.3s ease-in-out;
}
-.headerIcon {
- height: 64px;
- width: 64px;
- margin-bottom: 20px;
- margin-right: 0;
- margin-top: -7px;
- border-radius: 50vw;
-
- cursor: pointer;
-}
-
-.icon {
- height: 50px;
- width: 50px;
- border-radius: 50vw;
- margin-bottom: 5px;
- cursor: pointer;
- display: block;
-}
-
-.ThemeChangeButton {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.containerOpen {
- max-height: 460px;
-}
-
-.containerDesktop {
- animation-name: containerCloseOnStart;
- animation-duration: 0.5s;
- animation-direction: forwards;
- animation-timing-function: ease-in-out;
-}
-
-@keyframes containerCloseOnStart {
- from { max-height: 460px; }
- to { max-height: 64px ; }
-}
-
-.containerDesktop:hover {
- max-height: 460px;
- animation-name: none;
-}
-
-@media screen and (min-width: 450px) {
- .container {
- flex-direction: row;
- justify-content: left;
-
- margin: 20px;
-
- height: 64px;
- max-width: 64px;
- width: auto;
- border-radius: 32px;
-
- border-radius: 32px;
- transition: 0.5s ease-in-out;
- }
- .group {
- flex-direction: row;
- justify-content: left;
-
- height: 64px;
- width: auto;
- padding-right: 7px;
- margin-bottom: 0;
- padding-top: 7px;
- margin-right: 20px;
- padding-left: 3px;
- }
- .headerIcon {
- height: 64px;
- width: 64px;
- margin-top: 12px;
- margin-left: -3px;
- }
- .containerOpen {
- max-width: 460px;
- max-height: 64px;
- }
- .containerDesktop:hover {
- max-width: 460px;
- max-height: 64px;
- }
- .icon {
- height: 50px;
- width: 50px;
- margin-left: 5px;
- }
- @keyframes containerCloseOnStart {
- from { max-width: 460px; }
- to { max-width: 64px ; }
- }
-}
+.skipNav:focus {
+ width: 100%;
+ overflow: auto;
+}
\ No newline at end of file