Skip to content

Commit 8ea2004

Browse files
donparkdonpark
committed
dist
1 parent 3d4ce7d commit 8ea2004

File tree

4 files changed

+598
-1
lines changed

4 files changed

+598
-1
lines changed

‎dist/playingcards.css

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
.card {
2+
background-color: #fff;
3+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
4+
-moz-border-radius: 0.8em;
5+
-webkit-border-radius: 0.8em;
6+
border-radius: 0.8em;
7+
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
8+
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
9+
box-shadow: 0 0 5px rgba(0,0,0,0.5);
10+
float: left;
11+
width: 16em;
12+
height: 22.4em;
13+
margin: 0 1.2em 1.2em 0;
14+
position: relative;
15+
z-index: 2;
16+
}
17+
.card.noshadow {
18+
-moz-box-shadow: none;
19+
-webkit-box-shadow: none;
20+
box-shadow: none;
21+
}
22+
.card .card-back img {
23+
width: 16em;
24+
height: 22.4em;
25+
}
26+
.card .flipped {
27+
-ms-transform: rotateY(180deg);
28+
-moz-transform: rotateY(180deg);
29+
-webkit-transform: rotateY(180deg);
30+
transform: rotateY(180deg);
31+
}
32+
.card .heart,
33+
.card .diamond {
34+
color: #f00;
35+
}
36+
.card .corner {
37+
line-height: 1;
38+
position: absolute;
39+
text-align: center;
40+
}
41+
.card .corner span {
42+
display: block;
43+
font-size: 1.5em;
44+
font-weight: bold;
45+
}
46+
.card .corner .number {
47+
font-size: 2em;
48+
height: 1.92em/2;
49+
line-height: 1.92em/2;
50+
}
51+
.card .corner.top {
52+
left: 0.64em;
53+
top: 0.96em;
54+
}
55+
.card .corner.bottom {
56+
bottom: 0.96em;
57+
right: 0.64em;
58+
-ms-transform: rotate(180deg);
59+
-moz-transform: rotate(180deg);
60+
-webkit-transform: rotate(180deg);
61+
transform: rotate(180deg);
62+
}
63+
.card .card-ace span.suit.middle_center {
64+
font-size: 10.24em;
65+
left: 0.45517241379310347em;
66+
top: 0.593103448275862em;
67+
}
68+
.card .card-ten .corner .number {
69+
font-size: 1.5em;
70+
}
71+
.card .face img {
72+
position: absolute;
73+
left: 2.56em;
74+
top: 2.08em;
75+
width: 10.8em;
76+
height: 18.24em;
77+
}
78+
.card .suit {
79+
font-size: 5.8em;
80+
font-weight: bold;
81+
height: 0.8275862068965517em;
82+
line-height: 0.8275862068965517em;
83+
overflow: hidden;
84+
position: absolute;
85+
text-align: center;
86+
width: 0.6896551724137931em;
87+
}
88+
.card .suit.top_center {
89+
left: 1.0482758620689656em;
90+
top: 0.3310344827586207em;
91+
}
92+
.card .suit.top_left {
93+
left: 0.41379310344827586em;
94+
top: 0.3310344827586207em;
95+
}
96+
.card .suit.top_right {
97+
right: 0.41379310344827586em;
98+
top: 0.3310344827586207em;
99+
}
100+
.card .suit.middle_center {
101+
left: 1.0482758620689656em;
102+
top: 1.517241379310345em;
103+
}
104+
.card .suit.middle_top {
105+
left: 1.0482758620689656em;
106+
top: 0.9655172413793103em;
107+
}
108+
.card .suit.middle_bottom {
109+
bottom: 0.9655172413793103em;
110+
left: 1.0482758620689656em;
111+
-ms-transform: rotate(180deg);
112+
-moz-transform: rotate(180deg);
113+
-webkit-transform: rotate(180deg);
114+
transform: rotate(180deg);
115+
}
116+
.card .suit.middle_left {
117+
left: 0.41379310344827586em;
118+
top: 1.517241379310345em;
119+
}
120+
.card .suit.middle_right {
121+
right: 0.41379310344827586em;
122+
top: 1.517241379310345em;
123+
}
124+
.card .suit.middle_top_center {
125+
left: 1.0482758620689656em;
126+
top: 0.8275862068965517em;
127+
}
128+
.card .suit.middle_top_left {
129+
left: 0.41379310344827586em;
130+
top: 1.103448275862069em;
131+
}
132+
.card .suit.middle_top_right {
133+
right: 0.41379310344827586em;
134+
top: 1.103448275862069em;
135+
}
136+
.card .suit.middle_bottom_left {
137+
bottom: 1.103448275862069em;
138+
left: 0.41379310344827586em;
139+
-ms-transform: rotate(180deg);
140+
-moz-transform: rotate(180deg);
141+
-webkit-transform: rotate(180deg);
142+
transform: rotate(180deg);
143+
}
144+
.card .suit.middle_bottom_right {
145+
bottom: 1.103448275862069em;
146+
right: 0.41379310344827586em;
147+
-ms-transform: rotate(180deg);
148+
-moz-transform: rotate(180deg);
149+
-webkit-transform: rotate(180deg);
150+
transform: rotate(180deg);
151+
}
152+
.card .suit.middle_bottom_center {
153+
bottom: 0.8275862068965517em;
154+
left: 1.0482758620689656em;
155+
-ms-transform: rotate(180deg);
156+
-moz-transform: rotate(180deg);
157+
-webkit-transform: rotate(180deg);
158+
transform: rotate(180deg);
159+
}
160+
.card .suit.bottom_center {
161+
bottom: 0.3310344827586207em;
162+
left: 1.0482758620689656em;
163+
-ms-transform: rotate(180deg);
164+
-moz-transform: rotate(180deg);
165+
-webkit-transform: rotate(180deg);
166+
transform: rotate(180deg);
167+
}
168+
.card .suit.bottom_left {
169+
bottom: 0.3310344827586207em;
170+
left: 0.41379310344827586em;
171+
-ms-transform: rotate(180deg);
172+
-moz-transform: rotate(180deg);
173+
-webkit-transform: rotate(180deg);
174+
transform: rotate(180deg);
175+
}
176+
.card .suit.bottom_right {
177+
bottom: 0.3310344827586207em;
178+
right: 0.41379310344827586em;
179+
-ms-transform: rotate(180deg);
180+
-moz-transform: rotate(180deg);
181+
-webkit-transform: rotate(180deg);
182+
transform: rotate(180deg);
183+
}

