experimental map

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / local.scss

diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss
index 1dea8ca..7ea03fa 100644 (file)
--- a/src/wolnelektury/static/2022/styles/local.scss
+++ b/src/wolnelektury/static/2022/styles/local.scss
@@ -1,24 +1,7 @@
-$teal: #007880;
-
-
-.l-change-pop {
-    transition: 350ms all;
-    
-    p {
-        a {
-            color: $teal;
-        }
-    }
-}
-

 
 

-.is-open .l-change-pop {
-    height: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-}
+$teal: #007880;
+$green: #92BD39;
+$red: #FF4C54;

 
 
 .ui-autocomplete a {
 
 
 .ui-autocomplete a {


@@ -41,28 +24,38 @@ $teal: #007880;
 
 .sponsors-page {
     display: flex;
 
 .sponsors-page {
     display: flex;

-    justify-content: space-between;

     margin-top: 48px;
     margin-top: 48px;

-
-    @include rwd(tablet) {
-        flex-wrap: wrap;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 60px;
+
+    @include rwd($break-wide) {
+        gap: 0;
+        justify-content: space-between;
+        flex-wrap: nowrap;

     }
 
     .sponsors-column {
     }
 
     .sponsors-column {

-        margin: 1em 40px;
+        margin: 1em 0;

         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: 0;

+

         .sponsors-column-name {
             font-weight: $regular;
             @include font-size(18px);
         .sponsors-column-name {
             font-weight: $regular;
             @include font-size(18px);

-            line-height: 150%;
+            line-height: 115%;
+            height: 62px;
+            margin: 0;

             text-align: center;
             color: #474747;
             text-align: center;
             color: #474747;

+            display: flex;
+            align-items: center;
+            max-width: 8em;

         }
         .sponsor-logos {
         }
         .sponsor-logos {

-            height: 120px;
+            height: 140px;

             overflow: hidden;
             a {
                 margin-top: 20px;
             overflow: hidden;
             a {
                 margin-top: 20px;


@@ -194,12 +187,45 @@ $teal: #007880;
         padding: 5px 10px;
         margin-left: 5px;
         border-radius: 15px;
         padding: 5px 10px;
         margin-left: 5px;
         border-radius: 15px;

+        white-space: nowrap;
+
+        a {
+            color: currentColor;
+        }
+        a:hover {
+            color: inherit;
+        }
+
+        &.filter-category-epoch {
+            background: $teal;
+            color: white;
+        }
+        &.filter-category-kind {
+            background: $red;
+        }
+        &.filter-category-genre {
+            background: $green;
+        }
+        &.filter-category-set {
+            background: white;
+            color: black;
+            border: 1px solid #888;
+
+            &:after {
+                content: '';
+                font-family: 'wl' !important;
+                font-size: .9em;
+                margin-left: 3px;
+                color: $red;
+            }
+        }

     }
 }
 
 .with-filter {
     padding: 20px 0 0;
     position: relative;
     }
 }
 
 .with-filter {
     padding: 20px 0 0;
     position: relative;

+    width: 100%;

 
     h2 {
         margin-bottom: 0;
 
     h2 {
         margin-bottom: 0;


@@ -207,6 +233,7 @@ $teal: #007880;
 }
 .with-filter .row div.filter-container {
     background: white;
 }
 .with-filter .row div.filter-container {
     background: white;

+    width: 100%;

     top: 0;
     bottom: 100%;
     opacity: 0;
     top: 0;
     bottom: 100%;
     opacity: 0;


@@ -222,6 +249,11 @@ $teal: #007880;
         opacity: 1;
     }
 }
         opacity: 1;
     }
 }

+.with-filter .row div.filter-container:hover {
+        top: 15px;
+        bottom: 5px;
+        opacity: 1;
+}

 
 .l-books__input .filter-container {
     top: 0;
 
 .l-books__input .filter-container {
     top: 0;