run prettier

quartz/styles/base.scss

@@ -21,7 +21,17 @@ body {
   border-radius: 5px;
 }
 
-p, ul, text, a, tr, td, li, ol, ul, .katex, .math {
+p,
+ul,
+text,
+a,
+tr,
+td,
+li,
+ol,
+ul,
+.katex,
+.math {
   color: var(--darkgray);
   fill: var(--darkgray);
 }
@@ -79,7 +89,7 @@ a {
       font-size: 2rem;
     }
 
-    & li:has(> input[type='checkbox']) {
+    & li:has(> input[type="checkbox"]) {
       list-style-type: none;
       padding-left: 0;
       margin-left: -1.4rem;
@@ -144,7 +154,8 @@ a {
     }
   }
 
-  & .center, & footer {
+  & .center,
+  & footer {
     width: $pageWidth;
     margin-left: auto;
     margin-right: auto;
@@ -195,9 +206,12 @@ thead {
   }
 }
 
-
-
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   &[id] > a[href^="#"] {
     margin: 0 0.5rem;
     opacity: 0;
@@ -277,11 +291,11 @@ pre {
       }
     }
 
-    &[data-line-numbers-max-digits='2'] > [data-line]::before {
+    &[data-line-numbers-max-digits="2"] > [data-line]::before {
       width: 2rem;
     }
-     
-    &[data-line-numbers-max-digits='3'] > [data-line]::before {
+
+    &[data-line-numbers-max-digits="3"] > [data-line]::before {
       width: 3rem;
     }
   }
@@ -296,7 +310,9 @@ code {
   background: var(--lightgray);
 }
 
-tbody, li, p {
+tbody,
+li,
+p {
   line-height: 1.5rem;
 }
 
@@ -307,7 +323,8 @@ table {
   border-collapse: collapse;
 }
 
-td, th {
+td,
+th {
   padding: 0.2rem 1rem;
   border: 1px solid var(--gray);
 }
@@ -331,7 +348,8 @@ hr {
   background-color: var(--lightgray);
 }
 
-audio, video {
+audio,
+video {
   width: 100%;
   border-radius: 5px;
 }
@@ -340,7 +358,8 @@ audio, video {
   flex: 1 1 auto;
 }
 
-ul.overflow, ol.overflow {
+ul.overflow,
+ol.overflow {
   height: 400px;
   overflow-y: scroll;
 
@@ -354,9 +373,9 @@ ul.overflow, ol.overflow {
 
   &:after {
     pointer-events: none;
-    content: '';
+    content: "";
     width: 100%;
-    height: 50px;    
+    height: 50px;
     position: absolute;
     left: 0;
     bottom: 0;

quartz/styles/callouts.scss

@@ -1,104 +1,104 @@
 @use "sass:color";
 
 .callout {
-	border: 1px solid var(--border);
-	background-color: var(--bg);
-	border-radius: 5px;
-	padding: 0 1rem;
-	overflow-y: hidden;
+  border: 1px solid var(--border);
+  background-color: var(--bg);
+  border-radius: 5px;
+  padding: 0 1rem;
+  overflow-y: hidden;
   transition: max-height 0.3s ease;
 
   & > *:nth-child(2) {
     margin-top: 0;
   }
 
-	&[data-callout="note"] {
-	  --color: #448aff;
-	  --border: #448aff22;
-	  --bg: #448aff09;
-	}
+  &[data-callout="note"] {
+    --color: #448aff;
+    --border: #448aff22;
+    --bg: #448aff09;
+  }
 
-	&[data-callout="abstract"] {
-	  --color: #00b0ff;
-	  --border: #00b0ff22;
-	  --bg: #00b0ff09;
-	}
+  &[data-callout="abstract"] {
+    --color: #00b0ff;
+    --border: #00b0ff22;
+    --bg: #00b0ff09;
+  }
 
-	&[data-callout="info"], &[data-callout="todo"] {
-	  --color: #00b8d4;
-	  --border: #00b8d422;
-	  --bg: #00b8d409;
-	}
+  &[data-callout="info"],
+  &[data-callout="todo"] {
+    --color: #00b8d4;
+    --border: #00b8d422;
+    --bg: #00b8d409;
+  }
 
-	&[data-callout="tip"] {
-	  --color: #00bfa5;
-	  --border: #00bfa522;
-	  --bg: #00bfa509;
-	}
+  &[data-callout="tip"] {
+    --color: #00bfa5;
+    --border: #00bfa522;
+    --bg: #00bfa509;
+  }
 
-	&[data-callout="success"] {
-	  --color: #09ad7a;
-	  --border: #09ad7122;
-	  --bg: #09ad7109;
-	}
+  &[data-callout="success"] {
+    --color: #09ad7a;
+    --border: #09ad7122;
+    --bg: #09ad7109;
+  }
 
-	&[data-callout="question"] {
-	  --color: #dba642;
-	  --border: #dba64222;
-	  --bg: #dba64209;
-	}
+  &[data-callout="question"] {
+    --color: #dba642;
+    --border: #dba64222;
+    --bg: #dba64209;
+  }
 
-	&[data-callout="warning"] {
-	  --color: #db8942;
-	  --border: #db894222;
-	  --bg: #db894209;
-	}
+  &[data-callout="warning"] {
+    --color: #db8942;
+    --border: #db894222;
+    --bg: #db894209;
+  }
 
-	&[data-callout="failure"], &[data-callout="danger"], &[data-callout="bug"] {
-	  --color: #db4242;
-	  --border: #db424222;
-	  --bg: #db424209;
-	}
+  &[data-callout="failure"],
+  &[data-callout="danger"],
+  &[data-callout="bug"] {
+    --color: #db4242;
+    --border: #db424222;
+    --bg: #db424209;
+  }
 
-	&[data-callout="example"] {
-	  --color: #7a43b5;
-	  --border: #7a43b522;
-	  --bg: #7a43b509;
-	}
+  &[data-callout="example"] {
+    --color: #7a43b5;
+    --border: #7a43b522;
+    --bg: #7a43b509;
+  }
+
+  &[data-callout="quote"] {
+    --color: var(--secondary);
+    --border: var(--lightgray);
+  }
 
-	&[data-callout="quote"] {
-	  --color: var(--secondary);
-	  --border: var(--lightgray);
-	}
-  
   &.is-collapsed > .callout-title > .fold {
-    transform: rotateZ(-90deg)
+    transform: rotateZ(-90deg);
   }
 }
 
-
 .callout-title {
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	padding: 1rem 0;
-	color: var(--color);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1rem 0;
+  color: var(--color);
 
-	& .fold {
-    margin-left: 0.5rem; 
+  & .fold {
+    margin-left: 0.5rem;
     transition: transform 0.3s ease;
     opacity: 0.8;
     cursor: pointer;
   }
-
 }
 
 .callout-icon {
-	width: 18px;
-	height: 18px;
+  width: 18px;
+  height: 18px;
 }
 
 .callout-title-inner {
-	font-weight: 700;
+  font-weight: 700;
 }
-

quartz/styles/variables.scss

@@ -3,4 +3,4 @@ $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1200px;
 $sidePanelWidth: 400px;
 $topSpacing: 6rem;
-$fullPageWidth: $pageWidth + 2 * $sidePanelWidth
+$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;