diff --git a/public/banner.js b/public/banner.js
index 0281d59..89d7c04 100644
--- 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 )
- * 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,7 +205,10 @@
"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)}" +
@@ -188,7 +216,9 @@
"}";
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
index 17f6da7..02b11f6 100644
--- 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:
+Minimal size without animations.
+
+```html
+
+```
+
+
+
## 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!