From cd9dc6ecb570c08291e73d9db001e6068df4d88a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 6 Aug 2023 22:07:08 -0700
Subject: [PATCH] fix css transforms for mobile

---
 content/configuration.md                      | 2 +-
 quartz/bootstrap-cli.mjs                      | 9 ---------
 quartz/components/styles/graph.scss           | 1 +
 quartz/components/styles/search.scss          | 1 +
 quartz/plugins/emitters/componentResources.ts | 3 ++-
 quartz/styles/base.scss                       | 8 +++++---
 6 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/content/configuration.md b/content/configuration.md
index 5487852..aa26213 100644
--- a/content/configuration.md
+++ b/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.
diff --git a/quartz/bootstrap-cli.mjs b/quartz/bootstrap-cli.mjs
index 8b9bea9..71d6957 100755
--- a/quartz/bootstrap-cli.mjs
+++ b/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",
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
index 3deaa1f..6e8c503 100644
--- a/quartz/components/styles/graph.scss
+++ b/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;
 
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 4d5ad95..6fada54 100644
--- a/quartz/components/styles/search.scss
+++ b/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;
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 69c9dd5..5dc7274 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/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({
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 2c54527..e219cc5 100644
--- a/quartz/styles/base.scss
+++ b/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