fix(docs-site): announcement bar responsive behavior (#11681)

datahub-project · Oct 21, 2024 · c09f13b · c09f13b
1 parent 16f9075
commit c09f13b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
@@ -68,7 +68,7 @@ module.exports = {
     announcementBar: {
           id: "announcement-2",
           content:
-            '<div style="display: flex; justify-content: center; align-items: center;width: 100%;"><!--img src="/img/acryl-logo-white-mark.svg" / --><div style="font-size: .8rem; font-weight: 600; background-color: white; color: #111; padding: 0px 8px; border-radius: 4px; margin-right:12px;">NEW</div><p><span>Join us at Metadata & AI Summit, Oct. 29 & 30!</span></p><a href="http://www.acryldata.io/conference?utm_source=datahub_web&utm_medium=metadata_ai_2024&utm_campaign=home_banner" target="_blank" class="button">Register →</a></div>',
+            '<div style="display: flex; justify-content: center; align-items: center;width: 100%;"><!--img src="/img/acryl-logo-white-mark.svg" / --><div style="font-size: .8rem; font-weight: 600; background-color: white; color: #111; padding: 0px 8px; border-radius: 4px; margin-right:12px;">NEW</div><p>Join us at Metadata & AI Summit, Oct. 29 & 30!</p><a href="http://www.acryldata.io/conference?utm_source=datahub_web&utm_medium=metadata_ai_2024&utm_campaign=home_banner" target="_blank" class="button">Register<span> →</span></a></div>',
           backgroundColor: "#111",
           textColor: "#ffffff",
           isCloseable: false,

diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss
@@ -116,21 +116,34 @@ div[class^="announcementBar"] {
     >div {
       display: flex;
       align-items: center;
+      > div {
+        @media (max-width: 580px) {
+            display: none;
+          }
+      }
+      a>span {
+        @media (max-width: 580px) {
+          display: none;
+        }
+      }
 
       >p {
         text-align: left;
         line-height: 1.1rem;
         margin: 0;
 
-        >span {
-          @media (max-width: 780px) {
-            display: none;
-          }
-        }
-
-        @media (max-width: 480px) {
-          display: none;
+        @media (max-width: 580px) {
+          font-size: .9rem;
         }
+        // >span {
+        //   @media (max-width: 780px) {
+        //     display: none;
+        //   }
+        // }
+
+        // @media (max-width: 480px) {
+        //   display: none;
+        // }
       }
     }