Remove QR from device screenshot, add below download.

Don't show it if on a mobile sized device, because you probably can't
take a picture of your own screen, and you may as well download it by
touching the link.

It is true that others can't take photos of your screen for the QR now,
but i imagine that is not a common use case.

_sass/_layout.scss

@@ -251,4 +251,48 @@ img {
  * This makes images responsive on smaller screens.
  */
  max-width: 100%;
+}
+
+/**
+ * Home page
+ */
+.download-and-screenshot {
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .download {
+ padding: 1em;
+ text-align: center;
+
+ .qr {
+
+ img {
+ width: 200px;
+ }
+
+ @include media-query($tablet) {
+ display: none;
+ }
+
+ @include media-query($phone) {
+ display: none;
+ }
+ }
+ }
+
+ .screenshot {
+ display: block;
+
+ max-width: 60%;
+
+ @include media-query($tablet) {
+ max-width: 100%;
+ }
+
+ @include media-query($phone) {
+ max-width: 100%;
+ }
+ }
 }

index.md

@@ -5,13 +5,25 @@ permalink: /
 
 {% assign strings = site.data.strings.index %}
 
-## {{strings.title}}
+<h2>{{strings.title}}</h2>
 
 {{strings.introduction}}
 
-**[{{strings.download_fdroid}}](https://f-droid.org/FDroid.apk){:class="material-button"}**
-[{{strings.gpg_signature}}](https://f-droid.org/FDroid.apk.asc)
-
-<img
- src="assets/phone-frame.png"
- style="background: url('{% fdroid_screenshot %}') center center no-repeat; background-size: 78% auto" />
+<div class="download-and-screenshot">
+ <div class="download">
+  <div class="button">
+  <a class="material-button" href="https://f-droid.org/FDroid.apk">{{ strings.download_fdroid }}</a>
+  </div>
+  <div class="gpg">
+  <a href="https://f-droid.org/FDroid.apk.asc">{{ strings.gpg_signature }}</a>
+  </div>
+  <div class="qr">
+  <img src="assets/download-fdroid-qr.png" />
+  </div>
+ </div>
+ <div class="screenshot">
+  <img
+  src="assets/phone-frame.png"
+  style="background: url('{% fdroid_screenshot %}') center center no-repeat; background-size: 78% auto" />
+ </div>
+</div>