From 029266c70b2d6c0fa4cedcdcfb82887804b5dfa2 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 13 Aug 2023 02:02:29 +0200
Subject: [PATCH] impr(test): base the size of large live wpm and timer on
 browser width

---
 frontend/src/styles/test.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 923ef5f8b..23064ecb9 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -122,19 +122,21 @@
     left: 0;
     width: 100%;
     position: relative;
-    font-size: 10rem;
+    font-size: clamp(1rem, 12vw, 10rem);
+
     opacity: 0;
     width: 0;
     height: 0;
     margin: 0 auto;
     display: grid;
     justify-content: center;
-    bottom: 6rem;
+    bottom: clamp(2rem, 12vw, 6rem);
+
     transition: none;
   }
 
   #largeLiveWpmAndAcc {
-    font-size: 10rem;
+    font-size: clamp(1rem, 12vw, 10rem);
     color: black;
     width: 100%;
     left: 0;
@@ -142,12 +144,12 @@
     z-index: -1;
     height: 0;
     line-height: 0;
-    top: 5rem;
+    top: clamp(1rem, 10vw, 5rem);
     position: relative;
     display: grid;
     grid-auto-flow: column;
     justify-content: center;
-    gap: 5rem;
+    gap: clamp(1rem, 8vw, 5rem);
     width: 0;
     margin: 0 auto;