simplify rain bannerg

Author: MaxwellBo

index.html

@@ -963,9 +963,7 @@
       </script>
   </header>
   <main>
-    <div id="rain-banner">
-      <div id="rain-banner-text"></div>
-    </div>
+    <div id="rain-banner"><center>IT IS CURRENTLY RAINING IN NEW YORK</center></div>
     <section style="display: flex; align-items: center; gap: 0.5ch; margin-left: 4px;" class="only-show-on-mobile">
       <a href="atom.xml">⚛&nbsp;&nbsp;atom.xml</a>
       󱠡
@@ -2217,7 +2215,7 @@ <h2>
         style="font-family: 'hersheytimes', serif; font-size: 0.5em;">
         Hershey Times Triplex Light
       </a> that I have been unable to recover the source of (???).
-      ASCII font from <a href="https://patorjk.com/software/taag/">TAAG</a>".
+      ASCII font from <a href="https://patorjk.com/software/taag/">TAAG</a>.
       Weather data from <a href="https://open-meteo.com/">Open-Meteo</a>. Dataviz with <a
         href="https://observablehq.com/plot/">Observable Plot</a>.
       Atmospheric rendering by <a href="https://github.com/dnlzro/horizon">Horizon</a>.

js/weather.js

@@ -11,7 +11,6 @@ const low = document.getElementById('low');
 const high = document.getElementById('high');
 const rainDiv = document.getElementById('rain');
 const rainBanner = document.getElementById('rain-banner');
-const rainBannerText = document.getElementById('rain-banner-text');
 
 
 const setTime = () => {
@@ -73,36 +72,18 @@ const url = 'https://api.open-meteo.com/v1/forecast?'
 
 const simulateRain = false;
 
-function updateRainBannerText() {
-  if (!rainBannerText) return;
-  const chunk = 'IT IS CURRENTLY RAINING IN NEW YORK ⋅ ';
-  const repeatCount = Math.max(3, Math.ceil(window.innerWidth / 325) + 2);
-  rainBannerText.textContent = chunk.repeat(repeatCount);
-}
-
 function setRainState(isRaining) {
   if (rainDiv) {
     rainDiv.style.display = isRaining ? 'block' : 'none';
   }
 
   if (rainBanner) {
-    rainBanner.style.display = isRaining ? 'block' : 'none';
-    if (isRaining) {
-      updateRainBannerText();
-    } else if (rainBannerText) {
-      rainBannerText.textContent = '';
-    }
+    rainBanner.style.visibility = isRaining ? 'visible' : 'hidden';
   }
 }
 
 setRainState(false);
 
-window.addEventListener('resize', () => {
-  if (rainBanner && rainBanner.style.display === 'block') {
-    updateRainBannerText();
-  }
-});
-
 fetch(url)
   .then(response => response.json())
   .then(data => {

stylesheets/weather.css

@@ -9,26 +9,14 @@
 }
 
 #rain-banner {
-  display: none;
+  display: block;
+  visibility: hidden;
   width: 100%;
   background: rgb(92, 96, 98);
-}
-
-#rain-banner-text {
   color: #ffffff;
   padding: 0.5ch;
   white-space: nowrap;
   text-transform: uppercase;
-  animation: rain-banner-text-blink 3s step-end infinite;
-}
-
-@keyframes rain-banner-text-blink {
-  0%, 66% {
-    opacity: 1;
-  }
-  66%, 100% {
-    opacity: 0;
-  }
 }
 
 #rain {