+24 -5

src/public/styles.css

reviewed

··· 176 176 padding: 1rem; 177 177 } 178 178 179 179 + .media-maximized-container { 180 180 + display: flex; 181 181 + justify-content: center; 182 182 + align-items: center; 183 183 + width: 100vw; 184 184 + height: 100vh; 185 185 + overflow: hidden; 186 186 + } 187 187 + 188 188 + .media-maximized { 189 189 + max-width: 100vw; 190 190 + max-height: 100vh; 191 191 + width: auto; 192 192 + height: auto; 193 193 + display: block; 194 194 + margin: auto; 195 195 + object-fit: contain; 196 196 + } 197 197 + 179 198 .post-author { 180 199 display: none 181 200 } ··· 183 202 .post-media { 184 203 display: block; 185 204 margin: 0 auto; 186 186 - max-width: 95%; 205 205 + width: 95%; 187 206 padding: 5px; 188 207 } 189 208 ··· 209 228 display: inline 210 229 } 211 230 .post-media { 212 212 - max-width: 50%; 231 231 + width: 50%; 213 232 } 214 233 form { 215 234 width: 40%; ··· 235 254 display: inline 236 255 } 237 256 .post-media { 238 238 - max-width: 50%; 257 257 + width: 50%; 239 258 } 240 259 form { 241 260 width: 20%; ··· 365 384 } 366 385 367 386 .comment-body img { 368 368 - height: 200px; 369 369 - width: auto; 387 387 + height: auto; 388 388 + max-width: 300px; 370 389 } 371 390 372 391 summary.expand-post {

+10 -4

src/views/media.pug

reviewed

··· 1 1 - if kind == 'img' 2 2 - img(src=url) 3 3 - else 4 4 - video(src=url controls) 1 1 + include ../mixins/head 2 2 + doctype html 3 3 + html 4 4 + +head("home") 5 5 + body 6 6 + div.media-maximized-container 7 7 + if kind == 'img' 8 8 + img(src=url).media-maximized 9 9 + else 10 10 + video(src=url controls).media-maximized