fix css transforms for mobile

Jacky Zhao

2023-08-07 cd9dc6ecb570c08291e73d9db001e6068df4d88a

fix css transforms for mobile

 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.

 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",

 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 { 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({

 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