fix sizing problems

Author: brnhensley

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .DS_Store
 .env
-.idea
+.idea
+dist/

src/index.html

@@ -21,7 +21,7 @@
     <section class="gameSection">
         <div id="score"></div>
         <!-- <canvas id="tetris" width="640" height="1000"></canvas> -->
-        <canvas id="tetris" width="240" height="400"></canvas>
+        <canvas id="tetris" width="480" height="800"></canvas>
         <canvas id="next" width="200" height="200"></canvas>
         <div id="rules">Rules</div>
     </section>

src/main.js

@@ -58,7 +58,7 @@ const player = {
 };
 
 
-context.scale(20, 20);
+context.scale(40, 40);
 
 
 function arenaSweep() {

src/styles.css

@@ -4,13 +4,13 @@ body {
     font-family: sans-serif;
     font-size: 2em;
     text-align: center;
-        padding: 0;
-        margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 #next {
-   border: solid .2em #fff;
-   height: 30vh;
+    border: solid .2em #fff;
+    height: 30vh;
 }
 
 #header {
@@ -21,19 +21,18 @@ body {
 }
 
 .gameSection {
-   display: grid;
-   grid-template-columns: 1fr 1fr 1fr;
-   grid-gap: 30px;
-   background-image: url('./assets/header.gif');
-   height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 30px;
+    background-image: url('./assets/header.gif');
+    height: 100vh;
     background-size: cover;
-
-}
-#tetris {
-    opacity: .5;
 }
 
+#tetris {
+    border: solid .2em #fff;
 
+}
 
 #logo-pic {
     width: 300px;
@@ -43,14 +42,9 @@ body {
     animation: logoAnimate .8s ease-in;
 }
 
-
-
 .nav-box {
     display: flex;
     justify-content: center;
-
-
-
 }
 
 .nav-list {
@@ -66,7 +60,7 @@ body {
     font-weight: bold;
 }
 
-.nav-logo{
+.nav-logo {
     font-size: 2em;
     letter-spacing: 10px;
     text-transform: uppercase;
@@ -89,7 +83,7 @@ body {
     background-color: #03a8f485;
 }
 
-.nav-button:before{
+.nav-button:before {
     content: '';
     position: absolute;
     background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
@@ -103,9 +97,10 @@ body {
     z-index: -1;
     border-radius: 30px;
 }
+
 .nav-button:after {
     content: '';
-    background: linear-gradient(to   right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
+    background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
     background-size: 400%;
     position: absolute;
     top: -5px;
@@ -121,45 +116,43 @@ body {
 
 .nav-button:hover {
     border: 1px solid transparent;
-     transform: scale(1);
+    transform: scale(1);
 }
 
-.nav-button:hover:before{
+.nav-button:hover:before {
     height: 100%;
-  animation:  a 8s linear Infinite;
+    animation: a 8s linear Infinite;
 }
-.nav-button:hover:after{
+
+.nav-button:hover:after {
     opacity: 1;
-  filter: blur(20px);
-  animation:  a  8s linear Infinite;
+    filter: blur(20px);
+    animation: a 8s linear Infinite;
 }
 
-
-
 @keyframes a {
-    0%{
-      background-position: 0%;
+    0% {
+        background-position: 0%;
     }
-    100%{
-      background-position: 400%;
+    100% {
+        background-position: 400%;
     }
-  }
-
-  @keyframes logoAnimate {
-      0%{
-          height: 0%
-      }
-      25% {
-          height: 50px;
-      }
-      50%{
+}
+
+@keyframes logoAnimate {
+    0% {
+        height: 0%
+    }
+    25% {
+        height: 50px;
+    }
+    50% {
         height: 100px;
-      }
-      75%{
+    }
+    75% {
         height: 150px;
-      }
-      100%{
+    }
+    100% {
         height: 200px;
-      }
-
-  }
+    }
+}