Updates UI with with better buzzwords list, no fixed header anymore a…

…nd better margins and paddings

assets/sass/_buttons.scss

@@ -15,7 +15,7 @@
   -moz-appearance: none;
   appearance: none;
 
-  &:hover {
+  &:not([disabled]):hover {
     transition: backgound $animspeed;
     background-color: darken($c-text-light, $darken-percentage);
   }
@@ -41,7 +41,7 @@
     background-color: $c-red;
     color: $c-whiter;
 
-    &:hover {
+    &:not([disabled]):hover {
       background-color: darken($c-red, $darken-percentage);
     }
   }
@@ -50,7 +50,7 @@
     background-color: $c-green;
     color: $c-whiter;
 
-    &:hover {
+    &:not([disabled]):hover {
       background-color: darken($c-green, $darken-percentage);
     }
   }

assets/sass/_game.scss

@@ -10,10 +10,7 @@
   background: $c-bg;
 
   .game__header {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
+    height: 8vh;
     background: darken($c-bg, 5%);
     display: flex;
 
@@ -61,17 +58,16 @@
     flex-wrap: wrap;
     width: 100%;
     height: 70vh;
-    padding: 2vh 0;
   }
 
   .game__word-top {
     display: flex;
     flex: 1 0 100%;
     justify-content: center;
     width: 100%;
-    height: 38vh;
-    padding: 4vh 1vw;
-    font-size: 2rem;
+    height: 35vh;
+    padding: 4vh 2vw;
+    font-size: 2.5rem;
 
     @media screen and (min-width: 1000px) {
       font-size: 3.5rem;
@@ -83,6 +79,7 @@
 
     div {
       align-self: center;
+      text-align: center;
     }
   }
 
@@ -91,11 +88,11 @@
     display: flex;
     flex-wrap: wrap;
     width: 100%;
-    height: 30vh;
-    padding: 3vh 1vw;
+    height: 35vh;
+    padding: 3vh 2vw;
     margin: 0 auto;
     background: lighten($c-red, 35%);
-    font-size: 2rem;
+    font-size: 1.5rem;
 
     @media screen and (min-width: 1000px) {
       padding: 3vh 10vw;
@@ -109,29 +106,32 @@
   }
 
   .game__buzzword {
-    flex: 1 0 50%;
+    flex: 1 0 100%;
     text-align: center;
     align-self: center;
   }
 
   .game__buttons {
-    height: 30vh;
+    height: 22vh;
     display: flex;
 
     .btn {
       flex: 1 1 50%;
-    }
+      padding: 5vh 5vw;
 
-    #game__disacard {
-      svg {
-        max-width: 25%;
+      &:not([disabled]):hover {
+        svg {
+          opacity: .75;
+          transition: opacity $animspeed ease-out;
+        }
       }
     }
 
-    #game__check {
-      svg {
-        max-width: 30%;
-      }
+    svg {
+      height: 100%;
+      width: auto;
+      opacity: .2;
+      transition: opacity $animspeed ease-out;
     }
   }
 }

assets/sass/_input.scss

@@ -4,7 +4,7 @@ input {
   min-width: 300px;
   font-size: 1rem;
   line-height: 1;
-  padding: 1rem 1.5rem;
+  padding: $input-padding;
   margin: 0 auto;
   border: 1px solid $input-border;
   background: $input-bg;

assets/sass/_intro.scss

@@ -1,15 +1,10 @@
 // Intro
 
 #intro {
-  padding: 4rem 1rem 1rem;
   height: 100vh;
   overflow: auto;
 
   .intro__header {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
     background: darken($c-bg, 5%);
     font-size: .8rem;
   }
@@ -19,9 +14,13 @@
     text-transform: uppercase;
   }
 
+  .intro__content {
+    padding: 0 2vw;
+  }
+
   .intro__app-name {
-    padding-bottom: 2rem;
-    margin-bottom: 2rem;
+    margin: 8vh 0 5vh;
+    padding-bottom: 8vh;
     border-bottom: 1px solid $c-text-lighter;
 
     h1 {
@@ -30,28 +29,29 @@
       font-size: 4rem;
       text-transform: uppercase;
     }
-    
+
     p {
       text-align: center;
     }
   }
 
   .intro__how-to {
-    padding-bottom: 2rem;
-    margin-bottom: 2rem;
+    padding: 0 3vw 5vh;
+    margin-bottom: 5vh;
     border-bottom: 1px solid $c-text-lighter;
     color: $c-text-light;
 
     h3 {
-      margin: 0 0 .5rem;
+      margin: 0 0 1vh;
     }
 
     ol {
       margin: 0;
+      padding-left: 1rem;
       font-size: .9rem;
 
       li {
-        margin-bottom: .25rem;
+        margin-bottom: 1vh;
       }
     }
   }
@@ -85,6 +85,14 @@
   .intro__start {
     text-align: center;
   }
+
+  .intro__setting-name {
+    label {
+      display: block;
+      padding-bottom: .5rem;
+    }
+  }
+
   .intro__copy {
     font-size: .9rem;
     text-align: center;

assets/sass/_vars.scss

@@ -34,6 +34,9 @@ $input-bg: lighten($c-bg, 5%);
 $input-border: darken($c-bg, 5%);
 $input-border-hover: darken($c-bg, 10%);
 $input-border-focus: $c-text-lighter;
+$input-padding-x: 1.5rem;
+$input-padding-y: 1rem;
+$input-padding: $input-padding-y $input-padding-x;
 
 // Animation
 $animspeed: 250ms;

index.php

@@ -30,8 +30,8 @@
     'city-country',
     'cars',
     'tv',
-    'literature',
     'sports',
+    'literature',
     'web',
 ];
 ?>
@@ -59,34 +59,40 @@
         <?php endforeach; ?>
     </div>
 
-    <div class="intro__app-name">
-        <h1><?php echo $lang['app.name']; ?></h1>
-        <p><?php echo $lang['app.description']; ?></p>
-    </div>
-    <div class="intro__how-to">
-        <?php echo $lang['app.how-to']; ?>
-    </div>
-    <div class="intro__settings">
-        <div class="intro__setting-name">
-            <input type="text" placeholder="<?php echo $lang['app.enter-name']; ?>" name="name">
+    <div class="intro__content">
+
+        <div class="intro__app-name">
+            <h1><?php echo $lang['app.name']; ?></h1>
+            <p><?php echo $lang['app.description']; ?></p>
         </div>
-        <div class="intro__category-wrapper">
-            <?php foreach ($game['categories'] as $category) : ?>
-                <input type="radio" value="<?php echo $category; ?>" name="category"
-                       id="cat-<?php echo $category; ?>">
-                <label for="cat-<?php echo $category; ?>"
-                       class="intro__category category category__<?php echo $category; ?> has-hover">
-                    <span><?php echo $lang['category.' . $category]; ?></span>
-                </label>
-            <?php endforeach; ?>
+
+        <div class="intro__how-to">
+            <?php echo $lang['app.how-to']; ?>
         </div>
-        <div class="intro__start">
-            <button id="start-game" class="btn btn-block is-disabled" disabled="disabled">
-                <?php echo $lang['game.start']; ?>
-            </button>
-            <button class="show-highscores btn btn-block">
-                <?php echo $lang['app.show-highscores']; ?>
-            </button>
+
+        <div class="intro__settings">
+            <div class="intro__setting-name">
+                <label for="name"><?php echo $lang['app.enter-name']; ?>:</label>
+                <input type="text" name="name">
+            </div>
+            <div class="intro__category-wrapper">
+                <?php foreach ($game['categories'] as $category) : ?>
+                    <input type="radio" value="<?php echo $category; ?>" name="category"
+                           id="cat-<?php echo $category; ?>">
+                    <label for="cat-<?php echo $category; ?>"
+                           class="intro__category category category__<?php echo $category; ?> has-hover">
+                        <span><?php echo $lang['category.' . $category]; ?></span>
+                    </label>
+                <?php endforeach; ?>
+            </div>
+            <div class="intro__start">
+                <button id="start-game" class="btn btn-block is-disabled" disabled="disabled">
+                    <?php echo $lang['game.start']; ?>
+                </button>
+                <button class="show-highscores btn btn-block">
+                    <?php echo $lang['app.show-highscores']; ?>
+                </button>
+            </div>
         </div>
         <div class="intro__copy">
             <?php echo $lang['app.copy']; ?>