chore: add Gateway API survey banner (#3450)

* chore: add Gateway API survey banner

Signed-off-by: Mattia Lavacca <[email protected]>

* chore: add survey banner

Signed-off-by: Mattia Lavacca <[email protected]>

---------

Signed-off-by: Mattia Lavacca <[email protected]>

Author: mlavacca

docs/stylesheets/banner.css

@@ -0,0 +1,14 @@
+.banner {
+    height: 12px;       /* Height of the banner */
+    position: sticky;   /* Follows as you scroll */
+    top: 0;             /* Absolute top of page */
+    left: 0;
+    width: 100%;
+    z-index: 1;         /* Tells the renderer "this is important", otherwise Admonition and Code Blocks will render into it */
+    text-align: center;
+    background-color: COLOR_HERE;
+}
+
+.md-header {
+    top: 12px;          /* This setting prevents the Material header from imposing into the space of the banner! */
+}

override/partials/header.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block header %}
+<!-- Custom Banner -->
+<div class="banner">
+    <p style="color:COLOR_HERE; display:inline;">Gateway API survey</p>
+</div>
+
+<!-- Original Header -->
+{% include "partials/header.html" %}
+{% endblock %}

site-src/overrides/main.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block announce %}
+    <div style="display: flex; align-items: center; justify-content: center; background-color: white; padding: 10px; border-radius: 5px;">
+        <div style="width: 30px; height: 30px; display: flex; align-items: center; margin-right: 10px;"> <!-- Add spacing after left logo -->
+            <img src="/images/logo/logo.svg" alt="Gateway API Logo" class="center" style="width: 100%; height: 100%;" />
+        </div>
+        <b style="color: black; display: flex; align-items: center;">
+            <a href="https://forms.gle/7kwf2TdBS2KMwV2FA" style="margin-right: 5px;">Gateway API survey</a> is out! We really appreciate your feedback!
+        </b>
+        <div style="width: 30px; height: 30px; display: flex; align-items: center; margin-left: 10px;"> <!-- Add spacing before right logo -->
+            <img src="/images/logo/logo.svg" alt="Gateway API Logo" class="center" style="width: 100%; height: 100%;" />
+        </div>
+    </div>
+{% endblock %}