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 {
@@ -18,4 +19,30 @@
     border-radius: 5px;
     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%);
+    }
 }