Version 2.1.6

assets/css/404.css

@@ -1 +1 @@
-:root{--show-fade-animation:1}.l-fullscreen{align-items:center;display:flex;height:100vh;justify-content:center}.l-fullscreen__content{padding:0 20px;text-align:center}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-404-title{color:var(--primary-foreground-color);font-size:9rem;font-weight:700;letter-spacing:3px;line-height:1;margin:0 0 10px}@media only screen and (min-width:48rem){.m-404-title{font-size:12rem;letter-spacing:4px;margin-bottom:5px}}.m-404-subtitle{color:var(--primary-foreground-color);font-size:1.25rem;font-weight:600;letter-spacing:.4px;line-height:1;margin-bottom:20px}@media only screen and (min-width:48rem){.m-404-subtitle{font-size:1.5rem;letter-spacing:.5px}}.m-404-text{font-size:.875em;letter-spacing:.3px;line-height:1.4;margin-bottom:25px;padding:0 20px}@media only screen and (min-width:48rem){.m-404-text{font-size:1rem;margin-bottom:30px;padding:0}}
+:root{--announcement-bar-height:0px;--show-fade-animation:1}.l-fullscreen{align-items:center;display:flex;height:100vh;justify-content:center}.l-fullscreen__content{padding:0 20px;text-align:center}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-404-title{color:var(--primary-foreground-color);font-size:9rem;font-weight:700;letter-spacing:3px;line-height:1;margin:0 0 10px}@media only screen and (min-width:48rem){.m-404-title{font-size:12rem;letter-spacing:4px;margin-bottom:5px}}.m-404-subtitle{color:var(--primary-foreground-color);font-size:1.25rem;font-weight:600;letter-spacing:.4px;line-height:1;margin-bottom:20px}@media only screen and (min-width:48rem){.m-404-subtitle{font-size:1.5rem;letter-spacing:.5px}}.m-404-text{font-size:.875em;letter-spacing:.3px;line-height:1.4;margin-bottom:25px;padding:0 20px}@media only screen and (min-width:48rem){.m-404-text{font-size:1rem;margin-bottom:30px;padding:0}}

assets/css/home.css

