From f7a869c6259531b63e637d8b19ed062ec554a3f2 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Sat, 23 Jan 2021 19:50:56 +0100
Subject: [PATCH] fixed design of watch page

---
 public/css/watch.css            | 47 ++++++++++++++++++++++++++-------
 templates/watch/watch.html.twig |  6 ++---
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/public/css/watch.css b/public/css/watch.css
index eb31f29..9cc0278 100644
--- a/public/css/watch.css
+++ b/public/css/watch.css
@@ -31,23 +31,50 @@
 }
 
 .user {
+    position: absolute;
 }
 
 .user img {
-    height: 3vw;
-    margin-right: 1vw;
-}
-
-.user span {
-    font-size: 1vw;
+    position: absolute;
+    left: 1.5vw;
 }
 
 h2 {
-    position: absolute;
-    top: 1vw;
-    left: 10vw;
+    margin-top: 2vw;
 }
 
-.description {
+.indented {
     margin-left: 4vw;
+}
+
+@media only screen and (max-width: 1500px) {
+    .user img {
+        left: auto;
+    }
+}
+
+@media only screen and (max-width: 1050px) {
+    h2 {
+        margin-top: 3vw;
+    }
+}
+
+@media only screen and (max-width: 780px) {
+    h2 {
+        margin-top: 4vw;
+    }
+}
+
+@media only screen and (max-width: 760px) {
+    h2 {
+        margin-top: 5vh;
+    }
+
+    .indented {
+        margin-left: 0;
+    }
+
+    .user span {
+        margin-left: 40px;
+    }
 }
\ No newline at end of file
diff --git a/templates/watch/watch.html.twig b/templates/watch/watch.html.twig
index 5751ad7..6c88278 100644
--- a/templates/watch/watch.html.twig
+++ b/templates/watch/watch.html.twig
@@ -73,13 +73,13 @@
                             class="rounded-circle avatar"
                             alt=""
                     />
-                    <span>{{ video.uploader.name }}</span>
+                    <span class="fs-6 indented">{{ video.uploader.name }}</span>
                 </div>
-                <h2>{{ video.name }}</h2>
+                <h2 class="indented">{{ video.name }}</h2>
                 <div class="views">
                     {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
                 </div>
-                <div class="description">
+                <div class="description indented">
                     {{ video.description }}
                 </div>
             </div>