From 0d3b9ac592a57cbf815551ff39d8e7f91c8303c4 Mon Sep 17 00:00:00 2001
From: aresnik11 <aresnik11@gmail.com>
Date: Wed, 2 Oct 2019 17:04:01 -0400
Subject: [PATCH] made cards smaller

---
 index.css | 10 +++-------
 index.js  |  5 +++++
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/index.css b/index.css
index afa0376..1daacd6 100644
--- a/index.css
+++ b/index.css
@@ -33,13 +33,6 @@
   grid-gap: 10px;
   text-align: center;
 }
-/* 
-.options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 10px;
-  text-align: center;
-} */
 
 .ui.statistic {
   display: block;
@@ -56,6 +49,8 @@
   border-color: black;
   text-align: center;
   border-radius: 15px;
+  margin: auto;
+  width: 95%
 }
 
 .card:hover {
@@ -141,6 +136,7 @@
 .shapes img {
   padding-left: 5px;
   padding-right: 5px;
+  width: 23%;
 }
 
 .shapes {
diff --git a/index.js b/index.js
index 1bcd846..9e17e7d 100644
--- a/index.js
+++ b/index.js
@@ -182,6 +182,7 @@ function startTimer() {
 //listens for clicks on the board
 board.addEventListener("click", function(e) {
     if (e.target.closest('.card')) {
+
         //if it already was selected, remove the border so it is no longer selected
         if (e.target.closest('.card').classList.contains("selected")) {
             removeSelected(e.target.closest('.card'))
@@ -400,11 +401,15 @@ options.addEventListener("click", function(e) {
         clearInterval(timer)
         e.target.dataset.action = "play"
         e.target.innerHTML = "<i class='play icon'></i>Play"
+        board.classList.remove("fadein")
+        board.classList.add("fadeout")
     }
     else if (e.target.dataset.action === "play") {
         startTimer()
         e.target.dataset.action = "pause"
         e.target.innerHTML = "<i class='pause icon'></i>Pause"
+        board.classList.remove("fadeout")
+        board.classList.add("fadein")
     }
 })