Area bkg fix

imisaacwu · Aug 18, 2024 · 0ba75e1 · 0ba75e1
1 parent 9953876
commit 0ba75e1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/App.css b/src/App.css
@@ -189,9 +189,10 @@ img#shop-logo {
 }
 
 #joker-bkg {
-    position: fixed;
-    top: 5%;
-    left: 36%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-48%, -50%);
     font-size: 128px;
     letter-spacing: 32px;
     color: rgba(0, 0, 0, 0.25);
@@ -218,9 +219,10 @@ img#shop-logo {
 }
 
 #consumable-bkg {
-    position: fixed;
-    top: 8.5%;
-    left: 74.5%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-48%, -50%);
     font-size: 64px;
     color: rgba(0, 0, 0, 0.25);
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -66,17 +66,17 @@ export default function App() {
                 <div id='main'>
                     <div id='top'>
                         <div id='jokers' className='card-container'>
-                            <div id='joker-bkg'>JOKERS</div>
                             <div id='joker-area' className='card-area'>
+                                <label id='joker-bkg'>JOKERS</label>
                                 {game.jokers.map(j => 
                                     <Joker key={j.id} {...j}/>
                                 )}
                             </div>
                             <div id='joker-label' className='counter'>{`${game.jokers.length}/${game.stats.jokerSize}`}</div>
                         </div>
                         <div id='consumables' className='card-container'>
-                            <div id='consumable-bkg'>CONSUMABLES</div>
                             <div id='consumables-area' className='card-area'>
+                                <label id='consumable-bkg'>CONSUMABLES</label>
                                 {game.cards.consumables.map(c => (
                                     <Consumable key={c.id} {...c} />
                                 ))}