diff --git a/repo/core/client.js b/repo/core/client.js index 396c8bd..592a2ce 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -29,9 +29,11 @@ module.exports = (store, __exports) => { return; clearInterval(attempt_interval); - // scrollbars + // toggleable styles if (store().smooth_scrollbars) document.body.classList.add('smooth-scrollbars'); + if (store().snappy_transitions) + document.body.classList.add('snappy-transitions'); // frameless if (store().frameless && !store().tiling_mode) { diff --git a/repo/core/css/responsive.css b/repo/core/css/responsive.css new file mode 100644 index 0000000..0b92c03 --- /dev/null +++ b/repo/core/css/responsive.css @@ -0,0 +1,26 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +@media (max-width: 600px) { + .notion-column_list-block [style='display: flex;'] > div { + width: 100% !important; + } + .notion-column_list-block [style='display: flex;'] { + flex-direction: column !important; + } + + .notion-app-inner { + --theme_dark--page_normal-width: 100%; + --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); + --theme_light--page_normal-width: 100%; + --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); + } +} + +.snappy-transitions * { + animation-duration: 0s !important; + transition-duration: 0s !important; +} diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 0608b2f..7778954 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -40,6 +40,12 @@ width: var(--theme--page_normal-width) !important; } +.notion-frame + [style*='padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right));'] { + padding-left: var(--theme--page-padding) !important; + padding-right: var(--theme--page-padding) !important; +} + .notion-page-content [data-block-id][style*='max-width'] { max-width: 100% !important; } diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 225fdd3..76e4bbd 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -16,10 +16,11 @@ --theme_dark--dragarea: #272d2f; --theme_dark--page_normal-width: 900px; --theme_dark--page_full-width: 100%; + --theme_dark--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_dark--page_banner-height: 30vh; --theme_dark--preview-width: 977px; --theme_dark--preview-padding: 8rem; --theme_dark--preview_banner-height: 20vh; - --theme_dark--page_banner-height: 30vh; --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -190,10 +191,11 @@ --theme_light--dragarea: rgba(55, 53, 47, 0.04); --theme_light--page_normal-width: 900px; --theme_light--page_full-width: 100%; + --theme_light--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_light--page_banner-height: 30vh; --theme_light--preview-width: 977px; --theme_light--preview-padding: 8rem; --theme_light--preview_banner-height: 20vh; - --theme_light--page_banner-height: 30vh; --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -364,10 +366,11 @@ --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--page-padding: var(--theme_dark--page-padding); + --theme--page_banner-height: var(--theme_dark--page_banner-height); --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); - --theme--page_banner-height: var(--theme_dark--page_banner-height); --theme--font_sans: var(--theme_dark--font_sans); --theme--font_serif: var(--theme_dark--font_serif); --theme--font_mono: var(--theme_dark--font_mono); @@ -521,12 +524,13 @@ --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--page_normal-width: var(--theme_light--page_normal-width); + --theme--page_full-width: var(--theme_light--page_full-width); + --theme--page-padding: var(--theme_light--page-padding); + --theme--page_banner-height: var(--theme_light--page_banner-height); --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); - --theme--page_banner-height: var(--theme_light--page_banner-height); --theme--font_sans: var(--theme_light--font_sans); --theme--font_serif: var(--theme_light--font_serif); --theme--font_mono: var(--theme_light--font_mono); diff --git a/repo/core/mod.js b/repo/core/mod.js index 2294d0a..70bbd29 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -56,6 +56,12 @@ module.exports = { type: 'toggle', value: true, }, + { + key: 'snappy_transitions', + label: 'snappy transitions', + type: 'toggle', + value: false, + }, { key: 'hotkey', label: 'window display hotkey:', diff --git a/repo/core/styles.css b/repo/core/styles.css index da69ff5..fbfe5be 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -8,3 +8,4 @@ @import './css/variables.css'; @import './css/scrollbars.css'; @import './css/titlebar.css'; +@import './css/responsive.css';