Add news ticker

1 files changed, 44 insertions, 0 deletions

diff --git a/site/public/site.css b/site/public/site.css
index 3c9bc03..6c79aa9 100644
--- a/site/public/site.css
+++ b/site/public/site.css
@@ -11,3 +11,47 @@
 li p {
     margin: 2px;
 }
+
+/* OUTER CONTAINER */
+.tcontainer {
+  width: 100%;
+  overflow: hidden; /* Hide scroll bar */
+}
+
+/* MIDDLE CONTAINER */
+.ticker-wrap {
+  width: 100%;
+  padding-left: 100%; /* Push contents to right side of screen */
+  background-color: #eee;
+}
+
+/* INNER CONTAINER */
+@keyframes ticker {
+    0% { transform: translate3d(0, 0, 0); }
+    100% { transform: translate3d(-100%, 0, 0); }
+}
+
+.ticker-move {
+    /* Basically move items from right side of screen to left in infinite loop */
+    display: inline-block;
+    white-space: nowrap;
+    padding-right: 100%;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: ticker;
+    animation-duration: 30s;
+}
+
+.ticker-move:hover{
+    animation-play-state: paused; /* Pause scroll on mouse hover */
+}
+
+/* ITEMS */
+.ticker-item {
+    display: inline-block; /* Lay items in a horizontal line */
+    padding: 0 5px;
+}
+
+.ticker-item::before {
+    content: "  ✑  ";
+}