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)
---
quartz/styles/variables.scss | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 52 insertions(+), 5 deletions(-)
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index e45cc91..3ac5a8b 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -1,9 +1,56 @@
-$pageWidth: 750px;
-$mobileBreakpoint: 600px;
-$tabletBreakpoint: 1000px;
-$sidePanelWidth: 380px;
+/**
+ * Layout breakpoints
+ * $mobile: screen width below this value will use mobile styles
+ * $desktop: screen width above this value will use desktop styles
+ * Screen width between $mobile and $desktop width will use the tablet layout.
+ * assuming mobile < desktop
+ */
+$breakpoints: (
+ mobile: 800px,
+ desktop: 1200px,
+);
+
+$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
+$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
+$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
+
+$pageWidth: #{map-get($breakpoints, mobile)};
+$sidePanelWidth: 320px; //380px;
$topSpacing: 6rem;
-$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700;
$semiBoldWeight: 600;
$normalWeight: 400;
+
+$mobileGrid: (
+ templateRows: "auto auto auto auto auto",
+ templateColumns: "auto",
+ rowGap: "5px",
+ columnGap: "5px",
+ templateAreas:
+ '"sidebar-left"\
+ "page-header"\
+ "page-center"\
+ "sidebar-right"\
+ "page-footer"',
+);
+$tabletGrid: (
+ templateRows: "auto auto auto auto",
+ templateColumns: "#{$sidePanelWidth} auto",
+ rowGap: "5px",
+ columnGap: "5px",
+ templateAreas:
+ '"sidebar-left page-header"\
+ "sidebar-left page-center"\
+ "sidebar-left sidebar-right"\
+ "sidebar-left page-footer"',
+);
+$desktopGrid: (
+ templateRows: "auto auto auto",
+ templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
+ rowGap: "5px",
+ columnGap: "5px",
+ templateAreas:
+ '"sidebar-left page-header sidebar-right"\
+ "sidebar-left page-center sidebar-right"\
+ "sidebar-left page-footer sidebar-right"',
+);
--
Gitblit v1.10.0