Fix: Merged layouts for core and dog sections as much as possible.

static/css/components/overlay.css

@@ -21,19 +21,29 @@
 /* Hamburger menu overlay */
 #buttonHamburger {
     cursor: pointer;
-    position: absolute;
-    right: 0;
-    min-height: 4vh;
-    max-height: 4vh;
-    min-width: 4.5vh;
-    max-width: 4.5vh;
+    position: fixed;
+    right: 1vh;
+    min-height: 3.5vh;
+    max-height: 3.5vh;
+    min-width: 4vh;
+    max-width: 4vh;
     z-index: 10;
+    padding: 0;
+}
+#buttonHamburger.expanded {
+    min-width: 100px;
+    max-width: 100px;
+    min-height: 5vh;
+    max-height: 5vh;
+    padding-left: calc(100 * 1px - 5 * 1vh);
+    padding-bottom: 1vh;
 }
 #buttonHamburger .icon.hamburger {
-    min-height: 3vh;
-    max-height: 3vh;
-    min-width: 3vh;
-    max-width: 3vh;
+    min-height: 2.5vh;
+    max-height: 2.5vh;
+    min-width: 2.5vh;
+    max-width: 2.5vh;
+    padding: 0.5vh 0.75vh;
 }
 /*
 #buttonHamburger:hover {
@@ -42,15 +52,17 @@
 }
 */
 #overlayHamburger {
-    top: 20vh;
-    right: 0.75vh;
+    top: 10vh;
+    right: 1vh;
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 60vh;
-}
-#overlayHamburger {
+    background-color: var(--colour-accent);
     border: 2px solid var(--border-colour);
-    border-radius: 4px;
+    border-radius: 0.75vh;
+    width: 100px;
+    z-index: 2;
+    padding-top: 3.5vh;
 }
 #overlayHamburger:first-child {
     border-top-left-radius: 12px;
@@ -61,7 +73,8 @@
     border-bottom-right-radius: 12px;
 }
 
-#overlayHamburger > * {
+#overlayHamburger .container {
+    background-color: var(--colour-page-background);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -72,12 +85,14 @@
     font-weight: bold;
     font-size: 15px;
     /* height: 18px; */
+    cursor: pointer;
+    padding-top: 5vh;
 }
 #overlayHamburger > :hover {
     color: var(--colour-page-background);
     background-color: var(--colour-primary);
 }
-#overlayHamburger > * > * {
+#overlayHamburger .container a {
     width: 100%;
     /*
     margin-top: 4.5px;
@@ -91,21 +106,19 @@
 
 @media screen and (max-width: 400px) {
     #buttonHamburger {
-        min-height: 6vh;
-        max-height: 6vh;
-        min-width: 6.5vh;
-        max-width: 6.5vh;
-    }
-    #buttonHamburger .icon.hamburger {
         min-height: 5vh;
         max-height: 5vh;
-        min-width: 5vh;
-        max-width: 5vh;
+        min-width: 5.5vh;
+        max-width: 5.5vh;
+    }
+    #buttonHamburger .icon.hamburger {
+        min-height: 4vh;
+        max-height: 4vh;
+        min-width: 4vh;
+        max-width: 4vh;
     }
     #overlayHamburger {
-        top: 22vh;
-        width: 100px;
-        /* right: 6.5vh; */
+        padding-top: 5vh;
     }
 }