tweaks: #155 more readable line spacing

CHANGELOG.md

@@ -59,6 +59,7 @@ a flexibility update.
   - new: in-page columns are disabled/wrapped and pages are wider when
     the window is narrower than 600px for improved responsiveness.
   - new: thicker bold text for better visibility.
+  - new: more readable line spacing.
   - moved: smooth scrollbars.
   - moved: change dragarea height.
   - moved: hide help.
@@ -67,8 +68,6 @@ a fork of notion-deb-builder that does generate an app.asar has been created and
 
 // todo
 
-- new: more readable line spacing.
-
 MACOS SPECIFIC FIXES
 
 - close to tray: perma-true

mods/core/css/theme.css

@@ -199,7 +199,7 @@
 
 /** text-block readability **/
 
-.notion-selectable.notion-text-block {
+.notion-page-content .notion-selectable.notion-text-block {
   line-height: var(--theme--text-block_line-height) !important;
   margin-top: var(--theme--text-block_margin-top) !important;
 }

mods/core/enhancerMenu.js

@@ -139,7 +139,7 @@ window['__start'] = async () => {
       !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
     if (
       meta &&
-      document.activeElement.parentElement.id === 'tags' &&
+      document.activeElement.getAttribute('tabindex') === '0' &&
       event.key === 'Enter'
     )
       document.activeElement.click();
@@ -228,7 +228,7 @@ window['__start'] = async () => {
               .map((mod) => `<b>${mod.name}</b>`)
               .join(
                 ', '
-              )}. <br> resolve or <span data-action="dismiss">dismiss</span> to continue.`
+              )}. <br> resolve or <span data-action="dismiss" tabindex="0">dismiss</span> to continue.`
           );
           alert.el
             .querySelector('[data-action="dismiss"]')
@@ -248,7 +248,7 @@ window['__start'] = async () => {
     if (conflicts.relaunch) return;
     conflicts.relaunch = createAlert(
       'info',
-      'changes may not fully apply until <span data-action="relaunch">app relaunch</span>.'
+      'changes may not fully apply until <span data-action="relaunch" tabindex="0">app relaunch</span>.'
     );
     conflicts.relaunch.el
       .querySelector('[data-action="relaunch"]')

mods/core/mod.js

@@ -42,7 +42,7 @@ module.exports = {
     {
       key: 'close_to_tray',
       label: 'close window to the tray',
-      description: `pressing the × close button will hide the app instead of quitting it.
+      description: `pressing the × close button will hide the app instead of quitting it.\
         it can be re-shown by clicking the tray icon or using the hotkey.`,
       type: 'toggle',
       value: true,
@@ -80,9 +80,9 @@ module.exports = {
     {
       key: 'default_page',
       label: 'default page id/url:',
-      description: `every new tab/window that isn't opening a url via the notion://
-        protocol will load this page. to get a page link from within the app,
-        go to the triple-dot menu and click "copy link".
+      description: `every new tab/window that isn't opening a url via the notion://\
+        protocol will load this page. to get a page link from within the app,\
+        go to the triple-dot menu and click "copy link".\
         leave blank to just load the last page you opened.`,
       type: 'input',
       value: '',

mods/tweaks/mod.js

@@ -18,7 +18,7 @@ module.exports = {
     {
       key: 'dragarea_height',
       label: 'height of frameless dragarea:',
-      description: `the rectangle added at the top of a window in "integrated titlebar" mode,
+      description: `the rectangle added at the top of a window in "integrated titlebar" mode,\
         used to drag/move the window.`,
       type: 'input',
       value: 15,
@@ -26,7 +26,7 @@ module.exports = {
     {
       key: 'responsive_breakpoint',
       label: 'width to wrap columns at:',
-      description: `the size in pixels below which in-page columns are resized to appear
+      description: `the size in pixels below which in-page columns are resized to appear\
         full width so content isn't squished.`,
       type: 'input',
       value: 600,
@@ -49,6 +49,12 @@ module.exports = {
       key: 'thicker_bold',
       label: 'thicker bold text',
       type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'spaced_lines',
+      label: 'more readable line spacing',
+      type: 'toggle',
       value: false,
     },
     {
@@ -65,8 +71,9 @@ module.exports = {
         document.body.dataset.tweaks = [
           'smooth_scrollbars',
           'snappy_transitions',
-          'hide_help',
           'thicker_bold',
+          'spaced_lines',
+          'hide_help',
         ]
           .filter((tweak) => store()[tweak])
           .map((tweak) => `[${tweak}]`)

mods/tweaks/styles.css

@@ -36,3 +36,10 @@
   span[style*='font-weight:600'] {
   font-weight: 700 !important;
 }
+
+[data-tweaks*='[spaced_lines]'] {
+  --theme_dark--text-block_line-height: 1.65;
+  --theme_dark--text-block_margin-top: 0.75em;
+  --theme_light--text-block_line-height: 1.65;
+  --theme_light--text-block_margin-top: 0.75em;
+}