Design & welcome page changes

docs/assets/app.css

@@ -1,22 +1,20 @@
 /* Override directives for readthedocs */
 
-section.wy-nav-content-wrap a {
-  color: rgb(28, 178, 126);
-}
-
-nav.wy-nav-top a, nav.my-nav-top a:active {
-  color: white;
-}
+/*
+ * General branding: Let's use the Zettlr green instead of the default blue
+ */
+section.wy-nav-content-wrap a { color: rgb(28, 178, 126); }
+nav.wy-nav-top a, nav.my-nav-top a:active { color: white; }
+.wy-side-nav-search a, .wy-side-nav-search a:visited { color: white; }
 
 section.wy-nav-content-wrap a:hover {
   color: rgb(28, 178, 126);
   text-decoration: underline;
 }
 
-.wy-side-nav-search a, .wy-side-nav-search a:visited {
-  color: white;
-}
-
+/*
+ * Blockquotes are "misused" as info blocks
+ */
 div[role="main"] blockquote {
   color: white;
   border: 1px solid #4f6e4f;
@@ -27,6 +25,10 @@ div[role="main"] blockquote {
   padding-left: 30px;
 }
 
+/*
+ * As the theme is using Font Awesome either way we can make use of it for
+ * displaying a small (i) icon.
+ */
 div[role="main"] blockquote::before {
   font-family: "FontAwesome";
   position: absolute;
@@ -37,23 +39,31 @@ div[role="main"] blockquote::before {
   content: "\f05a";
 }
 
-div[role="main"] blockquote p {
-  margin-bottom: 0px;
-}
-
-div[role="main"] blockquote a {
-  color: rgb(87, 87, 87);
-}
+/*
+ * The parser adds a paragraph inside the blockquote, so we have to remove the
+ * bottom margin on these.
+ */
+div[role="main"] blockquote p { margin-bottom: 0px; }
 
+/*
+ * Links in these boxes should have different colours.
+ */
+div[role="main"] blockquote a { color: rgb(87, 87, 87); }
 div[role="main"] blockquote a:hover {
   color: rgb(87, 87, 87);
   text-decoration: underline;
 }
 
-.wy-side-nav-search, .wy-nav-top {
-  background-color: rgb(28, 178, 126);
-}
+/*
+ * Mobile ready navbar
+ */
+.wy-side-nav-search, .wy-nav-top { background-color: rgb(28, 178, 126); }
+.wy-menu-vertical a:active { background-color: rgb(28, 178, 126); }
 
-.wy-menu-vertical a:active {
-  background-color: rgb(28, 178, 126);
-}
+/*
+ * This is an animation so that the switching of the nav on mobile is smooth
+ */
+.wy-nav-side, .wy-nav-content-wrap { transition: 0.5s left ease; }
+
+/* We have to preset the div with left 0 for the animation to work */
+.wy-nav-content-wrap { left: 0%; }

docs/index.md

@@ -6,36 +6,40 @@ Thank you for choosing Zettlr as your reliable writing companion. On these pages
 
 To see how to install Zettlr on your system, please consult the [setup instructions](install.md). It is also recommended to set up Pandoc and LaTeX right away to enable all importing and exporting functionality of Zettlr. Don't worry, it's really easy!
 
-When you're set, choose an entry-point into the documentation:
-
-## Quick Start
-
 Don't want to waste time? Head over to our [very-quick start guide "Zettlr in 5 Minutes"](5-minutes.md)! After five minutes you'll know everything you need to know.
 
 ## Guides
 
 Have a look at our user guides so that you can learn all workflows. The guides are not focused around features, they are focused around workflows. Here you can read about popular workflows, step by step.
 
-Setting up Zettlr as a note-taking app can replace solutions based on quick entry such as **Evernote**, **OneNote**, or **Bear**. A Zettelkasten setup can replace apps such as **Bear**, **The Archive** or workflows combining several apps, such as **nvALT**. Enabling all features will turn Zettlr into serious competition for **Ulysses**.
-
 * [Use Zettlr as a note taking app](guide-notes.md)
 * [Use Zettlr as a Zettelkasten system](guide-zettelkasten.md)
 * [Use Zettlr as a full IDE](guide-ide.md)
 
-## Components
+## Core
 
 Everyone can become very quick and efficient at his or her workflow, but can you really excel without a deep knowledge about how certain features work? Shortcuts to mundane tasks and key combinations for speeding up common tasks as well as hidden features of Zettlr are explained in the rest of the documentation. Learn how to move whole paragraphs around with two clicks or how to link to websites with only one click in these advanced guides.
 
-* [Learn about all settings](settings.md)
-* [The editor](editor.md)
-* [Understanding the file list](file-list.md)
-* [Using the global search](search.md)
-* [Exporting your files](export.md)
-* [Making use of projects](projects.md)
-* [A handy list of all shortcuts](shortcuts.md)
-* [Virtual directories](virtual-directories.md)
+* [The Editor](editor.md)
+* [Markdown Basics](markdown-basics.md)
+* [The File List](file-list.md)
+* [Searching](search.md)
+* [Exporting with Zettlr](export.md)
+* [Virtual Directories](virtual-directories.md)
+* [Custom CSS](custom-css.md)
+* [Localisation](localisation.md)
+
+## Academic Tools
+
+Zettlr has been developed with academic writing in mind. Therefore, it offers a lot of powerful tools to help you write academic texts right out of the box. You can explore the possibilities of Zettlr as an academic editor by browsing this category.
+
+* [Citations](citations.md)
+* [Projects](projects.md)
+* [Presentations](presentations.md)
+* [Pomodoro Timer](pomodoro.md)
+* [Zettelkasten Methods](zkn-method.md)
 
-## Localisation and Translation
+## Get involved!
 
 Currently, Zettlr is only available in a handful of languages. But according to the internet™, there are [roughly 6,500 spoken languages](https://www.infoplease.com/askeds/how-many-spoken-languages) on the world. So any help is welcome in translating the app. You can download all languages that have already been translated over at our [translation page](https://translate.zettlr.com/) and even get into into translating it yourself! **Do you want to translate the app into a language that is not offered at the page? Simply [drop us a note](mailto:[email protected]), and we'll add it**!
 

mkdocs.yml

@@ -9,28 +9,32 @@ site_dir: build
 extra_css:
   - assets/app.css
 nav:
-  - Home: index.md
+  - Welcome: index.md
   - Setup: install.md
   - Quick Start: 5-minutes.md
-  - Zettlr as a note taking app: guide-notes.md
-  - Zettlr as a Zettelkasten: guide-zettelkasten.md
-  - Zettlr as an IDE: guide-ide.md
-  - The Editor: editor.md
-  - Markdown Basics: markdown-basics.md
-  - The File List: file-list.md
-  - Searching: search.md
-  - Settings: settings.md
-  - Exporting: export.md
-  - Citations: citations.md
-  - Projects: projects.md
-  - Virtual Directories: virtual-directories.md
-  - Custom CSS: custom-css.md
-  - Localisation: localisation.md
-  - Pomodoro Timer: pomodoro.md
-  - Presentations: presentations.md
-  - Shortcuts: shortcuts.md
-  - Spell Checking: spell-checking.md
-  - Zettelkasten Methods: zkn-method.md
+  - Guides:
+    - Zettlr as a note taking app: guide-notes.md
+    - Zettlr as a Zettelkasten: guide-zettelkasten.md
+    - Zettlr as an IDE: guide-ide.md
+  - Core:
+    - The Editor: editor.md
+    - The File List: file-list.md
+    - Searching: search.md
+    - Exporting: export.md
+    - Virtual Directories: virtual-directories.md
+    - Custom CSS: custom-css.md
+    - Localisation: localisation.md
+  - Academic Tools:
+    - Citations: citations.md
+    - Projects: projects.md
+    - Zettelkasten Methods: zkn-method.md
+    - Presentations: presentations.md
+    - Pomodoro Timer: pomodoro.md
+  - References:
+    - Shortcuts: shortcuts.md
+    - Markdown Basics: markdown-basics.md
+    - Settings: settings.md
+    - Spell Checking: spell-checking.md
   - Get involved: get-involved.md
   - FAQ: faq.md
 theme:
@@ -40,6 +44,7 @@ theme:
     - javascript
     - css
     - yaml
+    - tex
 markdown_extensions:
     - toc:
         permalink: True