improve website and reamde

website/src/components/index.mdx

@@ -1,6 +1,3 @@
-
-> OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
-
 ## Why
 
 I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
@@ -23,7 +20,7 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
 
 ## Getting started
 
-#### npm & Node
+### npm & Node
 OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice:
 ```sh
 npm install overlayscrollbars
@@ -34,12 +31,14 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import { OverlayScrollbars } from 'overlayscrollbars';
 ```
 
+### Manual download & embedding
 
 <details>
   <summary>
-    <h6>Manual download & embedding</h6>
+    These instructions are for old stacks. Click here to read them.
   </summary>
-
+  <br />
+  
 You can use OverlayScrollbars without any bundler or package manager.  
 Simply download it from the [Releases](https://github.com/KingSora/OverlayScrollbars/releases) or use a [CDN](https://cdnjs.com/libraries/overlayscrollbars).
 
@@ -71,11 +70,15 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
 If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
 While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. 
 
+To fix this behavior apply the `data-overlayscrollbars=""` attribute to the target element (and `html` element if the target element is `body`).
+
+### Initialization with an Object
 <details>
   <summary>
-    <h6>Initialization with an Object</h6>
+    This is a in depth topic. Click here to read it.
   </summary>
-
+  <br />
+  
 > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description of all possibilities.
 
 The only required field is the `target` field. This is the field to which the plugin is applied to.  
@@ -142,10 +145,12 @@ OverlayScrollbars(document.querySelector('#myElement'), {
 });
 ```
 
+### Options in depth
 <details>
   <summary>
-    <h6>Options in depth</h6>
+    This is a in depth topic. Click here to read it.
   </summary>
+  <br />
 
 The default options are:
 ```js
@@ -319,10 +324,13 @@ OverlayScrollbars(document.querySelector('#myElement'), {}, {
 });
 ```
 
+### Events in depth
+
 <details>
   <summary>
-    <h6>Events in depth</h6>
+    This is a in depth topic. Click here to read it.
   </summary>
+  <br />
 
 > __Note__: Every event receives the `instance` from which it was invoked as the first argument. Always.
 
@@ -408,9 +416,9 @@ Everything thats considered not core functionality or old browser compatibility
 - **SizeObserverPlugin**: Is needed for old browsers which aren't supporting the `ResizeObserver` api. [You can find the list of browsers where you need this plugin here](https://caniuse.com/?search=ResizeObserver)
 - **ClickScrollPlugin**: If you want to use the option `scrollbars: { clickScroll: true }`.
 
-#### Consuming Plugins
+### Consuming Plugins
 
-You can consume plugins like:
+Plugins are consumed like:
 ```ts
 import { 
   OverlayScrollbars, 
@@ -426,7 +434,7 @@ OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
 OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
 ```
 
-#### Writing Plugins
+### Writing Plugins
 
 > __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.