redo clock css (#559)

app/assets/stylesheets/application.css

@@ -124,12 +124,26 @@ select {
 }
 
 .clock-display {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 0.05fr 1fr 1fr 0.05fr 1fr 1fr 1fr 1fr;
-  text-align: center;
-  width: 100%;
-  padding-left: 8vw;
-  padding-right: 8vw;
+	width: 100%;
+	height: 1.5em;
+	font-size: 15vmin;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	border: 12px solid var(--color-primary);
+	border-radius: 64px;
+
+	margin: 2rem auto;
+}
+.clock-display * {
+	line-height: normal;
+}
+@media (max-width: 87.5rem) {
+	.clock-display {
+		font-size:10vmin;
+	}
 }
 
 .blink {

app/javascript/application.js

@@ -57,19 +57,18 @@ function outta() {
 
 function weirdclockthing() {
   const clock = document.getElementById('clock');
-  const display = clock.querySelector('.clock-display');
 
-  if (!clock || !display) return;
+  if (!clock) return;
 
   function write(something) {
-    display.innerHTML = '';
+    clock.innerHTML = '';
     Array.from(something).forEach((char) => {
       const span = document.createElement('span');
       span.textContent = char === ' ' ? '\u00A0' : char;
       if (char === ':') {
         span.classList.add('blink');
       }
-      display.appendChild(span);
+      clock.appendChild(span);
     });
   }
 

app/views/static_pages/index.html.erb

@@ -20,8 +20,7 @@
       <%= @flavor_text %>
     </p>
   </div>
-  <div id="clock" class="w-[70vw] text-[10vw] cursor-pointer flex justify-center items-center select-none border-12 border-primary rounded-[64px] mx-auto mt-8 mb-8">
-    <div class="ds-digital clock-display"></div>
+  <div id="clock" class="ds-digital 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>