Better CSS styling fitting the needs of the project

Bigger sizing mostly, also bigger popovers
Readjustment of some components

quartz/styles/custom.scss

@@ -88,20 +88,21 @@ ul.overflow::after, ol.overflow::after {
                 font-size: 1.15rem;
             }
             
-            & h4 {
+            & h1 {
-                font-size: 1.3rem;
+                font-size: 2rem;
-            }
+                margin-top: 1.25rem;
-
-            & h3 {
-                font-size: 1.5rem;
             }
 
             & h2 {
                 font-size: 1.7rem;
             }
 
-            & h1 {
+            & h3 {
-                font-size: 2rem;
+                font-size: 1.5rem;
+            }
+
+            & h4 {
+                font-size: 1.3rem;
             }
         }
 
@@ -116,7 +117,51 @@ ul.overflow::after, ol.overflow::after {
                 margin-top: 0;
             }
         }
+
+        .sidebar {
+            gap: 1rem;
+            margin-top: 1.25rem;
         }
+
+        .sidebar.left {
+            @media all and (min-width: $maxFullPageWidth) {
+                left: calc(50vw - 900px);
+            }
+            @media all and (max-width: $maxFullPageWidth) {
+                left: calc(50vw - 790px);
+            }
+
+        }
+        .sidebar.right {
+            @media all and (min-width: $maxFullPageWidth) {
+                right: calc(50vw - 900px);
+            }
+            @media all and (max-width: $maxFullPageWidth) {
+                right: calc(50vw - 790px);
+            }
+        }
+    }
+}
+
+.page .center, .page footer {
+    @media all and (min-width: $maxFullPageWidth) {
+        width: 950px;
+    }
+    @media all and (max-width: $maxFullPageWidth) {
+        width: 800px;
+    }
+    @media all and (max-width: $mobileBreakpoint) {
+        width: initial;
+    }
+}
+
+.page .page-header {
+    margin-top: 0;
+    width: initial;
+}
+
+.breadcrumb-container {
+    margin-top: 1.25rem;
 }
 
 hr {
@@ -136,6 +181,27 @@ footer {
 }
 
 
+// Align dark mode and search
+
+.page > #quartz-body .sidebar.right {
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.darkmode.desktop-only {
+    margin:unset;
+    margin-top:0.25rem;
+}
+
+// Bigger popover
+.popover {
+
+    & > .popover-inner {
+      width: 45rem;
+      max-height: 45rem;
+    }
+}
+
 
 // Usage
 

quartz/styles/variables.scss

@@ -4,6 +4,7 @@ $tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
 $topSpacing: 2rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
+$maxFullPageWidth: $fullPageWidth + 250px;
 $boldWeight: 700;
 $semiBoldWeight: 600;
 $normalWeight: 400;