style(tweaks): default img alignment, responsive columns, disable sidebar resizing

scripts/generate-theme-css.mjs

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

src/api/interface.mjs

@@ -267,9 +267,11 @@ const iconPattern = /^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/,
 let _renderedTokens = -1;
 const _tokens = new Set(),
   _stylesheet = html`<style id="__unocss"></style>`,
+  preflight = `[un-cloak]{display:none!important}
+  .notion-emoji{display:inline-block!important}`,
   uno = createGenerator({
     presets: [presetUno()],
-    preflights: [{ getCSS: () => `[un-cloak]{display:none!important}` }],
+    preflights: [{ getCSS: () => preflight }],
     rules: [[iconPattern, presetIcons, { layer: "icons" }]],
     layers: { preflights: -2, icons: -1, default: 1 },
   }),

src/extensions/tweaks/client.css

@@ -31,6 +31,12 @@ body[data-tweaks*=",hideDefaultIcons,"]
   display: none !important;
 }
 
+body[data-tweaks*=",disableSidebarResizing,"]
+  .notion-sidebar
+  [style*="cursor: col-resize;"] {
+  pointer-events: none !important;
+}
+
 body[data-tweaks*=",snappyTransitions,"] * {
   animation-duration: 0s !important;
   transition-duration: 0s !important;
@@ -38,6 +44,7 @@ body[data-tweaks*=",snappyTransitions,"] * {
 
 /* pages */
 
+body[data-break-columns],
 body[data-tweaks*=",fullWidthPages,"]
   .layout:has(.notion-page-block):not(.layout-center-peek, .layout-side-peek) {
   --content-width: 100% !important;
@@ -59,21 +66,15 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] .notion-page-content {
   }
 }
 
-.enhancer--tweak-responsive_breakpoint
+body[data-break-columns]
   .notion-column_list-block
-  [style="display: flex;"]
+  [style*="display: flex;"]:has(.notion-block-resizer) {
-  > div {
-  width: 100% !important;
-}
-.enhancer--tweak-responsive_breakpoint
-  .notion-column_list-block
-  [style="display: flex;"] {
   flex-direction: column !important;
-}
+  > div {
-.enhancer--tweak-responsive_breakpoint .notion-app-inner,
+    width: 100% !important;
-.enhancer--tweak-full_width_pages .notion-app-inner {
+    padding-top: 0 !important;
-  --theme--page-width: 100%;
+    padding-bottom: 0 !important;
-  --theme--page-padding: calc(48px + env(safe-area-inset-left));
+  }
 }
 
 body[data-tweaks*=",hidePageDiscussions,"]
@@ -159,19 +160,19 @@ body[data-tweaks*=",quoteBlockQuotationMarks,"] .notion-quote-block {
   }
 }
 
-body[data-tweaks*=",compactCodeBlocks,"]
+body[data-tweaks*=",compactCodeBlocks,"] .notion-code-block.line-numbers {
-  .notion-code-block.line-numbers
+  .notion-enhancer--line-numbers {
+    margin-top: 28px !important;
+  }
   > [data-content-editable-leaf] {
-  padding: 28px 22px 22px 22px !important;
+    padding: 28px 22px 22px 22px !important;
+  }
 }
-
+body[data-tweaks*=",defaultImageAlignment=Left,"]
-body[data-tweaks*=",defaultImageAlignment,"] {
+  .notion-image-block[style*="align-self: center"] {
-  /**/
-}
-
-.enhancer--tweak-img_alignment-left .notion-image-block {
   align-self: start !important;
 }
-.enhancer--tweak-img_alignment-right .notion-image-block {
+body[data-tweaks*=",defaultImageAlignment=Right,"]
+  .notion-image-block[style*="align-self: center"] {
   align-self: end !important;
 }

src/extensions/tweaks/client.mjs

@@ -8,16 +8,38 @@ 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
+    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key),
-      .filter((opt) => opt.type === "toggle")
+    values = {};
-      .map((opt) => opt.key),
+  for (const tweak of tweaks) values[tweak] = await db.get(tweak);
-    enabled = {};
-  for (const tweak of tweaks) enabled[tweak] = await db.get(tweak);
 
   // inc. leading & trailing comma for selectors (see client.css)
   document.body.dataset.tweaks =
-    "," + tweaks.filter((tweak) => enabled[tweak]).join(",") + ",";
+    "," +
+    tweaks
+      .filter((tweak) => values[tweak])
+      .map((tweak) => {
+        if (typeof values[tweak] === "boolean") return tweak;
+        return tweak + "=" + values[tweak];
+      })
+      .join(",") +
+    ",";
 
-  if (enabled["hideSlashMenu"])
+  if (values["hideSlashMenu"]) {
     addKeyListener("/", () => document.body.click(), true);
+  }
+
+  if (values["responsiveColumnsBreakpoint"] > 0) {
+    const addResponsiveBreakpoint = () => {
+      let breakpoint = values["responsiveColumnsBreakpoint"];
+      if (values["responsiveColumnsUnit"] === "Percent") {
+        breakpoint /= 100;
+        breakpoint *= screen.availWidth;
+      }
+      if (window.innerWidth <= breakpoint) {
+        document.body.setAttribute("data-break-columns", true);
+      } else document.body.removeAttribute("data-break-columns");
+    };
+    window.addEventListener("resize", addResponsiveBreakpoint);
+    addResponsiveBreakpoint();
+  }
 };

src/extensions/tweaks/mod.json

@@ -37,6 +37,12 @@
       "description": "Hide the default <i class='i-file -mb-px'></i> page icons.",
       "value": false
     },
+    {
+      "type": "toggle",
+      "key": "disableSidebarResizing",
+      "description": "Prevents interaction with the left sidebar's drag handle, effectively freezing it at it's current size.",
+      "value": false
+    },
     {
       "type": "toggle",
       "key": "snappyTransitions",