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

static/css/components/label.css

@@ -1,17 +1,14 @@
 
 h1 {
-    font-size: min(24px, calc(1vh * 6));
+    font-size: 2.5rem;
 }
-
 h2 {
-    font-size: min(20px, calc(1vh * 5));
+    font-size: 1.8rem;
 }
-
 h3 {
-    font-size: min(16px, calc(1vh * 4));
+    font-size: 1.2rem;
     margin-top: 1vh;
 }
-
 h4 {
     font-size: 13px;
     margin: 1vh;
@@ -19,8 +16,20 @@ h4 {
     margin-left: auto;
     margin-right: auto;
 }
-
 h5 {
     font-size: 11px;
     margin: 1vh;
 }
+
+
+.text-center {
+    text-align: center;
+}
+.section-title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+.section-subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}

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;
     }
 }