From cd9dc6ecb570c08291e73d9db001e6068df4d88a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 07 Aug 2023 05:07:08 +0000
Subject: [PATCH] fix css transforms for mobile
---
quartz/plugins/emitters/componentResources.ts | 3 ++-
quartz/styles/base.scss | 8 +++++---
content/configuration.md | 2 +-
quartz/components/styles/search.scss | 1 +
quartz/components/styles/graph.scss | 1 +
quartz/bootstrap-cli.mjs | 9 ---------
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 @@
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 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 @@
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 { 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 @@
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 @@
scroll-behavior: smooth;
-webkit-text-size-adjust: none;
text-size-adjust: none;
+ overflow-x: none;
+ width: 100vw;
}
body {
@@ -83,7 +85,7 @@
@media all and (max-width: $fullPageWidth) {
margin: 0 auto;
padding: 0 1rem;
- // max-width: 800px;
+ max-width: $pageWidth;
}
& article {
@@ -164,9 +166,9 @@
& .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 @@
ul.overflow,
ol.overflow {
- height: 400px;
+ height: 300px;
overflow-y: scroll;
// clearfix
--
Gitblit v1.10.0