Add an environment overview page and re-order the menu

To reduce the confusion a bit when users are confronted with 5 launchers
after the install

Author: lazka

Diff for: mkdocs.yml

@@ -59,8 +59,9 @@ nav:
         # For users of MSYS2 which just use the provided software
         # or develop their software using MSYS2 provided packages/tools.
         - docs/what-is-msys2.md
-        - docs/ci.md
         - docs/who-is-using-msys2.md
+        - docs/environments.md
+        - docs/ci.md
         - docs/terminals.md
         - docs/package-management.md
         - docs/filesystem-paths.md

Diff for: web/docs/clang64.png

@@ -0,0 +1,25 @@
+# Environments
+
+MSYS2 comes with different environments/subsystems and the first thing you have
+to decide is which one to use. The differences between the environments is
+mainly between environment variables, default compilers/linkers, architecture,
+system libraries used etc. If you are unsure, go with **MINGW64**.
+
+The **MSYS** environment contains the unixy/cygwin based tools, lives under
+`/usr` and is special in that it is always active. All the other environments
+inherit from the **MSYS** one and add various things on top of it.
+
+For example in the **MINGW64** environment your `$PATH` starts with
+`/mingw64/bin:/usr/bin` so you get all mingw64 based tools as well as all msys
+tools.
+
+## Overview
+
+|| Name | Prefix | Toolchain | Architecture | C Library | C++ Library |
+| - |-  |-       |-|-|-|-|
+| ![msys](msys.png){: style="max-width:25px" } | **MSYS** | `/usr` | gcc | x86_64 | cygwin | cygwin |
+| ![mingw64](mingw64.png){: style="max-width:25px" } | **MINGW64** | `/mingw64` | gcc | x86_64 | msvcrt | libstdc++ |
+| ![ucrt64](ucrt64.png){: style="max-width:25px" } | **UCRT64** | `/ucrt64` | gcc | x86_64 | ucrt | libstdc++ |
+| ![clang64](clang64.png){: style="max-width:25px" } | **CLANG64** | `/clang64` | llvm | x86_64 | ucrt | libc++ |
+| ![mingw32](mingw32.png){: style="max-width:25px" } | **MINGW32** | `/mingw32` |  gcc | i686  | msvcrt | libstdc++ |
+

Diff for: web/docs/environments.md

@@ -32,8 +32,10 @@
 .md-typeset code {
     background-color: #fafafa;
     border: 1px solid #ddd;
-    padding: 0.1em 0.25em;
+    padding: 0.05em 0.25em;
     box-shadow: none;
+    word-break: normal;
+    color: var(--md-code-hl-name-color);
 }
 
 .md-typeset h2 {
@@ -93,6 +95,10 @@ table, .admonition {
     background-color: #fafafa;
 }
 
+.md-typeset table tr th {
+    min-width: 0 !important;
+}
+
 .md-header, .md-footer, .md-nav__source {
     background-color: var(--msys2-dark-bg) !important;
 }