search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
7.35k stars 2.54k forks source link

Layout size isn't responsive for large screens #1606

Closed blacklightpy closed 1 day ago

blacklightpy commented 2 days ago

On screens with viewport > 1200px, the content will be a 1200px box in the middle, as ceen here (viewport width = 1960px).

Screenshot_20241120-031906_Firefox

This could look bad on 4k screens. Having opinion on the minimum size is good, but then it should scale to other screens too.

I guess desktop: max(1200px, calc(100vw - 1px)), would be a good default.

Here's the site at 3840px (4K) viewport: Screen Shot 2024-11-20 at 03 28 33

Here's the site at 7680px (8K) viewport: Screen Shot 2024-11-20 at 03 31 25

saberzero1 commented 2 days ago

The width is actually desktop breakpoint + 300px by default. (So 1500px)

You can change that by updating or overriding this line:

https://github.com/jackyzha0/quartz/blob/1a4cfa606f085fab115c578d8c97023b0641676d/quartz/styles/base.scss#L124

saberzero1 commented 1 day ago

Also please remember that my site (the one you screenshotted) is not neccesarily representative of the default Quartz settings or layout.

blacklightpy commented 1 day ago

Yes, I only used it because I was using desktop: max(1200px, calc(100vw - 1px)), in my site which didn't give this issue, because it's also directly affecting the variable you mentioned.

In this issue I was more concerned with why the defaults are set to 1200 + 300px rather than 100vw - 1px.

jackyzha0 commented 1 day ago

because large screens do DPI scaling (at least on reasonable browsers), px isnt physical pixels its a scaled unit

1200px prevents columns from being too large