dominic/cs-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix cs font

Browse Source
This commit is contained in:
Dominic Zimmer 2024-03-27 23:35:24 +01:00
parent c46e9478ef
commit 3d3872ea57
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.css
View File

@ -1,12 +1,16 @@
@font-face { @font-face {
font-family: "cs_regular"; font-family: "csregular";
src: url(./cs_regular.ttf) format("ttf"); src: url(./cs_regular.ttf);
font-weight: normal; /*font-weight: normal;
font-style: normal; font-style: normal;*/
} }
h1, span { h1, span {
user-select: none; user-select: none;
} }
.bingo-board h1, .bingo-board span, .container > .title{
font-family: "csregular";
transform: scaleY(1.4);
}
.container { .container {
padding: 5px; padding: 5px;
display: flex; display: flex;
@ -37,27 +41,36 @@ h1, span {
.legend { .legend {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: 1rem; column-gap: 2rem;
} }
.legend .header span { .legend .header span {
font-weight: bold; font-weight: bold;
} }
div.highlighted { div.highlighted {
animation: fadeinout 1s linear; animation: fadeinout 1.5s ease-in-out;
} }
div > div.begone { div > div.begone {
animation: disappear 1s forwards; animation: disappear 1s forwards;
} }
.entry-letter {
text-align: center;
}
@keyframes fadeinout { @keyframes fadeinout {
0% { 0% {
background-color: white; transform: scale(1);
transform-origin: center;
background-color: unset;
} }
50% { 50% {
transform: scale(1.2);
transform-origin: center;
background-color: yellow; background-color: yellow;
} }
100% { 100% {
background-color: white; transform: scale(1);
transform-origin: center;
background-color: unset;
} }
} }
@keyframes disappear { @keyframes disappear {

4
src/App.tsx
View File

@ -26,7 +26,7 @@ const App: React.FC<{}> = () => {
const [highlighted, setHighlighted] = useState<null| number>(null); const [highlighted, setHighlighted] = useState<null| number>(null);
const highlight = (index: number) => { const highlight = (index: number) => {
setHighlighted(index); setHighlighted(index);
setTimeout(() => setHighlighted(null), 800); setTimeout(() => setHighlighted(null), 3000);
document.getElementById("letter-" + alphabet[index])?.scrollIntoView(); document.getElementById("letter-" + alphabet[index])?.scrollIntoView();
}; };
useEffect(() => { useEffect(() => {
@ -72,7 +72,7 @@ const App: React.FC<{}> = () => {
return ( return (
<div className="container"> <div className="container">
<h1 onClick={incCounter}>CS Bingo</h1> <h1 className="title" onClick={incCounter}>CS Bingo</h1>
<div className="bingo-board"> <div className="bingo-board">
{Array.from(alphabet).map((e, index) => {Array.from(alphabet).map((e, index) =>
<div key={index} > <div key={index} >