add doc for masonry and navigation

src/docs/less-js.md

@@ -4,10 +4,11 @@ title: Less JavaScript
 
 The only "real" JavaScript dependency is **theme-toggle.js**, which is inlined.
 
-There are two more scripts that are generated but you have to opt in:
+There are three more scripts that are available, but you have to opt in:
+
+**nav-drawer.js**, to opt in to a drawer menu on small screens. See the [navigation documentation](/docs/navigation/).
 
 **masonry.js**, creating the masonry effect used on the cards.
-A fallback until [maybe, one day](https://caniuse.com/mdn-css_properties_grid-template-rows_masonry) we get to use `grid-template-rows: masonry;`.
 Search for `masonry: true` to see where it is activated, and set to `false`, an empty string, or delete the front matter field, if you don't want to use it. The script won't be included then. Nothing breaks, the cards just won't rise up to completely fill the gaps in their grid.
 
 The **easteregg.js** is an opt-in JS-file set in `src/_data/meta.js`.

src/docs/masonry.md

@@ -0,0 +1,9 @@
+---
+title: Masonry
+---
+
+There is the idea of making masonry layout a native part of CSS grid, using `grid-template-rows: masonry;`. It is [not yet to be seen on the horizon](https://caniuse.com/mdn-css_properties_grid-template-rows_masonry), but it is already included in the starter (inside the `grid.css` composition).
+Until then, a small script will help us to get the effect.
+
+It gets loaded by opt-in.
+Set `masonry: true` in your front matter to activate.

src/docs/navigation.md

@@ -0,0 +1,19 @@
+---
+title: Navigation
+---
+
+Edit your navigation items in `src/_data/navigation.js`.
+
+You have two options for mobile navigation: by default, the navigation on small displays is converted to small pills that wrap. This does not require any additional JavaScript.
+
+Before version 2.0 a slide out drawer was the default, you can activate it again in `src/_data/meta.js`:
+
+```js
+navigation: {
+   // other settings
+    drawerNav: true,
+    navLabel: 'Menu'
+  },
+```
+
+`drawerNav` activates the navigation drawer, [built according to Manuel Matuzović's article on web.dev.](https://web.dev/articles/website-navigation)

src/pages/get-started.md

@@ -15,7 +15,6 @@ You can use this starter as a template for your blog and you are ready to go! Bu
 - `src/_data/meta.js` - sets different "hard coded" text values all over the template, you can change the language, etc.
 - edit your personal details and social media in `src/_data/personal.yaml`.
 - Open `src/assets/css/blocks/external-link.css`. Replace "eleventy-excellent.netlify.app" with your own domain. This is about the external link indicators, they are matched with your domain. If you don't want to use external link indicators, feel free to delete the whole style rule. You can also add the class `no-indicator` to any anchor element you want to except from this rule.
-- Edit your navigation items in `src/_data/navigation.js`.
 
 If you are working with **VS Code** I recommend installing the "Tailwind CSS IntelliSense" addon, as it works also for our custom utility classes. That said, you will find that Tailwind CSS does not work as you might expect. I explain this in [one of the blog posts](/blog/what-is-tailwind-css-doing-here/).