docs: cleanup #188

exampleSite/content/_index.en.md

@@ -47,4 +47,4 @@ This theme is licensed under the [MIT License](https://github.com/McShelby/hugo-
 
 ## Credits
 
-This theme would not be possible without the work of many others. See the [credits]({{%relref "credits" %}}) for a detailed list.
+This theme would not be possible without the work of many others. See the [credits]({{%relref "more/credits" %}}) for a detailed list.

exampleSite/content/basics/customization/_index.en.md

@@ -45,126 +45,22 @@ If you need to change this default behavior, create a new file in `layouts/parti
 <link rel="icon" href="/images/favicon.bmp" type="image/bmp" />
 ```
 
-## Change default colors {#theme-variant}
+## Change the colors {#theme-variant}
 
-The Relearn theme let you choose between some predefined color scheme variants, but feel free to add one yourself!
+The Relearn theme lets you choose between some predefined color variants, but feel free to add one yourself!
 
-### Standard variant
+You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.
+
+### Single variant
+
+Set the `themeVariant` value with the name of your theme file. That's it!
 
 ```toml
 [params]
-  # Change default color scheme with a variant one.
-  themeVariant = "" # or themeVariant = "relearn" or themeVariant = "relearn-light"
+  themeVariant = "relearn-light"
 ```
 
-![Standard variant](images/standard-variant.png?width=60pc)
-
-### Standard dark variant
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "relearn-dark"
-```
-
-![Dark variant](images/standard-dark-variant.png?width=60pc)
-
-### Learn variant
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "learn"
-```
-
-![Learn variant](images/learn-variant.png?width=60pc)
-
-### Red variant
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "red"
-```
-
-![Red variant](images/red-variant.png?width=60pc)
-
-### Blue variant
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "blue"
-```
-
-![Blue variant](images/blue-variant.png?width=60pc)
-
-### Green variant
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "green"
-```
-
-![Green variant](images/green-variant.png?width=60pc)
-
-### 'Mine‘ variant
-
-First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables.
-
-```css
-:root {
-    --MAIN-TEXT-color: #101010; /* Color of text by default */
-    --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #486ac9; /* Color of links */
-    --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
-    --MAIN-BG-color: #ffffff; /* color of text by default */
-
-    /* adjusted to relearn-light chroma style */
-    --CODE-BLOCK-color: #000000; /* fallback color for block code text */
-    --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */
-    --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */
-
-    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
-    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
-    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
-
-    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
-    --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */
-
-    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
-    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
-
-    --MENU-SEARCH-color: #efefef; /* Color of search field text */
-    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
-
-    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
-    --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
-    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color of links in menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
-
-    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
-
-    /* base styling for boxes */
-    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
-    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
-    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
-}
-```
-
-Then, set the `themeVariant` value with the name of your custom theme file. That's it!
-
-```toml
-[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "mine"
-```
+In the above exaple your theme file has to be named `theme-relearn-light.css`
 
 ### Multiple variants
 
@@ -177,5 +73,9 @@ You can also set multiple variants. In this case, the first variant is the defau
 ```
 
 {{% notice tip %}}
-If you want to switch the syntax highlightning theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/),  and `@import` this stylesheet in your color variant stylesheet. For an example, take a look into `theme-relearn-light.css` and `config.toml` of the exampleSite.
+If you want to switch the syntax highlightning theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/), and `@import` this stylesheet in your color variant stylesheet. For an example, take a look into `theme-relearn-light.css` and `config.toml` of the exampleSite.
 {{% /notice %}}
+
+### Roll your own
+
+If you are not happy with the shipped variants you can either copy one of the shipped files, edit them in a text editor and configure the `themeVariant` parameter in your `config.toml` or just use the [interactive variant generator]({{%relref "basics/generator" %}}).

exampleSite/content/basics/generator/_index.en.md

@@ -5,15 +5,15 @@ weight = 26
 
 This interactive tool may help you to generate your own color variant stylesheet.
 
-To get started, first select a color variant from the theme selector that fits you best as a starting point.
+To get started, first select a color variant from the variant switch that fits you best as a starting point.
 
 The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.
 
-The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn't overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.
+The arrowed lines reflects how colors are inherited thru different parts of the theme if the descendent isn't overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.
 
 To better understand this select the `neon` variant and modify the differnet heading colors. There, colors for the heading `h2`, `h3` and `h4` are explicitly set. `h5` is not set and inherits its value from `h4`. `h6` is also not set and inherits its value from `h5`.
 
-Once you've changed a color, the theme selector will show a "My custom variant" entry and your changes are stored. You can change pages and even close the browser without losing your changes.
+Once you've changed a color, the variant switch will show a "My custom variant" entry and your changes are stored in the browser. You can change pages and even close the browser without losing your changes.
 
 Once you are satisfied, you can download the new variants file and install it in your site.
 

exampleSite/content/basics/migration/_index.en.md

@@ -20,9 +20,9 @@ This document shows you what's new in the latest release. For a detailed list of
 
   This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and *Clear history* functionality).
 
-- **Breaking**: We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light greem menu header) as used in the official documentation.
+- **Breaking**: We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.
 
-  This change will only affect your installation if you've not set the `themeVariant` parameter in your `config.toml`. [If you still want to use the Learn color variant]({{%relref "basics/customization/#learn-variant" %}}), you have to explicitly set `themeVariant="learn"` in your `config.toml`.
+  This change will only affect your installation if you've not set the `themeVariant` parameter in your `config.toml`. [If you still want to use the Learn color variant]({{%relref "basics/customization/#theme-variant" %}}), you have to explicitly set `themeVariant="learn"` in your `config.toml`.
 
   Note, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.
 
@@ -30,15 +30,15 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - **New**: With this release you are now capable to define your own *dark mode* variants.
 
-  To make this possible, we have introduced a lot more color variables you can use in [your color variants]({{%relref "basics/customization/#mine-variant" %}}). Your old variants will still work and don't need to be changed as apropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.
+  To make this possible, we have introduced a lot more color variables you can use in [your color variants]({{%relref "basics/customization/#theme-variant" %}}). Your old variants will still work and don't need to be changed as apropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.
 
   To see what's now possible, see the new variants `relearn-dark` and `neon` that are coming with this release.
 
-- **New**: To make the creation of new variants easier for you, we've added a new interactive [theme variant generator]({{%relref "basics/generator" %}}).
+- **New**: To make the creation of new variants easier for you, we've added a new interactive [theme variant generator]({{%relref "basics/generator" %}}). This feature will not work with Internet Explorer 11.
 
 - **New**: You can now configure multiple color variants in your `config.toml`. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the [documentation]({{%relref "basics/customization/#multiple-variants" %}}) for configuration.
 
-  Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables.
+  Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.
 
 ## 2.9.0
 
@@ -106,7 +106,7 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 2.4.0
 
-- **Change**: Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included. The [documentation]({{%relref "basics/customization/#mine-variant" %}}) was adjusted accordingly.
+- **Change**: Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included.
 
 - **New**: Hidden pages are displayed by default in their according tags page. You can now turn off this behavior by setting `disableTagHiddenPages=true` in your `config.toml`.