Skip to content

Commit da3e594

Browse files
sdleysdley
committed
feat(css): add .span-4 utility to span grid columns
1 parent a90e7bf commit da3e594

2 files changed

Lines changed: 103 additions & 93 deletions

File tree

‎public/default.css‎

Lines changed: 92 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,63 @@
11
BODY {
2-
height: 100%;
3-
width: 100%;
4-
padding: 0;
5-
margin: 0;
6-
background-color: #1b4076;
2+
height: 100%;
3+
width: 100%;
4+
padding: 0;
5+
margin: 0;
6+
background-color: #1b4076;
77
}
88

99
@media screen and (min-device-width: 500px) and (min-device-height: 1024px) {
10-
BODY {
11-
transform: scale(1.75);
12-
transform-origin: 50% 0;
13-
height: 50%;
14-
}
10+
BODY {
11+
transform: scale(1.75);
12+
transform-origin: 50% 0;
13+
height: 50%;
14+
}
1515
}
1616

1717
@media screen and (min-device-width: 1024px) and (min-device-height: 1366px) {
18-
BODY {
19-
transform: scale(2.0);
20-
transform-origin: 50% 0;
21-
height: 50%;
22-
}
18+
BODY {
19+
transform: scale(2);
20+
transform-origin: 50% 0;
21+
height: 50%;
22+
}
2323
}
2424

2525
.container {
26-
min-width: 250px;
27-
min-height: 531px;
28-
width: 250px;
29-
padding: 25px;
30-
margin: 0 auto;
31-
position: relative;
32-
background-image: url(background.png);
33-
background-size: 300px 531px;
34-
background-repeat: no-repeat;
35-
background-position: center top;
26+
min-width: 250px;
27+
min-height: 531px;
28+
width: 250px;
29+
padding: 25px;
30+
margin: 0 auto;
31+
position: relative;
32+
background-image: url(background.png);
33+
background-size: 300px 531px;
34+
background-repeat: no-repeat;
35+
background-position: center top;
3636
}
3737

3838
#results {
39-
position: relative;
40-
top: 0;
41-
left: 0;
39+
position: relative;
40+
top: 0;
41+
left: 0;
4242
}
4343

4444
#buttons {
45-
position: relative;
45+
position: relative;
4646
}
4747

4848
#result {
49-
background-color: #9b9b9b;
50-
width: 226px;
51-
height: 63px;
52-
margin: 0;
53-
padding: 0 12px;
54-
position: absolute;
55-
border: 0;
56-
left: 0;
57-
top: 32px;
58-
font-family: system-ui;
59-
font-size: 25px;
60-
text-align: right;
49+
background-color: #9b9b9b;
50+
width: 226px;
51+
height: 63px;
52+
margin: 0;
53+
padding: 0 12px;
54+
position: absolute;
55+
border: 0;
56+
left: 0;
57+
top: 32px;
58+
font-family: system-ui;
59+
font-size: 25px;
60+
text-align: right;
6161
}
6262

