dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 13:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs update

Browse Source
This commit is contained in:
dragonwocky 2020-06-13 10:40:38 +10:00
parent 5eae5ecb5b
commit 7e593bfa6f
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
30 changed files with 92 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2,6 +2,8 @@
an enhancer/customiser for the all-in-one productivity workspace [notion.so](https://www.notion.so/) an enhancer/customiser for the all-in-one productivity workspace [notion.so](https://www.notion.so/)
_note: this is currently an unreleased version of the enhancer, which adds some cool things like colour theming and improves on some existing features. it is stable, and so has been pushed out for use. once i've done some more fine-tuning and finished taking screenshots of everything i will release this officially as v0.6.0._
## installation ## installation
currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app. currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.

40
STYLING.md
View File

@ -38,12 +38,12 @@ _image: the dark+ theme_
} }
``` ```
![](screenshots/hidediscussion-after.jpg)
_image: after_
![](screenshots/hidediscussion-before.jpg) ![](screenshots/hidediscussion-before.jpg)
_image: before_ _image: before_
![](screenshots/hidediscussion-after.jpg)
_image: after_
### custom fonts ### custom fonts
**the `@import` statement must be added to the top of the file (with nothing above it** **the `@import` statement must be added to the top of the file (with nothing above it**
@ -65,12 +65,12 @@ plenty of other fonts that can be found on google fonts or that may be on your s
} }
``` ```
![](screenshots/customfonts-after.jpg)
_image: after_
![](screenshots/customfonts-before.jpg) ![](screenshots/customfonts-before.jpg)
_image: before_ _image: before_
![](screenshots/customfonts-after.jpg)
_image: after_
### font resizing ### font resizing
**not recommended:** this can mess up container sizes. **not recommended:** this can mess up container sizes.
@ -108,7 +108,7 @@ to change the size, change the value of `--font-scale`.
![](screenshots/fontresizing.jpg) ![](screenshots/fontresizing.jpg)
_image: after_ _image: after_
### wider page view ### wider page preview
```css ```css
.notion-peek-renderer > div:nth-child(2) { .notion-peek-renderer > div:nth-child(2) {
@ -116,6 +116,12 @@ _image: after_
} }
``` ```
![](screenshots/widerpreview-before.jpg)
_image: before_
![](screenshots/widerpreview-after.jpg)
_image: after_
### thinner cover image ### thinner cover image
```css ```css
@ -124,10 +130,16 @@ _image: after_
} }
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
img { img {
height: 20vh !important; height: 12vh !important;
} }
``` ```
![](screenshots/thinnercover-before.jpg)
_image: before_
![](screenshots/thinnercover-after.jpg)
_image: after_
### table columns below 100px ### table columns below 100px
**not recommended!** this is unreliable and will cause bugs. **not recommended!** this is unreliable and will cause bugs.
@ -161,6 +173,12 @@ as it is a per-table-column style, unlike all others here, it must be prepended
} }
``` ```
![](screenshots/table-before.jpg)
_image: before_
![](screenshots/hideaddrow-after.jpg)
_image: after_
### hide calculations table row ### hide calculations table row
```css ```css
@ -169,6 +187,12 @@ as it is a per-table-column style, unlike all others here, it must be prepended
} }
``` ```
![](screenshots/table-before.jpg)
_image: before_
![](screenshots/hidecalculationsrow-after.jpg)
_image: after_
### hide '+ new' board row ### hide '+ new' board row
```css ```css

31
docs/index.html
View File

