style(tweaks): update typography + page tweaks, add compact code blocks

scripts/generate-theme-css.mjs

@@ -885,6 +885,7 @@ styleTooltips();
 styleAccents();
 styleScrollbars();
 styleCode();
+cssBody += `.notion-emoji{display:inline-block!important}`;
 
 console.log(
   `body${modeSelector} { ${cssRoot} } ${Object.entries(cssRefs)

src/extensions/truncated-titles/client.mjs

@@ -1,66 +0,0 @@
-/**
- * notion-enhancer: truncated titles
- * (c) 2021 admiraldus (https://github.com/admiraldus)
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-export default async function ({ web, components }, db) {
-  const enhanceTableTitles = await db.get(['tables']),
-    enhanceTimelineItems = await db.get(['timelines']),
-    tableCellSelector = '.notion-table-view-header-cell',
-    tableTitleSelector = `${tableCellSelector} div[style*="text-overflow"]`,
-    timelineItemSelector = '.notion-timeline-item',
-    $elements = [];
-
-  const addTooltips = () => {
-    if (enhanceTableTitles) {
-      document.querySelectorAll(tableTitleSelector).forEach(($tableTitle) => {
-        if ($elements.includes($tableTitle)) return;
-
-        if ($tableTitle.scrollWidth > $tableTitle.clientWidth) {
-          components.addTooltip(
-            $tableTitle.parentElement.parentElement.parentElement,
-            web.html`<span><b>${web.escape($tableTitle.innerText)}</b></span>`,
-            750
-          );
-          $elements.push($tableTitle);
-        }
-      });
-    }
-
-    if (enhanceTimelineItems) {
-      document.querySelectorAll(timelineItemSelector).forEach(($timelineItem) => {
-        const $title = $timelineItem.nextElementSibling.firstElementChild;
-        $title.style.position = 'absolute';
-        $title.style.left = $timelineItem.style.left;
-
-        if ($elements.includes($timelineItem)) return;
-        $elements.push($timelineItem);
-
-        $title.style.width = $timelineItem.clientWidth + 'px';
-        $title.firstElementChild.firstElementChild.style.maxWidth =
-          $timelineItem.clientWidth + 'px';
-        $timelineItem.addEventListener('mouseover', (event) => {
-          $title.style.width = '100%';
-          $title.firstElementChild.firstElementChild.style.maxWidth = '400px';
-        });
-        $timelineItem.addEventListener('mouseout', async (event) => {
-          if (!$timelineItem.matches(':hover')) {
-            $title.style.width = $timelineItem.clientWidth + 'px';
-            $title.firstElementChild.firstElementChild.style.maxWidth =
-              $timelineItem.clientWidth + 'px';
-          }
-        });
-      });
-    }
-  };
-
-  await web.whenReady();
-  addTooltips();
-  web.addDocumentObserver(addTooltips, [
-    tableCellSelector,
-    timelineItemSelector,
-    `${timelineItemSelector} + div > :first-child`,
-  ]);
-}

src/extensions/truncated-titles/mod.json

@@ -1,33 +0,0 @@
-{
-  "name": "truncated titles",
-  "id": "1794c0bd-7b96-46ad-aa0b-fc4bd76fc7fb",
-  "version": "0.2.0",
-  "description": "see the full text of a truncated title on hover.",
-  "preview": "truncated-titles.jpg",
-  "tags": ["extension", "layout"],
-  "authors": [
-    {
-      "name": "admiraldus",
-      "homepage": "https://github.com/admiraldus",
-      "avatar": "https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif"
-    }
-  ],
-  "js": {
-    "client": ["client.mjs"]
-  },
-  "css": {},
-  "options": [
-    {
-      "type": "toggle",
-      "key": "tables",
-      "label": "table titles",
-      "value": true
-    },
-    {
-      "type": "toggle",
-      "key": "timelines",
-      "label": "timeline items",
-      "value": true
-    }
-  ]
-}

src/extensions/tweaks/client.css

@@ -27,8 +27,7 @@ body[data-tweaks*=",hidePlaceholders,"] [contenteditable]:empty:after {
 }
 
 body[data-tweaks*=",hideDefaultIcons,"]
-  div
-  :has(> .notion-record-icon svg.page) {
+  :is(.notion-record-icon, [style*="width: 24px;"]):has(svg.page) {
   display: none !important;
 }
 
@@ -39,6 +38,11 @@ body[data-tweaks*=",snappyTransitions,"] * {
 
 /* pages */
 
+body[data-tweaks*=",fullWidthPages,"]
+  .layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
+  --content-width: 100% !important;
+}
+
 body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   .notion-collection_view-block {
     width: 100% !important;
@@ -55,8 +59,6 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   }
 }
 
-/* typography */
-
 .enhancer--tweak-responsive_breakpoint
   .notion-column_list-block
   [style="display: flex;"]
@@ -74,99 +76,97 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
-.enhancer--tweak-hide_default_page_icons
-  .notion-sidebar
-  a
-  > div
-  > div:has(.notion-record-icon svg.page),
-.enhancer--tweak-hide_default_page_icons
-  .layout
-  a
-  > div
-  > div
-  > div
-  > div:has(.notion-record-icon svg.page) {
-  display: none !important;
+body[data-tweaks*=",hidePageDiscussions,"]
+  .layout-content:has(.notion-page-view-discussion) {
+  display: none;
 }
 
-.enhancer--tweak-thicker_bold
-  .notion-page-content
-  span[style*="font-weight:600"] {
-  font-weight: 700 !important;
-}
+/* typography */
 
-.enhancer--tweak-spaced_lines
+body[data-tweaks*=",increasedLineSpacing,"]
   .notion-page-content
   .notion-selectable.notion-text-block {
   line-height: 1.65 !important;
   margin-top: 0.75em !important;
 }
 
-.enhancer--tweak-condensed_bullets
-  .notion-selectable.notion-bulleted_list-block {
+body[data-tweaks*=",condensedLists,"]
+  :is(.notion-numbered_list-block, .notion-bulleted_list-block) {
   margin-top: -1.5px !important;
   margin-bottom: -1.5px !important;
 }
 
-.enhancer--tweak-bracketed_links .notion-link-token span {
-  border-bottom: none !important;
-}
-.enhancer--tweak-bracketed_links .notion-link-token:before {
-  content: "[[";
-  opacity: 0.7;
-  transition: opacity 100ms ease-in;
-}
-.enhancer--tweak-bracketed_links .notion-link-token:after {
-  content: "]]";
-  opacity: 0.7;
-  transition: opacity 100ms ease-in;
-}
-.enhancer--tweak-bracketed_links .notion-link-token:hover::before,
-.enhancer--tweak-bracketed_links .notion-link-token:hover::after {
-  opacity: 1;
+body[data-tweaks*=",thickerBoldText,"]
+  .notion-page-content
+  span[style*="font-weight:600"] {
+  font-weight: 700 !important;
 }
 
-.enhancer--tweak-accented_links .notion-link-token {
-  color: var(--theme--accent_blue) !important;
+body[data-tweaks*=",bracketedLinks,"] {
+  .notion-link-token {
+    span {
+      border-bottom: none !important;
+    }
+    &::before {
+      content: "[[";
+      opacity: 0.7;
+      transition: opacity 100ms ease-in;
+    }
+    &::after {
+      content: "]]";
+      opacity: 0.7;
+      transition: opacity 100ms ease-in;
+    }
+    &:hover::before,
+    &:hover::after {
+      opacity: 1;
+    }
+  }
 }
-.enhancer--tweak-accented_links
-  .notion-link-token
+
+body[data-tweaks*=",accentedLinks,"] .notion-link-token {
+  color: var(--theme--accent-primary) !important;
   span[style*="border-bottom:0.05em"] {
-  opacity: 1 !important;
-  border-color: var(--theme--accent_blue) !important;
+    opacity: 1 !important;
+    border-color: var(--theme--accent-primary) !important;
+  }
 }
 
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
+body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
   [style*="border-left: 3px solid currentcolor;"] {
-  position: relative;
-  padding-left: 24px !important;
-  padding-right: 18px !important;
+    position: relative;
+    padding-left: 24px !important;
+    padding-right: 18px !important;
+  }
+  [placeholder="Empty quote"] {
+    &::before,
+    &::after {
+      font-family: var(--font--serif);
+      font-size: 24px;
+      font-weight: bold;
+      position: absolute;
+    }
+    &::before {
+      content: "\201C";
+      left: 8px;
+      top: -2px;
+    }
+    &::after {
+      content: "\201D";
+      right: 2px;
+      bottom: -2px;
+    }
+  }
 }
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
-  [placeholder="Empty quote"]::before,
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
-  [placeholder="Empty quote"]::after {
-  font-family: Georgia, serif;
-  font-size: 24px;
-  font-weight: bold;
-  position: absolute;
+
+body[data-tweaks*=",compactCodeBlocks,"]
+  .notion-code-block.line-numbers
+  > [data-content-editable-leaf] {
+  padding: 28px 22px 22px 22px !important;
 }
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
-  [placeholder="Empty quote"]::before {
-  content: "\201C";
-  left: 8px;
-  top: -2px;
-}
-.enhancer--tweak-quotation_marks
-  .notion-quote-block
-  [placeholder="Empty quote"]::after {
-  content: "\201D";
-  right: 2px;
-  bottom: -2px;
+
+body[data-tweaks*=",defaultImageAlignment,"] {
+  /**/
 }
 
 .enhancer--tweak-img_alignment-left .notion-image-block {

src/extensions/tweaks/client.mjs

@@ -8,9 +8,11 @@ const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
 export default async (api, db) => {
   const { getMods, addKeyListener } = api,
     [{ options }] = await getMods((mod) => mod.id === tweaksId),
-    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
+    tweaks = options
+      .filter((opt) => opt.type === "toggle")
+      .map((opt) => opt.key),
     enabled = {};
-  for (const tweak of tweaks) if (await db.get(tweak)) enabled[tweak] = true;
+  for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
 
   // inc. leading & trailing comma for selectors (see client.css)
   document.body.dataset.tweaks =

src/extensions/tweaks/mod.json

@@ -56,6 +56,12 @@
       "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
       "value": true
     },
+    {
+      "type": "toggle",
+      "key": "hidePageDiscussions",
+      "description": "Hide the comments section at the top of pages within databases.",
+      "value": false
+    },
     {
       "type": "number",
       "key": "responsiveColumnsBreakpoint",
@@ -68,12 +74,6 @@
       "description": "The unit to measure the above width in, e.g. you may wish the button to appear when the window occupies <= 20% of the screen or is less than a certain number of pixels wide.",
       "values": ["Pixels", "Percent"]
     },
-    {
-      "type": "toggle",
-      "key": "hidePageDiscussions",
-      "description": "Hide the comments section at the top of pages within databases.",
-      "value": false
-    },
     { "type": "heading", "label": "Typography" },
     {
       "type": "toggle",
@@ -83,8 +83,8 @@
     },
     {
       "type": "toggle",
-      "key": "condensedBulletedLists",
-      "description": "Tightened line spacing between bulleted list items.",
+      "key": "condensedLists",
+      "description": "Tightened line spacing between bulleted and numbered list items.",
       "value": false
     },
     {