@@ -1 +1 @@
-:root{--show-fade-animation:1}.m-featured-slider.swiper{height:350px;margin:-40px -20px 40px;overflow:hidden!important;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider.swiper:hover{box-shadow:var(--article-shadow-hover),0 0 0 transparent;transform:translateY(-5px)}.m-featured-slider.swiper{border-radius:10px;height:420px;margin:-40px 10px 20px;width:100%}}@media only screen and (min-width:64rem){.m-featured-slider.swiper{margin:0 20px 40px;overflow:unset;width:calc(66.66667% - 40px)}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{height:100%;list-style-type:none;margin:0;padding:0}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{background-color:var(--primary-subtle-color);height:100%;overflow:hidden;position:relative;z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{background-color:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.m-featured-article__picture div{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;opacity:.7;width:100%}.m-featured-article__meta{left:20px;position:absolute;top:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{left:40px;top:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{background-color:#fff;border:2px solid #fff;border-radius:50%;display:block;height:35px;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1);width:35px}.m-featured-article__author div{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;height:100%;width:100%}.m-featured-article__tag{color:#fff;font-size:1rem;font-weight:700;letter-spacing:.3px}.m-featured-article__ribbon{align-items:center;background-color:#fff;border-radius:50%;color:#000;display:flex;height:24px;justify-content:center;position:absolute;right:20px;top:26px;width:24px;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{border-radius:15px;font-size:.875rem;font-weight:600;height:22px;justify-content:flex-start;padding:0 7px;right:40px;top:47px;width:auto}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{left:20px;right:auto}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{left:40px;right:auto}.rtl .m-featured-article__ribbon span:first-of-type{margin-left:4px;margin-right:0}}.m-featured-article__content{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:120px 20px 20px;position:relative;width:100%;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;font-size:1.625rem;font-weight:600;letter-spacing:.4px;line-height:1.3;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{font-size:2.25em;letter-spacing:.5px;max-width:80%}}.m-featured-article__timestamp{align-items:center;color:#fff;display:flex;font-size:.875rem;letter-spacing:.2px}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}
+:root{--announcement-bar-height:0px;--show-fade-animation:1}.m-featured-slider.swiper{height:350px;margin:-40px -20px 40px;overflow:hidden!important;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider.swiper:hover{box-shadow:var(--article-shadow-hover),0 0 0 transparent;transform:translateY(-5px)}.m-featured-slider.swiper{border-radius:10px;height:420px;margin:-40px 10px 20px;width:100%}}@media only screen and (min-width:64rem){.m-featured-slider.swiper{margin:0 20px 40px;overflow:unset;width:calc(66.66667% - 40px)}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{height:100%;list-style-type:none;margin:0;padding:0}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{background-color:var(--primary-subtle-color);height:100%;overflow:hidden;position:relative;z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{background-color:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.m-featured-article__picture div{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;opacity:.7;width:100%}.m-featured-article__meta{left:20px;position:absolute;top:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{left:40px;top:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{background-color:#fff;border:2px solid #fff;border-radius:50%;display:block;height:35px;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1);width:35px}.m-featured-article__author div{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;height:100%;width:100%}.m-featured-article__tag{color:#fff;font-size:1rem;font-weight:700;letter-spacing:.3px}.m-featured-article__ribbon{align-items:center;background-color:#fff;border-radius:50%;color:#000;display:flex;height:24px;justify-content:center;position:absolute;right:20px;top:26px;width:24px;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{border-radius:15px;font-size:.875rem;font-weight:600;height:22px;justify-content:flex-start;padding:0 7px;right:40px;top:47px;width:auto}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{left:20px;right:auto}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{left:40px;right:auto}.rtl .m-featured-article__ribbon span:first-of-type{margin-left:4px;margin-right:0}}.m-featured-article__content{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:120px 20px 20px;position:relative;width:100%;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;font-size:1.625rem;font-weight:600;letter-spacing:.4px;line-height:1.3;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{font-size:2.25em;letter-spacing:.5px;max-width:80%}}.m-featured-article__timestamp{align-items:center;color:#fff;display:flex;font-size:.875rem;letter-spacing:.2px}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}

assets/css/newsletter.css

@@ -1 +1 @@
-:root{--show-fade-animation:1}.l-fullscreen{align-items:center;display:flex;height:100vh;justify-content:center}.l-fullscreen__content{padding:0 20px;text-align:center}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-back{align-items:center;color:var(--titles-color);cursor:pointer;display:flex;font-size:.875rem;left:20px;letter-spacing:.2px;position:absolute;top:20px;z-index:2}@media only screen and (min-width:48rem){.m-back{font-size:1rem;letter-spacing:.3px;top:40px}}.m-back span{color:inherit;display:inline-block}.rtl .m-back span:first-of-type{order:2}.m-back__icon{font-size:.75rem;margin-right:10px}@media only screen and (min-width:48rem){.m-back__icon{font-size:.875rem}}.rtl .m-back__icon{order:1}.m-subscribe-section{background-color:var(--secondary-subtle-color);padding:50px 0}@media only screen and (min-width:48rem){.m-subscribe-section{padding:80px 0}.m-subscribe-section__content{align-items:center;display:flex;justify-content:space-between}}.m-subscribe-section__text{margin-bottom:30px;text-align:center}@media only screen and (min-width:48rem){.m-subscribe-section__text{flex:1;margin-bottom:0;padding-right:75px;text-align:left}.rtl .m-subscribe-section__text{padding-left:75px;padding-right:0;text-align:right}}.m-subscribe-section__title{color:var(--titles-color);font-size:1.25rem;font-weight:600;letter-spacing:.3px;line-height:1.3;margin:0 0 20px}@media only screen and (min-width:48rem){.m-subscribe-section__title{font-size:1.5rem;letter-spacing:.3px;margin-bottom:15px}}.m-subscribe-section__description{letter-spacing:.2px;line-height:1.4}@media only screen and (min-width:48rem){.m-subscribe-section__description{font-size:1.125rem}.m-subscribe-section__form{margin:0 auto;width:300px}}.m-subscribe-section__container.loading .m-button{pointer-events:none}.m-subscribe-section__container.success .m-subscribe__success{display:block}.m-subscribe-section__container.success .m-subscribe__error,.m-subscribe-section__container.success .m-subscribe__form,.m-subscribe-section__container.success .m-subscribe__invalid{display:none}.m-subscribe-section__container.error .m-subscribe__error,.m-subscribe-section__container.invalid .m-subscribe__invalid{display:block}.m-subscribe-section__container.error .m-subscribe__form{margin-bottom:20px}.m-subscribe-section__container .m-subscribe__error,.m-subscribe-section__container .m-subscribe__invalid,.m-subscribe-section__container .m-subscribe__success{display:none}.m-subscribe__success_icon{display:block;height:64px;margin:0 auto 25px;width:64px}.m-subscribe__error{text-align:center}
+:root{--announcement-bar-height:0px;--show-fade-animation:1}.l-fullscreen{align-items:center;display:flex;height:100vh;justify-content:center}.l-fullscreen__content{padding:0 20px;text-align:center}@media only screen and (min-width:48rem){.l-fullscreen__content{max-width:500px}.l-fullscreen__content.in-subscribe-page{padding:0}}@media only screen and (min-width:64rem){.l-fullscreen__content.in-subscribe-page{max-width:820px}}.m-back{align-items:center;color:var(--titles-color);cursor:pointer;display:flex;font-size:.875rem;left:20px;letter-spacing:.2px;position:absolute;top:20px;z-index:2}@media only screen and (min-width:48rem){.m-back{font-size:1rem;letter-spacing:.3px;top:40px}}.m-back span{color:inherit;display:inline-block}.rtl .m-back span:first-of-type{order:2}.m-back__icon{font-size:.75rem;margin-right:10px}@media only screen and (min-width:48rem){.m-back__icon{font-size:.875rem}}.rtl .m-back__icon{order:1}.m-subscribe-section{background-color:var(--secondary-subtle-color);padding:50px 0}@media only screen and (min-width:48rem){.m-subscribe-section{padding:80px 0}.m-subscribe-section__content{align-items:center;display:flex;justify-content:space-between}}.m-subscribe-section__text{margin-bottom:30px;text-align:center}@media only screen and (min-width:48rem){.m-subscribe-section__text{flex:1;margin-bottom:0;padding-right:75px;text-align:left}.rtl .m-subscribe-section__text{padding-left:75px;padding-right:0;text-align:right}}.m-subscribe-section__title{color:var(--titles-color);font-size:1.25rem;font-weight:600;letter-spacing:.3px;line-height:1.3;margin:0 0 20px}@media only screen and (min-width:48rem){.m-subscribe-section__title{font-size:1.5rem;letter-spacing:.3px;margin-bottom:15px}}.m-subscribe-section__description{letter-spacing:.2px;line-height:1.4}@media only screen and (min-width:48rem){.m-subscribe-section__description{font-size:1.125rem}.m-subscribe-section__form{margin:0 auto;width:300px}}.m-subscribe-section__container.loading .m-button{pointer-events:none}.m-subscribe-section__container.success .m-subscribe__success{display:block}.m-subscribe-section__container.success .m-subscribe__error,.m-subscribe-section__container.success .m-subscribe__form,.m-subscribe-section__container.success .m-subscribe__invalid{display:none}.m-subscribe-section__container.error .m-subscribe__error,.m-subscribe-section__container.invalid .m-subscribe__invalid{display:block}.m-subscribe-section__container.error .m-subscribe__form{margin-bottom:20px}.m-subscribe-section__container .m-subscribe__error,.m-subscribe-section__container .m-subscribe__invalid,.m-subscribe-section__container .m-subscribe__success{display:none}.m-subscribe__success_icon{display:block;height:64px;margin:0 auto 25px;width:64px}.m-subscribe__error{text-align:center}

assets/css/tags.css

@@ -1 +1 @@
-:root{--show-fade-animation:1}@media only screen and (min-width:48rem){.l-tags-container{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:720px}}@media only screen and (min-width:64rem){.l-tags-container{max-width:1080px}}.m-tag-card{border:1px solid var(--secondary-border-color);border-radius:10px;height:180px;margin:0 0 20px;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card:hover{transform:translateY(-5px)}.m-tag-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}@media only screen and (min-width:48rem){.m-tag-card{margin:0 20px 40px;width:320px}}.m-tag-card:before{border-radius:10px;bottom:0;box-shadow:var(--article-shadow-normal),0 0 0 transparent;content:"";left:10px;position:absolute;right:10px;top:10px;transition:all .25s cubic-bezier(.02,.01,.47,1);z-index:1}.m-tag-card__link{background-color:#000;border-radius:10px;display:block;height:100%;overflow:hidden;position:relative;width:100%;z-index:2}.m-tag-card__link.no-picture{background-color:var(--secondary-subtle-color)}.m-tag-card__picture{border-radius:10px;height:100%;left:0;-o-object-fit:cover;object-fit:cover;opacity:.7;position:absolute;top:0;width:100%;z-index:1}.m-tag-card__info{bottom:15px;color:#fff;left:15px;position:absolute;z-index:2}.m-tag-card__info.no-picture{color:var(--titles-color)}.m-tag-card__name{font-size:1.25rem;font-weight:600;letter-spacing:.3px;line-height:1.3;margin:0 0 5px}.m-tag-card__counter{display:block;font-size:.875rem;letter-spacing:.2px}
+:root{--announcement-bar-height:0px;--show-fade-animation:1}@media only screen and (min-width:48rem){.l-tags-container{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:720px}}@media only screen and (min-width:64rem){.l-tags-container{max-width:1080px}}.m-tag-card{border:1px solid var(--secondary-border-color);border-radius:10px;height:180px;margin:0 0 20px;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card:hover{transform:translateY(-5px)}.m-tag-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}@media only screen and (min-width:48rem){.m-tag-card{margin:0 20px 40px;width:320px}}.m-tag-card:before{border-radius:10px;bottom:0;box-shadow:var(--article-shadow-normal),0 0 0 transparent;content:"";left:10px;position:absolute;right:10px;top:10px;transition:all .25s cubic-bezier(.02,.01,.47,1);z-index:1}.m-tag-card__link{background-color:#000;border-radius:10px;display:block;height:100%;overflow:hidden;position:relative;width:100%;z-index:2}.m-tag-card__link.no-picture{background-color:var(--secondary-subtle-color)}.m-tag-card__picture{border-radius:10px;height:100%;left:0;-o-object-fit:cover;object-fit:cover;opacity:.7;position:absolute;top:0;width:100%;z-index:1}.m-tag-card__info{bottom:15px;color:#fff;left:15px;position:absolute;z-index:2}.m-tag-card__info.no-picture{color:var(--titles-color)}.m-tag-card__name{font-size:1.25rem;font-weight:600;letter-spacing:.3px;line-height:1.3;margin:0 0 5px}.m-tag-card__counter{display:block;font-size:.875rem;letter-spacing:.2px}

package.json

@@ -87,5 +87,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "2.1.5"
+  "version": "2.1.6"
 }

src/js/app.js

@@ -266,21 +266,33 @@ $(() => {
   }
 
   if ($announcementBar.length > 0) {
-    $announcementBar.detach().prependTo($header);
     $header.addClass('with-announcement-bar');
 
     setTimeout(() => {
-      $body.css('padding-top', $announcementBar.height());
       $header.removeAttr('data-animate');
     }, 500);
 
-    const barObserver = new MutationObserver((e) => {
+    const barMutationObserver = new MutationObserver((e) => {
-      if (e[0].removedNodes.length) {
+      if (e[0].addedNodes.length) {
-        $body.css('padding-top', 0);
+        $announcementBar.detach().prependTo($header);
+        const barHeight = $announcementBar.height();
+        document.documentElement.style.setProperty('--announcement-bar-height', `${barHeight}px`);
       }
-    })
 
-    barObserver.observe($announcementBar[0], { childList: true });
+      if (e[0].removedNodes.length) {
+        document.documentElement.style.setProperty('--announcement-bar-height', '0px');
+      }
+    });
+
+    const barResizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const barHeight = entry.contentRect.height;
+        document.documentElement.style.setProperty('--announcement-bar-height', `${barHeight}px`);
+      })
+    });
+
+    barMutationObserver.observe($announcementBar[0], { childList: true });
+    barResizeObserver.observe($announcementBar[0]);
   } else {
     setTimeout(() => {
       $header.removeAttr('data-animate');
@@ -320,7 +332,7 @@ $(() => {
     });
   }
 
-  tippy('.js-tooltip');
+  tippy('.js-tooltip', { allowHTML: true });
 
   shave('.js-article-card-title', 100);
   shave('.js-article-card-title-no-image', 250);

src/sass/common/_global.scss

@@ -11,6 +11,7 @@ body {
   font-display: swap;
   overflow-x: hidden;
   background-color: var(--background-color);
+  padding-top: var(--announcement-bar-height);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   @include transition(padding-top linear 0.2s);

src/sass/common/_variables.scss

@@ -9,8 +9,8 @@ $gray: #9b9b9b;
 
 $mobile-space: 20px;
 $mobile-bar-height: 50px;
-$desktop-bar-height: 64px;
 
 :root {
+  --announcement-bar-height: 0px;
   --show-fade-animation: 1;
 }

src/sass/components/header/_submenu.scss

@@ -4,7 +4,7 @@
   @include respond-to("medium") {
     visibility: hidden;
     position: fixed;
-    top: 45px;
+    top: 67px;
     left: 0;
     width: 100%;
     padding: 30px 0 20px 0;