From 5fbb257747ad55ee30b1c5a3e12f62971d89c06a Mon Sep 17 00:00:00 2001
From: Dominik Korsa <dominik.korsa@gmail.com>
Date: Wed, 27 Feb 2019 21:26:45 +0100
Subject: [PATCH] Improve download mobile responsiveness

---
 src/components/HomeDownloadDevItem.vue   |  7 +++++--
 src/components/HomeDownloadDevMaster.vue |  4 ++++
 src/components/HomeDownloadSection.vue   | 10 ++++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/HomeDownloadDevItem.vue b/src/components/HomeDownloadDevItem.vue
index afa0421..dd9daf5 100644
--- a/src/components/HomeDownloadDevItem.vue
+++ b/src/components/HomeDownloadDevItem.vue
@@ -3,7 +3,7 @@
     <div class="header">
       <a :href="github" target="_blank">
         <span class="title">{{ title }}</span>
-        <span class="number">#{{ number }}</span>
+        <span class="number"> #{{ number }}</span>
       </a>
     </div>
     <div class="subheader">
@@ -106,6 +106,10 @@ export default {
     margin-bottom: 8px;
     line-height: 24px;
 
+    @media screen and (max-width: 450px) {
+      font-size: 18px;
+    }
+
     .title {
       color: #D32F2F;
     }
@@ -113,7 +117,6 @@ export default {
     .number {
       color: #0009;
       font-weight: 300;
-      margin-left: 4px;
     }
 
     a {
diff --git a/src/components/HomeDownloadDevMaster.vue b/src/components/HomeDownloadDevMaster.vue
index 07ffbba..817aab5 100644
--- a/src/components/HomeDownloadDevMaster.vue
+++ b/src/components/HomeDownloadDevMaster.vue
@@ -77,6 +77,10 @@ export default {
     margin-bottom: 8px;
     line-height: 24px;
 
+    @media screen and (max-width: 450px) {
+      font-size: 18px;
+    }
+
     .number {
       color: #0009;
       font-weight: 300;
diff --git a/src/components/HomeDownloadSection.vue b/src/components/HomeDownloadSection.vue
index 1d22411..c5c2c03 100644
--- a/src/components/HomeDownloadSection.vue
+++ b/src/components/HomeDownloadSection.vue
@@ -44,15 +44,21 @@ export default {
 <style lang="scss" scoped>
   #download {
     height: 100vh;
-    padding: 0 32px;
+    box-sizing: border-box;
+    padding: 0 32px 32px;
     overflow: hidden;
     background-color: #F6F6F6;
     display: grid;
     grid-template-columns: 1fr 32px 1fr;
-    grid-template-rows: auto auto 1fr 64px;
+    grid-template-rows: auto auto 1fr;
 
     @media screen and (max-width: 875px) {
       grid-template-columns: 1fr;
+      padding: 0 16px 16px;
+    }
+
+    @media screen and (max-width: 450px) {
+      padding: 0 8px 16px;
     }
   }