News Ticker

frontend/shell/css/desktop.css

@@ -1,3 +1,13 @@
+@media (min-width: 480px) {
+    .nav-link-account {
+        margin-left: 0;
+    }
+
+    .news-ticker {
+        display: inline;
+    }
+}
+
 @media (min-width: 960px) {
     .screen-narrow {
         display: none;
@@ -11,6 +21,7 @@
 @media (min-height: 540px) {
     .header {
         height: 60px;
+        padding: 10px 10px 10px 15px;
     }
 
     .nav-link-account {

frontend/shell/css/header.css

@@ -10,7 +10,7 @@ body {
     display: flex;
     gap: 30px;
     height: 40px;
-    padding: 5px 15px;
+    padding: 5px 5px 5px 10px;
 }
 
 .screen-narrow {

frontend/shell/css/nav.css

@@ -4,6 +4,7 @@
     display: flex;
     flex: 1;
     gap: 15px;
+    min-width: 0;
 }
 
 .nav-link {
@@ -19,3 +20,29 @@
     margin-left: auto;
     padding: 5px 10px;
 }
+
+.news-ticker {
+    color: #00FF41;
+    display: none;
+    flex: 1;
+    margin-left: auto;
+    max-width: 480px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.news-ticker-content {
+    animation: news-ticker-animation 10s linear forwards;
+    display: inline-block;
+    padding-left: 100%;
+}
+
+@keyframes news-ticker-animation {
+    from {
+        transform: translateX(0);
+    }
+
+    to {
+        transform: translateX(-100%);
+    }
+}

frontend/shell/index.html

@@ -27,6 +27,10 @@
                 <a class="nav-link screen-narrow" href="https://docs.instantworkstation.com">Docs</a>
                 <a class="nav-link screen-wide" href="https://docs.instantworkstation.com">Technical Documentation</a>
 
+                <span class="news-ticker">
+                    <span class="news-ticker-content">Ubuntu 26.04 x86 64 LE is now available</span>
+                </span>
+
                 <a class="nav-link nav-link-account" href="/account">Account</a>
             </nav>
         </header>