From 59d5a0ed3a6089c1e2a18d846fd8e428696eca92 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Tue, 25 Feb 2025 12:35:24 +0000
Subject: [PATCH] fix(graph): mobile global graph overlay (#1790)
---
quartz/styles/base.scss | 35 +++++++++++++++++++----------------
1 files changed, 19 insertions(+), 16 deletions(-)
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 29ddc5a..4389491 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
@use "./variables.scss" as *;
@use "./syntax.scss";
@use "./callouts.scss";
@@ -121,7 +123,7 @@
}
.page {
- max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
+ max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
@@ -151,24 +153,25 @@
& > #quartz-body {
display: grid;
- grid-template-columns: #{map-get($desktopGrid, templateColumns)};
- grid-template-rows: #{map-get($desktopGrid, templateRows)};
- column-gap: #{map-get($desktopGrid, columnGap)};
- row-gap: #{map-get($desktopGrid, rowGap)};
- grid-template-areas: #{map-get($desktopGrid, templateAreas)};
+ grid-template-columns: #{map.get($desktopGrid, templateColumns)};
+ grid-template-rows: #{map.get($desktopGrid, templateRows)};
+ column-gap: #{map.get($desktopGrid, columnGap)};
+ row-gap: #{map.get($desktopGrid, rowGap)};
+ grid-template-areas: #{map.get($desktopGrid, templateAreas)};
+
@media all and ($tablet) {
- grid-template-columns: #{map-get($tabletGrid, templateColumns)};
- grid-template-rows: #{map-get($tabletGrid, templateRows)};
- column-gap: #{map-get($tabletGrid, columnGap)};
- row-gap: #{map-get($tabletGrid, rowGap)};
- grid-template-areas: #{map-get($tabletGrid, templateAreas)};
+ grid-template-columns: #{map.get($tabletGrid, templateColumns)};
+ grid-template-rows: #{map.get($tabletGrid, templateRows)};
+ column-gap: #{map.get($tabletGrid, columnGap)};
+ row-gap: #{map.get($tabletGrid, rowGap)};
+ grid-template-areas: #{map.get($tabletGrid, templateAreas)};
}
@media all and ($mobile) {
- grid-template-columns: #{map-get($mobileGrid, templateColumns)};
- grid-template-rows: #{map-get($mobileGrid, templateRows)};
- column-gap: #{map-get($mobileGrid, columnGap)};
- row-gap: #{map-get($mobileGrid, rowGap)};
- grid-template-areas: #{map-get($mobileGrid, templateAreas)};
+ grid-template-columns: #{map.get($mobileGrid, templateColumns)};
+ grid-template-rows: #{map.get($mobileGrid, templateRows)};
+ column-gap: #{map.get($mobileGrid, columnGap)};
+ row-gap: #{map.get($mobileGrid, rowGap)};
+ grid-template-areas: #{map.get($mobileGrid, templateAreas)};
}
@media all and not ($desktop) {
--
Gitblit v1.10.0