reduce glow opacity
[2048.git] / style / style.scss
1 @import "fonts/clear-sans.css";
2
3 $field-width: 500px;
4 $grid-spacing: 15px;
5 $grid-row-cells: 4;
6 $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
7 $tile-border-radius: 3px;
8
9 $tile-color: #eee4da;
10
11 html, body {
12 margin: 0;
13 padding: 0;
14
15 background: #faf8ef;
16 color: #776E65;
17 font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
18 }
19
20 body {
21 margin: 80px 0;
22 }
23
24 h1 {
25 font-size: 80px;
26 font-weight: bold;
27 margin: 0;
28 }
29
30 .container {
31 width: $field-width;
32 margin: 0 auto;
33 }
34
35 .game-container {
36 margin-top: 50px;
37 position: relative;
38 padding: $grid-spacing;
39
40 background: #bbada0;
41 border-radius: $tile-border-radius * 2;
42 width: $field-width;
43 height: $field-width;
44 box-sizing: border-box;
45 }
46
47 .grid-container {
48 position: absolute;
49 z-index: 1;
50 }
51
52 .grid-row {
53 margin-bottom: $grid-spacing;
54
55 &:last-child {
56 margin-bottom: 0;
57 }
58
59 &:after {
60 content: "";
61 display: block;
62 clear: both;
63 }
64 }
65
66 .grid-cell {
67 width: $tile-size;
68 height: $tile-size;
69 margin-right: $grid-spacing;
70 float: left;
71
72 border-radius: $tile-border-radius;
73
74 background: rgba($tile-color, .35);
75
76 &:last-child {
77 margin-right: 0;
78 }
79 }
80
81 .tile-container {
82 position: absolute;
83 z-index: 2;
84 }
85
86 .tile {
87 background: red;
88 width: $tile-size;
89 height: $tile-size;
90 border-radius: $tile-border-radius;
91
92 background: $tile-color;
93 text-align: center;
94 line-height: $tile-size + 10px;
95 font-size: 60px;
96 font-weight: bold;
97
98 @for $x from 1 through $grid-row-cells {
99 @for $y from 1 through $grid-row-cells {
100 &.tile-position-#{$x}-#{$y} {
101 position: absolute;
102 left: ($tile-size + $grid-spacing) * ($x - 1);
103 top: ($tile-size + $grid-spacing) * ($y - 1);
104 }
105 }
106 }
107 }
108
109
110
comments