Better responsive homepage

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 {

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">

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;
 }