fix css transforms for mobile
This commit is contained in:
parent
66e8afb008
commit
60f95f1ed7
@ -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.
|
||||||
|
@ -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",
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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({
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user