fix css transforms for mobile

This commit is contained in:
Jacky Zhao 2023-08-06 22:07:08 -07:00
parent 66e8afb008
commit 60f95f1ed7
6 changed files with 10 additions and 14 deletions

View File

@ -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`. You can see the base style sheet in `quartz/styles/base.scss` and write your own in `quartz/styles/custom.scss`.
> [!note] > [!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. When you're ready, see how [[build|build and preview]] Quartz locally.

View File

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

View File

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

View File

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

View File

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

View File

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