From 3d3872ea57acbbbb2ac7e89fa73445674b732768 Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <zimmer@depend.uni-saarland.de>
Date: Wed, 27 Mar 2024 23:35:24 +0100
Subject: [PATCH] Fix cs font

---
 src/App.css | 29 +++++++++++++++++++++--------
 src/App.tsx |  4 ++--
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2e945cc..e31979d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,12 +1,16 @@
 @font-face {
-  font-family: "cs_regular";
-  src: url(./cs_regular.ttf) format("ttf");
-  font-weight: normal;
-  font-style: normal;
+  font-family: "csregular";
+  src: url(./cs_regular.ttf);
+  /*font-weight: normal;
+  font-style: normal;*/
 }
 h1, span {
   user-select: none;
 }
+.bingo-board h1, .bingo-board span, .container > .title{
+  font-family: "csregular";
+  transform: scaleY(1.4);
+}
 .container {
   padding: 5px;
   display: flex;
@@ -37,27 +41,36 @@ h1, span {
 .legend {
   display: grid;
   grid-template-columns: auto 1fr;
-  column-gap: 1rem;
+  column-gap: 2rem;
 }
 .legend .header span {
   font-weight: bold;
 }
 div.highlighted {
-  animation: fadeinout 1s linear;
+  animation: fadeinout 1.5s ease-in-out;
 }
 div > div.begone {
   animation: disappear 1s forwards;
 }
+.entry-letter {
+  text-align: center;
+}
 
 @keyframes fadeinout {
   0% {
-    background-color: white;
+    transform: scale(1);
+    transform-origin: center;
+    background-color: unset;
   }
   50% {
+    transform: scale(1.2);
+    transform-origin: center;
     background-color: yellow;
   }
   100% {
-    background-color: white;
+    transform: scale(1);
+    transform-origin: center;
+    background-color: unset;
   }
 }
 @keyframes disappear {
diff --git a/src/App.tsx b/src/App.tsx
index 02013a5..69177a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,7 +26,7 @@ const App: React.FC<{}> = () => {
   const [highlighted, setHighlighted] = useState<null| number>(null);
   const highlight = (index: number) => {
     setHighlighted(index);
-    setTimeout(() => setHighlighted(null), 800);
+    setTimeout(() => setHighlighted(null), 3000);
     document.getElementById("letter-" + alphabet[index])?.scrollIntoView();
   };
   useEffect(() => {
@@ -72,7 +72,7 @@ const App: React.FC<{}> = () => {
 
   return (
     <div className="container">
-      <h1 onClick={incCounter}>CS Bingo</h1>
+      <h1 className="title" onClick={incCounter}>CS Bingo</h1>
       <div className="bingo-board">
       {Array.from(alphabet).map((e, index) => 
           <div key={index} >