added: direct download button ✨

_config.yml

@@ -8,6 +8,7 @@ page_title: Catima - The Libre Card Wallet # Automatically populates with app na
 appstore_link: # Automatically populates if not set and if iOS app ID is set. Otherwise enter manually.
 playstore_link: https://play.google.com/store/apps/details?id=me.hackerchick.catima # Enter Google Play Store URL.
 fdroid_link: https://f-droid.org/en/packages/me.hackerchick.catima/
+directDownload_link: https://github.com/TheLastProject/Catima/releases/latest/download/app-release.apk
 #presskit_download_link: https://emilbaehr.com # Enter a link to downloadable file or (e.g. public Dropbox link to a .zip file). Or upload your press kit file to assets and set path accordingly (e.g. "assets/your_press_kit.zip").
 
 app_icon: assets/appicon.png # Automatically populates if not set and if iOS app ID is set.  Otherwise enter path to icon file manually.

_layouts/default.html

@@ -61,6 +61,9 @@ <h2 class="appPrice">
                             {% if site.appstore_link %}
                                 <a class="appStoreLink" href="{{site.appstore_link}}"><img class="appStore" src="/assets/appstore.png"></a>
                             {% endif %}
+                            {% if site.directDownload_link %}
+                                <a id="directDownloadLink" class="directDownloadLink" href="{{site.directDownload_link}}"><img class="directlink" src="/assets/download.png"></a>
+                        {% endif %}
                         </div>
                         <a href="/contribute">
                             <p class="contributeText">Catima is a community project, learn how you can contribute <i class="fas fa-arrow-right pl-1"></i></p>
@@ -72,5 +75,18 @@ <h2 class="appPrice">
                 </div>
             </div>
         </div>
+        <script>
+            function showConfirmationDialog() {
+                var isConfirmed = confirm("Direct download excludes getting automatic updates. Use Google Play or F-Droid instead. Press 'OK' to download anyway.");
+                if (isConfirmed) {
+                    window.location.href = document.getElementById("directDownloadLink").href;
+                }
+            }
+
+            document.getElementById("directDownloadLink").addEventListener("click", function (event) {
+                event.preventDefault();
+                showConfirmationDialog();
+            });
+        </script>
 </body>
 </html>

_sass/layout.scss

@@ -503,6 +503,15 @@ header {
 
 }
 
+@media only screen and (min-width: 1150px) {
+
+	.downloadButtonsContainer {
+		white-space: nowrap;
+		overflow: visible;
+	}
+
+}
+
 .fdroid {
 	height: 75px;
 	margin-right: 24px;
@@ -521,7 +530,11 @@ header {
 
 	.fdroid {
 		margin-right: 0px;
-		margin-bottom: 24px;
+		margin-bottom: 20px;
+	}
+
+	.fdroid {
+		height: 65px;
 	}
 
 }
@@ -540,11 +553,21 @@ header {
 
 }
 
+@media only screen and (min-width: 528px) and (max-width: 589px) {
+    .playStore {
+        margin-top: 24px;
+    }
+}
+
 @media only screen and (max-width: 528px) {
 
 	.playStore {
 		margin-right: 0px;
-		margin-bottom: 24px;
+		margin-bottom: 20px;
+	}
+
+	.playStore {
+		height: 65px;
 	}
 
 }
@@ -553,6 +576,45 @@ header {
 	height: 75px;
 }
 
+.directlink {
+	height: 75px;
+	margin-right: 24px;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1150px) {
+    .directlink {
+        margin-top: 12px;
+    }
+}
+
+@media only screen and (max-width: 992px) {
+
+	.directlink {
+		margin-right: 24px;
+		margin-bottom: 0px;
+	}
+
+}
+
+@media only screen and (min-width: 528px) and (max-width: 695px) {
+    .directlink {
+        margin-top: 24px;
+    }
+}
+
+@media only screen and (max-width: 528px) {
+
+	.directlink {
+		margin-right: 0px;
+		margin-bottom: 20px;
+	}
+
+	.directlink {
+		height: 65px;
+	}
+
+}
+
 .contributeText {
 	font-size: 1.75rem;
 	margin-top: 1em;
@@ -573,7 +635,13 @@ header {
 	color: white;
 }
 
-@media only screen and (max-width: 528px) {
+@media only screen and (min-width: 528px) and (max-width: 695px) {
+    .contributeText {
+        margin-top: 36px;
+    }
+}
+
+@media only screen and (max-width: 695px) {
 	.contributeText {
 		text-align: center;
 		color: rgba(0, 0, 0, .6);
@@ -968,4 +1036,4 @@ footer {
 
 .hidden {
 	display: none;
-}
+}