ensure disabled animations when multiple banners are loaded (#209)

* fix(banner.js): use selector to disable animations

the animation styles won't apply to banner even if injected to page.

* docs(banner.md): fix snippet to use tld with no id

* docs(banner.md): add line breaks between examples

Author: mmmeon

public/banner.js

@@ -207,8 +207,8 @@
     "}" +
     ".kao-banner-close:hover{opacity:1;}";
 
-	var cssKaoPulse =
-    ".kao-banner { animation:kao-pulse 2s infinite; }" +
+  var cssKaoPulse =
+    ".kao-banner:not(.no-animation) { 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)}" +
@@ -217,8 +217,8 @@
 
   var style = document.createElement("style");
   style.textContent = (size === "mini" ? cssMini : size === "minimal" ? cssMinimal : cssNormal)
-		+ (params.animation === "off" ? "" : cssKaoPulse)
-		+ cssCommon;
+    + (params.animation === "off" ? "" : cssKaoPulse)
+    + cssCommon;
   document.head.appendChild(style);
 
   // ── Check if previously dismissed (reappears after dismissDays) ─────
@@ -235,7 +235,7 @@
 
   // ── Create banner DOM ─────────────────────────────────────────────────
   var banner = document.createElement("div");
-  banner.className = "kao-banner";
+  banner.className = params.animation === "off" ? "kao-banner no-animation" : "kao-banner";
 
   var messageText = messages[locale] || messages.en;
 

src/content/pages/banner.md

@@ -40,6 +40,7 @@ French, mini size, inserted into a specific element:
 <div id="my-banner"></div>
 <script src="/banner.js?lang=fr&size=mini&id=my-banner"></script>
 
+---
 
 Link to a custom page, no close button:
 
@@ -50,10 +51,12 @@ 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>
+<script src="https://keepandroidopen.org/banner.js?size=minimal&animation=off></script>
 ```
 <div id="my-banner-minimal"></div>
 <script src="/banner.js?size=minimal&animation=off&id=my-banner-minimal"></script>