Updated Zuplo banner to be responsive

go-fuego · Jul 8, 2024 · dd56e59 · dd56e59
1 parent a8a910d
commit dd56e59
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/documentation/docusaurus.config.ts b/documentation/docusaurus.config.ts
@@ -93,14 +93,10 @@ const config: Config = {
         },
         {
           position: "left",
-          value:
-            "<div class='hidden-when-small' style='background-color: light-dark(rgb(235 237 240), rgb(68 73 80));padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px;border-radius: 12px; color: light-dark(black, white)'><span>Secure, Document, and Monetize your Fuego API for FREE</span><a target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a></div>",
-          type: "html",
-        },
-        {
-          position: "left",
-          value:
-            "<div class='hidden-when-large' style='background-color: light-dark(rgb(235 237 240), rgb(68 73 80));padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px;border-radius: 12px; color: light-dark(black, white)'><span>Scale your Fuego API</span><a target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a></div>",
+          value: `<div class='display-large' style='background-color: light-dark(rgb(235 237 240), rgb(68 73 80));padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px;border-radius: 12px; color: light-dark(black, white)'><span>Secure, Document, and Monetize your Fuego API for FREE</span><a target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a></div>
+            <div class='display-medium' style='background-color: light-dark(rgb(235 237 240), rgb(68 73 80));padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px;border-radius: 12px; color: light-dark(black, white)'><span class='hidden-when-very-small'>Scale your Fuego API</span><a target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a></div>
+            <a class='display-small' target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a>
+            <div class='display-mobile' style='background-color: light-dark(rgb(235 237 240), rgb(68 73 80));padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px;border-radius: 12px; color: light-dark(black, white)'><span class='hidden-when-very-small'>Scale your Fuego API</span><a target='_blank' href='https://zuplo.link/fuego-web' style='background-color: rgb(255 0 189);padding: 6px;border-radius: 8px; margin-left:6px; color: white; text-wrap: nowrap'>Try Zuplo!</a></div>`,
           type: "html",
         },
       ],

diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
@@ -29,14 +29,51 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
-@media only screen and (max-width: 1400px) {
-  .hidden-when-small {
+/*
+
+Mobile: <996px
+Small : 996px - 1159px
+Medium : 1160px - 1429px
+Large : >1430px
+
+*/
+
+.display-mobile {
+  display: block;
+}
+
+@media (min-width: 996px) {
+  .display-mobile {
     display: none;
   }
 }
 
-@media only screen and (min-width: 1400px) {
-  .hidden-when-large {
-    display: none;
+.display-small {
+  display: none;
+}
+
+@media (min-width: 996px) and (max-width: 1159px) {
+  .display-small {
+    display: block;
+  }
+}
+
+.display-medium {
+  display: none;
+}
+
+@media (min-width: 1161px) and (max-width: 1429px) {
+  .display-medium {
+    display: block;
+  }
+}
+
+.display-large {
+  display: none;
+}
+
+@media (min-width: 1430px) {
+  .display-large {
+    display: block;
   }
 }