resize banner on small screens

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _annoy.scss

diff --git a/src/wolnelektury/static/2022/styles/layout/_annoy.scss b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
index e91d585..70704f3 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_annoy.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
@@ -51,7 +51,7 @@
     .annoy-banner-off {
         font-size: 1.2rem !important;
     }
     .annoy-banner-off {
         font-size: 1.2rem !important;
     }

-    
+

     @include rwd($break-flow) {
         .annoy-banner-inner {
             padding: 0;
     @include rwd($break-flow) {
         .annoy-banner-inner {
             padding: 0;


@@ -69,7 +69,7 @@
 
         }
         .annoy-banner-off {
 
         }
         .annoy-banner-off {

-            
+

         }
     }
 }
         }
     }
 }


@@ -89,10 +89,14 @@
 
     &.annoy-banner_top-container {
        padding: 16px 0;
 
     &.annoy-banner_top-container {
        padding: 16px 0;

+
+       @media screen and (max-height: 700px) {
+           padding: 5px 0;
+       }

     }
     &.annoy-banner_crisis-container {
        height: 160px;
     }
     &.annoy-banner_crisis-container {
        height: 160px;

-    
+

        @media screen and (min-height: 480px) {
            height: 33vh;
            top: calc(-33vh + 160px);
        @media screen and (min-height: 480px) {
            height: 33vh;
            top: calc(-33vh + 160px);


@@ -146,11 +150,29 @@
                    }
                }
 
                    }
                }
 

+               @media screen and (max-height: 700px) {
+                   flex-direction: row;
+                   justify-content: space-between;
+                   p {
+                       font-size: .9em;
+                   }
+               }
+
+

                .text {
                    background: #edc016;
                    padding: 1em;
                    border: 3px solid black;
                }
                .text {
                    background: #edc016;
                    padding: 1em;
                    border: 3px solid black;
                }

+
+               @media screen and (max-height: 400px) {
+                   align-items: center;
+                   .text {
+                       height: 1.2em;
+                       overflow: hidden;
+                   }
+               }
+

                a {
                    color: #c32721;
                }
                a {
                    color: #c32721;
                }


@@ -193,6 +215,13 @@
                display: block;
                transition: background-color .2s;
 
                display: block;
                transition: background-color .2s;
 

+               @media screen and (max-height: 700px) {
+                   font-size: .9em;
+               }
+               @media screen and (max-height: 400px) {
+                   white-space: nowrap;
+               }
+

                &:hover {
                    background: #ffd430;
                    text-decoration: none;
                &:hover {
                    background: #ffd430;
                    text-decoration: none;