juick-www: embed fixes

2 files changed, 48 insertions, 25 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 7de14b34..e3d2445a 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -736,16 +736,7 @@ ready(function () {
                 return a.textContent === 'NSFW';
             }
         )) {
-            var img = article.querySelector('.ir img');
-            if (img) {
-                img.style.opacity = 0.05;
-                img.addEventListener('mouseover', function (e) {
-                    e.target.style.opacity = 1;
-                });
-                img.addEventListener('mouseout', function (e) {
-                    e.target.style.opacity = 0.05;
-                });
-            }
+            article.classList.add('nsfw');
         }
     });
 
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index d34da0e0..fd81070b 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -730,26 +730,58 @@ fieldset {
     border: 1px dotted #ccc;
     margin-top: 25px;
 }
+/* embeds */
 .embedContainer {
-    height: 0;
-    overflow: hidden;
-    padding-bottom: 56.25%;
-    padding-top: 30px;
-    position: relative;
-    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 30px -3px 15px -3px;
 }
-.embedContainer iframe,
-.embedContainer object,
-.embedContainer embed {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
+.embedContainer > * {
+    box-sizing: border-box;
+    flex-grow: 1;
+    margin: 3px;
+    min-width: 49%;
 }
-.embedContainer img {
+.embedContainer > .compact {
+    flex-grow: 0;
+}
+.embedContainer .picture img {
+    display: block;
+}
+.embedContainer img,
+.embedContainer video {
     max-width: 100%;
+    max-height: 80vh;
+}
+.embedContainer > .audio,
+.embedContainer > .youtube {
+    min-width: 90%;
+}
+.embedContainer audio {
+    width: 100%;
+}
+.embedContainer iframe {
+    overflow:hidden;
+    resize: vertical;
+    display: block;
+}
+/* end of embeds*/
+/* nsfw */
+article.nsfw .embedContainer img,
+article.nsfw .embedContainer iframe,
+article.nsfw .ir img {
+    opacity: 0.1;
+    transition: opacity 0.05s;
+}
+article.nsfw .embedContainer img:hover,
+article.nsfw .embedContainer iframe:hover,
+article.nsfw .ir img:hover {
+    opacity: 1.0;
 }
+/* end of nsfw */
 @media screen and (max-width: 850px) {
     body {
 	    -moz-text-size-adjust: 100%;