add single line and animation options to banner (#205)

mmmeon · web-flow · commit e0b6edda694d · 2026-03-09T19:55:36.000-04:00
* feat(banner.js): add "minimal" size for banner

all text on a single line without pulsing animation

* feat(banner.js): split minimal to animation &amp; size

* docs(banner.md): update table with new params

add animation: on/off &amp; size: minimal

* docs(banner.md): add minimal &amp; animation example
diff --git a/public/banner.js b/public/banner.js
@@ -13,11 +13,13 @@
  *   lang=fr       Override the browser language (default: auto-detected)
  *   id=myDiv      Insert the banner inside the element with this id
  *                 (default: prepend to <body>)
- *   size=normal   Banner size: "normal" (default) or "mini"
+ *   size=normal   Banner size: "normal" (default), "mini" or "minimal"
  *   link=URL      Make the banner text a link (default: https://keepandroidopen.org)
  *                 Set link=none to disable the link
  *   hidebutton=on Show an X close button (default: on)
  *                 Set hidebutton=off to hide the close button
+ *   animation=on  Add animation to border of banner (default: on)
+ *                 Set animation=off to disable
  */
 (function () {
   "use strict";
@@ -101,7 +103,10 @@
   );
 
   // ── Size variant ──────────────────────────────────────────────────────
-  var size = params.size === "mini" ? "mini" : "normal";
+  var size = params.size === "mini" ? "mini"
+      : params.size === "minimal"
+        ? "minimal"
+        : "normal";
 
   // ── Link ────────────────────────────────────────────────────────────
   var linkParam = params.link;
@@ -133,7 +138,6 @@
         "0px 3px 0px #751111," +
         "0px 4px 0px #5e0d0d," +
         "0px 6px 10px rgba(0,0,0,0.5);" +
-      "animation:kao-pulse 2s infinite;" +
       "padding:0.5rem 2.5rem;" +
       "line-height:1.6;" +
       "box-sizing:border-box;" +
@@ -156,12 +160,33 @@
         "0px 1px 0px #9e1a1a," +
         "0px 2px 0px #8a1515," +
         "0px 3px 5px rgba(0,0,0,0.4);" +
-      "animation:kao-pulse 2s infinite;" +
       "padding:0.25rem 1.5rem;" +
       "line-height:1.4;" +
       "box-sizing:border-box;" +
     "}";
 
+  var cssMinimal =
+    ".kao-banner{" +
+    "position:relative;" +
+    "font-variant-numeric:tabular-nums;" +
+    "background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);" +
+    "border-bottom:2px solid #801313;" +
+    "color:#fff;" +
+    "font-family:'Arial Black',sans-serif;" +
+    "font-weight:900;" +
+    "text-transform:uppercase;" +
+    "letter-spacing:1px;" +
+    "font-size:0.75rem;" +
+    "text-align:center;" +
+    "text-shadow:" +
+    "0px 1px 0px #9e1a1a," +
+    "0px 2px 0px #8a1515," +
+    "0px 3px 5px rgba(0,0,0,0.4);" +
+    "padding:0.25rem 1.5rem;" +
+    "line-height:1.4;" +
+    "box-sizing:border-box;" +
+    "}";
+
   var cssCommon =
     ".kao-banner a{color:#fff;text-decoration:none;}" +
     ".kao-banner a:hover{text-decoration:underline;}" +
@@ -180,15 +205,20 @@
       "line-height:1;" +
       "text-shadow:none;" +
     "}" +
-    ".kao-banner-close:hover{opacity:1;}" +
+    ".kao-banner-close:hover{opacity:1;}";
+
+	var cssKaoPulse =
+    ".kao-banner { animation:kao-pulse 2s infinite; }" +
     "@keyframes kao-pulse{" +
       "0%{box-shadow:0 0 0 0 rgba(211,47,47,0.7)}" +
       "70%{box-shadow:0 0 0 15px rgba(211,47,47,0)}" +
       "100%{box-shadow:0 0 0 0 rgba(211,47,47,0)}" +
     "}";
 
   var style = document.createElement("style");
-  style.textContent = (size === "mini" ? cssMini : cssNormal) + cssCommon;
+  style.textContent = (size === "mini" ? cssMini : size === "minimal" ? cssMinimal : cssNormal)
+		+ (params.animation === "off" ? "" : cssKaoPulse)
+		+ cssCommon;
   document.head.appendChild(style);
 
   // ── Check if previously dismissed (reappears after dismissDays) ─────
@@ -220,7 +250,11 @@
     banner.appendChild(document.createTextNode(messageText));
   }
 
-  banner.appendChild(document.createElement("br"));
+  if (params.size === "minimal") {
+    banner.appendChild(document.createTextNode("\u00A0"));
+  } else {
+    banner.appendChild(document.createElement("br"));
+  }
 
   var countdownSpan = document.createElement("span");
   countdownSpan.textContent = "\u00A0";
diff --git a/src/content/pages/banner.md b/src/content/pages/banner.md
@@ -23,9 +23,10 @@ Customize the banner by appending query parameters to the script URL:
 |-----------|--------|---------|-------------|
 | `lang` | `en`, `fr`, `de`, `es`, … | Browser language | Override the display language |
 | `id` | Any element id | _(prepend to body)_ | Insert the banner inside the element with this id |
-| `size` | `normal`, `mini` | `normal` | Banner size variant |
+| `size` | `normal`, `mini`, `minimal` | `normal` | Banner size variant |
 | `link` | Any URL, or `none` | `https://keepandroidopen.org` | Make the banner text a clickable link; set to `none` to disable |
 | `hidebutton` | `on`, `off` | `on` | Show or hide the X close button (dismissed state is remembered per-site via localStorage) |
+| `animation` | `on`, `off` | `on` | Enable or disable the banner's pulsing animation |
 
 ## Examples
 
@@ -49,6 +50,14 @@ Link to a custom page, no close button:
 <div id="my-banner-custom"></div>
 <script src="/banner.js?link=https://example.com/android&hidebutton=off&size=mini&id=my-banner-custom"></script>
 
+Minimal size without animations.
+
+```html
+<script src="/banner.js?size=minimal&animation=off&id=my-banner-minimal"></script>
+```
+<div id="my-banner-minimal"></div>
+<script src="/banner.js?size=minimal&animation=off&id=my-banner-minimal"></script>
+
 ## Source
 
 The source for the banner can be found at [https://github.com/keepandroidopen/keepandroidopen.github.io/blob/main/public/banner.js](https://github.com/keepandroidopen/keepandroidopen.github.io/blob/main/public/banner.js). Suggestions for improvement are welcome!
