From dfcac064e8c31382f3fda97a36076c3a798d33db Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Thu, 17 Sep 2020 13:44:16 +1000
Subject: [PATCH] page width variables - #81

---
 CHANGELOG.md                |  1 +
 mods/alwaysontop/mod.js     |  4 ++--
 mods/core/css/theme.css     | 19 +++++++++++++++++++
 mods/core/css/variables.css |  8 ++++++++
 mods/neutral/styles.css     |  6 +-----
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd05342..b5e7f50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ a feature and cleanup update.
 - improved: added variables for callout colouring.
 - improved: replaced with `helpers.getNotion()` with the constant `helpers.__notion` to reduce
   repeated function calls.
+- improved: added variables for page width.
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
diff --git a/mods/alwaysontop/mod.js b/mods/alwaysontop/mod.js
index 6972b63..69c5e3f 100644
--- a/mods/alwaysontop/mod.js
+++ b/mods/alwaysontop/mod.js
@@ -6,8 +6,8 @@
 
 'use strict';
 
-// this is actually just a pseudo mod to "separate" the button
-// from the core module, but the core still handles actually
+// this is just a pseudo mod to "separate" the button
+// from the core module - the core still handles actually
 // making it work.
 module.exports = {
   id: '72886371-dada-49a7-9afc-9f275ecf29d3',
diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
index 7b8976e..0b81eeb 100644
--- a/mods/core/css/theme.css
+++ b/mods/core/css/theme.css
@@ -27,6 +27,25 @@
   background: var(--theme--overlay) !important;
 }
 
+.notion-frame
+  .notion-scroller
+  [style*='env(safe-area-inset-'][style*=' width: 900px'],
+.notion-frame
+  .notion-scroller
+  [style*='height: 30vh']
+  [style*='pointer-events:'][style*='max-width: 100%; width: 900px'] {
+  width: var(--theme--page_normal-width) !important;
+}
+.notion-frame
+  .notion-scroller
+  [style*='env(safe-area-inset-'][style*=' width: 100%'],
+.notion-frame
+  .notion-scroller
+  [style*='height: 30vh']
+  [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] {
+  width: var(--theme--page_full-width) !important;
+}
+
 .notion-peek-renderer
   .notion-scroller.vertical
   [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css
index 1fe78f9..9f515e5 100644
--- a/mods/core/css/variables.css
+++ b/mods/core/css/variables.css
@@ -14,6 +14,8 @@
   --theme_dark--sidebar: rgb(55, 60, 63);
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #272d2f;
+  --theme_dark--page_normal-width: 900px;
+  --theme_dark--page_full-width: 100%;
   --theme_dark--preview-width: 977px;
   --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
@@ -186,6 +188,8 @@
   --theme_light--sidebar: rgb(247, 246, 243);
   --theme_light--overlay: rgba(15, 15, 15, 0.6);
   --theme_light--dragarea: rgba(55, 53, 47, 0.04);
+  --theme_light--page_normal-width: 900px;
+  --theme_light--page_full-width: 100%;
   --theme_light--preview-width: 977px;
   --theme_light--preview-padding: 8rem;
   --theme_light--preview_banner-height: 20vh;
@@ -358,6 +362,8 @@
   --theme--sidebar: var(--theme_dark--sidebar);
   --theme--overlay: var(--theme_dark--overlay);
   --theme--dragarea: var(--theme_dark--dragarea);
+  --theme--page_normal-width: var(--theme_dark--page_normal-width);
+  --theme--page_full-width: var(--theme_dark--page_full-width);
   --theme--preview-width: var(--theme_dark--preview-width);
   --theme--preview-padding: var(--theme_dark--preview-padding);
   --theme--preview_banner-height: var(--theme_dark--preview_banner-height);
@@ -515,6 +521,8 @@
   --theme--sidebar: var(--theme_light--sidebar);
   --theme--overlay: var(--theme_light--overlay);
   --theme--dragarea: var(--theme_light--dragarea);
+  --theme--page_normal-width: var(--theme_dark--page_normal-width);
+  --theme--page_full-width: var(--theme_dark--page_full-width);
   --theme--preview-width: var(--theme_light--preview-width);
   --theme--preview-padding: var(--theme_light--preview-padding);
   --theme--preview_banner-height: var(--theme_light--preview_banner-height);
diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css
index ac59b4a..1627c2c 100644
--- a/mods/neutral/styles.css
+++ b/mods/neutral/styles.css
@@ -12,6 +12,7 @@
   --theme_dark--sidebar: #171717;
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #111111;
+  --theme_dark--page_normal-width: 100%;
 
   --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
     'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
@@ -143,11 +144,6 @@
   padding-top: 5px !important;
 } */
 
-/* increase page width */
-.notion-dark-theme .notion-frame .notion-scroller [style*='width: 900px;'] {
-  width: 1000px !important;
-}
-
 /* add space at the bottom of the main frame when sidebar is hidden
  * -- matches space at top for titlebar */
 .notion-dark-theme .notion-frame {