fix indexing causing main thread freeze, various polish

quartz/components/styles/darkmode.scss

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

quartz/components/styles/graph.scss

@@ -40,9 +40,9 @@
     top: 0;
     width: 100vw;
     height: 100%;
-    overflow: scroll;
     backdrop-filter: blur(4px);
     display: none;
+    overflow: hidden;
 
     &.active {
       display: inline-block;

quartz/components/styles/listPage.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 ul.section-ul {
   list-style: none;
   margin-top: 2em;
@@ -11,7 +13,7 @@ li.section-li {
     display: grid;
     grid-template-columns: 6em 3fr 1fr;
 
-    @media all and (max-width: 600px) {
+    @media all and (max-width: $mobileBreakpoint) {
       & > .tags {
         display: none;
       }
@@ -22,7 +24,7 @@ li.section-li {
       margin-left: 1rem;
     }
 
-    & > .desc a {
+    & > .desc > h3 > a {
       background-color: transparent; 
     }
 

quartz/components/styles/popover.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 @keyframes dropin {
   0% {
     opacity: 0;
@@ -42,7 +44,7 @@
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 
-  @media all and (max-width: 600px) {
+  @media all and (max-width: $mobileBreakpoint) {
     display: none !important;
   }
 }

quartz/components/styles/search.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 .search {
   min-width: 5rem;
   max-width: 14rem;
@@ -55,7 +57,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: 1200px) {
+      @media all and (max-width: $tabletBreakpoint) {
         width: 90%;
       }