Finished groups

Server/public/css/auth.css

@@ -169,3 +169,12 @@ label {
     margin-top: -0.2rem;
     color: #5f5f5f;
 }
+
+#content {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100vh;
+}

Server/public/css/navbar.css

@@ -1,11 +1,12 @@
-
-/* Header */
-#navbar{
+ /* Header */
+ #navbar{    
     position: relative;
     top: 0;
     width: min(100%,116rem);
-    z-index: 1000;
+    z-index: 1000000000;
     height: 5.26rem;
+    padding-left: 0rem;
+    padding-right: 0rem;
 }
 
 #navbar * {
@@ -35,11 +36,9 @@
 
 #navbar-logo-text {
     position: relative;
-    width: auto;
+    word-wrap: normal;
     height: 100%;
     line-height: 400%;
-    white-space: nowrap;
-    text-align: center;
     font-size: 1.4rem;
     color: #292222;
     font-family: var(--sans-serif, sans-serif);
@@ -56,20 +55,17 @@
     overflow: hidden;
     z-index: 0;
 }
-#menu a {
+#menu > li > a, .options-button {
     display: block;
-    padding: 1.9rem;
+    padding: 1.2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
     color: black;
     font-size: 1.4rem;
 }
-#menu a:hover {
-    background-color: rgb(220, 220, 220);
-}
 
-#menu a:active{
-    background-color: #f7aec0;
+#menu > li > a:active{
+    
 }
 
 #menu li {
@@ -145,49 +141,88 @@
 
 #side-menu:checked ~ #hamb #hamb-line::before {
     transform: rotate(-45deg);
-    top:0;
+    top: 0;
 }
 
 #side-menu:checked ~ #hamb #hamb-line::after {
     transform: rotate(45deg);
-    top:0;
+    top: 0;
 }
 
-#cart-icon {
-    height: 1.8rem;
-    pointer-events: none;
+/* Options */
+
+.options-dropdown {
+    position: absolute;
+    display: none;
+    top: 5.6rem;
+    right: 1.8rem;
+    border: #404040 solid 0.1rem;
+    background-color: white;
+    z-index: 10;
 }
 
-#menu a:hover div {
-    filter: saturate(50%) brightness(140%);
+.options-dropdown button, .options-dropdown a {
+    display: block;
+    font-family: var(--sans-serif,sans-serif);
+    font-size: 1.2rem;
+    width: 100%;
+    padding: 1rem;
+    text-align: left;
 }
 
-#menu a:hover svg {
-    stroke: rgb(127, 127, 127);;
-}
-
-#cart-counter {
-    position: relative;
-    top: -2.8rem;
-    left: 1.6rem;
-    width: 1.3rem;
-    height: 1.3rem;
-    border-radius: 3.4rem;
-    font-family: var(--sans-serif, sans-serif);
-    font-size: 1rem;
-    text-align: center;
+.options-dropdown button:hover, .options-dropdown a:hover {
+    background-color: var(--red);
     color: white;
-    background: var(--pink);
 }
 
+.options-button {
+    width: 100%;
+    text-align: left;
+}
+
+/* Localization */
+
+#locales {
+    position: relative;
+}
+
+#locales button {
+    width: 100%;
+    text-align: left;
+    height: 4rem;
+}
+
+#locales button:hover {
+    opacity: 0.5;
+}
+
+#locales-img {
+    position: relative;
+    top: 0rem;
+    height: 2rem;
+    margin-left: 1.2rem;
+}
+
+/*
+#options-dropdown>:first-child {
+    padding-bottom: 0.5rem;
+}
+
+#options-dropdown>:nth-child(2) {
+    padding-top: 0.5rem;
+}
+*/
 
 /* Responsiveness */
-@media only screen and (min-width: 1500px) {
+@media only screen and (min-width: 1200px) {
 
     #navbar {
+        position: relative;
+        width: min(100%,116rem);
         left: 50%;
-        -ms-transform: translateX(-50%);
         transform: translateX(-50%);
+        padding-right: 4rem;
+        padding-left: 4rem;
     }
 
     #nav {
@@ -197,23 +232,37 @@
         float: right;
         width: fit-content;
         background-color: transparent;
+        overflow: visible;
     }
+
+    #side-menu:checked ~ nav {
+        padding-top: 0;
+    }
+
     #menu li {
         float: left;
     }
 
-    #menu a:hover {
-        background-color: transparent;
+    #menu > li > a:hover, .options-button:hover, #navbar-logo-text:hover {
         color: rgb(127, 127, 127);
     }
 
-    #menu a {
-        padding: 1.9rem;
+    #menu > li > a, .options-button {
+        padding: 0.9rem;
+        padding-top: 1.9rem;
+        padding-bottom: 1.9rem;
     }
 
-
-
     #hamb {
         display: none;
     }
+
+    #locales {
+        position: relative;
+        margin-right: 1.8rem;
+    }
+
+    #locales-img {
+        top: 0.9rem;
+    }
 }