From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit
---
quartz/styles/variables.scss | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 54 insertions(+), 5 deletions(-)
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index e45cc91..f61adfc 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -1,9 +1,58 @@
-$pageWidth: 750px;
-$mobileBreakpoint: 600px;
-$tabletBreakpoint: 1000px;
-$sidePanelWidth: 380px;
+@use "sass:map";
+
+/**
+ * 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: "(min-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:
+ '"grid-sidebar-left"\
+ "grid-header"\
+ "grid-center"\
+ "grid-sidebar-right"\
+ "grid-footer"',
+);
+$tabletGrid: (
+ templateRows: "auto auto auto auto",
+ templateColumns: "#{$sidePanelWidth} auto",
+ rowGap: "5px",
+ columnGap: "5px",
+ templateAreas:
+ '"grid-sidebar-left grid-header"\
+ "grid-sidebar-left grid-center"\
+ "grid-sidebar-left grid-sidebar-right"\
+ "grid-sidebar-left grid-footer"',
+);
+$desktopGrid: (
+ templateRows: "auto auto auto",
+ templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
+ rowGap: "5px",
+ columnGap: "5px",
+ templateAreas:
+ '"grid-sidebar-left grid-header grid-sidebar-right"\
+ "grid-sidebar-left grid-center grid-sidebar-right"\
+ "grid-sidebar-left grid-footer grid-sidebar-right"',
+);
--
Gitblit v1.10.0