juick-www: better lightbox(dialog), fixed "no lightbox in user blog",

photo-512 - used on page,
photo-1024 - used in lightbox if smaller screen dimension is under 1280,
p (original size) - used in lightbox on huge screens.

1 files changed, 16 insertions, 14 deletions

diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index c843cf8e..0958f5e5 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -203,20 +203,15 @@ article .i {
     text-align: center;
 }
 article .ir {
-    margin-bottom: 10px;
-    margin-left: 10px;
     text-align: center;
 }
 article .ir a {
     cursor: -moz-zoom-in;
     cursor: -webkit-zoom-in;
+    display: block;
 }
 article .ir img {
-    max-height: 200px;
-    max-width: 200px;
-}
-article .irbr {
-    clear: right;
+    max-width: 100%;
 }
 article>nav.l {
     display: inline-block;
@@ -581,16 +576,23 @@ q {
     top: 0;
     width: 100%;
     z-index: 10;
-}
-#dialogt td {
-    text-align: center;
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 #dialogw {
-    display: inline-block;
-    position: relative;
-    text-align: left;
     z-index: 11;
+    position: relative;
+    max-height: 90%;
+    max-width: 90%;
+}
+#dialogw a {
+    display: block;
+}
+#dialogw img {
+    max-height: 100%;
+    max-height: 90vh;
+    max-width: 100%;
 }
 #dialogc {
     background: url("dialog-close.png");