use clockicons font instead of ds-digital for the clock display

app/assets/stylesheets/application.css

@@ -30,6 +30,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "clockicons";
+  src: url("/fonts/clockicons.woff2") format("woff2"), url("/fonts/clockicons.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+
 @import "https://uchu.style/color.css";
 @import "settings.css";
 
@@ -59,26 +66,6 @@ select {
   color-scheme: dark;
 }
 
-.superadmin-tool {
-  border-radius: 5px;
-  border: 1px dashed rgb(251, 44, 54);
-  background-color: rgba(255, 255, 255, 0.02);
-}
-.admin-tool {
-  border-radius: 5px;
-  border: 1px dashed rgb(240, 177, 0);
-  background-color: rgba(255, 255, 255, 0.02);
-}
-.viewer-tool {
-  border-radius: 5px;
-  border: 1px dashed rgb(43, 127, 255);
-  background-color: rgba(255, 255, 255, 0.02);
-}
-.dev-tool {
-  border-radius: 5px;
-  border: 1px dashed var(--color-green);
-  background-color: rgba(255, 255, 255, 0.02);
-}
 
 .loading {
   filter: grayscale(100%);
@@ -119,6 +106,10 @@ select {
   font-family: "DS-Digital", monospace;
 }
 
+.clockicons {
+  font-family: "clockicons", monospace;
+}
+
 .monospace {
   font-family: monospace;
 }

app/javascript/application.js

@@ -47,7 +47,8 @@ function weirdclockthing() {
   inner.className = 'clock-display-inner';
 
   const front = document.createElement('div');
-  front.className = 'clock-display-front';
+  // kinda janky lol
+  front.className = 'clock-display-front ds-digital';
   write(front, "HAC:KA:TIME");
 
   const back = document.createElement('div');

app/views/static_pages/index.html.erb

@@ -17,7 +17,7 @@
       <%= @flavor_text %>
     </p>
   </div>
-  <div id="clock" class="ds-digital clock-display">
+  <div id="clock" class="clockicons clock-display">
   </div>
   <% if current_user %>
     <h1 class="font-bold mt-1 mb-4 text-5xl text-center">Keep Track of <span class="text-primary">Your</span> Coding Time</h1>