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.

_sass/styles.scss

@@ -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;

css/download_change.css

@@ -133,3 +133,6 @@
     margin-top: 50px;
   }
 }
+.fixpad {
+  margin: 10px;
+}

download.html

@@ -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>