X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.scss;h=7259006e5a1ae2571e9379284bcbbb4e28121617;hb=e7dbeae8d915cdf4470ceb51c2724b04148b30b5;hp=f5da651b2ae9113dbbc428ab037c50190bcaa37b;hpb=0d7d2ad9ff27baf72223a2113eb3ae5cabdb924e;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index f5da651b2..7259006e5 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 {
@@ -50,12 +51,12 @@
       a {
         color: inherit !important;
         display: block;
-        background: url(/client/assets/logo.png) no-repeat;
+        background: url('../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 {