Dodanie lepszego(?) modala i mozliwości zmiany nicków graczy.

sass/_light.scss

@@ -18,6 +18,12 @@ body {
     text-decoration: none;
     padding: 1vw;
     display: inline-block;
+    width: 25%;
+
+    @media screen and (max-width: $small-break) {
+      background: $menu-background-color;
+      width: auto;
+    }
 
     &:hover {
       background-color: $menu-background-color-hover;
@@ -83,16 +89,14 @@ body {
 
 .player {
   border: 2px solid $player-border-color;
-  padding: 0.5vh 4vh;
-  margin: 1.5vh auto;
-  width: 10vw;
+  padding: 0.5vh 0;
+  margin: 1.5vh 1vw;
   color: #444;
   cursor: pointer;
   border-radius: 2px;
   font-weight: bold;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
   height: 5vh;
-  width: 10vw;
   line-height: 5vh;
   text-align: center;
 
@@ -125,7 +129,7 @@ body {
 }
 
 /* SCORE TABLE START */
-.scoreTable {
+#scoreTable {
   width: 90vw;
   background: $score-table-background;
   content: "";
@@ -233,4 +237,61 @@ body {
 
 }
 
+/** MODAL */
 
+.modal {
+  display: none;
+  position: absolute;
+  width: 75vw;
+  left: 12.5vw;
+  top: 25vh;
+  height: 50vh;
+  border: 1px solid $modal-border-color;
+  background: $modal-background-color;
+  border-radius: 3px;
+
+  .close{
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 10px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 2.5vh;
+    color: $modal-close-color;
+    &:hover {
+      color: $modal-close-color-hover;
+    }
+
+  }
+
+  .modal_content {
+    padding: 3vw 3vh;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+    h1 {
+      font-size: 4vh;
+      margin-bottom: 5vh;
+    }
+    input {
+      padding: 5px 20px;
+    }
+
+    .submit {
+      cursor: pointer;
+    }
+
+  }
+
+  &.on {
+    display: block;
+  }
+}
+
+/** PLAYER NAMES MODAL */
+
+#playerNames {
+
+}

sass/_variables.scss

@@ -13,6 +13,13 @@ $player-selected-color: #f2eeee;
 $score-table-background: #fff;
 $score-table-border-color: #ccc;
 
+$modal-border-color: #eee;
+$modal-background-color: #fff;
+$modal-close-color: #ddd;
+$modal-close-color-hover: #000;
+
 $menu-color: #666;
 $menu-color-hover: #333;
-$menu-background-color-hover: #eee;
+$menu-background-color-hover: #eee;
+$menu-background-color: #ddd;
+$small-break: 450px;