basic tile styling
--- a/fonts/clear-sans.css
+++ b/fonts/clear-sans.css
@@ -4,7 +4,7 @@
src: url("ClearSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
url("ClearSans-Light-webfont.svg#clear_sans_lightregular") format("svg"),
url("ClearSans-Light-webfont.woff") format("woff");
- font-weight: normal;
+ font-weight: 200;
font-style: normal;
}
@@ -14,7 +14,7 @@
src: url("ClearSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("ClearSans-Regular-webfont.svg#clear_sansregular") format("svg"),
url("ClearSans-Regular-webfont.woff") format("woff");
- font-weight: 300;
+ font-weight: normal;
font-style: normal;
}
--- a/index.html
+++ b/index.html
@@ -37,6 +37,15 @@
<div class="grid-cell"></div>
</div>
</div>
+
+ <div class="tile-container">
+ <div class="tile tile-2 tile-position-1-1">
+ 2
+ </div>
+ <div class="tile tile-4 tile-position-2-3">
+ 4
+ </div>
+ </div>
</div>
</div>
</body>
--- a/style.css
+++ b/style.css
@@ -6,11 +6,127 @@
color: #776E65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; }
+body {
+ margin: 80px 0; }
+
h1 {
font-size: 80px;
- font-weight: bold; }
+ font-weight: bold;
+ margin: 0; }
.container {
- width: 600px;
+ width: 500px;
margin: 0 auto; }
+.game-container {
+ margin-top: 50px;
+ position: relative;
+ padding: 15px;
+ background: #bbada0;
+ border-radius: 6px;
+ width: 500px;
+ height: 500px;
+ box-sizing: border-box; }
+
+.grid-container {
+ position: absolute;
+ z-index: 1; }
+
+.grid-row {
+ margin-bottom: 15px; }
+ .grid-row:last-child {
+ margin-bottom: 0; }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both; }
+
+.grid-cell {
+ width: 106.25px;
+ height: 106.25px;
+ margin-right: 15px;
+ float: left;
+ border-radius: 3px;
+ background: rgba(238, 228, 218, 0.35); }
+ .grid-cell:last-child {
+ margin-right: 0; }
+
+.tile-container {
+ position: absolute;
+ z-index: 2; }
+
+.tile {
+ background: red;
+ width: 106.25px;
+ height: 106.25px;
+ border-radius: 3px;
+ background: #eee4da;
+ text-align: center;
+ line-height: 116.25px;
+ font-size: 60px;
+ font-weight: bold; }
+ .tile.tile-position-1-1 {
+ position: absolute;
+ left: 0px;
+ top: 0px; }
+ .tile.tile-position-1-2 {
+ position: absolute;
+ left: 0px;
+ top: 121.25px; }
+ .tile.tile-position-1-3 {
+ position: absolute;
+ left: 0px;
+ top: 242.5px; }
+ .tile.tile-position-1-4 {
+ position: absolute;
+ left: 0px;
+ top: 363.75px; }
+ .tile.tile-position-2-1 {
+ position: absolute;
+ left: 121.25px;
+ top: 0px; }
+ .tile.tile-position-2-2 {
+ position: absolute;
+ left: 121.25px;
+ top: 121.25px; }
+ .tile.tile-position-2-3 {
+ position: absolute;
+ left: 121.25px;
+ top: 242.5px; }
+ .tile.tile-position-2-4 {
+ position: absolute;
+ left: 121.25px;
+ top: 363.75px; }
+ .tile.tile-position-3-1 {
+ position: absolute;
+ left: 242.5px;
+ top: 0px; }
+ .tile.tile-position-3-2 {
+ position: absolute;
+ left: 242.5px;
+ top: 121.25px; }
+ .tile.tile-position-3-3 {
+ position: absolute;
+ left: 242.5px;
+ top: 242.5px; }
+ .tile.tile-position-3-4 {
+ position: absolute;
+ left: 242.5px;
+ top: 363.75px; }
+ .tile.tile-position-4-1 {
+ position: absolute;
+ left: 363.75px;
+ top: 0px; }
+ .tile.tile-position-4-2 {
+ position: absolute;
+ left: 363.75px;
+ top: 121.25px; }
+ .tile.tile-position-4-3 {
+ position: absolute;
+ left: 363.75px;
+ top: 242.5px; }
+ .tile.tile-position-4-4 {
+ position: absolute;
+ left: 363.75px;
+ top: 363.75px; }
+
--- a/style.scss
+++ b/style.scss
@@ -1,4 +1,12 @@
@import "fonts/clear-sans.css";
+
+$field-width: 500px;
+$grid-spacing: 15px;
+$grid-row-cells: 4;
+$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+$tile-border-radius: 3px;
+
+$tile-color: #eee4da;
html, body {
margin: 0;
@@ -9,13 +17,94 @@
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}
+body {
+ margin: 80px 0;
+}
+
h1 {
font-size: 80px;
font-weight: bold;
+ margin: 0;
}
.container {
- width: 600px;
+ width: $field-width;
margin: 0 auto;
}
+.game-container {
+ margin-top: 50px;
+ position: relative;
+ padding: $grid-spacing;
+
+ background: #bbada0;
+ border-radius: $tile-border-radius * 2;
+ width: $field-width;
+ height: $field-width;
+ box-sizing: border-box;
+}
+
+.grid-container {
+ position: absolute;
+ z-index: 1;
+}
+
+.grid-row {
+ margin-bottom: $grid-spacing;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+}
+
+.grid-cell {
+ width: $tile-size;
+ height: $tile-size;
+ margin-right: $grid-spacing;
+ float: left;
+
+ border-radius: $tile-border-radius;
+
+ background: rgba($tile-color, .35);
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+
+.tile-container {
+ position: absolute;
+ z-index: 2;
+}
+
+.tile {
+ background: red;
+ width: $tile-size;
+ height: $tile-size;
+ border-radius: $tile-border-radius;
+
+ background: $tile-color;
+ text-align: center;
+ line-height: $tile-size + 10px;
+ font-size: 60px;
+ font-weight: bold;
+
+ @for $x from 1 through $grid-row-cells {
+ @for $y from 1 through $grid-row-cells {
+ &.tile-position-#{$x}-#{$y} {
+ position: absolute;
+ left: ($tile-size + $grid-spacing) * ($x - 1);
+ top: ($tile-size + $grid-spacing) * ($y - 1);
+ }
+ }
+ }
+}
+
+
+