Merge branch 'develop' into 'master'

feat: updated lap css

See merge request !63

_sass/elixir/_lap.scss

-#lap-cookies-banner {
-    position: fixed;
-    bottom: 0;
-    background-color: #fff;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    z-index: 1000;
-    left: 0;
-    text-align: center;
-    border-top: 1px solid #023452;
-    width: 100%;
-    display: none;
-
-    /* hidden by default */
-}
+$primary-color: #198cdc;
+$background-color: #fff;
 
-#lap-cookies-banner .banner-intro {
+#lap-cookies-banner {
+  position: fixed;
+  bottom: 0;
+  background-color: $background-color;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  z-index: 1000;
+  left: 0;
+  text-align: center;
+  border-top: 1px solid $primary-color;
+  width: 100%;
+  /* hidden by default */
+  transition : 180ms transform ease-out;
+  transform  : translateY(+100%);
+  flex-direction: column;
+
+  &.shown {
+    transform  : translateY(0);
+    transition : 150 transform ease-in;
+  }
+
+  .banner-intro {
     width: 40%;
     position: relative;
     left: 30%;
     text-align: left;
-}
 
-#lap-cookies-banner .banner-img {
-    width: 90px;
-    padding-top: 0;
-    height: 90px;
+    .lap-close {
+      opacity: 0.5;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &:before, &:after {
+        position: absolute;
+        left: 5px;
+        content: ' ';
+        height: 15px;
+        width: 3px;
+        background-color: $primary-color;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  .banner-img {
+    width: 50px;
     position: absolute;
-    padding-left: 10px;
-}
+    padding-top: 5px;
+    height: 50px;
+  }
 
-#lap-cookies-banner .banner-title {
-    padding-left: 110px;
-}
+  .banner-title {
+    font-size: 120%;
+    font-weight: bold;
+    text-align: left;
+    padding-left: 60px;
+  }
 
-#lap-cookies-banner .banner-text {
-    padding-left: 110px;
-    padding-bottom: 1em;
-}
+  .banner-text {
+    min-height: 40px;
+    padding-left: 60px;
+    font-size: 80%;
+    text-align: left;
+  }
 
-#lap-cookies-banner .banner-buttons {
-    padding-top: 5px;
-    height: 20px;
+  .banner-buttons {
+    padding-top: 25px;
     margin-bottom: 10px;
-}
 
-#lap-cookies-banner .close-button {
-    position: absolute;
-    left: 100%;
-}
+    .lap-accept,
+    .lap-refuse,
+    .lap-cookies-more,
+    .btn.active {
+      border: 1px solid $primary-color;
+      font-weight: bold;
+      background-color: $primary-color;
+      color: $background-color !important;
+      box-sizing: border-box;
+      transition: background-color 350ms ease-in-out;
+    }
 
-#lap-cookies-banner .banner-buttons .lap-accept,
-#lap-cookies-banner .banner-buttons .lap-refuse,
-#lap-cookies-banner .banner-buttons .lap-cookies-more,
-#lap-cookies-banner .banner-buttons .btn.active {
-    border: 1px solid #023452;
-    font-weight: bold;
-    background-color: #023452;
-    color: #ffffff !important;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
+    .lap-accept:hover,
+    .lap-refuse:hover,
+    .lap-cookies-more:hover,
+    .btn.selected {
+      background: white;
+      color: $primary-color !important;
+      border: 1px solid currentColor;
+      box-sizing: border-box;
+      text-decoration: none;
+    }
+  }
 
-#lap-cookies-banner .banner-buttons .lap-accept:hover,
-#lap-cookies-banner .banner-buttons .lap-refuse:hover,
-#lap-cookies-banner .banner-buttons .lap-cookies-more:hover,
-#lap-cookies-banner .banner-buttons .btn.selected {
-    background: white;
-    color: #023452 !important;
-    border: 1px solid #023452;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    text-decoration: none;
-}
+  .close-button {
+    position: absolute;
+    left: 100%;
+    cursor: pointer;
+  }
 
-#lap-cookies-banner .btn {
+  .btn {
     text-decoration: none;
     display: inline-block;
-    margin-bottom: 0;
     text-align: center;
     vertical-align: middle;
     touch-action: manipulation;
@@ -94,75 +130,38 @@
     margin-right: 10px;
     margin-bottom: 10px;
     cursor: pointer;
-}
+  }
 
-#lap-cookies-banner .banner-checkboxes {
+  .banner-checkboxes {
     font-size: 80%;
     margin-top: 1em;
-}
+  }
 
-#lap-cookies-banner .checkbox-label {
+  .checkbox-label {
     margin-left: 0.3em;
     margin-right: 1.5em;
     top: -0.2em;
     position: relative;
-}
+  }
 
-@media(max-width: 500px) {
-    #lap-cookies-banner {
-        position: fixed;
-        bottom: 0;
-        background-color: #fff;
-        padding-top: 1em;
-        padding-bottom: 1em;
-        z-index: 1000;
-        left: 0;
-        text-align: center;
-        border-top: 1px solid #023452;
-        width: 100%;
-        display: none;
-        height: 280px;
-        overflow: auto;
-        /* hidden by default */
-    }
-
-    #lap-cookies-banner .banner-intro {
-        width: 60%;
-        position: relative;
-        left: 20%;
-        text-align: left;
-    }
-}
-
-@media(max-width: 1100px) {
-    #lap-cookies-banner .banner-intro {
-        width: 90%;
-        position: relative;
-        left: 5%;
-        text-align: left;
-    }
-    #lap-cookies-banner .banner-buttons {
-        padding-top: 5px;
-        height: 60px;
-        margin-bottom: 10px;
+  @media(max-width: 500px) {
+    font-size: 80%;
+    .btn {
+      font-size: 80%;
     }
-}
-
-@media(max-width: 1600px) {
-    #lap-cookies-banner .banner-intro {
-        width: 60%;
-        position: relative;
-        left: 20%;
-        text-align: left;
+    .banner-intro {
+      width: 80%;
+      position: relative;
+      left: 10%;
+      text-align: left;
     }
-}
-
-/* ultra-wide screen */
-@media(min-width: 2400px) {
-    #lap-cookies-banner .banner-intro {
-        position: relative;
-        text-align: left;
-        max-width: 800px;
-        left: 35%;
+  }
+  @media(max-width: 1000px) {
+    .banner-intro {
+      width: 80%;
+      position: relative;
+      left: 10%;
+      text-align: left;
     }
+  }
 }

elixir-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-elixir-theme"
-  spec.version       = "0.10.5"
+  spec.version       = "0.10.6"
   spec.authors       = ["jacek.lebioda"]
   spec.email         = ["jacek.lebioda@uni.lu"]