Translated using Weblate (Hungarian)

[github/Chocobozzz/PeerTube.git] / client / src / app / +page-not-found / page-not-found.component.scss

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 53b6142e15b4eaf5a19f5cf4a9bbb346179f23d3..06c1d758e7bf80f37edbb3b81a66eab4626df5d4 100644 (file)
--- 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,8 +1,55 @@
-div {
+@import '_variables';
+@import '_mixins';
+
+.root {
   height: 100%;
-  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
-  margin-top: 150px;
+  padding-top: 150px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column-reverse;
+
+  .box {
+    text-align: left;
+    font-size: 120%;
+    padding: 0 15px;
+  }
+
+  img {
+    margin-left: auto;
+    width: 220px;
+    height: auto;
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    img {
+      margin-right: auto;
+    }
+  }
+
+  @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;
 
-  font-size: 32px;
-}
\ No newline at end of file
+    img {
+      width: 160px;
+    }
+  }
+}