style fixes, and dynamic less compilation

www/slide/slide.less

@@ -1,5 +1,5 @@
-@import "../../customize.dist/src/less/variables.less";
-@import "../../customize.dist/src/less/mixins.less";
+@import "/customize/src/less/variables.less";
+@import "/customize/src/less/mixins.less";
 
 // used for slides
 .viewportRatio (@x, @y, @p: 100) {
@@ -158,12 +158,8 @@ body {
             height: ~"calc(100vh - 2px)";
         }
     }
-    /*.slide-frame:first-child {
-        margin-top: ~"calc(((100vh - 56.25vw)/2))";
-    }*/
 }
 
-
 /* Slide position (present mode) */
 div.modal, div#modal {
     display: none;
@@ -212,21 +208,15 @@ div.modal, div#modal {
         white-space: nowrap;
         .slide-frame {
             overflow: hidden;
-            display: inline-block;
+            display: flex;
+            flex-flow: column !important;
+
             box-sizing: border-box;
             border: 1px solid;
             white-space: normal;
 
             vertical-align: middle;
 
-            /* center things as much as possible
-
-                margin-top: 50vh;
-                margin-bottom: 50vh;
-                transform: translateY(-50%);
-
-            */
-
             padding: 0.5em;
             width: 100vw;
             height: 56.25vw; // height:width ratio = 9/16 = .5625
@@ -324,7 +314,6 @@ div#modal #content, #print {
             margin: 0 auto;
             padding-left: 0.3em;
         }
-        // p, ul, ol { padding-left: 10%; }
 
         img {
             position: relative;
@@ -364,7 +353,7 @@ div#modal #content, #print {
     top: 15vh; bottom: 15vh;
     left: 10vw; right: 10vw;
     border: 1px solid black;
-    z-index: 10;
+    z-index: 100000;
     overflow: auto;
     display: none;
     font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
@@ -396,3 +385,31 @@ div#modal #content, #print {
     }
 }
 
+.slide-frame * {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+p {
+  display: flex;
+  flex-flow: column;
+  padding: 0;
+  margin: 0;
+  min-height:0;
+  flex: 1;
+}
+
+media-tag {
+  min-height: 0;
+  flex: 1;
+  display: block;
+  text-align: center;
+}
+
+media-tag img {
+  max-height: 100% !important;
+}
+
+media-tag iframe {
+  min-height: 100%;
+}