mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 12:49:03 +00:00
docs: update documentative + link to media kit
This commit is contained in:
parent
1f6bf7bf23
commit
8ab53a19a5
13
README.md
13
README.md
@ -21,7 +21,7 @@ or a built-in feature like [userChrome.css](https://www.userchrome.org/).)
|
||||
8. optional: modify the `resources/user.css` files to your liking.
|
||||
9. run `customiser.py` to build changes.
|
||||
|
||||
done: run notion and enjoy
|
||||
done: run notion and enjoy.
|
||||
|
||||
**oh no, now my app won't open!**
|
||||
|
||||
@ -77,7 +77,7 @@ to add these to the web version, copy lines 43 - 87 from `user.css` into your cs
|
||||
- **close to tray**: close window to tray rather than closing outright
|
||||
on click of `⨉`. does not apply if multiple notion windows are open. (default: false)
|
||||
|
||||
## styling
|
||||
### styling
|
||||
|
||||
due to `customiser.py` setting up a direct link to `resources/user.css`,
|
||||
changes will be applied instantly on notion reload
|
||||
@ -230,3 +230,12 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
```
|
||||
|
||||
## other details
|
||||
|
||||
i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.
|
||||
|
||||
the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
[media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286).
|
||||
|
||||
if you have any questions, check [my website](https://dragonwocky.me/) for contact details.
|
||||
|
@ -1,15 +1,15 @@
|
||||
<!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>changelog | 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.svg" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.svg"><meta name="title" content="changelog | 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/changelog.html"><meta property="og:title" content="changelog"><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.svg"><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.svg" media="(prefers-color-scheme: dark)"><img src="web-logo.svg"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v050-wip">v0.5.0 (wip)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></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">
|
||||
<h1 id="changelog">
|
||||
<section class="block" id="changelog">
|
||||
<h1>
|
||||
<a href="#changelog">changelog</a>
|
||||
</h1>
|
||||
<p>if something is <del>crossed out</del>, then it is no longer a feature included by default,
|
||||
but can still easily be enabled by following instructions in the <a href="/index.html">docs</a>.</p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v050-wip">
|
||||
<section class="block" id="v050-wip">
|
||||
<h3>
|
||||
<a href="#v050-wip">v0.5.0 (wip)</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -24,8 +24,8 @@ improved: scrollbar colours that fit better with notion's theming.</li>
|
||||
<p><em>(forked by <a href="https://github.com/dragonwocky">@dragonwocky</a>.)</em></p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v041-2020-02-13">
|
||||
<section class="block" id="v041-2020-02-13">
|
||||
<h3>
|
||||
<a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -36,8 +36,8 @@ improved: scrollbar colours that fit better with notion's theming.</li>
|
||||
</blockquote>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v040">
|
||||
<section class="block" id="v040">
|
||||
<h3>
|
||||
<a href="#v040">v0.4.0</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -50,8 +50,8 @@ improved: scrollbar colours that fit better with notion's theming.</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v030">
|
||||
<section class="block" id="v030">
|
||||
<h3>
|
||||
<a href="#v030">v0.3.0</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -64,8 +64,8 @@ improved: scrollbar colours that fit better with notion's theming.</li>
|
||||
</blockquote>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v020">
|
||||
<section class="block" id="v020">
|
||||
<h3>
|
||||
<a href="#v020">v0.2.0</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -75,8 +75,8 @@ improved: scrollbar colours that fit better with notion's theming.</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="v010">
|
||||
<section class="block" id="v010">
|
||||
<h3>
|
||||
<a href="#v010">v0.1.0</a>
|
||||
</h3>
|
||||
<ul>
|
||||
|
209
docs/docs.js
209
docs/docs.js
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Documentative Scripts
|
||||
* Documentative
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
@ -16,125 +16,109 @@ class Scrollnav {
|
||||
throw Error('scrollnav: only 1 instance per page allowed!');
|
||||
Scrollnav.prototype.INITIATED = true;
|
||||
|
||||
this.ID;
|
||||
this.ticking = [];
|
||||
this._menu = menu;
|
||||
this._content = content;
|
||||
this._sections = [...this._menu.querySelectorAll('ul li a')]
|
||||
.map(el => {
|
||||
try {
|
||||
return this._content.querySelector(el.getAttribute('href'))
|
||||
.parentElement;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter(el => el);
|
||||
this._topheading = this._sections[0].children[0];
|
||||
this._links = [];
|
||||
this._sections = [...this._menu.querySelectorAll('ul li a')].reduce(
|
||||
(list, link) => {
|
||||
if (!link.getAttribute('href').startsWith('#')) return list;
|
||||
let section = this._content.querySelector(link.getAttribute('href'));
|
||||
if (!section) return list;
|
||||
|
||||
this._scrolling = [];
|
||||
this.build();
|
||||
}
|
||||
async build() {
|
||||
this._content.addEventListener('scroll', this.scrollwatcher.bind(this));
|
||||
|
||||
window.onhashchange = this.hashwatcher.bind(this);
|
||||
[...this._menu.querySelectorAll('ul li a')]
|
||||
.filter(el => el.getAttribute('href').startsWith('#'))
|
||||
.forEach(el => {
|
||||
el.onclick = async ev => {
|
||||
this._links.push(link);
|
||||
link.onclick = async ev => {
|
||||
ev.preventDefault();
|
||||
this.set(el.getAttribute('href'));
|
||||
this.scroll(() => {
|
||||
let offset = this._content.querySelector(el.getAttribute('href'))
|
||||
.parentElement.offsetTop;
|
||||
if (offset < this._content.clientHeight / 2) offset = 0;
|
||||
this._content.scroll({
|
||||
top: offset,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
const ID = link.getAttribute('href');
|
||||
this.highlightHeading(ID);
|
||||
this.scrollContent(ID);
|
||||
this.setHash(ID);
|
||||
};
|
||||
});
|
||||
|
||||
this.set();
|
||||
this.showmenu();
|
||||
await this.scroll(() => {
|
||||
const ID = location.hash || '#' + this._topheading.id;
|
||||
try {
|
||||
this._content.querySelector(ID).parentElement.scrollIntoView(true);
|
||||
} catch {
|
||||
location.hash = '';
|
||||
return [...list, section];
|
||||
},
|
||||
[]
|
||||
);
|
||||
this._topheading = `#${this._sections[0].id}`;
|
||||
|
||||
window.onhashchange = this.watchHash.bind(this);
|
||||
this._content.addEventListener('scroll', ev => {
|
||||
if (!this.ticking.length) {
|
||||
this.ticking.push(1);
|
||||
requestAnimationFrame(() => {
|
||||
this.watchScroll(ev);
|
||||
this.ticking.pop();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.set(null, false);
|
||||
return this;
|
||||
}
|
||||
|
||||
set(ID) {
|
||||
if (!ID || typeof ID !== 'string')
|
||||
ID = location.hash || this._topheading.id;
|
||||
if (!ID.startsWith('#')) ID = '#' + ID;
|
||||
if (!this._menu.querySelector(`[href="${ID}"]`))
|
||||
ID = '#' + this._topheading.id;
|
||||
clearTimeout(this.hashloc);
|
||||
this.hashloc = setTimeout(() => {
|
||||
this._menu
|
||||
.querySelectorAll('ul li a')
|
||||
.forEach(el =>
|
||||
el.getAttribute('href') === ID
|
||||
? el.classList.add('active')
|
||||
: el.classList.remove('active')
|
||||
);
|
||||
if (history.replaceState) {
|
||||
history.replaceState(
|
||||
null,
|
||||
null,
|
||||
ID === '#' + this._topheading.id ? '#' : ID
|
||||
);
|
||||
if (ID === '#' + this._topheading.id)
|
||||
this._content.scroll({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else this._content.querySelector(ID).parentElement.scrollIntoView(true);
|
||||
}, 100);
|
||||
set(ID, smooth) {
|
||||
this.highlightHeading(ID);
|
||||
this.scrollMenu(ID, smooth);
|
||||
this.scrollContent(ID, smooth);
|
||||
this.setHash(ID);
|
||||
}
|
||||
scroll(func) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
this._scrolling.push(true);
|
||||
func();
|
||||
setTimeout(() => {
|
||||
this._scrolling.pop();
|
||||
resolve(true);
|
||||
}, 750);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
|
||||
parseID(ID) {
|
||||
if (!ID || typeof ID !== 'string') ID = location.hash || this._topheading;
|
||||
if (!ID.startsWith('#')) ID = `#${ID}`;
|
||||
if (!this._links.find(el => el.getAttribute('href') === ID))
|
||||
ID = this._topheading;
|
||||
this.ID = ID;
|
||||
return ID;
|
||||
}
|
||||
highlightHeading(ID) {
|
||||
this.parseID(ID);
|
||||
this._links.forEach(el =>
|
||||
el.getAttribute('href') === this.ID
|
||||
? el.classList.add('active')
|
||||
: el.classList.remove('active')
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
watchHash(ev) {
|
||||
ev.preventDefault();
|
||||
if (ev.newURL !== ev.oldURL) {
|
||||
this.set();
|
||||
}
|
||||
}
|
||||
setHash(ID) {
|
||||
if (!history.replaceState) return false;
|
||||
this.parseID(ID);
|
||||
history.replaceState(null, null, ID === this._topheading ? '#' : this.ID);
|
||||
return true;
|
||||
}
|
||||
|
||||
scrollContent(ID, smooth = true) {
|
||||
this.ticking.push(1);
|
||||
this.parseID(ID);
|
||||
let offset = this._sections.find(el => `#${el.id}` === this.ID).offsetTop;
|
||||
if (offset < this._content.clientHeight / 2) offset = 0;
|
||||
this._content.scroll({
|
||||
top: offset,
|
||||
behavior: smooth ? 'smooth' : 'auto'
|
||||
});
|
||||
setTimeout(() => this.ticking.pop(), 1000);
|
||||
return true;
|
||||
}
|
||||
showmenu(ID) {
|
||||
if (!ID || typeof ID !== 'string')
|
||||
ID = location.hash || this._topheading.id;
|
||||
if (!ID.startsWith('#')) ID = '#' + ID;
|
||||
if (!this._menu.querySelector(`[href="${ID}"]`))
|
||||
ID = '#' + this._topheading.id;
|
||||
let offset = this._menu.querySelector(`[href="${ID}"]`).parentElement
|
||||
scrollMenu(ID, smooth = true) {
|
||||
this.parseID(ID);
|
||||
let offset = this._links.find(el => el.getAttribute('href') === this.ID)
|
||||
.offsetTop;
|
||||
if (offset < this._menu.clientHeight / 2) offset = 0;
|
||||
clearTimeout(this.menupos);
|
||||
this._menu.scroll({
|
||||
top: offset,
|
||||
behavior: 'smooth'
|
||||
behavior: smooth ? 'smooth' : 'auto'
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
hashwatcher(ev) {
|
||||
ev.preventDefault();
|
||||
if (ev.newURL === ev.oldURL) return;
|
||||
this.set();
|
||||
this.showmenu();
|
||||
}
|
||||
|
||||
scrollwatcher() {
|
||||
if (this._scrolling.length) return;
|
||||
watchScroll(ev) {
|
||||
const viewport = this._content.clientHeight,
|
||||
ID = this._sections.reduce(
|
||||
(carry, el) => {
|
||||
@ -159,17 +143,25 @@ class Scrollnav {
|
||||
return pixels > carry[0] ? [pixels, el] : carry;
|
||||
},
|
||||
[0, null]
|
||||
)[1].children[0].id;
|
||||
|
||||
this.set(ID);
|
||||
this.showmenu(ID);
|
||||
)[1].id;
|
||||
this.ID = ID;
|
||||
this.scrollMenu(this.ID);
|
||||
clearTimeout(this.afterScroll);
|
||||
this.afterScroll = setTimeout(
|
||||
() => void (this.highlightHeading(this.ID) && this.setHash(this.ID)),
|
||||
100
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let constructed = false;
|
||||
const construct = () => {
|
||||
if (document.readyState !== 'complete' || constructed) return false;
|
||||
constructed = true;
|
||||
|
||||
if (
|
||||
location.pathname.endsWith('index.html') &&
|
||||
window.location.protocol !== 'file:'
|
||||
window.location.protocol === 'https:'
|
||||
)
|
||||
location.replace('./' + location.hash);
|
||||
|
||||
@ -197,6 +189,5 @@ const construct = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
construct();
|
||||
} else document.addEventListener('DOMContentLoaded', construct);
|
||||
construct();
|
||||
document.addEventListener('readystatechange', construct);
|
||||
|
104
docs/index.html
104
docs/index.html
@ -1,14 +1,14 @@
|
||||
<!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.svg" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.svg"><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.svg"><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.svg" media="(prefers-color-scheme: dark)"><img src="web-logo.svg"></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-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><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>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.svg" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.svg"><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.svg"><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.svg" media="(prefers-color-scheme: dark)"><img src="web-logo.svg"></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-3"><a href="#styling">styling</a></li><li class="level-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li><li class="level-2"><a href="#other-details">other details</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">
|
||||
<h1 id="notion-enhancer">
|
||||
<section class="block" id="notion-enhancer">
|
||||
<h1>
|
||||
<a href="#notion-enhancer">notion enhancer</a>
|
||||
</h1>
|
||||
<p>an enhancer/customiser for the all-in-one productivity workspace <a href="https://www.notion.so/">notion.so</a></p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2 id="installation">
|
||||
<section class="block" id="installation">
|
||||
<h2>
|
||||
<a href="#installation">installation</a>
|
||||
</h2>
|
||||
<p>currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.</p>
|
||||
@ -27,7 +27,7 @@ even if you are running the script from the wsl).</li>
|
||||
<li>optional: modify the <code>resources/user.css</code> files to your liking.</li>
|
||||
<li>run <code>customiser.py</code> to build changes.</li>
|
||||
</ol>
|
||||
<p>done: run notion and enjoy</p>
|
||||
<p>done: run notion and enjoy.</p>
|
||||
<p><strong>oh no, now my app won't open!</strong></p>
|
||||
<ol>
|
||||
<li>kill any notion tasks in the task manager (<code>ctrl+shift+esc</code>).</li>
|
||||
@ -37,8 +37,8 @@ even if you are running the script from the wsl).</li>
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2 id="this-is-a-fork">
|
||||
<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>,
|
||||
@ -46,14 +46,14 @@ telegram: <a href="https://t.me/UserFromUkraine">UserFromUkraine</a>, discord: U
|
||||
<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 class="block">
|
||||
<h2 id="features">
|
||||
<section class="block" id="features">
|
||||
<h2>
|
||||
<a href="#features">features</a>
|
||||
</h2>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="titlebar">
|
||||
<section class="block" id="titlebar">
|
||||
<h3>
|
||||
<a href="#titlebar">titlebar</a>
|
||||
</h3>
|
||||
<p>default windows titlebar/frame has been replaced by one more fitting to the theme of the app.</p>
|
||||
@ -65,8 +65,8 @@ find the relevant button (read the comments) and replace its icon with your chos
|
||||
replacing <code>element.innerHTML = '▢';</code> with <code>element.innerHTML = '🙄';</code>).</p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="nicer-scrollbars">
|
||||
<section class="block" id="nicer-scrollbars">
|
||||
<h3>
|
||||
<a href="#nicer-scrollbars">nicer scrollbars</a>
|
||||
</h3>
|
||||
<p>i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
|
||||
@ -74,8 +74,8 @@ ones that actually look as if they're part of notion.</p>
|
||||
<p>to add these to the web version, copy lines 43 - 87 from <code>user.css</code> into your css customiser.</p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="hotkeys">
|
||||
<section class="block" id="hotkeys">
|
||||
<h3>
|
||||
<a href="#hotkeys">hotkeys</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -89,8 +89,8 @@ to your preference. you will need to run or re-run <code>customiser.py</code> af
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h3 id="tray">
|
||||
<section class="block" id="tray">
|
||||
<h3>
|
||||
<a href="#tray">tray</a>
|
||||
</h3>
|
||||
<ul>
|
||||
@ -104,10 +104,10 @@ on click of <code>⨉</code>. does not apply if multiple notion windows are open
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h2 id="styling">
|
||||
<section class="block" id="styling">
|
||||
<h3>
|
||||
<a href="#styling">styling</a>
|
||||
</h2>
|
||||
</h3>
|
||||
<p>due to <code>customiser.py</code> setting up a direct link to <code>resources/user.css</code>,
|
||||
changes will be applied instantly on notion reload
|
||||
(no need to re-run <code>customiser.py</code> every time you want to change some styles).</p>
|
||||
@ -116,8 +116,8 @@ changes will be applied instantly on notion reload
|
||||
(e.g. the '+ new' table row) it is recommended that you prepend each selector with <code>[data-block-id='ID']</code> (<a href="https://www.youtube.com/watch?v=6V7eqShm_4w">video tutorial on fetching IDs</a>).</p>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="wider-page-view">
|
||||
<section class="block" id="wider-page-view">
|
||||
<h4>
|
||||
<a href="#wider-page-view">wider page view</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
|
||||
@ -125,8 +125,8 @@ changes will be applied instantly on notion reload
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="thinner-cover-image">
|
||||
<section class="block" id="thinner-cover-image">
|
||||
<h4>
|
||||
<a href="#thinner-cover-image">thinner cover image</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><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> {
|
||||
@ -138,8 +138,8 @@ changes will be applied instantly on notion reload
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="table-columns-below-100px">
|
||||
<section class="block" id="table-columns-below-100px">
|
||||
<h4>
|
||||
<a href="#table-columns-below-100px">table columns below 100px</a>
|
||||
</h4>
|
||||
<p><strong>not recommended!</strong> this is unreliable and will cause bugs.
|
||||
@ -163,8 +163,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="hide--new-table-row">
|
||||
<section class="block" id="hide--new-table-row">
|
||||
<h4>
|
||||
<a href="#hide--new-table-row">hide '+ new' table row</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
|
||||
@ -172,8 +172,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="hide-calculations-table-row">
|
||||
<section class="block" id="hide-calculations-table-row">
|
||||
<h4>
|
||||
<a href="#hide-calculations-table-row">hide calculations table row</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
|
||||
@ -181,8 +181,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="hide--new-board-row">
|
||||
<section class="block" id="hide--new-board-row">
|
||||
<h4>
|
||||
<a href="#hide--new-board-row">hide '+ new' board row</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-group</span>
|
||||
@ -191,8 +191,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="hide-board-view-hidden-columns">
|
||||
<section class="block" id="hide-board-view-hidden-columns">
|
||||
<h4>
|
||||
<a href="#hide-board-view-hidden-columns">hide board view hidden columns</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> > <span class="hljs-selector-attr">[data-block-id]</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span>,
|
||||
@ -201,8 +201,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="hide-board-view-add-a-group">
|
||||
<section class="block" id="hide-board-view-add-a-group">
|
||||
<h4>
|
||||
<a href="#hide-board-view-add-a-group">hide board view 'add a group'</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> > <span class="hljs-selector-attr">[data-block-id]</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span>,
|
||||
@ -211,8 +211,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="centre-align-table-column-headers">
|
||||
<section class="block" id="centre-align-table-column-headers">
|
||||
<h4>
|
||||
<a href="#centre-align-table-column-headers">centre-align table column headers</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> > <span class="hljs-selector-tag">div</span> > <span class="hljs-selector-tag">div</span> {
|
||||
@ -220,8 +220,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="smaller-table-column-header-icons">
|
||||
<section class="block" id="smaller-table-column-header-icons">
|
||||
<h4>
|
||||
<a href="#smaller-table-column-header-icons">smaller table column header icons</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
|
||||
@ -233,8 +233,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="remove-icons-from-table-column-headers">
|
||||
<section class="block" id="remove-icons-from-table-column-headers">
|
||||
<h4>
|
||||
<a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'margin-right: 6px;'</span>]</span> {
|
||||
@ -242,8 +242,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="removingdecreasing-side-padding-for-tables">
|
||||
<section class="block" id="removingdecreasing-side-padding-for-tables">
|
||||
<h4>
|
||||
<a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;'</span>]</span>
|
||||
@ -261,8 +261,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block">
|
||||
<h4 id="removingdecreasing-side-padding-for-boards">
|
||||
<section class="block" id="removingdecreasing-side-padding-for-boards">
|
||||
<h4>
|
||||
<a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> {
|
||||
@ -270,5 +270,15 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block" id="other-details">
|
||||
<h2>
|
||||
<a href="#other-details">other details</a>
|
||||
</h2>
|
||||
<p>i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.</p>
|
||||
<p>the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
<a href="https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286">media kit</a>.</p>
|
||||
<p>if you have any questions, check <a href="https://dragonwocky.me/">my website</a> for contact details.</p>
|
||||
|
||||
</section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/README.md">Edit on GitHub</a> // © 2020 dragonwocky & Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
|
||||
</footer><nav><a class="next" href="changelog.html">ᐅ</a></nav></article></div></body></html>
|
Loading…
Reference in New Issue
Block a user