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`.
> [!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.

View File

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

View File

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

View File

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

View File

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

View File

@ -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