From e46fa9fba1c5f64b93287917ba626fa7bd513e66 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 25 Oct 2019 15:54:37 +0200
Subject: [PATCH] Fix responsive

---
 src/components/InstanceCard.vue | 32 +++++++++++++++-----------------
 src/scss/main.scss              | 12 +++++++++++-
 src/views/Hall-Of-Fame.vue      | 11 +++++++++++
 src/views/Help.vue              | 10 ++++++++++
 src/views/Home.vue              |  8 ++++----
 src/views/Instances.vue         |  8 ++++++--
 6 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue
index 8c207ca..2c765c8 100644
--- a/src/components/InstanceCard.vue
+++ b/src/components/InstanceCard.vue
@@ -190,27 +190,25 @@
     }
 
     @media screen and (max-width: $responsive-screen) {
-      .root {
-        width: auto;
-        flex-direction: column;
-        padding: 15px 10px;
+      width: auto;
+      flex-direction: column;
+      padding: 15px;
 
-        .left {
-          width: auto;
-          margin-right: 0;
+      .left {
+        width: auto;
+        margin-right: 0;
+      }
+
+      .right {
+        margin-top: 20px;
+
+        .follow,
+        .languages {
+          margin-bottom: 5px;
         }
 
-        .right {
+        .link {
           margin-top: 20px;
-
-          .follow,
-          .languages {
-            margin-bottom: 5px;
-          }
-
-          .link {
-            margin-top: 20px;
-          }
         }
       }
     }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 2e17fc7..bd9d275 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -155,6 +155,10 @@ p > a {
     height: 3px;
     background-color: $orange;
     flex-grow: 1;
+
+    @media screen and (max-width: $small-screen) {
+      display: none;
+    }
   }
 }
 
@@ -175,7 +179,12 @@ p > a {
   }
 
   @media screen and (max-width: $small-screen) {
-    margin: 50px 0 30px 0;
+    margin: 75px 0 30px 0;
+    font-size: 25px;
+
+    .brand-title {
+      height: 30px;
+    }
   }
 }
 
@@ -188,6 +197,7 @@ p > a {
 
   @media screen and (max-width: $responsive-screen) {
     white-space: normal;
+    margin-top: 50px;
   }
 }
 
diff --git a/src/views/Hall-Of-Fame.vue b/src/views/Hall-Of-Fame.vue
index d0cffa0..91f537f 100644
--- a/src/views/Hall-Of-Fame.vue
+++ b/src/views/Hall-Of-Fame.vue
@@ -611,6 +611,17 @@
         }
       }
     }
+
+    @media screen and (max-width: $small-screen) {
+      .sponsors a img {
+        width: 100%;
+        height: auto;
+      }
+
+      ul li {
+        display: block;
+      }
+    }
   }
 </style>
 
diff --git a/src/views/Help.vue b/src/views/Help.vue
index aca24ca..8ac2091 100644
--- a/src/views/Help.vue
+++ b/src/views/Help.vue
@@ -127,6 +127,7 @@
 
       .text-block {
         text-align: right;
+        width: 100%;
 
         p {
           margin-bottom: 0;
@@ -153,6 +154,10 @@
     }
 
     @media screen and (max-width: $small-screen) {
+      .title-block {
+        margin-bottom: 60px;
+      }
+
       .blocks {
         width: auto;
       }
@@ -160,6 +165,11 @@
       .block-with-image {
         flex-direction: column;
 
+        &.community,
+        &.contribute {
+          flex-direction: column-reverse;
+        }
+
         .text-block {
           margin-left: 0 !important;
         }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ab38eac..7abc7cd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -401,7 +401,7 @@
         .brand {
           height: 47px;
           margin-bottom: 20px;
-          margin-left: -30px;
+          margin-left: -10px;
         }
 
         div {
@@ -411,18 +411,18 @@
         .description {
           font-size: 24px;
           font-weight: 600;
+          text-align: center;
         }
 
         @media screen and (max-width: $small-screen) {
-          padding: 15px 0;
+          padding: 40px 0 0 0;
 
           .brand {
-            height: 25px !important
+            height: 50px !important
           }
 
           .description {
             font-size: 20px;
-            margin-left: 20px;
           }
         }
       }
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 29b5f69..eb8d444 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -15,7 +15,7 @@
         </a>
       </div>
 
-      <div class="block-with-image">
+      <div class="block-with-image step-1">
         <div>
           <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Multiple instances illustration">
         </div>
@@ -30,7 +30,7 @@
         </div>
       </div>
 
-      <div class="block-with-image">
+      <div class="block-with-image step-2">
         <div>
           <div class="title" v-translate>2. Create your account and enjoy PeerTube</div>
 
@@ -100,6 +100,10 @@
       .block-with-image {
         flex-direction: column;
 
+        &.step-2 {
+          flex-direction: column-reverse;
+        }
+
         img {
           margin-bottom: 20px;
         }