Commit 9ace7555 authored by Arjun Thekoot Harisankar's avatar Arjun Thekoot Harisankar 💻

Simplified the Downloads Page for easy expansion using Jekyll. Updated the CSS...

Simplified the Downloads Page for easy expansion using Jekyll. Updated the CSS to avoid some issues on home page due to edit in text and updated an image.
parent 779e7b0d
......@@ -104,14 +104,14 @@
text-align: center;
h3 {
font-size: 25px;
font-size: 20px;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
}
h4 {
font-size: 20px;
font-size: 16px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
......@@ -129,7 +129,7 @@
@media (min-width: 768px) {
.product-in h4 {
font-size: 25px;
font-size: 20px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
......
assets/img/plasmaint.png

72.5 KB | W: | H:

assets/img/plasmaint.png

69.8 KB | W: | H:

assets/img/plasmaint.png
assets/img/plasmaint.png
assets/img/plasmaint.png
assets/img/plasmaint.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -133,3 +133,6 @@
margin-top: 50px;
}
}
.fixpad {
margin: 10px;
}
......@@ -43,7 +43,7 @@ plateforms:
link: https://openrepos.net/content/piggz/kde-connect
- name: Windows
description: >
KDE Connect works fairly well on Windows. Build following the detailed instructions.
KDE Connect works fairly well on Windows. Build following the detailed instructions.
image:
webp: assets/img/windows.webp
png: assets/img/windows.png
......@@ -87,79 +87,112 @@ plateforms:
<section class="topkonqi">
<h3>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"/>
<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>
<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">{{ plateform.name }}</h2>
<p class="down-par" >
{{ plateform.description }}
</p>
<a class="button learn-more getbutton" 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 class="block pt-4 pb-4 OSBlock">
<div class="kAppInfo">
<div class="kAppInfo-content">
<h2 class="down-head">{{ plateform.name }}</h2>
<p class="down-par">
{{ plateform.description }}
</p>
<a
class="button learn-more getbutton"
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>
</div>
{% endfor %}
</container>
</section>
<div class="card-deck text-center downloadgroup">
<div class="card">
<div class="card-body">
<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.
</p>
<a class="card-link" href="https://userbase.kde.org/KDEConnect#Pairing_two_devices_together">
<button class="button learn-more" type="button">Learn More</button>
</a>
</div>
<div class="card">
<div class="card-body">
<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.
</p>
<a
class="card-link"
href="https://userbase.kde.org/KDEConnect#Pairing_two_devices_together"
>
<button class="button learn-more" type="button">Learn More</button>
</a>
</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>
<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">Features</h4>
<p class="card-text titlepar">
A list of cool features that are there in KDE Connect.
</p>
<a class="card-link" href="https://userbase.kde.org/KDEConnect#Overview">
<button class="button learn-more" type="button">Learn More</button>
</a>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title titlecard">Trouble Shooting</h4>
<p class="card-text titlepar">
Still having issues? We have a trouble shooting section with all the commons issues.
</p>
<a class="card-link" href="https://community.kde.org/KDEConnect#Troubleshooting">
<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>
<p class="card-text titlepar">
Still having issues? We have a trouble shooting section with all the
commons issues.
</p>
<a
class="card-link"
href="https://community.kde.org/KDEConnect#Troubleshooting"
>
<button class="button learn-more" type="button">Learn More</button>
</a>
</div>
</div>
</div>
This diff is collapsed.
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