Remove depend HTML and update color gradient (#133)

Signed-off-by: mohin7 <mohin@appscode.com>
appscode · Feb 29, 2024 · fcabf70 · fcabf70
1 parent 6f82346
commit fcabf70
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -131,20 +131,15 @@
     <!-- new navbar area start .active-headroom  -->
     <div class="navbar-area header--fixed">
 
-      <!-- iframe  -->
-      <div class="notification-wrapper">
-        <div class="navbar-appscode container">
-          <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" onload="resizeIframe()"></iframe>
-        </div>
-      </div>
+      <!-- iframe for top notification  -->
+      <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" onload="resizeIframe()" style="height: 38px; width: 100%; display: flex; overflow: hidden;"></iframe>
       <script>
          function resizeIframe() {
           var iframe = document.getElementById("notification");
           iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
-          console.log(1);
         }
       </script>
-      <!-- iframe  -->
+      <!-- iframe for top notification  -->
       <div class="navbar-area navbar-fixed">
         <div class="navbar-appscode-wrapper ">
           <!-- appscode navbar start  -->

diff --git a/layouts/_default/notification_top.html b/layouts/_default/notification_top.html
@@ -18,6 +18,17 @@
       font-family: "Roboto", sans-serif;
       font-size: 14px;
     }
+
+    .notification-wrapper {
+    background: linear-gradient(-100deg,#fb00ff,#ffee00 32%,#fe4d5d 70%,#ff7900);
+    .navbar-appscode.container{
+      padding: 0;
+      @media (max-width: 1024px) {
+        padding: 0 16px;
+      }
+    }
+  }
+
     .notification-top {
       display: flex;
       align-items: center;
@@ -76,20 +87,44 @@
         }
       }
     }
+    /* navbar container spacing  */
+    .navbar-appscode{
+      &.container {
+        max-width: 1344px;
+        margin: 0 auto;
+        @media (min-width: 1601px) and (max-width: 1920px){
+          max-width: 1344px;
+        }
+        @media (min-width: 1408px) and (max-width: 1600px){
+          max-width: 1200px;
+        }
+        @media (min-width: 1216px) and (max-width: 1407px) {
+          max-width: 1152px !important;
+        }
+        @media (min-width: 1024px) and (max-width: 1215px) {
+          max-width: 960px !important;
+        }
+      }
+    }
   </style>
 </head>
 <body>
-  <div class="notification-top">
-    <a href="https://calendly.com/appscode/kubecon-eu-2024?text_color=1c1c1c&primary_color=00a651" target="_blank" class="left-content">
-      <span class="message">Connect with the AppsCode team at Kubecon EU: Reserve your personalized 1:1 chat now!</span>
-      <button class="button">
-        <span>Reserve Now</span>
-        <span class="icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8L6.22 5.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>
-          </svg>
-        </span>
-      </button>
-    </a>
+  <div class="notification-wrapper">
+    <div class="navbar-appscode container">
+      <div class="notification-top">
+        <a href="https://calendly.com/appscode/kubecon-eu-2024?text_color=1c1c1c&primary_color=00a651" target="_blank" class="left-content">
+          <span class="message">Connect with the AppsCode team at Kubecon EU: Reserve your personalized 1:1 chat now!</span>
+          <button class="button">
+            <span>Reserve Now</span>
+            <span class="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8L6.22 5.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>
+              </svg>
+            </span>
+          </button>
+        </a>
+      </div>
+    </div>
   </div>
+
 </body>
 </html>
diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss
@@ -3,22 +3,6 @@
   position: relative;
   z-index: 99;
   background-color: $ac-white;
-  .notification-wrapper {
-    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5e2dea+0,f8742e+50,f97530+51,7db9e8+100 */
-    background: linear-gradient(45deg,  #5e2dea 0%,#f8742e 50%,#f97530 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    .navbar-appscode.container{
-      padding: 0;
-      @media (max-width: 1024px) {
-        padding: 0 16px;
-      }
-    }
-    iframe {
-      overflow: hidden;
-      display: flex;
-      width: 100%;
-      height: 26px;
-    }
-  }
 }
 
 .navbar-appscode-wrapper {