Fix dynamic insert size.

[wolnelektury.git] / src / annoy / static / annoy / banner.scss

diff --git a/src/annoy/static/annoy/banner.scss b/src/annoy/static/annoy/banner.scss
index 33fd481..07ef15c 100644 (file)
--- a/src/annoy/static/annoy/banner.scss
+++ b/src/annoy/static/annoy/banner.scss
@@ -20,9 +20,40 @@
 .annoy-banner_top {
     display: none;
 
+    .annoy-banner-inner {
+        @media screen and (min-width: 960px) {
+            width: 960px;
+            margin: auto;
+        }
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 400px) {
+            flex-direction: row;
+        }
+    }
+    
+    img {
+        margin: 0;
+        align-self: center;
+        max-height: 40px;
+        @media screen and (min-width: 400px) {
+            max-height: 60px;
+        }
+    }
+    .text {
+        flex: 1;
+        align-self: center;
+        padding: .5em 1em;
+    }
+    
     p {
         margin: 0;
-        font-size: 2em;
+        font-size: 1.5em;
+
+        @media screen and (min-width: 400px) {
+            font-size: 2em;
+        }
     }
     
     .annoy-banner-off {
@@ -56,6 +87,10 @@
     top: 0;
     right: 0;
     color: black;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 
@@ -125,7 +160,7 @@
         }
 
         &.action {
-            bottom: 33vh;
+            bottom: 40vh;
             background: #018189;
             color: white;
             border-radius: auto 100%;
@@ -177,7 +212,7 @@
     }
     @media screen and (max-height: 400px) {
         a.action {
-            bottom: 30vh;
+            bottom: 40vh;
         }
     }
 
@@ -192,22 +227,82 @@
     color: white;
     border-radius: 1em 0 0 0;
     padding: .1em 1em;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 
 
-.dynamic-insert.with-image {
-    min-height: 120px;
-    padding: 0;
+.dynamic-insert {
+    background: orange;
+    margin: 1em 0;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+
+    &.with-image {
+        min-height: 120px;
+    }
 
+    padding: 0;
+       
     a {
-        position: relative;
+        color: black;
+        display: flex;
+        flex-direction: row;
+
         .text {
+            padding: 2em;
+            flex: 1;
+            align-self: center;
         }
         img {
-            position: absolute;
-            top: 10px;
-            right: 10px;
+            border-radius: 100%;
+            margin: 1em;
+            align-self: center;
+           width: 120px;
+           height: 120px;
+        }
+    }
+}
+
+
+
+.annoy-banner_book-text-intermission {
+    display: none;
+
+    .annoy-banner-inner {
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 400px) {
+            flex-direction: row;
+        }
+    }
+    
+    img {
+        margin: 0;
+        align-self: center;
+        max-height: 60px;
+        @media screen and (min-width: 400px) {
+            max-height: 100px;
+        }
+    }
+    .text {
+        flex: 1;
+        align-self: center;
+        padding: .5em 1em;
+    }
+    
+    p {
+        margin: 0;
+        font-size: 1.5em;
+
+        @media screen and (min-width: 400px) {
+            font-size: 2em;
         }
     }
 }