From 5ccc2dcbba3bfeca2d9edc39209d43d217eb2a80 Mon Sep 17 00:00:00 2001
From: Sohum <31165513+ssmendon@users.noreply.github.com>
Date: Tue, 03 Dec 2024 09:52:51 +0000
Subject: [PATCH] fix(head): update open-graph width and height protocol per ogp (#1512)
---
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..4a5cea5 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: "(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