diff options
-rw-r--r-- | src/public/styles.css | 29 | ||||
-rw-r--r-- | src/views/media.pug | 14 |
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 { | |||
176 | padding: 1rem; | 176 | padding: 1rem; |
177 | } | 177 | } |
178 | 178 | ||
179 | .media-maximized-container { | ||
180 | display: flex; | ||
181 | justify-content: center; | ||
182 | align-items: center; | ||
183 | width: 100vw; | ||
184 | height: 100vh; | ||
185 | overflow: hidden; | ||
186 | } | ||
187 | |||
188 | .media-maximized { | ||
189 | max-width: 100vw; | ||
190 | max-height: 100vh; | ||
191 | width: auto; | ||
192 | height: auto; | ||
193 | display: block; | ||
194 | margin: auto; | ||
195 | object-fit: contain; | ||
196 | } | ||
197 | |||
179 | .post-author { | 198 | .post-author { |
180 | display: none | 199 | display: none |
181 | } | 200 | } |
@@ -183,7 +202,7 @@ summary::before { | |||
183 | .post-media { | 202 | .post-media { |
184 | display: block; | 203 | display: block; |
185 | margin: 0 auto; | 204 | margin: 0 auto; |
186 | max-width: 95%; | 205 | width: 95%; |
187 | padding: 5px; | 206 | padding: 5px; |
188 | } | 207 | } |
189 | 208 | ||
@@ -209,7 +228,7 @@ form { | |||
209 | display: inline | 228 | display: inline |
210 | } | 229 | } |
211 | .post-media { | 230 | .post-media { |
212 | max-width: 50%; | 231 | width: 50%; |
213 | } | 232 | } |
214 | form { | 233 | form { |
215 | width: 40%; | 234 | width: 40%; |
@@ -235,7 +254,7 @@ form { | |||
235 | display: inline | 254 | display: inline |
236 | } | 255 | } |
237 | .post-media { | 256 | .post-media { |
238 | max-width: 50%; | 257 | width: 50%; |
239 | } | 258 | } |
240 | form { | 259 | form { |
241 | width: 20%; | 260 | width: 20%; |
@@ -365,8 +384,8 @@ p { | |||
365 | } | 384 | } |
366 | 385 | ||
367 | .comment-body img { | 386 | .comment-body img { |
368 | height: 200px; | 387 | height: auto; |
369 | width: auto; | 388 | max-width: 300px; |
370 | } | 389 | } |
371 | 390 | ||
372 | summary.expand-post { | 391 | 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 @@ | |||
1 | if kind == 'img' | 1 | include ../mixins/head |
2 | img(src=url) | 2 | doctype html |
3 | else | 3 | html |
4 | video(src=url controls) | 4 | +head("home") |
5 | body | ||
6 | div.media-maximized-container | ||
7 | if kind == 'img' | ||
8 | img(src=url).media-maximized | ||
9 | else | ||
10 | video(src=url controls).media-maximized | ||