Commit c4cfe726 authored by Carl Schwan's avatar Carl Schwan 🚴

Rewamp download page

parent 72badc46
<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>
<?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
assets/img/tux.png

96.7 KB | W: | H:

assets/img/tux.png

11.6 KB | W: | H:

assets/img/tux.png
assets/img/tux.png
assets/img/tux.png
assets/img/tux.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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;
}
---
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 %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment