better styles for media page

2 files changed, 34 insertions, 9 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index 2f39234..6c6e705 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -176,6 +176,25 @@ summary::before {
   padding: 1rem;
 }
 
+.media-maximized-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.media-maximized {
+  max-width: 100vw;
+  max-height: 100vh;
+  width: auto;
+  height: auto;
+  display: block;
+  margin: auto;
+  object-fit: contain;
+}
+
 .post-author {
   display: none
 }
@@ -183,7 +202,7 @@ summary::before {
 .post-media {
   display: block;
   margin: 0 auto;
-  max-width: 95%;
+  width: 95%;
   padding: 5px;
 }
  
@@ -209,7 +228,7 @@ form {
     display: inline
   }
   .post-media {
-    max-width: 50%;
+    width: 50%;
   }
   form {
     width: 40%;
@@ -235,7 +254,7 @@ form {
     display: inline
   }
   .post-media {
-    max-width: 50%;
+    width: 50%;
   }
   form {
     width: 20%;
@@ -365,8 +384,8 @@ p {
 }
 
 .comment-body img {
-  height: 200px;
-  width: auto;
+  height: auto;
+  max-width: 300px;
 }
 
 summary.expand-post {
diff --git a/src/views/media.pug b/src/views/media.pug
index 5df6057..4476dbb 100644
--- a/src/views/media.pug
+++ b/src/views/media.pug
@@ -1,4 +1,10 @@
-if kind == 'img'
-  img(src=url)
-else
-  video(src=url controls)
+include ../mixins/head
+doctype html
+html
+  +head("home")
+  body
+    div.media-maximized-container
+      if kind == 'img'
+        img(src=url).media-maximized
+      else
+        video(src=url controls).media-maximized