feat: only timer

ribeirolabs · Jan 2, 2024 · bafc585 · bafc585
1 parent a81c4bf
commit bafc585
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <title>Timer Score</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,10 +13,8 @@ import { PauseIcon, PlayIcon, ResetIcon } from "./Icons";
 
 function App() {
   return (
-    <div className="w-full h-full grid grid-cols-[15%_1fr_15%] gap-1 justify-center items-center p-2">
-      <TeamScore />
+    <div className="w-full h-full -grid -grid-cols-[15%_1fr_15%] gap-0.5 justify-center items-center p-2">
       <Timer />
-      <TeamScore />
     </div>
   );
 }
@@ -102,11 +100,11 @@ function TimerInternal({
   return (
     <div className="grid grid-rows-[30%_1fr] h-full w-full">
       <div />
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-0.5">
         <El
           onClick={() => status === "STOPPED" && setEditing(true)}
           className={cn(
-            "text-6xl bg-neutral-200 rounded font-black w-full text-center",
+            "font-sans text-8xl tracking-tighter bg-neutral-200 rounded font-black w-full text-center",
             editing
               ? "text-black"
               : Number(duration.minutes ?? 0) < 1

diff --git a/src/index.css b/src/index.css
@@ -16,3 +16,9 @@
     @apply w-3;
   }
 }
+
+@layer utilities {
+  gap-1 {
+    gap: 0.15em;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,11 @@
 export default {
   content: ["./src/**/*.{html,js,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        display: ["'Roboto Mono', serif"],
+      },
+    },
   },
   plugins: [],
 };