juick-www: embed fixes

1 files changed, 47 insertions, 15 deletions

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%;