Download: Add derivatives page

To help users new to the Linux world, and are not yet familiar with what
their OS is based on.

_layouts/derivatives.html

@@ -0,0 +1,31 @@
+---
+layout: default
+---
+<article class="wrapper transition-fade">
+
+    <header>
+        <h1 class="page-title">{{ page.title | escape }}</h1>
+    </header>
+
+    {{ content }}
+
+    <div class="row">
+        <div class="col distros">
+            {% assign sorted_distros = page.distros | sort: 'name' %}
+            {% for distro in sorted_distros %}
+                <a id="{{ distro.name | replace: ' ','_' }}" class="distro {% if distro.community == true %}community{% endif %}" href="{{ distro.link }}" onclick="download_selected(this)" style="--distro-accent: rgb({{ distro.accent }})">
+                    <img src="/assets/img/distros/{{ distro.icon }}" alt="{{ distro.name }} logo"/>
+                    <span>{{ distro.name }}</span>
+                </a>
+            {% endfor %}
+        </div>
+    </div>
+
+    <p class="center">
+        <a href="../" class="btn">
+            {% include svg/arrow-left.svg %}
+            Back to Downloads
+        </a>
+    </p>
+
+</article>

_layouts/downloads.html

@@ -7,6 +7,8 @@
         <h1 class="page-title">{{ page.title | escape }}</h1>
     </header>
 
+    {{ content }}
+
     <div id="unsupported-os" style="display:none" hidden>
         <img id="unsupported-os-img" src="" alt=""/>
         <div>
@@ -30,6 +32,11 @@ <h2>Your operating system is not supported yet</h2>
         </div>
     </div>
 
-    {{ content }}
+    <p class="center">
+        <a href="/download/derivatives/" class="btn">
+            {% include svg/magnifying-glass.svg %}
+            Not listed?
+        </a>
+    </p>
 
 </article>

_sass/buttons.scss

@@ -48,12 +48,23 @@
     }
 
     /* Icons */
-    img {
+    img,
+    svg {
         height: 24px;
         width: 24px;
         margin: auto;
         margin-right: 0.25em;
     }
+
+    svg {
+        height: 16px;
+        width: 16px;
+        margin-right: 0.5em;
+
+        path {
+            fill: $button-text;
+        }
+    }
 }
 
 .btn.ext {

pages/download.md

@@ -4,6 +4,3 @@ title: Download
 permalink: /download/
 class: download
 ---
-
-{:.center}
-[View Source Code]({{ site.polychromatic_repo }}){:.btn .ext}

pages/download/40-ubuntu.md

@@ -8,15 +8,6 @@ distro_accent: '225,63,32'
 class: download
 ---
 
-Ubuntu includes derivatives like:
-
-* Ubuntu 18.04 (all flavours) or later
-* Linux Mint 19 or later
-* elementaryOS 0.4 or later
-* KDE Neon
-* Pop!_OS 20.04 or later
-* Zorin OS 11 or later
-
 {% capture stable %}
 
 To add the repository and install, open the Terminal:

pages/download/derivatives.md

@@ -0,0 +1,44 @@
+---
+layout: derivatives
+title: Find Distro
+permalink: /download/derivatives/
+class: download
+
+distros:
+    - name: EndeavourOS
+      link: /download/arch/
+      icon: endeavouros.svg
+      accent: '102,50,153'
+
+    - name: Manjaro
+      link: /download/arch/
+      icon: manjaro.svg
+      accent: '42,153,74'
+
+    - name: Linux Mint
+      link: /download/ubuntu/
+      icon: mint.svg
+      accent: '135,207,62'
+
+    - name: elementary OS
+      link: /download/ubuntu/
+      icon: elementary.svg
+      accent: '126,128,135'
+
+    - name: KDE Neon
+      link: /download/ubuntu/
+      icon: kde-neon.svg
+      accent: '22,148,126'
+
+    - name: Pop!_OS
+      link: /download/ubuntu/
+      icon: pop_os.png
+      accent: '58,148,159'
+
+    - name: Zorin OS
+      link: /download/ubuntu/
+      icon: zorin_os.png
+      accent: '0,142,204'
+---
+
+You might be running one of these. These links will take you to the page that your distro is based on.