From 7d7e3349763b0c1ade94b8a6d13986e171861bc1 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 23 Sep 2024 20:40:12 +0000
Subject: [PATCH] feat: responsive design grid (#1354)

---
 docs/layout.md |   27 ++++++++++++++++++++++++---
 1 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/docs/layout.md b/docs/layout.md
index 686b2f2..d8427c4 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -13,15 +13,19 @@
   beforeBody: QuartzComponent[] // laid out vertically
   pageBody: QuartzComponent // single component
   afterBody: QuartzComponent[] // laid out vertically
-  left: QuartzComponent[] // vertical on desktop, horizontal on mobile
-  right: QuartzComponent[] // vertical on desktop, horizontal on mobile
+  left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
+  right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
   footer: QuartzComponent // single component
 }
 ```
 
 These correspond to following parts of the page:
 
-![[quartz layout.png|800]]
+| Layout                          | Preview                             |
+| ------------------------------- | ----------------------------------- |
+| Desktop (width > 1200px)        | ![[quartz-layout-desktop.png\|800]] |
+| Tablet (800px < width < 1200px) | ![[quartz-layout-tablet.png\|800]]  |
+| Mobile (width < 800px)          | ![[quartz-layout-mobile.png\|800]]  |
 
 > [!note]
 > There are two additional layout fields that are _not_ shown in the above diagram.
@@ -33,6 +37,23 @@
 
 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: 800px,
+  desktop: 1200px,
+);
+```
+
 ### 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.

--
Gitblit v1.10.0