Updates for the announcement bar compatibility

closes TryGhost/Product#3024
TryGhost · Apr 21, 2023 · fc120ad · fc120ad
1 parent c7ab2bf
commit fc120ad
Show file tree

Hide file tree

Showing 94 changed files with 193 additions and 161 deletions.
diff --git a/packages/_shared/assets/css/v1/components/article.css b/packages/_shared/assets/css/v1/components/article.css
@@ -27,7 +27,7 @@
     width: 100%;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-article-excerpt {
         font-size: 1.9rem;
     }

diff --git a/packages/_shared/assets/css/v1/components/content.css b/packages/_shared/assets/css/v1/components/content.css
@@ -95,7 +95,7 @@ is the very first element in the post content */
     margin-top: 0.8rem;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-content {
         margin-top: 3.2rem;
         font-size: 1.7rem;

diff --git a/packages/_shared/assets/css/v1/components/cta.css b/packages/_shared/assets/css/v1/components/cta.css
@@ -43,7 +43,7 @@
     color: var(--color-darker-gray);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-cta-actions {
         column-gap: 0.8rem;
     }

diff --git a/packages/_shared/assets/css/v1/components/footer.css b/packages/_shared/assets/css/v1/components/footer.css
@@ -48,7 +48,7 @@
     opacity: 1;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-foot {
         padding-top: 6.4rem;
         padding-bottom: 12rem;

diff --git a/packages/_shared/assets/css/v1/components/global.css b/packages/_shared/assets/css/v1/components/global.css
@@ -118,7 +118,7 @@ iframe {
     border: 0;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     h2 {
         font-size: 2.4rem;
     }

diff --git a/packages/_shared/assets/css/v1/components/header.css b/packages/_shared/assets/css/v1/components/header.css
@@ -111,7 +111,7 @@
     margin-right: 8px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-head-members {
         flex-direction: column-reverse;
         gap: 16px;
@@ -123,7 +123,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .gh-head-brand .gh-search {
         display: none;
     }
@@ -146,7 +146,7 @@ LOGO   Home About Collection Author Portal             Login Subscribe
     grid-template-columns: auto 1fr auto;
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-left-logo .gh-head-menu {
         margin-right: 64px;
         margin-left: 16px;
@@ -171,7 +171,7 @@ Home About Collection            LOGO                  Login Subscribe
     gap: 28px;
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-middle-logo .gh-head-menu {
         margin-right: 64px;
     }
@@ -185,6 +185,7 @@ Search                         LOGO                    Login Subscribe
 */
 
 .is-head-stacked .gh-head {
+    position: relative;
     height: auto;
 }
 
@@ -199,13 +200,13 @@ Search                         LOGO                    Login Subscribe
     min-height: 80px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .is-head-stacked .gh-head-brand {
         min-height: unset;
     }
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-stacked .gh-head-inner {
         padding: 0;
     }
@@ -283,6 +284,16 @@ Search                         LOGO                    Login Subscribe
     background-color: rgba(255, 255, 255, 0.2);
 }
 
+.is-head-transparent #announcement-bar-root {
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+.is-head-transparent #announcement-bar-root + :is(.site, .gh-site) .gh-head {
+    margin-top: 48px;
+}
+
 /* Dark header
 /* ---------------------------------------------------------- */
 
@@ -445,7 +456,7 @@ Search                         LOGO                    Login Subscribe
     transform: rotate(-45deg);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     #gh-head {
         height: 64px;
     }

diff --git a/packages/_shared/assets/css/v1/components/layout.css b/packages/_shared/assets/css/v1/components/layout.css
@@ -56,7 +56,7 @@ use it for applying any other styles. */
     width: 100%;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     #gh-main {
         padding-top: 4.8rem;
         padding-bottom: 4.8rem;

diff --git a/packages/_shared/assets/css/v1/components/navigation.css b/packages/_shared/assets/css/v1/components/navigation.css
@@ -32,7 +32,7 @@
     margin-left: 0.4rem;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-navigation-hide {
         display: none;
     }

diff --git a/packages/_shared/assets/css/v1/vars.css b/packages/_shared/assets/css/v1/vars.css
@@ -16,7 +16,7 @@
     --gap: 3.6rem;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     :root {
         --h1-size: 3.2rem !important;
         --gap: 2rem;

diff --git a/packages/_shared/assets/css/v1/vendor/pswp.css b/packages/_shared/assets/css/v1/vendor/pswp.css
@@ -187,7 +187,7 @@
     background-size: 264px 88px;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (resolution >= 105dpi), (resolution >= 1.1dppx) {
     .pswp--svg .pswp__button,
     .pswp--svg .pswp__button--arrow--left::before,
     .pswp--svg .pswp__button--arrow--right::before {
@@ -398,7 +398,7 @@
     border-radius: 50%;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (width <= 1024px) {
     .pswp__preloader {
         position: relative;
         top: auto;

diff --git a/packages/_shared/assets/css/v2/components/list.css b/packages/_shared/assets/css/v2/components/list.css
@@ -171,7 +171,7 @@
 
 /* Media queries */
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-list.grid .gh-list-feed {
         display: flex;
         flex-direction: column;
@@ -186,19 +186,19 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .gh-list.grid .gh-list-feed {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .gh-list.grid .gh-list-feed {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
     .gh-list.grid .gh-list-feed {
         grid-template-columns: repeat(4, 1fr);
     }

diff --git a/packages/_shared/assets/css/v2/components/navbar.css b/packages/_shared/assets/css/v2/components/navbar.css
@@ -121,7 +121,7 @@
     margin-right: 8px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-head-members {
         flex-direction: column-reverse;
         gap: 16px;
@@ -133,7 +133,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .gh-head-brand .gh-search {
         display: none;
     }
@@ -156,7 +156,7 @@ LOGO   Home About Collection Author Portal             Login Subscribe
     grid-template-columns: auto 1fr auto;
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-left-logo .gh-head-menu {
         margin-right: 64px;
         margin-left: 16px;
@@ -181,7 +181,7 @@ Home About Collection            LOGO                  Login Subscribe
     gap: 28px;
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-middle-logo .gh-head-menu {
         margin-right: 64px;
     }
@@ -195,6 +195,7 @@ Search                         LOGO                    Login Subscribe
 */
 
 .is-head-stacked.gh-head {
+    position: relative;
     height: auto;
 }
 
@@ -209,7 +210,7 @@ Search                         LOGO                    Login Subscribe
     min-height: 80px;
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
     .is-head-stacked .gh-head-inner {
         padding: 0;
     }
@@ -446,7 +447,7 @@ Search                         LOGO                    Login Subscribe
     transform: rotate(-45deg);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     #gh-head {
         height: 64px;
     }

diff --git a/packages/_shared/assets/css/v2/general/archive.css b/packages/_shared/assets/css/v2/general/archive.css
@@ -59,7 +59,7 @@
     font-size: 0;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-archive-inner {
         grid-template-columns: 1fr;
     }

diff --git a/packages/_shared/assets/css/v2/general/content.css b/packages/_shared/assets/css/v2/general/content.css
@@ -110,7 +110,7 @@ is the very first element in the post content */
     border: 0;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .gh-content {
         margin-top: 3.2rem;
         font-size: 1.7rem;

diff --git a/packages/_shared/assets/css/v2/general/lightbox.css b/packages/_shared/assets/css/v2/general/lightbox.css
@@ -187,7 +187,7 @@
     background-size: 264px 88px;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (resolution >= 105dpi), (resolution >= 1.1dppx) {
     .pswp--svg .pswp__button,
     .pswp--svg .pswp__button--arrow--left::before,
     .pswp--svg .pswp__button--arrow--right::before {
@@ -398,7 +398,7 @@
     border-radius: 50%;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (width <= 1024px) {
     .pswp__preloader {
         position: relative;
         top: auto;

diff --git a/packages/alto/assets/built/screen.css b/packages/alto/assets/built/screen.css
diff --git a/packages/alto/assets/built/screen.css.map b/packages/alto/assets/built/screen.css.map
diff --git a/packages/alto/assets/css/blog/featured.css b/packages/alto/assets/css/blog/featured.css
@@ -22,7 +22,7 @@
     line-height: 1.2;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .featured-posts {
         margin-top: 24px;
         margin-bottom: 0;

diff --git a/packages/alto/assets/css/blog/post.css b/packages/alto/assets/css/blog/post.css
@@ -71,7 +71,7 @@
     font-family: var(--font-serif);
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .post-media.large {
         margin-bottom: 30px;
     }

diff --git a/packages/alto/assets/css/blog/single.css b/packages/alto/assets/css/blog/single.css
@@ -29,7 +29,7 @@
     font-size: 17px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .single-post .post-header {
         margin-top: -30px;
     }

diff --git a/packages/alto/assets/css/misc/owl.css b/packages/alto/assets/css/misc/owl.css
@@ -171,7 +171,7 @@
     transition: height 500ms ease-in-out;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .owl .owl-prev {
         left: 10px;
     }

diff --git a/packages/alto/assets/css/misc/utilities.css b/packages/alto/assets/css/misc/utilities.css
@@ -30,37 +30,37 @@
     padding-bottom: 100%;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .u-placeholder.horizontal::before {
         padding-bottom: 62.5%;
     }
 }
 
-@media (max-width: 575px) {
+@media (width <= 575px) {
     .hidden-xs {
         display: none !important;
     }
 }
 
-@media (min-width: 576px) and (max-width: 767px) {
+@media (width >= 576px) and (width <= 767px) {
     .hidden-sm {
         display: none !important;
     }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (width >= 768px) and (width <= 991px) {
     .hidden-md {
         display: none !important;
     }
 }
 
-@media (min-width: 992px) and (max-width: 1199px) {
+@media (width >= 992px) and (width <= 1199px) {
     .hidden-lg {
         display: none !important;
     }
 }
 
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
     .hidden-xl {
         display: none !important;
     }

diff --git a/packages/alto/assets/css/site/term.css b/packages/alto/assets/css/site/term.css
@@ -26,7 +26,7 @@
     line-height: 1.5;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
     .term {
         margin-top: -30px;
     }

diff --git a/packages/bulletin/assets/built/screen.css b/packages/bulletin/assets/built/screen.css
diff --git a/packages/bulletin/assets/built/screen.css.map b/packages/bulletin/assets/built/screen.css.map