From fd2927c37c699e4fa8965d0cb77168f3868d5793 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Wed, 5 Mar 2014 23:15:57 +0100 Subject: [PATCH] add game explanation, remove test tiles --- index.html | 48 ++++++++++++++++++------------------------------ style/main.css | 30 ++++++++++++++++++++++++++++-- style/main.scss | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 79 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 0a56a60..c85e844 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@

2048

+

Join the numbers and get to the 2048 tile!

@@ -42,38 +43,25 @@
2
-
- 4 -
-
- 8 -
-
- 16 -
-
- 32 -
-
- 64 -
-
- 128 -
-
- 256 -
-
- 512 -
-
- 1024 -
-
- 2048 -
+
+ 4 +
+
+ 512 +
+
+ 2048 +
+ +

+ How to play: Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one! +

+
+

+ Created by Gabriele Cirulli. Based on 1024 by Veewo Studio. +

diff --git a/style/main.css b/style/main.css index 16496f9..ef6b2be 100644 --- a/style/main.css +++ b/style/main.css @@ -4,7 +4,8 @@ html, body { padding: 0; background: #faf8ef; color: #776e65; - font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; } + font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; } body { margin: 80px 0; } @@ -14,12 +15,31 @@ h1 { font-weight: bold; margin: 0; } +p { + margin-top: 0; + margin-bottom: 10px; + line-height: 1.65; } + +a { + color: #776e65; + font-weight: bold; + text-decoration: underline; } + +strong.important { + text-transform: uppercase; } + +hr { + border: none; + border-bottom: 1px solid #d8d4d0; + margin-top: 20px; + margin-bottom: 30px; } + .container { width: 500px; margin: 0 auto; } .game-container { - margin-top: 50px; + margin-top: 40px; position: relative; padding: 15px; cursor: default; @@ -184,3 +204,9 @@ h1 { background: #edc22e; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); font-size: 35px; } + +.game-intro { + margin-bottom: 0; } + +.game-explanation { + margin-top: 50px; } diff --git a/style/main.scss b/style/main.scss index cbd820e..89e8565 100644 --- a/style/main.scss +++ b/style/main.scss @@ -21,6 +21,7 @@ html, body { background: #faf8ef; color: $text-color; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 18px; } body { @@ -33,13 +34,38 @@ h1 { margin: 0; } +p { + margin-top: 0; + margin-bottom: 10px; + line-height: 1.65; +} + +a { + color: $text-color; + font-weight: bold; + text-decoration: underline; +} + +strong { + &.important { + text-transform: uppercase; + } +} + +hr { + border: none; + border-bottom: 1px solid lighten($text-color, 40%); + margin-top: 20px; + margin-bottom: 30px; +} + .container { width: $field-width; margin: 0 auto; } .game-container { - margin-top: 50px; + margin-top: 40px; position: relative; padding: $grid-spacing; @@ -179,4 +205,10 @@ h1 { } } +.game-intro { + margin-bottom: 0; +} +.game-explanation { + margin-top: 50px; +} -- GitLab