6363
/*BUTTON {
@@ -73,114 +73,118 @@ BODY {
7373

7474
#sign,
7575
#clear {
76-
font-size: 17px;
76+
font-size: 17px;
7777
}
7878

7979
#clearEntry {
80-
font-size: 15px;
80+
font-size: 15px;
8181
}
8282

8383
#image-icon {
84-
left: 0px;
85-
top: 202px;
86-
position: relative;
87-
width: 55px;
88-
height: 42px;
84+
left: 0px;
85+
top: 202px;
86+
position: relative;
87+
width: 55px;
88+
height: 42px;
8989
}
9090

9191
.resultchar {
92-
display: inline-block;
93-
width: 25px;
94-
height: 45px;
95-
background: url('digits.png') 0 0 no-repeat;
96-
background-size: cover;
97-
margin-top: 10px;
98-
font: 0/0 Arial;
99-
color: rgba(255, 255, 255, 0);
100-
text-indent: -9999px;
101-
z-index: 1;
92+
display: inline-block;
93+
width: 25px;
94+
height: 45px;
95+
background: url("digits.png") 0 0 no-repeat;
96+
background-size: cover;
97+
margin-top: 10px;
98+
font: 0/0 Arial;
99+
color: rgba(255, 255, 255, 0);
100+
text-indent: -9999px;
101+
z-index: 1;
102102
}
103103

104104
.digit0 {
105-
background-position: 0 0;
105+
background-position: 0 0;
106106
}
107107

108108
.digit1 {
109-
background-position: -25px 0;
109+
background-position: -25px 0;
110110
}
111111

112112
.digit2 {
113-
background-position: -50px 0;
113+
background-position: -50px 0;
114114
}
115115

116116
.digit3 {
117-
background-position: -75px 0;
117+
background-position: -75px 0;
118118
}
119119

120120
.digit4 {
121-
background-position: -100px 0;
121+
background-position: -100px 0;
122122
}
123123

124124
.digit5 {
125-
background-position: -125px 0;
125+
background-position: -125px 0;
126126
}
127127

128128
.digit6 {
129-
background-position: -150px 0;
129+
background-position: -150px 0;
130130
}
131131

132132
.digit7 {
133-
background-position: -175px 0;
133+
background-position: -175px 0;
134134
}
135135

136136
.digit8 {
137-
background-position: -200px 0;
137+
background-position: -200px 0;
138138
}
139139

140140
.digit9 {
141-
background-position: -225px 0;
141+
background-position: -225px 0;
142142
}
143143

144144
.resultchar.decimal {
145-
width: 7px;
146-
background-position: -250px 0;
145+
width: 7px;
146+
background-position: -250px 0;
147147
}
148148

149149
.resultchar.negative {
150-
background-position: -257px 0;
151-
width: 17px;
150+
background-position: -257px 0;
151+
width: 17px;
152152
}
153153

154154
.resultchar.exponent {
155-
background-position: -275px 0;
156-
width: 25px;
155+
background-position: -275px 0;
156+
width: 25px;
157157
}
158158

159159
.box {
160-
box-sizing: border-box;
161-
top: 220px;
162-
width: 250px;
163-
position: absolute;
160+
box-sizing: border-box;
161+
top: 220px;
162+
width: 250px;
163+
position: absolute;
164164
}
165165

166166
.span-2 {
167-
grid-column: span 2;
167+
grid-column: span 2;
168+
}
169+
170+
.span-4 {
171+
grid-column: 1 / -1; /* span all columns */
168172
}
169173

170174
.calculator-buttons {
171-
display: grid;
172-
grid-template-columns: repeat(4, 1fr);
173-
border: 0;
175+
display: grid;
176+
grid-template-columns: repeat(4, 1fr);
177+
border: 0;
174178
}
175179

176180
.calculator {
177-
max-width: 320px;
181+
max-width: 320px;
178182
}
179183

180184
.btn {
181-
font-size: 1em;
182-
height: 45px;
183-
border: 1px solid black;
184-
background-color: #d5d5d5;
185-
margin: 4px;
185+
font-size: 1em;
186+
height: 45px;
187+
border: 1px solid black;
188+
background-color: #d5d5d5;
189+
margin: 4px;
186190
}

‎public/index.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<html>
22
<head>
33
<title>Calculator</title>
4-
<link rel="stylesheet" href="default.css">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
4+
<link rel="stylesheet" href="default.css" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
8+
/>
69
<script src="client.js"></script>
710
</head>
811
<body onLoad="setValue(0)">
@@ -11,7 +14,7 @@
1114
<div id="result"><span class="digit0">0</span></div>
1215
</div>
1316

14-
<div id="loading" style="visibility:hidden"></div>
17+
<div id="loading" style="visibility: hidden"></div>
1518

1619
<div class="box">
1720
<div class="calculator">
@@ -23,7 +26,9 @@
2326
<button class="btn" onClick="numberPressed(7)">7</button>
2427
<button class="btn" onClick="numberPressed(8)">8</button>
2528
<button class="btn" onClick="numberPressed(9)">9</button>
26-
<button class="btn" onClick="operationPressed('/')">&divide;</button>
29+
<button class="btn" onClick="operationPressed('/')">
30+
&divide;
31+
</button>
2732

2833
<button class="btn" onClick="numberPressed(4)">4</button>
2934
<button class="btn" onClick="numberPressed(5)">5</button>
@@ -38,8 +43,9 @@
3843
<button class="btn" onClick="numberPressed(0)">0</button>
3944
<button class="btn" onClick="decimalPressed()">.</button>
4045
<button class="btn" onClick="operationPressed('+')">+</button>
41-
<button class="btn" onClick="equalPressed()">=</button>
46+
<button class="btn" onClick="operationPressed('^')">^</button>
4247

48+
<button class="btn span-4" onClick="equalPressed()">=</button>
4349
</div>
4450
</div>
4551
</div>

0 commit comments

Comments
 (0)