Skip to content

Commit

Permalink
Explicitly set the size of download badges
Browse files Browse the repository at this point in the history 
This prevents layout from shifting while the images are loaded.
  • Loading branch information
@link2xt
link2xt committed Aug 10, 2023
1 parent 7f444da commit 9f3bb91
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions _includes/download-boxes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">Android</div>
<div class="buttons">
<a href="https://play.google.com/store/apps/details?id=chat.delta" class="img-badge">
<img src="../assets/badges/get-it-on-gplay.png" alt="{%if tx.download.gplay != ""%}{{ tx.download.gplay }}{%else%}{{ txEn.download.gplay }}{%endif%}" />
<img src="../assets/badges/get-it-on-gplay.png" alt="{%if tx.download.gplay != ""%}{{ tx.download.gplay }}{%else%}{{ txEn.download.gplay }}{%endif%}" width=161 height=48 />
</a>
<a href="https://f-droid.org/app/com.b44t.messenger" class="img-badge">
<img src="../assets/badges/get-it-on-fdroid.png" alt="{%if tx.download.dl_fdroid != ""%}{{ tx.download.dl_fdroid }}{%else%}{{ txEn.download.dl_fdroid }}{%endif%}" />
<img src="../assets/badges/get-it-on-fdroid.png" alt="{%if tx.download.dl_fdroid != ""%}{{ tx.download.dl_fdroid }}{%else%}{{ txEn.download.dl_fdroid }}{%endif%}" width=161 height=48 />
</a>
<a href="https://paskoocheh.com/tools/138/android.html" class="img-badge">
<img src="../assets/badges/get-it-on-paskoocheh.png" alt="Get it on Paskoocheh" />
<img src="../assets/badges/get-it-on-paskoocheh.png" alt="Get it on Paskoocheh" width=161 height=48 />
</a>
<a href="https://www.apklis.cu/application/chat.delta" class="img-badge">
<img src="../assets/badges/get-it-on-apklis.png" alt="Disponible en Apklis" />
<img src="../assets/badges/get-it-on-apklis.png" alt="Disponible en Apklis" width=139 height=48 />
</a>
<a href="https://www.amazon.com/dp/B0864PKVW3/" class="img-badge">
<img src="../assets/badges/amazon-appstore.png" alt="Available at Amazon Appstore" />
<img src="../assets/badges/amazon-appstore.png" alt="Available at Amazon Appstore" width=163 height=48 />
</a>
<a href="https://download.delta.chat/android/deltachat-gplay-release-{{VERSION_ANDROID}}.apk"><small>Download</small> APK</a>
</div>
Expand All @@ -39,7 +39,7 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">iPhone/iPad</div>
<div class="buttons">
<a class="img-badge" href="https://apps.apple.com/us/app/delta-chat/id1459523234">
<img src="../assets/badges/get-it-on-ios.png" alt="{%if tx.download.dl_appstore != ""%}{{ tx.download.dl_appstore }}{%else%}{{ txEn.download.dl_appstore }}{%endif%}" />
<img src="../assets/badges/get-it-on-ios.png" alt="{%if tx.download.dl_appstore != ""%}{{ tx.download.dl_appstore }}{%else%}{{ txEn.download.dl_appstore }}{%endif%}" width=162 height=48 />
</a>
</div>
<div class="descr">
Expand All @@ -50,7 +50,7 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">macOS</div>
<div class="buttons">
<a href="https://apps.apple.com/us/app/delta-chat-desktop/id1462750497" class="img-badge">
<img src="../assets/badges/mac-appstore.svg" alt="{%if tx.download.dl_mac_appstore != ""%}{{ tx.download.dl_mac_appstore }}{%else%}{{ txEn.download.dl_mac_appstore }}{%endif%}" />
<img src="../assets/badges/mac-appstore.svg" alt="{%if tx.download.dl_mac_appstore != ""%}{{ tx.download.dl_mac_appstore }}{%else%}{{ txEn.download.dl_mac_appstore }}{%endif%}" width=187 height=48 />
</a>
<a href="https://download.delta.chat/desktop/v{{VERSION_DESKTOP}}/DeltaChat-{{VERSION_DESKTOP}}.dmg"><small>Download</small> DeltaChat.dmg</a>
<a href="https://formulae.brew.sh/cask/deltachat"><small>Install with</small>Homebrew</a>
Expand All @@ -65,7 +65,7 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">Windows</div>
<div class="buttons">
<a href="https://www.microsoft.com/en-us/p/deltachat/9pjtxx7hn3pk?activetab=pivot:overviewtab" class="img-badge">
<img src="../assets/badges/microsoft.svg" alt="{%if tx.download.dl_microsoft != ""%}{{ tx.download.dl_microsoft }}{%else%}{{ txEn.download.dl_microsoft }}{%endif%}" />
<img src="../assets/badges/microsoft.svg" alt="{%if tx.download.dl_microsoft != ""%}{{ tx.download.dl_microsoft }}{%else%}{{ txEn.download.dl_microsoft }}{%endif%}" width=133 height=48 />
</a>
<a href="https://download.delta.chat/desktop/v{{VERSION_DESKTOP}}/DeltaChat%20Setup%20{{VERSION_DESKTOP}}.exe"><small>Download</small> Setup.exe</a>
</div>
Expand All @@ -81,7 +81,7 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">GNU/Linux</div>
<div class="buttons">
<a href="https://flathub.org/apps/details/chat.delta.desktop" class="img-badge">
<img src="../assets/badges/flathub.png" alt="{%if tx.download.flathub != ""%}{{ tx.download.flathub }}{%else%}{{ txEn.download.flathub }}{%endif%}" />
<img src="../assets/badges/flathub.png" alt="{%if tx.download.flathub != ""%}{{ tx.download.flathub }}{%else%}{{ txEn.download.flathub }}{%endif%}" width=161 height=48 />
</a>
<a href="https://download.delta.chat/desktop/v{{VERSION_DESKTOP}}/deltachat-desktop_{{VERSION_DESKTOP}}_amd64.deb"><small>Get .deb for</small> Debian/Ubuntu</a>
<a href="https://download.delta.chat/desktop/v{{VERSION_DESKTOP}}/deltachat-desktop-{{VERSION_DESKTOP}}.x86_64.rpm"><small>Get .rpm for</small> Fedora</a>
Expand All @@ -101,7 +101,7 @@ <h1 id="noscript-headline">{%if tx.menu.download != ""%}{{ tx.menu.download }}{%
<div class="title">Ubuntu Touch</div>
<div class="buttons">
<a class="img-badge" href="https://open-store.io/app/deltatouch.lotharketterer">
<img src="../assets/badges/ubuntutouch-openstore.png" alt="Ubuntu Touch" />
<img src="../assets/badges/ubuntutouch-openstore.png" alt="Ubuntu Touch" width=156 height=48 />
</a>
</div>
<div class="descr">
Expand Down

0 comments on commit 9f3bb91

Please sign in to comment.