page width variables - #81

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.

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',

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;'],

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);

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 {