From f7736e1e6a6b77d76e5766dafa443d3b623e5572 Mon Sep 17 00:00:00 2001
From: Kovah <mail@kovah.de>
Date: Wed, 9 Nov 2016 23:32:18 +0100
Subject: [PATCH] Updates UI with with better buzzwords list, no fixed header
 anymore and better margins and paddings

---
 assets/checkmark.svg      |  4 +--
 assets/sass/_buttons.scss |  6 ++--
 assets/sass/_game.scss    | 42 +++++++++++++--------------
 assets/sass/_input.scss   |  2 +-
 assets/sass/_intro.scss   | 32 +++++++++++++--------
 assets/sass/_vars.scss    |  3 ++
 index.php                 | 60 +++++++++++++++++++++------------------
 7 files changed, 83 insertions(+), 66 deletions(-)

diff --git a/assets/checkmark.svg b/assets/checkmark.svg
index ced99f1..46b6460 100644
--- a/assets/checkmark.svg
+++ b/assets/checkmark.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 363.03 363.02" xml:space="preserve">
-    <path d="M181.51 363.02C81.43 363.02 0 281.6 0 181.51 0 81.42 81.43 0 181.51 0c100.08 0 181.51 81.42 181.51 181.51C363.03 281.6 281.6 363.02 181.51 363.02zM181.51 11.71C87.88 11.71 11.71 87.89 11.71 181.51s76.17 169.8 169.8 169.8c93.63 0 169.8-76.17 169.8-169.8S275.15 11.71 181.51 11.71z" fill="#FFFFFF" fill-opacity="0.25"/>
-    <polygon points="147.96 258.94 83.07 194.05 91.35 185.77 147.96 242.38 271.17 119.17 279.45 127.45 " fill="#FFFFFF" fill-opacity="0.25"/>
+    <path d="M181.51 363.02C81.43 363.02 0 281.6 0 181.51 0 81.42 81.43 0 181.51 0c100.08 0 181.51 81.42 181.51 181.51C363.03 281.6 281.6 363.02 181.51 363.02zM181.51 11.71C87.88 11.71 11.71 87.89 11.71 181.51s76.17 169.8 169.8 169.8c93.63 0 169.8-76.17 169.8-169.8S275.15 11.71 181.51 11.71z" fill="#FFFFFF" fill-opacity="0.30"/>
+    <polygon points="147.96 258.94 83.07 194.05 91.35 185.77 147.96 242.38 271.17 119.17 279.45 127.45 " fill="#FFFFFF" fill-opacity="0.35"/>
 </svg>
diff --git a/assets/sass/_buttons.scss b/assets/sass/_buttons.scss
index 1748512..e30fa72 100644
--- a/assets/sass/_buttons.scss
+++ b/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);
     }
   }
diff --git a/assets/sass/_game.scss b/assets/sass/_game.scss
index 20e4163..36c1657 100644
--- a/assets/sass/_game.scss
+++ b/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,7 +58,6 @@
     flex-wrap: wrap;
     width: 100%;
     height: 70vh;
-    padding: 2vh 0;
   }
 
   .game__word-top {
@@ -69,9 +65,9 @@
     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;
     }
   }
 }
diff --git a/assets/sass/_input.scss b/assets/sass/_input.scss
index fe0f93c..50877c3 100644
--- a/assets/sass/_input.scss
+++ b/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;
diff --git a/assets/sass/_intro.scss b/assets/sass/_intro.scss
index eacb6c8..7002fbe 100644
--- a/assets/sass/_intro.scss
+++ b/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;
diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
index 4928417..cce1908 100644
--- a/assets/sass/_vars.scss
+++ b/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;
diff --git a/index.php b/index.php
index b7b1921..17b13d6 100644
--- a/index.php
+++ b/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']; ?>