From 3eeeb87fe62fab3e48455f53c8a725b49878b9b3 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Mon, 1 May 2017 18:05:28 +0200
Subject: Client: try to be responsive

---
 client/src/app/app.component.scss | 62 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 2 deletions(-)

(limited to 'client/src/app/app.component.scss')

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index f5da651b2..68fadbe7c 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -29,13 +29,14 @@
     margin-bottom: 0;
     display: flex;
     position: fixed;
+    padding: 0;
 
     &.border-bottom {
       border-bottom: 1px solid $header-border-color;
     }
 
     .hamburger-block {
-      margin-right: 20px;
+      margin-right: 15px;
       margin-left: 15px;
 
       .glyphicon {
@@ -53,9 +54,9 @@
         background: url(/client/assets/logo.png) no-repeat;
         background-size: contain;
         background-position: center;
-        width: 180px;
         height: 100%;
         margin: auto;
+        width: 135px;
 
         &:hover {
           color: inherit !important;
@@ -63,6 +64,63 @@
         }
       }
     }
+
+    @media screen and (max-width: 500px) {
+      #peertube-title {
+        display: none;
+      }
+
+      .hamburger-block {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    @media screen and (min-width: 500px) and (max-width: 600px) {
+      #peertube-title a {
+        width: 80px;
+      }
+    }
+
+    @media screen and (min-width: 600px) and (max-width: 700px) {
+      #peertube-title a {
+        width: 100px;
+      }
+    }
+
+    @media screen and (min-width: 1000px) {
+      #peertube-title a {
+        width: 120px;
+      }
+    }
+
+    @media screen and (min-width: 1000px) {
+      #peertube-title a {
+        width: 120px;
+      }
+    }
+
+    @media screen and (min-width: 1200px) {
+      padding-left: 15px;
+
+      .hamburger-block {
+        margin-right: 15px;
+      }
+
+      #peertube-title a {
+        width: 135px;
+      }
+    }
+
+    @media screen and (min-width: 1600px) {
+      .hamburger-block {
+        margin-right: 20px;
+      }
+
+      #peertube-title a {
+        width: 180px;
+      }
+    }
   }
 
   my-search {
-- 
cgit v1.2.3