From ab9da02c60c962128820e6874e6f07c98bc3dda7 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 04 Jul 2023 17:08:32 +0000
Subject: [PATCH] fix indexing causing main thread freeze, various polish
---
quartz/styles/base.scss | 40 ++++++++++++++++++++++++++--------------
1 files changed, 26 insertions(+), 14 deletions(-)
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index db0299b..e741755 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -1,5 +1,6 @@
-@import "./syntax.scss";
-@import "./callouts.scss";
+@use "./syntax.scss";
+@use "./callouts.scss";
+@use "./variables.scss" as *;
html {
scroll-behavior: smooth;
@@ -11,9 +12,6 @@
box-sizing: border-box;
background-color: var(--light);
font-family: var(--bodyFont);
- --pageWidth: 800px;
- --sidePanelWidth: 400px;
- --topSpacing: 6rem;
}
.text-highlight {
@@ -47,8 +45,8 @@
.page {
& > .page-header {
- max-width: var(--pageWidth);
- margin: var(--topSpacing) auto 0 auto;
+ max-width: $pageWidth;
+ margin: $topSpacing auto 0 auto;
}
& > #quartz-body {
@@ -57,7 +55,7 @@
& .left, & .right {
flex: 1;
- width: calc(calc(100vw - var(--pageWidth)) / 2);
+ width: calc(calc(100vw - $pageWidth) / 2);
}
& .left-inner, & .right-inner {
@@ -65,30 +63,44 @@
flex-direction: column;
gap: 2rem;
top: 0;
- width: var(--sidePanelWidth);
- margin-top: calc(var(--topSpacing));
+ width: $sidePanelWidth;
+ margin-top: $topSpacing;
box-sizing: border-box;
padding: 0 4rem;
position: fixed;
}
& .left-inner {
- left: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
+ left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
}
& .right-inner {
- right: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
+ right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
}
& .center {
- width: var(--pageWidth);
+ width: $pageWidth;
margin: 0 auto;
}
}
}
+.desktop-only {
+ display: initial;
+ @media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
+ display: none;
+ }
+}
+
+.mobile-only {
+ display: none;
+ @media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
+ display: initial;
+ }
+}
+
.page {
- @media all and (max-width: 1200px) {
+ @media all and (max-width: $tabletBreakpoint) {
margin: 25px 5vw;
& .left, & .right {
padding: 0;
--
Gitblit v1.10.0