From e72a5a78bcbcd3fc92c94807af74aa9b4c34bfd3 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 21 Sep 2020 09:59:25 +0200
Subject: [PATCH] Better responsive homepage

---
 client/src/components/Header.vue        | 12 +++++++++++-
 client/src/components/SearchWarning.vue |  7 +++++++
 themes/framasoft/index.css              | 10 +++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 1c7e2eb..5a96b80 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -58,7 +58,6 @@
 
     h4 {
       font-weight: normal;
-      font-size: 14px;
       margin: 0;
       text-align: center;
       line-height: 25px;
@@ -72,7 +71,18 @@
     @media screen and (max-width: $small-screen) {
       h1 {
         font-size: 30px;
+        margin-top: 20px;
         margin-bottom: 10px;
+        min-height: unset;
+      }
+
+      h4 {
+        font-size: 15px !important;
+        line-height: initial;
+
+        div:first-child {
+          margin-bottom: 5px;
+        }
       }
 
       img {
diff --git a/client/src/components/SearchWarning.vue b/client/src/components/SearchWarning.vue
index e2bfc5c..1968389 100644
--- a/client/src/components/SearchWarning.vue
+++ b/client/src/components/SearchWarning.vue
@@ -39,6 +39,13 @@
     }
   }
 
+  @media screen and (max-width: $small-screen) {
+    .block-warning img {
+      display: none !important;
+    }
+  }
+
+
 </style>
 
 <script lang="ts">
diff --git a/themes/framasoft/index.css b/themes/framasoft/index.css
index 2f95089..b02e7e4 100644
--- a/themes/framasoft/index.css
+++ b/themes/framasoft/index.css
@@ -13,10 +13,18 @@ header h4 a {
 }
 
 header .search-home {
-  margin: 50px 0 -7px 0 !important;
+  margin: 30px 0 -7px 0 !important;
   z-index: 100;
 }
 
+@media screen and (max-width: 500px) {
+  header .search-home {
+    margin-bottom: -4px !important;
+    width: 150px;
+    height: auto;
+  }
+}
+
 .search-container {
   margin-top: 0;
 }