home: add marquee, finished statusline

static/style.css

@@ -133,6 +133,20 @@ table {
 
 /* Animations */
 
+@keyframes fadeInNOut {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 @keyframes woopwoop {
 
   0%,
@@ -146,6 +160,16 @@ table {
 }
 
 
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 @keyframes woopwoopmove {
   to {
     background-position: 200% center;
@@ -187,7 +211,8 @@ table {
 }
 
 ::selection {
-  text-shadow: 0px 0px 3px var(--darkerer-pink)
+  text-shadow: 0px 0px 3px var(--darkerer-pink);
+
 }
 
 body {
@@ -205,6 +230,17 @@ body {
   main {
     padding-top: 8rem;
   }
+
+  marquee {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  marquee inner {
+    display: inline-block;
+    animation: marquee 8s linear infinite;
+  }
 }
 
 /* CRT Effect */
@@ -368,12 +404,19 @@ navbar {
 
     status-dot {
       display: block;
+      animation: fadeInNOut 2s infinite;
       width: 8px;
       height: 8px;
       background-color: #00ff00;
       border: 1px solid #008000;
     }
 
+    current-date {
+      margin-left: auto;
+      padding-right: 0.5rem;
+    }
+
+
   }
 }
 
@@ -393,7 +436,7 @@ home-content {
   boxes {
     display: flex;
     flex-wrap: wrap;
-    width: min(90svw, 800px);
+    width: min(90svw, 850px);
     gap: 1rem;
 
     box {
@@ -418,7 +461,7 @@ home-content {
     padding: 0.15rem 0.55rem;
     border-radius: 9999px;
     background-color: var(--blue);
-    font-weight: 500;
+    font-weight: 600;
     font-size: 13px;
     color: white;
     white-space: nowrap;