fix css transforms for mobile
This commit is contained in:
parent
60e1e4d525
commit
b34d1bc18f
@ -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.
|
||||
|
@ -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",
|
||||
|
@ -43,6 +43,7 @@
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
|
||||
|
@ -48,6 +48,7 @@
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
|
||||
&.active {
|
||||
display: inline-block;
|
||||
|
@ -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({
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user