random fixes

src/index.css

@@ -47,6 +47,7 @@ img.bg {
 
   &.reveal {
     filter: none;
+    opacity: 0.6;
   }
 }
 
@@ -88,7 +89,11 @@ h2 {
   padding: 2rem;
   background-color: rgba(2, 9, 23, 0.8);
   border-radius: 1rem;
+
+  &.encoded {
     word-spacing: 10px;
+  }
+
 
   display: flex;
   flex-direction: column;
@@ -115,7 +120,7 @@ h2 {
     height: 100vh;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 100px;
+    grid-template-rows: 1fr 1fr;
 
     h1 {
       margin-bottom: 0;
@@ -124,12 +129,18 @@ h2 {
     }
 
     .actions {
+      position: fixed;
+      bottom: 0;
+      height: 100px;
       justify-self: center;
       align-self: center;
+      gap: 0.5rem;
 
       button {
         font-size: 1.2rem;
         padding: 1rem 0.8rem;
+        border-radius: 1rem;
+        background-color: rgba(255, 255, 255, 0.6);
       }
     }
   }

src/index.ts

@@ -28,7 +28,7 @@ const render = (format: Format, reveal = false, card_id?: number) => {
   const index = card_id || Math.floor(Math.random() * cards.length);
   const randomCard = cards[index];
   const cardImage = $el('img', {
-    className: `bg ${format}`,
+    className: `bg ${reveal ? 'reveal' : ''}`,
     src: scryfallURL(randomCard.id),
   });
   const translate = (text: string) => {
@@ -60,7 +60,10 @@ const render = (format: Format, reveal = false, card_id?: number) => {
         : '',
     ),
     $el(
-      'article.cardbox',
+      'article',
+      {
+        className: `cardbox ${reveal ? '' : 'encoded'}`,
+      },
       $el('h2', translate(randomCard.type.replace(' ', ''))),
       $el('p.rules', translate(randomCard.text)),
       randomCard.flavorText