add book-page-center banner

[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 9d90c65..f088534 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,16 +69,16 @@
 
         }
         .annoy-banner-off {
 
         }
         .annoy-banner-off {

-            
+

         }
     }
 }
 
 
         }
     }
 }
 
 

-.annoy-banner_crisis-container {
+.annoy-banner_crisis-container,
+.annoy-banner_top-container {

     position: sticky;
     top: 0;
     position: sticky;
     top: 0;

-    height: 160px;

     z-index: 10;
     box-shadow: 0 0 10px black;
     display: flex;
     z-index: 10;
     box-shadow: 0 0 10px black;
     display: flex;


@@ -87,18 +87,31 @@
     align-items:center;
     cursor: pointer;
 
     align-items:center;
     cursor: pointer;
 

-    @media screen and (min-height: 480px) {
-       height: 33vh;
-       top: calc(-33vh + 160px);
+    &.annoy-banner_top-container {
+       padding: 16px 0;
+
+       @media screen and (max-height: 700px) {
+           padding: 5px 0;
+       }

     }
     }

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

 
 

-    @media screen and (max-width: 940px) {
-       padding: 10px 0;
-       height: auto;
-       top: 0;
+       @media screen and (min-height: 480px) {
+           height: 33vh;
+           top: calc(-33vh + 160px);
+       }
+
+       @media screen and (max-width: 940px) {
+           padding: 10px 0;
+           height: auto;
+           top: 0;
+       }

     }
 
     }
 

-    .annoy-banner_crisis {
+
+    .annoy-banner_crisis,
+    .annoy-banner_top {

        position: sticky;
        top: 0;
        width: 100%;
        position: sticky;
        top: 0;
        width: 100%;


@@ -116,11 +129,11 @@
            .image-box {
                position: relative;
                img {
            .image-box {
                position: relative;
                img {

-                   height: 159px;
+                   max-height: 159px;

                    display: block;
 
                    @media screen and (max-width: 700px) {
                    display: block;
 
                    @media screen and (max-width: 700px) {

-                       height: 120px;
+                       max-height: 120px;

                    }
                }
            }
                    }
                }
            }


@@ -137,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;
                }


@@ -184,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;


@@ -191,7 +229,8 @@
            }
        }
     }
            }
        }
     }

-    &.annoy-banner-style_crisis_quiet {
+    &.annoy-banner-style_crisis_quiet,
+    &.annoy-banner_top-container {

        background: black;
        color: white;
        .annoy-banner-inner {
        background: black;
        color: white;
        .annoy-banner-inner {


@@ -210,3 +249,57 @@
        }
     }
 }
        }
     }
 }

+
+
+
+.annoy-banner_book-page {
+    background-color: #ffd430;
+    color: #083F4D;
+    border-radius: 10px;
+    padding: 15px 20px;
+    margin-top: 20px;
+
+    .annoy-banner-inner {
+       display: flex;
+       flex-direction: row;
+       gap: 20px;
+       align-items: flex-start;
+       justify-content: space-between;
+
+       p {
+           margin: 0;
+       }
+       a {
+           line-height: 1.35;
+           color: #c32721;
+           white-space: nowrap;
+           border: solid #c32721;
+           border-width: 0 0 1px;
+
+           &:hover {
+               text-decoration: none;
+               border-bottom-width: 2px;
+           }
+       }
+    }
+}
+
+.annoy-banner_book-page-center {
+    background: white;
+    margin-top: 20px;
+    padding: 20px;
+    border: 1px solid #018189;
+    border-radius: 15px;
+    color:#018189;
+
+    .annoy-banner-inner {
+       display: flex;
+       gap: 15px;
+       img {
+           max-width: 200px;
+       }
+       p {
+           margin: 0;
+       }
+    }
+}