Updated banner

redhat-appstudio · Jul 16, 2024 · 495d5b3 · 495d5b3
1 parent 7be7498
commit 495d5b3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/antora-lunr-ui/css/main.css b/antora-lunr-ui/css/main.css
@@ -141,33 +141,37 @@ aside.toc.sidebar {
     visibility: visible;
 }
 
-
 .banner {
-    width: 100%;
-    background-color: #f44336;
-    /* Red background */
-    color: white;
-    text-align: center;
-    padding: 15px 0;
-    position: fixed;
-    top: 0;
-    z-index: 1000;
-    animation: slideDown 0.5s ease-in-out;
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 15px;
+    border: 1px solid #f5c6cb;
+    border-radius: 5px;
+    animation: slide-in 1s ease-out;
+    position: relative;
+    /* Ensure the banner does not overlap other elements */
+    margin: 10px 0;
+    /* Add some space between the navbar and the banner */
 }
 
-.banner a {
-    color: #ffc107;
-    /* Amber link color */
-    font-weight: bold;
-    text-decoration: none;
+.banner-title {
+    font-size: 24px;
+    margin: 0;
+}
+
+.banner-message {
+    font-size: 18px;
+    margin: 10px 0 0;
 }
 
-@keyframes slideDown {
+@keyframes slide-in {
     from {
         transform: translateY(-100%);
+        opacity: 0;
     }
 
     to {
         transform: translateY(0);
+        opacity: 1;
     }
 }
diff --git a/antora-lunr-ui/partials/header-content.hbs b/antora-lunr-ui/partials/header-content.hbs
@@ -29,12 +29,9 @@
       </div>
     </div>
   </nav>
-</header>
-<body>
   <div class="banner">
-    <h1>Deprecated Document Notice</h1>
-    <h3>The documentation you are viewing is deprecated. For the latest updates on Konflux, review
-        <a href="https://konflux-ci.dev/docs/" target="_blank">Konflux documentation</a>.</h3>
+    <h1 class="banner-title">Deprecated Document Notice</h1>
+    <h3 class="banner-message">The documentation you are viewing is deprecated. For the latest updates on Konflux,
+      review the <a href="https://konflux-ci.dev/docs/" target="_blank">Konflux documentation</a>.</h3>
   </div>
-
-</body>
+</header>