@ -1,10 +1,11 @@
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-2"><a href="#styling">styling</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content"> <!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-2"><a href="#styling">styling</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
<section class="block" id="notion-enhancer"> <section class="block" id="notion-enhancer">
<h1> <h1>
<a href="#notion-enhancer">notion enhancer</a> <a href="#notion-enhancer">notion enhancer</a>
</h1> </h1>
<p>an enhancer/customiser for the all-in-one productivity workspace <a href="https://www.notion.so/">notion.so</a></p> <p>an enhancer/customiser for the all-in-one productivity workspace <a href="https://www.notion.so/">notion.so</a></p>
<p><em>note: this is currently an unreleased version of the enhancer, which adds some cool things like colour theming and improves on some existing features. it is stable, and so has been pushed out for use. once i&#39;ve done some more fine-tuning and finished taking screenshots of everything i will release this officially as v0.6.0.</em></p>
</section> </section>
<section class="block" id="installation"> <section class="block" id="installation">
@ -44,15 +45,6 @@ even if you are running the script from the wsl).</li>
additionally, if you ever need to change or reset your notion build, the <code>customiser.py</code> and <code>cleaner.py</code> files will be useful.</p> additionally, if you ever need to change or reset your notion build, the <code>customiser.py</code> and <code>cleaner.py</code> files will be useful.</p>
<p>unless you&#39;re sure you know what you&#39;re doing (if you have to ask, you probably don&#39;t) then do not delete anything.</p> <p>unless you&#39;re sure you know what you&#39;re doing (if you have to ask, you probably don&#39;t) then do not delete anything.</p>
</section>
<section class="block" id="this-is-a-fork">
<h2>
<a href="#this-is-a-fork">this is a fork</a>
</h2>
<p>credit where credit is due, this was originally made by Uzver (github: <a href="https://github.com/TarasokUA">@TarasokUA</a>,
telegram: <a href="https://t.me/UserFromUkraine">UserFromUkraine</a>, discord: Uzver#8760).</p>
<p>he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.</p>
</section> </section>
<section class="block" id="features"> <section class="block" id="features">
<h2> <h2>
@ -80,6 +72,10 @@ replacing <code>element.innerHTML = &#39;⨉&#39;;</code> with <code>element.inn
<p>i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous <p>i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
ones that actually look as if they&#39;re part of notion.</p> ones that actually look as if they&#39;re part of notion.</p>
<p>to add these to the web version, copy lines 44 - 75 from <code>user.css</code> into your css customiser.</p> <p>to add these to the web version, copy lines 44 - 75 from <code>user.css</code> into your css customiser.</p>
<p><img src="screenshots/default-before.jpg" alt="">
<em>image: before enhancement</em></p>
<p><img src="screenshots/default-after.jpg" alt="">
<em>image: after default enhancement</em></p>
</section> </section>
<section class="block" id="hotkeys"> <section class="block" id="hotkeys">
@ -110,13 +106,26 @@ on click of <code>⨉</code>. does not apply if multiple notion windows are open
<li><strong>load theme.css</strong>: loads the custom colour theme file. <li><strong>load theme.css</strong>: loads the custom colour theme file.
see <a href="STYLING.md#colour-theming">colour theming</a> for more information. (default: false)</li> see <a href="STYLING.md#colour-theming">colour theming</a> for more information. (default: false)</li>
</ul> </ul>
<p><img src="screenshots/tray.jpg" alt="">
<em>image: open application tray</em></p>
</section> </section>
<section class="block" id="styling"> <section class="block" id="styling">
<h2> <h2>
<a href="#styling">styling</a> <a href="#styling">styling</a>
</h2> </h2>
<p>custom appearances can be applied to the app via the <code>resources/user.css</code> and <code>resources/theme.css</code> files. for more information,
and a list of various optional styling changes, see <a href="/styling.html">the page on styling</a>.</p>
</section>
<section class="block" id="this-is-a-fork">
<h2>
<a href="#this-is-a-fork">this is a fork</a>
</h2>
<p>credit where credit is due, this was originally made by Uzver (github: <a href="https://github.com/TarasokUA">@TarasokUA</a>,
telegram: <a href="https://t.me/UserFromUkraine">UserFromUkraine</a>, discord: Uzver#8760).</p>
<p>he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.</p>
</section> </section>
<section class="block" id="other-details"> <section class="block" id="other-details">
<h2> <h2>

BIN
docs/screenshots/board-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/screenshots/customfonts-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 KiB

BIN
docs/screenshots/customfonts-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

BIN
docs/screenshots/default-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
docs/screenshots/default-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

BIN
docs/screenshots/fontresizing.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

BIN
docs/screenshots/hideaddrow-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/screenshots/hidecalculationsrow-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
docs/screenshots/hidediscussion-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
docs/screenshots/hidediscussion-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
docs/screenshots/table-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
docs/screenshots/theme.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
docs/screenshots/thinnercover-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
docs/screenshots/thinnercover-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 KiB

BIN
docs/screenshots/tray.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
docs/screenshots/widerpreview-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
docs/screenshots/widerpreview-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

44
docs/styling.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>styling | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="styling | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/styling.html"><meta property="og:title" content="styling"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="#styling">styling</a><ul><li class="level-3"><a href="#colour-theming">colour theming</a></li><li class="level-3"><a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a></li><li class="level-3"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-3"><a href="#wider-page-view">wider page view</a></li><li class="level-3"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-3"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-3"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-3"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-3"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-3"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-3"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-3"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-3"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-3"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content"> <!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>styling | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="styling | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/styling.html"><meta property="og:title" content="styling"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="#styling">styling</a><ul><li class="level-3"><a href="#colour-theming">colour theming</a></li><li class="level-3"><a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a></li><li class="level-3"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-3"><a href="#wider-page-preview">wider page preview</a></li><li class="level-3"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-3"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-3"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-3"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-3"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-3"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-3"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-3"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-3"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-3"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
<section class="block" id="styling"> <section class="block" id="styling">
<h1> <h1>
@ -27,6 +27,8 @@ set up a distribution method (either including them as optionally-enableabled th
<p>to enable, see the <a href="README.md#tray">tray</a> options.</p> <p>to enable, see the <a href="README.md#tray">tray</a> options.</p>
<p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names <p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names
should describe what each colour will affect.</p> should describe what each colour will affect.</p>
<p><img src="screenshots/theme.jpg" alt="">
<em>image: the dark+ theme</em></p>
</section> </section>
<section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page"> <section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
@ -36,6 +38,10 @@ should describe what each colour will affect.</p>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> { <pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>; <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/hidediscussion-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/hidediscussion-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="custom-fonts"> <section class="block" id="custom-fonts">
@ -44,6 +50,8 @@ should describe what each colour will affect.</p>
</h3> </h3>
<p><strong>the <code>@import</code> statement must be added to the top of the file (with nothing above it</strong> <p><strong>the <code>@import</code> statement must be added to the top of the file (with nothing above it</strong>
<strong>except comments or other <code>@import</code> statements)</strong></p> <strong>except comments or other <code>@import</code> statements)</strong></p>
<p>to change the fonts, change the font-family property. there are
plenty of other fonts that can be found on google fonts or that may be on your system already.</p>
<pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>); <pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>);
<span class="hljs-selector-class">.notion-app-inner</span> { <span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>; <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>;
@ -54,6 +62,10 @@ should describe what each colour will affect.</p>
<span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> { <span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>; <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/customfonts-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/customfonts-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="font-resizing"> <section class="block" id="font-resizing">
@ -62,9 +74,9 @@ should describe what each colour will affect.</p>
</h3> </h3>
<p><strong>not recommended:</strong> this can mess up container sizes. <p><strong>not recommended:</strong> this can mess up container sizes.
it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale everything up/down.</p> it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale everything up/down.</p>
<pre><code class="lang-css"><span class="hljs-comment">/* font sizes */</span> <p>to change the size, change the value of <code>--font-scale</code>.</p>
<span class="hljs-selector-pseudo">:root</span> { <pre><code class="lang-css"><span class="hljs-selector-pseudo">:root</span> {
<span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1</span>; <span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1.4</span>;
} }
<span class="hljs-selector-class">.notion-app-inner</span> { <span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
@ -87,15 +99,21 @@ it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> { <span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/fontresizing.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="wider-page-view"> <section class="block" id="wider-page-preview">
<h3> <h3>
<a href="#wider-page-view">wider page view</a> <a href="#wider-page-preview">wider page preview</a>
</h3> </h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> { <pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>; <span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/widerpreview-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/widerpreview-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="thinner-cover-image"> <section class="block" id="thinner-cover-image">
@ -107,8 +125,12 @@ it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale
} }
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span>
<span class="hljs-selector-tag">img</span> { <span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">20vh</span> <span class="hljs-meta">!important</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/thinnercover-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/thinnercover-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="table-columns-below-100px"> <section class="block" id="table-columns-below-100px">
@ -143,6 +165,10 @@ as it is a per-table-column style, unlike all others here, it must be prepended
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> { <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>; <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/table-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/hideaddrow-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="hide-calculations-table-row"> <section class="block" id="hide-calculations-table-row">
@ -152,6 +178,10 @@ as it is a per-table-column style, unlike all others here, it must be prepended
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> { <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>; <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre> }</code></pre>
<p><img src="screenshots/table-before.jpg" alt="">
<em>image: before</em></p>
<p><img src="screenshots/hidecalculationsrow-after.jpg" alt="">
<em>image: after</em></p>
</section> </section>
<section class="block" id="hide--new-board-row"> <section class="block" id="hide--new-board-row">

2
resources/theme.css
View File

@ -101,7 +101,7 @@
background: var(--theme-primary_click) !important; background: var(--theme-primary_click) !important;
} }
[style*='background: rgb(235, 87, 87)'] { [style*='background: rgb(235, 87, 87)'] {
background: var(--theme-primary-indicator) !important; background: var(--theme-primary_indicator) !important;
} }
[style*='background: rgba(151, 154, 155, 0.5)'], [style*='background: rgba(151, 154, 155, 0.5)'],

BIN
screenshots/board-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
screenshots/hideaddrow-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
screenshots/hidecalculationsrow-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
screenshots/table-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
screenshots/thinnercover-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
screenshots/thinnercover-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 KiB

BIN
screenshots/widerpreview-after.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
screenshots/widerpreview-before.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB