diff --git a/index.html b/index.html index 0a56a605bf3b621bf45ec01f190fbdb7a0ae7bc2..c85e844dcec57520c4be4dea9a32b9ec889cf42d 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 16496f91279bd5b9d26fbc93d3f69f3b63bce7f3..ef6b2be02e2113a69a463d18bf0521b353c45a84 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 cbd820e526b4f211a32733b6bc71443ca8204423..89e8565593455a2cad6b920ed166b46f4f292e56 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; +}