X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bpage-not-found%2Fpage-not-found.component.scss;h=efb81ff004254ee3d80080d142cd7b6674ff1f85;hb=88f599a64f609bdf6fc1f860ab4d45b594a7201e;hp=7b7ff005ac1c7e04fc80344c604e20fe732c41f2;hpb=767619f639180d28532ffb4f7919668f3e5b5772;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss
index 7b7ff005a..efb81ff00 100644
--- a/client/src/app/+page-not-found/page-not-found.component.scss
+++ b/client/src/app/+page-not-found/page-not-found.component.scss
@@ -1,18 +1,57 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
 .root {
+  @include margin-left(auto);
+  @include margin-right(auto);
+
   height: 100%;
-  width: 100%;
   text-align: center;
   padding-top: 150px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column-reverse;
+
+  .box {
+    text-align: start;
+    font-size: 120%;
+    padding: 0 15px;
+  }
 
   img {
-    margin-bottom: 75px;
+    @include margin-left(auto);
+
+    width: 220px;
+    height: auto;
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    img {
+      @include margin-right(auto);
+    }
   }
 
-  .text {
-    font-size: 30px;
+  @media screen and (min-width: $mobile-view) {
+    width: 400px;
+  }
+
+  @media screen and (min-width: #{breakpoint(lg)}) {
+    width: 600px;
+  }
+
+  @media screen and (min-width: #{breakpoint(xl)}) {
+    width: 700px;
+  }
+
+  @media screen and (min-width: #{breakpoint(xxl)}) {
+    width: 800px;
   }
 
   @media screen and (max-height: 600px) {
     padding-top: 50px;
+
+    img {
+      width: 160px;
+    }
   }
 }