Merge branch 'rewamp-download' into 'master'

Rewamp download page

See merge request !7

assets/img/ark.svg

+<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="a" y1="543.8" y2="503.8" x2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.125 0 0 1-51.07 0)">
+   <stop stop-color="#c6cdd1"/>
+   <stop offset="1" stop-color="#e0e5e7"/>
+  </linearGradient>
+  <linearGradient id="b" y1="543.8" y2="503.8" x2="0" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#1d1e1e"/>
+   <stop offset="1" stop-color="#44484c"/>
+  </linearGradient>
+  <linearGradient xlink:href="#a" id="c" y1="506.8" y2="504.8" x2="0" gradientUnits="userSpaceOnUse"/>
+  <linearGradient xlink:href="#a" id="d" y1="508.8" y2="506.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="e" y1="510.8" y2="508.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="f" y1="512.8" y2="510.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="g" y1="514.8" y2="512.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="h" y1="516.8" y2="514.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="i" y1="518.8" y2="516.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="j" y1="520.8" y2="518.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="k" y1="523.8" y2="520.8" gradientUnits="userSpaceOnUse" x2="0"/>
+  <linearGradient xlink:href="#a" id="l" y1="33" y2="25" x2="0" gradientUnits="userSpaceOnUse"/>
+  <linearGradient id="m" y1="7" x1="10" y2="32" x2="35" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#383e51"/>
+   <stop offset="1" stop-color="#655c6f" stop-opacity="0"/>
+  </linearGradient>
+ </defs>
+ <g transform="translate(-384.57-499.8)">
+  <g stroke-opacity=".55" stroke-width="2.8">
+   <rect width="36" x="390.57" y="503.8" fill="url(#a)" height="40"/>
+   <rect width="8" x="404.57" y="503.8" fill="url(#b)" height="40"/>
+  </g>
+  <path opacity=".2" fill="url(#m)" fill-rule="evenodd" d="m28 7v3h-3l3 3v1h-3l3 3v1h-3l3 3v1h-3l17 17v-18l-2-2zm-2 18v4h-1v4h-2l11 11h8v-3l-2-2z" transform="translate(384.57 499.8)"/>
+  <g stroke-opacity=".55" stroke-width="2.8">
+   <path fill="url(#c)" d="m404.57 504.8v3h3v-1h1v-1h-1v-1z"/>
+   <path fill="url(#d)" d="m412.57 506.8v3h-3v-1h-1v-1h1v-1z"/>
+   <path fill="url(#e)" d="m404.57 508.8v3h3v-1h1v-1h-1v-1z"/>
+   <path fill="url(#f)" d="m412.57 510.8v3h-3v-1h-1v-1h1v-1z"/>
+   <path fill="url(#g)" d="m404.57 512.8v3h3v-1h1v-1h-1v-1z"/>
+   <path fill="url(#h)" d="m412.57 514.8v3h-3v-1h-1v-1h1v-1z"/>
+   <path fill="url(#i)" d="m404.57 516.8v3h3v-1h1v-1h-1v-1z"/>
+   <path fill="url(#j)" d="m412.57 518.8v3h-3v-1h-1v-1h1v-1z"/>
+   <path fill="url(#k)" d="m404.57 520.8v3h3v-1h1v-1h-1v-1z"/>
+   <path fill="url(#l)" d="m22 25v4h1v4h2v-4h1v-4zm1 1h2v2h-2z" transform="translate(384.57 499.8)"/>
+   <rect width="36" x="390.57" y="542.8" fill="#99a1a7" height="1"/>
+  </g>
+ </g>
+</svg>

assets/img/git.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 122.52 122.52"
+   height="122.52"
+   width="122.52"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,122.52)"
+     id="g10"><g
+       transform="scale(0.1)"
+       id="g12"><path
+         id="path14"
+         style="fill:#f05033;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 901.543,500.352 500.352,901.527 c -23.094,23.11 -60.567,23.11 -83.692,0 L 333.359,818.211 439.031,712.535 c 24.563,8.293 52.727,2.727 72.297,-16.847 19.688,-19.696 25.203,-48.102 16.699,-72.75 L 629.883,521.094 c 24.648,8.496 53.066,3.004 72.754,-16.711 27.5,-27.492 27.5,-72.059 0,-99.574 -27.52,-27.516 -72.078,-27.516 -99.61,0 -20.683,20.703 -25.8,51.097 -15.312,76.582 l -95,94.992 V 326.414 c 6.699,-3.32 13.027,-7.742 18.613,-13.312 27.5,-27.497 27.5,-72.059 0,-99.598 -27.5,-27.488 -72.09,-27.488 -99.57,0 -27.5,27.539 -27.5,72.101 0,99.598 6.797,6.789 14.668,11.925 23.066,15.363 v 252.281 c -8.398,3.438 -16.25,8.531 -23.066,15.367 -20.828,20.821 -25.84,51.395 -15.156,76.977 L 292.422,777.285 17.3242,502.211 c -23.10545,-23.129 -23.10545,-60.602 0,-83.711 L 418.535,17.3242 c 23.098,-23.10545 60.559,-23.10545 83.692,0 L 901.543,416.641 c 23.113,23.113 23.113,60.605 0,83.711" /></g></g></svg>
\ No newline at end of file

