Quartz sync: May 19, 2025, 1:18 PM

Author: codeyoma

quartz/components/styles/darkmode.scss

@@ -1,47 +1,51 @@
 .darkmode {
-  cursor: pointer;
-  padding: 0;
-  position: relative;
-  background: none;
-  border: none;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  text-align: inherit;
-  flex-shrink: 0;
-
-  & svg {
-    position: absolute;
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    background: none;
+    border: none;
     width: 20px;
     height: 20px;
-    top: calc(50% - 10px);
-    fill: var(--darkgray);
-    transition: opacity 0.1s ease;
-  }
+    text-align: inherit;
+    flex-shrink: 0;
+    display: flex;
+
+    & svg {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        fill: var(--darkgray);
+        transition: opacity 0.1s ease;
+    }
 }
 
 :root[saved-theme="dark"] {
-  color-scheme: dark;
+    color-scheme: dark;
 }
 
 :root[saved-theme="light"] {
-  color-scheme: light;
+    color-scheme: light;
 }
 
 :root[saved-theme="dark"] .darkmode {
-  & > .dayIcon {
-    display: none;
-  }
-  & > .nightIcon {
-    display: inline;
-  }
+    &>.dayIcon {
+        display: none;
+    }
+
+    &>.nightIcon {
+        display: inline;
+    }
 }
 
 :root .darkmode {
-  & > .dayIcon {
-    display: inline;
-  }
-  & > .nightIcon {
-    display: none;
-  }
+    &>.dayIcon {
+        display: inline;
+    }
+
+    &>.nightIcon {
+        display: none;
+    }
 }

quartz/components/styles/readermode.scss

@@ -1,34 +1,37 @@
 .readermode {
-  cursor: pointer;
-  padding: 0;
-  position: relative;
-  background: none;
-  border: none;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  text-align: inherit;
-  flex-shrink: 0;
-
-  & svg {
-    position: absolute;
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    background: none;
+    border: none;
     width: 20px;
     height: 20px;
-    top: calc(50% - 10px);
-    fill: var(--darkgray);
-    stroke: var(--darkgray);
-    transition: opacity 0.1s ease;
-  }
+    text-align: inherit;
+    flex-shrink: 0;
+    display: flex;
+
+    & svg {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        fill: var(--darkgray);
+        stroke: var(--darkgray);
+        transition: opacity 0.1s ease;
+    }
 }
 
 :root[reader-mode="on"] {
-  & .sidebar.left,
-  & .sidebar.right {
-    opacity: 0;
-    transition: opacity 0.2s ease;
 
-    &:hover {
-      opacity: 1;
+    & .sidebar.left,
+    & .sidebar.right {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 1;
+        }
     }
-  }
 }

quartz/components/styles/search.scss

@@ -32,7 +32,7 @@
         .search-label {
             display: block;
 
-            @media (max-width: 600px) {
+            @media (max-width: 450px) {
                 display: none;
             }
         }