fix css transforms for mobile

content/configuration.md

@@ -119,6 +119,6 @@ However, if you'd like to make more involved style changes, you can do this by w
 You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
 
 > [!note]
-> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports its styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.
+> Some components may provide their own styling as well! For example, `quartz/components/Darkmode.tsx` imports styles from `quartz/components/styles/darkmode.scss`. If you'd like to customize styling for a specific component, double check the component definition to see how its styles are defined.
 
 When you're ready, see how [[build|build and preview]] Quartz locally.

quartz/bootstrap-cli.mjs

@@ -12,7 +12,6 @@ import { rimraf } from "rimraf"
 import chokidar from "chokidar"
 import prettyBytes from "pretty-bytes"
 import { execSync, spawnSync } from "child_process"
-import { transform as cssTransform } from "lightningcss"
 import http from "http"
 import serveHandler from "serve-handler"
 import { WebSocketServer } from "ws"
@@ -312,14 +311,6 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
         sassPlugin({
           type: "css-text",
           cssImports: true,
-          async transform(css) {
-            const { code } = cssTransform({
-              filename: "style.css",
-              code: Buffer.from(css),
-              minify: true,
-            })
-            return code.toString()
-          },
         }),
         {
           name: "inline-script-loader",

quartz/components/styles/graph.scss

@@ -43,6 +43,7 @@
     width: 100vw;
     height: 100%;
     backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
     display: none;
     overflow: hidden;
 

quartz/components/styles/search.scss

@@ -48,6 +48,7 @@
     overflow-y: auto;
     display: none;
     backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
 
     &.active {
       display: inline-block;

quartz/plugins/emitters/componentResources.ts

@@ -13,7 +13,7 @@ import { BuildCtx } from "../../ctx"
 import { StaticResources } from "../../resources"
 import { QuartzComponent } from "../../components/types"
 import { googleFontHref, joinStyles } from "../../theme"
-import { transform } from "lightningcss"
+import { Features, transform } from "lightningcss"
 
 type ComponentResources = {
   css: string[]
@@ -161,6 +161,7 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
             filename: "index.css",
             code: Buffer.from(stylesheet),
             minify: true,
+            include: Features.MediaQueries
           }).code.toString(),
         }),
         emit({

quartz/styles/base.scss

@@ -7,6 +7,8 @@ html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  overflow-x: none;
+  width: 100vw;
 }
 
 body {
@@ -83,7 +85,7 @@ a {
   @media all and (max-width: $fullPageWidth) {
     margin: 0 auto;
     padding: 0 1rem;
-    // max-width: 800px;
+    max-width: $pageWidth;
   }
 
   & article {
@@ -164,9 +166,9 @@ a {
 
   & .center,
   & footer {
-    width: $pageWidth;
     margin-left: auto;
     margin-right: auto;
+    width: $pageWidth;
     @media all and (max-width: $fullPageWidth) {
       width: initial;
       margin-left: 0;
@@ -431,7 +433,7 @@ video {
 
 ul.overflow,
 ol.overflow {
-  height: 400px;
+  height: 300px;
   overflow-y: scroll;
 
   // clearfix