more visual polish, adjust colours and spacing

quartz/components/styles/darkmode.scss

@@ -2,7 +2,7 @@
   position: relative;
   width: 20px;
   height: 20px;
-  margin: 1rem;
+  margin: 0 10px;
 
   & > .toggle {
     display: none;

quartz/components/styles/footer.scss

@@ -1,6 +1,5 @@
 footer {
   text-align: left;
-  opacity: 0.8;
   margin-bottom: 4rem;
 
   & ul {

quartz/components/styles/popover.scss

@@ -29,11 +29,11 @@
     line-height: normal;
     font-size: initial;
     font-family: var(--bodyFont);
-    border: 1px solid var(--gray);
+    border: 1px solid var(--lightgray);
     background-color: var(--light);
     border-radius: 5px;
     box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
-    overflow: scroll;
+    overflow: auto;
   }
 
   h1 {

quartz/components/styles/search.scss

@@ -12,6 +12,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    white-space: nowrap;
 
     & > div {
       flex-grow: 1;
@@ -38,12 +39,13 @@
 
   & > #search-container {
     position: fixed;
+    contain: layout;
     z-index: 999;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
-    overflow: scroll;
+    overflow-y: auto;
     display: none;
     backdrop-filter: blur(4px);
 
@@ -57,7 +59,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $tabletBreakpoint) {
+      @media all and (max-width: $fullPageWidth) {
         width: 90%;
       }
 

quartz/components/styles/toc.scss

@@ -29,7 +29,7 @@ button#toc {
   list-style: none;
   overflow: hidden;
   max-height: none;
-  transition: max-height 0.3s ease;
+  transition: max-height 0.5s ease;
 
   & ul {
     list-style: none;