‎dist/playingcards.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
<script id="card-back" type="text/x-mustache-template">
3+
<div class="card-back"><span class="middle_center"><img src="img/back.png"/></span></div>
4+
</script>
5+
<script id="card-two" type="text/x-mustache-template">
6+
<div class="card-two">
7+
<div class="corner top"><span class="number">2</span><span>{{{suite.symbol}}}</span></div><span class="suit top_center">{{{suite.symbol}}}</span><span class="suit bottom_center">{{{suite.symbol}}}</span>
8+
<div class="corner bottom"><span class="number">2</span><span>{{{suite.symbol}}}</span></div>
9+
</div>
10+
</script>
11+
<script id="card-three" type="text/x-mustache-template">
12+
<div class="card-three">
13+
<div class="corner top"><span class="number">3</span><span>{{{suite.symbol}}}</span></div><span class="suit top_center">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit bottom_center">{{{suite.symbol}}}</span>
14+
<div class="corner bottom"><span class="number">3</span><span>{{{suite.symbol}}}</span></div>
15+
</div>
16+
</script>
17+
<script id="card-four" type="text/x-mustache-template">
18+
<div class="card-four">
19+
<div class="corner top"><span class="number">4</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
20+
<div class="corner bottom"><span class="number">4</span><span>{{{suite.symbol}}}</span></div>
21+
</div>
22+
</script>
23+
<script id="card-five" type="text/x-mustache-template">
24+
<div class="card-five">
25+
<div class="corner top"><span class="number">5</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
26+
<div class="corner bottom"><span class="number">5</span><span>{{{suite.symbol}}}</span></div>
27+
</div>
28+
</script>
29+
<script id="card-six" type="text/x-mustache-template">
30+
<div class="card-six">
31+
<div class="corner top"><span class="number">6</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
32+
<div class="corner bottom"><span class="number">6</span><span>{{{suite.symbol}}}</span></div>
33+
</div>
34+
</script>
35+
<script id="card-seven" type="text/x-mustache-template">
36+
<div class="card-seven">
37+
<div class="corner top"><span class="number">7</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_top">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
38+
<div class="corner bottom"><span class="number">7</span><span>{{{suite.symbol}}}</span></div>
39+
</div>
40+
</script>
41+
<script id="card-eight" type="text/x-mustache-template">
42+
<div class="card-eight">
43+
<div class="corner top"><span class="number">8</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_left">{{{suite.symbol}}}</span><span class="suit middle_top">{{{suite.symbol}}}</span><span class="suit middle_right">{{{suite.symbol}}}</span><span class="suit middle_bottom">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span>
44+
<div class="corner bottom"><span class="number">8</span><span>{{{suite.symbol}}}</span></div>
45+
</div>
46+
</script>
47+
<script id="card-nine" type="text/x-mustache-template">
48+
<div class="card-nine">
49+
<div class="corner top"><span class="number">9</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_top_left">{{{suite.symbol}}}</span><span class="suit middle_center">{{{suite.symbol}}}</span><span class="suit middle_top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span><span class="suit middle_bottom_left">{{{suite.symbol}}}</span><span class="suit middle_bottom_right">{{{suite.symbol}}}</span>
50+
<div class="corner bottom"><span class="number">9</span><span>{{{suite.symbol}}}</span></div>
51+
</div>
52+
</script>
53+
<script id="card-ten" type="text/x-mustache-template">
54+
<div class="card-ten">
55+
<div class="corner top"><span class="number">10</span><span>{{{suite.symbol}}}</span></div><span class="suit top_left">{{{suite.symbol}}}</span><span class="suit top_right">{{{suite.symbol}}}</span><span class="suit middle_top_left">{{{suite.symbol}}}</span><span class="suit middle_top_center">{{{suite.symbol}}}</span><span class="suit middle_top_right">{{{suite.symbol}}}</span><span class="suit bottom_left">{{{suite.symbol}}}</span><span class="suit bottom_right">{{{suite.symbol}}}</span><span class="suit middle_bottom_center">{{{suite.symbol}}}</span><span class="suit middle_bottom_left">{{{suite.symbol}}}</span><span class="suit middle_bottom_right">{{{suite.symbol}}}</span>
56+
<div class="corner bottom"><span class="number">10</span><span>{{{suite.symbol}}}</span></div>
57+
</div>
58+
</script>
59+
<script id="card-jack" type="text/x-mustache-template">
60+
<div class="card-jack">
61+
<div class="corner top"><span class="number">J</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-jack-{{suite.name}}.png"/></span>
62+
<div class="corner bottom"><span class="number">J</span><span>{{{suite.symbol}}}</span></div>
63+
</div>
64+
</script>
65+
<script id="card-queen" type="text/x-mustache-template">
66+
<div class="card-queen">
67+
<div class="corner top"><span class="number">Q</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-queen-{{suite.name}}.png"/></span>
68+
<div class="corner bottom"><span class="number">Q</span><span>{{{suite.symbol}}}</span></div>
69+
</div>
70+
</script>
71+
<script id="card-king" type="text/x-mustache-template">
72+
<div class="card-king">
73+
<div class="corner top"><span class="number">K</span><span>{{{suite.symbol}}}</span></div><span class="face middle_center"><img src="img/faces/face-king-{{suite.name}}.png"/></span>
74+
<div class="corner bottom"><span class="number">K</span><span>{{{suite.symbol}}}</span></div>
75+
</div>
76+
</script>
77+
<script id="card-ace" type="text/x-mustache-template">
78+
<div class="card-ace">
79+
<div class="corner top"><span class="number">A</span><span>{{{suite.symbol}}}</span></div><span class="suit middle_center">{{{suite.symbol}}}</span>
80+
<div class="corner bottom"><span class="number">A</span><span>{{{suite.symbol}}}</span></div>
81+
</div>
82+
</script>

0 commit comments

Comments
 (0)