tweaks, text ticker, donate warn

_includes/layouts/base/navbar.njk

@@ -24,7 +24,7 @@
         </div>
         <a class="nav-base nav-links nav-about" href="/about"><icon-tabler info-circle></icon-tabler> <span>About</span></a>
         <a class="nav-base nav-links nav-services" href="/services"><icon-tabler server-cog></icon-tabler> <span>Services</span></a>
-        <a class="nav-base nav-links nav-donate" href="/donate"><icon-tabler currency-dollar></icon-tabler> <span>Donate</span></a>
+        <a class="nav-base nav-links nav-donate important" href="/donate"><icon-tabler currency-dollar></icon-tabler> <span>Donate</span></a>
     </navbar-left>
     <navbar-right>
         <div class="nav-settings">

_includes/layouts/pages/index.njk

@@ -14,6 +14,23 @@
         </window-controls>
     </div>
     <window-contents>
+        <ticker-container aria-hidden="true">
+            <p aria-hidden="false"><span warning><icon-tabler alert-triangle></icon-tabler> Important!</span> <a href="/donate">Donate to Senil!</a> He's in dire need of funds.</p>
+            <p>beep beep i'm a synth i said beep beep i'm a synth</p>
+            <p>I don't want free earbuds.</p>
+            <p>🏳️‍🌈 🏳️‍⚧️ 🇵🇸 🇺🇦</p>
+            <p>Be kind to one another.</p>
+            <p>Who left this jar of RAM here?</p>
+            <p>The Game? What game?</p>
+            <p>beeeeeeeep</p>
+            <p>We think Herobrine might have been removed, but we're not so sure.</p>
+            <p>Sorry for the downtime, we caught a Synth trying to eat the servers in the server room.</p>
+            <p>Check on your friends. Make sure they're okay.</p>
+            <p>The bathroom's that way.</p>
+            <p>The end is never the end is never the end is never...</p>
+            <p>No, a Synth can't run Crysis.</p>
+            <p>We can make it through this. 💛</p>
+        </ticker-container>
         <p t-center>Hey! Welcome to...</p>
         <p t-center><a id="logo" href="https://forged.synth.download/sneexy/synth"><img loading="lazy" src="/assets/synth.download/logo_web.svg" alt="Synth.Download" /></a></p>
         <p>We're a project managed by beepers, toasters, and other non-organic and organic creatures alike, hosting and running services together to provide ourselves with a safe community, and for the greater net public. if you like what we do, please consider <a href="/donate">donating</a>!</p>

_includes/styles/base/animations.css

@@ -40,4 +40,21 @@
     45% { opacity: 0% }
     50% { opacity: 100% }
     100% { opacity: 100% }
+}
+
+@keyframes outline-blink {
+    0% { outline-width: 0rem; }
+    50% { outline-width: .45rem; }
+    100% { outline-width: 0rem; }
+}
+
+@keyframes ticker {
+    0% {
+        transform: translate3d(0, 0, 0);
+        visibility: visible;
+    }
+
+    100% {
+        transform: translate3d(-100%, 0, 0);
+    }
 }

_includes/styles/base/base.css

@@ -205,9 +205,13 @@ span[title] {
     }
 }
 
-/* code (enforced monospace) */
-.code {
-    font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
+/* code */
+code {
+    border-radius: .2rem;
+    font-family: monospace;
+    border: .1rem solid var(--border);
+    padding: .1rem .2rem;
+    vertical-align: bottom;
 }
 
 /* caption styled text */
@@ -326,6 +330,28 @@ details.cw[open] {
     padding: .15rem;
 }
 
+/* ticker */
+ticker-container {
+    animation: ticker 65s linear infinite;
+    box-sizing: content-box;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    padding-left: 60rem;
+    position: relative;
+
+    &:hover { animation-play-state: paused; }
+
+    p {
+        border-radius: .5rem;
+        display: inline-block;
+        margin: 0;
+        margin-right: 4rem;
+        outline: .15rem solid var(--border);
+        padding: .2rem .4rem;
+        white-space: nowrap;
+    }
+}
+
 /* card styling */
 card-container {
     display: grid;

_includes/styles/base/navbar.css

@@ -22,6 +22,21 @@
     vertical-align: middle;
     z-index: 100;
 
+    .important {
+        &::after {
+            background: var(--accent);
+            border-radius: 100%;
+            bottom: -.2rem;
+            content: "";
+            height: 1rem;
+            outline: .13rem solid color-mix(in srgb,var(--accent)60%,transparent);
+            position: absolute;
+            right: -.3rem;
+            width: 1rem;
+            animation: outline-blink ease-in-out 1s infinite;
+        }
+    }
+
     navbar-left {
         display: inline-flex;
         flex-direction: row;
@@ -40,10 +55,10 @@
         align-content: center;
         border-radius: 1rem;
         display: inline-flex;
+        position: relative;
         flex-direction: row;
         height: 1.9rem;
         outline: .13rem solid var(--border);
-        overflow: hidden;
         padding: 0px .2em !important;
         text-decoration: unset !important;
     }
@@ -52,6 +67,7 @@
         background-color: var(--accent);
         color: var(--background);
         outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
+        overflow: clip;
 
         .synth-icon {
             height: 2rem;
@@ -74,7 +90,6 @@
         align-items: center;
         background-color: var(--background);
         color: var(--foreground);
-        overflow: clip;
         padding: 0 .4rem !important;
         text-shadow: none;
         transition: all .3s;