css/main.scss

@@ -31,3 +31,11 @@
   background-position: center;
   background-image: url(https://kde.org/content/develop/devApps.png);
 }
+
+.distribution-table h2 {
+  margin-top: 0;
+}
+
+.distribution-table img {
+  width: initial;
+}

download.html

 ---
-layout: default
+layout: page
 title: Download
-plateforms:
+sources:
   - name: Linux Desktop
     description: >
       KDE Connect Desktop Component is available in all major distribution
-      packet managers. Non-Plasma users like Gnome and AppIndicator supported
+      package managers. [Plasma](https://kde.org/plasma-desktop) supports KDE Connect
+      out of the box. Non-Plasma users like Gnome and AppIndicator supported
       desktop users have various ways to enhance their experience like
-      <a href="https://extensions.gnome.org/extension/1319/gsconnect/">GSConnect</a>
+      [GSConnect](https://extensions.gnome.org/extension/1319/gsconnect/)
       which implements the KDE Connect protocol in GNOME and uses our android
       application, and
-      <a href="https://github.com/Bajoja/indicator-kdeconnect">indicator-kdeconnect</a>
+      [indicator-kdeconnect](https://github.com/Bajoja/indicator-kdeconnect)
       is available for AppIndicator supported Desktops.
     image:
-      webp: assets/img/tux.webp
-      png: assets/img/tux.png
+      png: /assets/img/tux.png
     learn-more:
       text: Instructions for Linux
       link: https://userbase.kde.org/KDEConnect#Installation
   - name: Android
     description: >
-      KDE Connect Android App is available on both Google Play Store and on
-      the Open Source <a href="https://f-droid.org/packages/org.kde.kdeconnect_tp/">F-Droid Store</a>.
+      KDE Connect Android App is available on both <a href="https://play.google.com/store/apps/details?id=org.kde.kdeconnect_tp">
+      Google Play Store</a> and on the Open Source <a href="https://f-droid.org/packages/org.kde.kdeconnect_tp/">F-Droid Store</a>.
     image:
-      webp: assets/img/google-play-badge.webp
-      png: assets/img/google-play-badge.png
-    learn-more:
-      text: Get it from Play Store
-      link: https://play.google.com/store/apps/details?id=org.kde.kdeconnect_tp
+      png: assets/img/android.png
   - name: Plasma Mobile
     description: >
       A mobile friendly interface, targeted at mobile
@@ -35,127 +31,77 @@ plateforms:
     image:
       png: assets/img/plasma.png
       webp: assets/img/plasma.webp
-    learn-more:
-      text: Instructions for Plasma Mobile
-      link: https://community.kde.org/KDEConnect#Mobile-Friendly_QML_App
   - name: SailfishOS
     description: >
-      KDE Connect is available for SailfishOS in openrepos.net.
+      KDE Connect is available for SailfishOS in [openrepos.net](https://openrepos.net/content/r1tschy/sailfish-connect).
     image:
       webp: assets/img/SailfishOS_logo.webp
       png: assets/img/SailfishOS_logo.png
     image-dark:
       webp: assets/img/SailfishOS_logo-dark.webp
       png: assets/img/SailfishOS_logo-dark.png
-    learn-more:
-      text: Get it for SailfishOS
-      link: https://openrepos.net/content/r1tschy/sailfish-connect
   - name: Windows
     description: >
-      An early release of KDE Connect on Windows is available as well as binary packages and build instructions.
-    image:
-      webp: assets/img/windows.webp
-      png: assets/img/windows.png
-    learn-more:
-      text: Get it for Windows
-      link: https://binary-factory.kde.org/job/kdeconnect-kde_Release_win64/
+      An early release of KDE Connect on Windows is available as well as [binary packages](https://binary-factory.kde.org/job/kdeconnect-kde_Release_win64/).
   - name: macOS
     description: >
-      An early release version for Mac OS.
-    image:
-      png: assets/img/mac.png
-      webp: assets/img/mac.webp
-    image-dark:
-      webp: assets/img/mac-dark.webp
-      png: assets/img/mac-dark.png
-    learn-more:
-      text: Instructions for Mac OS
-      link: https://community.kde.org/KDEConnect/Build_MacOS
+      An early release version for Mac OS can be build following these [instructions](https://community.kde.org/KDEConnect/Build_MacOS).
   - name: Source code
     description: >
-      KDE Connect Source Code can be viewed using cgit. Source Code is
-      available for all OS.
+      KDE Connect git repository can be viewed using [KDE's GitLab instance](https://invent.kde.org/kde/kdeconnect-kde).
+      To clone KDE Connect, use `git clone https://invent.kde.org/kde/kdeconnect-kde.git`. For detailed instructions on
+      how to build KDE Connect from source, check the [Get Involved](/get-involved.html) page
     image:
-      png: assets/img/git.png
-      webp: assets/img/git.webp
+      png: /assets/img/git.svg
     learn-more:
       text: Browse Code
       link: https://cgit.kde.org/kdeconnect
----
 
-<section class="topkonqi">
-  <h3 class="p-4">KDE Connect is on all major platforms.</h3>
-  <picture>
-    <source srcset="assets/img/downloadskonqi.webp" type="image/webp" />
-    <source srcset="assets/img/downloadskonqi.png" type="image/png" />
-    <img
-      alt="Downloads Header"
-      class="img-fluid"
-      src="assets/img/downloadskonqi.png"
-    />
-  </picture>
-</section>
+trademarks:
+  - "The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."
 
-<section id="plateform" class="container">
-  {% for plateform in page.plateforms %}
-  <div class="block pt-4 pb-4 OSBlock">
-    <div class="kAppInfo">
-      <div class="kAppInfo-content">
-        <h2 class="down-head mt-2">{{ plateform.name }}</h2>
-        <p class="down-par">
-          {{ plateform.description }}
-        </p>
-        <a
-          class="button learn-more getbutton mb-2"
-          href="{{ plateform.learn-more.link }}"
-        >
-          {{ plateform.learn-more.text }}
-        </a>
-      </div>
 
-      {% if plateform.image-dark %}
-      <picture>
-        <source
-          media="(prefers-color-scheme: dark)"
-          srcset="{{ plateform.image-dark.webp }}"
-        />
-        <source
-          media="(prefers-color-scheme: dark)"
-          srcset="{{ plateform.image-dark.png }}"
-        />
-        <source
-          media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
-          srcset="{{ plateform.image.webp }}"
-        />
-        <source
-          media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
-          srcset="{{ plateform.image.png }}"
-        />
-        <img
-          class="img-fluid"
-          src="{{ plateform.image.png }}"
-          alt="{{ plateform.name }}"
-        />
-      </picture>
-      {% else %}
-      <picture>
-        <source srcset="{{ plateform.image.webp }}" type="image/webp" />
-        <source srcset="{{ plateform.image.png }}" type="image/png" />
-        <img
-          alt="{{ plateform.name }}"
-          class="img-fluid"
-          src="{{ plateform.image.png }}"
-        />
-      </picture>
-      {% endif%}
-    </div>
+---
+
+<h1>Download</h1>
+
+<div class="distribution-table">
+{% for source in page.sources %}
+<div class="d-flex mt-4">
+  <div style="min-width: 80px; max-width: 80px;" class="mr-3">
+   {% if source.image %}
+     {% if source.image.webp %}
+       <picture class="w-100">
+         <source srcset="{{ source.imgage.webp }}" type="image/webp" />
+         <source srcset="{{ source.image.png }}" type="image/png" />
+         <img
+           alt="{{ source.name }} icon"
+           class="img-fluid"
+           src="{{ source.image.png }}"
+         />
+       </picture>
+     {% else %}
+       <img
+         alt="{{ source.name }} icon"
+         class="img-fluid w-100"
+         src="{{ source.image.png }}"
+       />
+     {% endif %}
+   {% endif %}
   </div>
-  {% endfor %}
-</section>
+  <div>
+    <h2>{{ source.name }}</h2>
+    {{ source.description | markdownify }}
+  </div>
+</div>
+{% endfor %}
+</div>
 
-<div class="card-deck text-center downloadgroup m-5">
+<h2>Get Started</h2>
+
+<div class="card-deck text-center downloadgroup mb-5 mt-5">
   <div class="card">
-    <div class="card-body">
+    <div class="card-body d-flex flex-column justify-content-between">
       <h4 class="card-title titlecard">Pairing Two Devices</h4>
       <p class="card-text titlepar">
         Paiting two devices is the first step in using KDE Connect.
@@ -169,21 +115,23 @@ plateforms:
     </div>
   </div>
   <div class="card">
-    <div class="card-body">
-      <h4 class="card-title titlecard">Features</h4>
-      <p class="card-text titlepar">
-        A list of cool features that are there in KDE Connect.
-      </p>
+    <div class="card-body d-flex flex-column justify-content-between">
+      <div>
+        <h4 class="card-title titlecard">Features</h4>
+        <p class="card-text titlepar">
+          A list of all features that are there in KDE Connect.
+        </p>
+      </div>
       <a class="card-link" href="https://userbase.kde.org/KDEConnect#Overview">
         <button class="button learn-more" type="button">Learn More</button>
       </a>
     </div>
   </div>
   <div class="card">
-    <div class="card-body">
-      <h4 class="card-title titlecard">Trouble Shooting</h4>
+    <div class="card-body d-flex flex-column justify-content-between">
+      <h4 class="card-title titlecard">Troubleshooting</h4>
       <p class="card-text titlepar">
-        Still having issues? We have a trouble shooting section with all the
+        Still having issues? We have a troubleshooting section with all the
         commons issues.
       </p>
       <a
@@ -195,3 +143,7 @@ plateforms:
     </div>
   </div>
 </div>
+
+{% for trademark in page.trademarks %}
+  <p><small>{{ trademark }}</small></p>
+{% endfor %}