Dark mode (#66)

exampleSite/content/features/_index.html

@@ -0,0 +1,4 @@
+---
+title: Features
+weight: -15
+---

exampleSite/content/features/code-blocks.md

@@ -0,0 +1,91 @@
+There are multiple ways to add code blocks. Most of them works out of the box only the Hugo shortcode `<highlight>` need some configuration to work properly.
+
+{{< toc >}}
+
+## Inline code
+
+To display an inline shortcode use single quotes:
+
+```plain
+`some code`
+```
+
+**Example:** `some code`
+
+## Code blocks
+
+Code blocks can be uses without language specification:
+
+````markdown
+```
+some code
+```
+````
+
+**Example:**
+
+```plain
+some code
+```
+
+... or if you need language specific syntax highlighting:
+
+````markdown
+```Shell
+# some code
+echo "Hello world"
+```
+````
+
+**Example:**
+
+```Shell
+# some code
+echo "Hello World"
+```
+
+## Highlight shortcode
+
+Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:
+
+{{< tabs "uniqueid" >}}
+{{< tab "TOML" >}}
+
+```TOML
+pygmentsUseClasses=true
+pygmentsCodeFences=true
+```
+
+{{< /tab >}}
+{{< tab "YAML" >}}
+
+```YAML
+pygmentsUseClasses: true
+pygmentsCodeFences: true
+```
+
+{{< /tab >}}
+{{< /tabs >}}
+
+You can use it like every other shortcode:
+
+<!-- prettier-ignore -->
+```markdown
+{{</* highlight Shell "linenos=table" */>}}
+# some code
+echo "Hello World"
+{{</* /highlight */>}}
+```
+
+**Example:**
+
+<!-- markdownlint-disable -->
+
+<!-- prettier-ignore-start -->
+{{< highlight Shell "linenos=table" >}}
+# some code
+echo "Hello World"
+{{< /highlight >}}
+<!-- prettier-ignore-end-->
+
+<!-- markdownlint-enable -->

exampleSite/content/features/dark-mode/_index.md

@@ -0,0 +1,13 @@
+---
+title: Dark Mode
+---
+
+Say hello to the dark mode of the Geekdoc theme!
+
+[![Geekdoc in dark mode](images/geekdoc-dark.png)](images/geekdoc-dark.png)
+
+The dark mode can be used in two different ways. If you have JavaScript disabled in your browser, the dark mode automatically detects the preferred system settings via the `prefers-color-scheme` parameter. Depending on the value, the theme will automatically switch between dark and light mode if this feature is supported by your operating system and browser.
+
+The second mode requires JavaScript and is controlled by a dark mode switch in the upper right corner. You can switch between three modes: Auto, Dark and Light. Auto mode works the same as the first method mentioned above and automatically detects the system setting. Dark and Light modes allow you to force one of them for your Geekdoc page only, regardless of the system setting. This works even if your browser or operating system does not support the system setting. The current selection is stored locally via the Web Storage API.
+
+To avoid very bright spots often caused by images while using the dark mode we have added an optional auto-dim feature that can be enabled with the side parameter `geekdocDarkModeDim` (see [Configuration](/usage/configuration/)). As this may have an impact on the quality of the images it is disabled by default.

exampleSite/content/features/icon-sets.md

@@ -0,0 +1,48 @@
+---
+title: Icon Sets
+---
+
+{{< toc >}}
+
+## Custom icon sets
+
+The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome. If the framework don't provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be [svgsprit.es](https://svgsprit.es/).
+
+Regardless of which tool (or existing sprite) you choose, there are a few requirements that must be met:
+
+1. The sprite must be a valid **SVG** file.
+2. You have to ensure to **hide the sprite**. Apply the predefined class `svg-sprite` or `hidden` to the root element of your sprite or add a small piece of inline CSS e.g. `style="display: none;"`.
+3. Save the sprite to the folder `assets/sprites` right beside your `content` folder.
+
+The result of a valid minimal SVG sprite file could look like this:
+
+```XML
+<svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol viewBox="-2.29 -2.29 28.57 28.57" id="arrow_back" xmlns="http://www.w3.org/2000/svg">
+        <path d="M24 10.526v2.947H5.755l8.351 8.421-2.105 2.105-12-12 12-12 2.105 2.105-8.351 8.421H24z"/>
+    </symbol>
+</svg>
+```
+
+**Example:**
+
+FontAwesome provides three pre-build sprites included in the regular Web download pack, `sprites/brands.svg`, `sprites/regular.svg` and `sprites/solid.svg`. Choose your sprite to use and copy it to your projects root directory into `assets/sprites`, right beside your `content` folder:
+
+```Bash
+my_projcet/
+├── assets
+│   └── sprites
+│       └── regular.svg
+├── config.yaml
+├── content
+│   ├── _index.md
+│   ├── ...
+```
+
+That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icon/) available.
+
+## Build-in icons
+
+The theme bundles just a small set of hand crafted icons.
+
+{{< sprites >}}

exampleSite/content/features/theming/_index.md

@@ -0,0 +1,15 @@
+If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
+
+All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
+
+[![Beach Color Palette](images/theme-example.png)](images/theme-example.png)
+
+**Custom CSS:**
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+Happy customizing!