GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
saberzero1 2024-08-17 12:30:09 +02:00
parent 75c249f071
commit d79afef3d5
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/layout.md
View File

@ -13,8 +13,8 @@ export interface FullPageLayout {
beforeBody: QuartzComponent[] // laid out vertically beforeBody: QuartzComponent[] // laid out vertically
pageBody: QuartzComponent // single component pageBody: QuartzComponent // single component
afterBody: QuartzComponent[] // laid out vertically afterBody: QuartzComponent[] // laid out vertically
left: QuartzComponent[] // vertical on desktop, horizontal on mobile left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
right: QuartzComponent[] // vertical on desktop, horizontal on mobile right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
footer: QuartzComponent // single component footer: QuartzComponent // single component
} }
``` ```
@ -33,6 +33,23 @@ Quartz **components**, like plugins, can take in additional properties as config
See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz. See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
### Layout breakpoints
Quartz has different layouts depending on the width the screen viewing the website.
The breakpoints for layouts can be configured in `variables.scss`.
- `mobile`: screen width below this size will use mobile layout.
- `desktop`: screen width above this size will use desktop layout.
- Screen width between `mobile` and `desktop` width will use the tablet layout.
```scss
$breakpoints: (
mobile: 750px,
desktop: 1500px,
);
```
### Style ### Style
Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling. Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.

11
quartz/styles/variables.scss
View File

@ -1,21 +1,20 @@
/** /**
* Layout breakpoints * Layout breakpoints
* $mobile: screen width below this value will use mobile styles * $mobile: screen width below this value will use mobile styles
* $tablet: screen width below this value will use tablet styles * $desktop: screen width above this value will use desktop styles
* $desktop: screen width below this value will use desktop styles * Screen width between $mobile and $desktop width will use the tablet layout.
* assuming mobile < tablet < desktop * assuming mobile < desktop
*/ */
$breakpoints: ( $breakpoints: (
mobile: 750px, mobile: 750px,
tablet: 1000px,
desktop: 1500px, desktop: 1500px,
); );
$mobile: "(max-width: #{map-get($breakpoints, mobile)})"; $mobile: "(max-width: #{map-get($breakpoints, mobile)})";
$tablet: "(max-width: #{map-get($breakpoints, tablet)})"; $tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
$desktop: "(max-width: #{map-get($breakpoints, desktop)})"; $desktop: "(max-width: #{map-get($breakpoints, desktop)})";
$pageWidth: 750px; $pageWidth: #{map-get($breakpoints, mobile)};
$sidePanelWidth: 380px; $sidePanelWidth: 380px;
$topSpacing: 6rem; $topSpacing: 6rem;
$boldWeight: 700; $boldWeight: 700;