From 91189dfd2f4cb32e205117b327e0ae7a0c2dd716 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 03 Feb 2025 14:25:42 +0000
Subject: [PATCH] feat(explorer): collapsible mobile explorer (#1471)
---
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