Skip to content

Commit 139a990

Browse files
web-tikiweb-tiki
committed
Changed layout to flexbox
Changed the float approach to a flexbox approach for the hex layout. This changes and simplifies the spacing calculations. Also changed transforms to 3d transforms instread of translatez(1px). This branch needs testing.
1 parent dd060d8 commit 139a990

File tree

2 files changed

+402
-426
lines changed

2 files changed

+402
-426
lines changed

‎hexagons.css

+121-190
Original file line numberDiff line numberDiff line change
@@ -6,229 +6,160 @@ body {
66
background: rgb(123, 158, 158);
77
}
88
#hexGrid {
9-
overflow: hidden;
10-
width: 90%;
11-
margin: 0 auto;
12-
padding:0.866% 0;
13-
font-family: 'Raleway', sans-serif;
14-
font-size: 15px;
15-
}
16-
#hexGrid:after {
17-
content: "";
18-
display: block;
19-
clear: both;
9+
display: flex;
10+
flex-wrap: wrap;
11+
width: 90%;
12+
margin: 0 auto;
13+
overflow: hidden;
14+
font-family: 'Raleway', sans-serif;
15+
font-size: 15px;
16+
list-style-type: none;
2017
}
18+
2119
.hex {
22-
position: relative;
23-
list-style-type: none;
24-
float: left;
25-
overflow: hidden;
26-
visibility: hidden;
27-
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
28-
-webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
29-
-ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
30-
transform: rotate(-60deg) skewY(30deg) translatez(-1px);
31-
}
32-
.hex * {
33-
position: absolute;
34-
visibility: visible;
35-
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
36-
}
37-
.hexIn {
20+
position: relative;
21+
visibility:hidden;
22+
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
23+
}
24+
.hex::after{
25+
content:'';
26+
display:block;
27+
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
28+
}
29+
.hexIn{
30+
position: absolute;
31+
width:96%;
32+
padding-bottom: 110.851%; /* = width / sin(60) */
33+
margin:0 2%;
34+
overflow: hidden;
35+
visibility: hidden;
36+
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
37+
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
38+
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
39+
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
40+
}
41+
.hexIn * {
42+
position: absolute;
43+
visibility: visible;
44+
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
45+
}
46+
.hexLink {
3847
display:block;
3948
width: 100%;
4049
height: 100%;
4150
text-align: center;
4251
color: #fff;
4352
overflow: hidden;
44-
-webkit-transform: skewY(-30deg) rotate(60deg);
45-
-ms-transform: skewY(-30deg) rotate(60deg);
46-
transform: skewY(-30deg) rotate(60deg);
53+
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
54+
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
55+
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
4756
}
4857

4958
/*** HEX CONTENT **********************************************************************/
5059
.hex img {
51-
left: -100%;
52-
right: -100%;
53-
width: auto;
54-
height: 100%;
55-
margin: 0 auto;
60+
left: -100%;
61+
right: -100%;
62+
width: auto;
63+
height: 100%;
64+
margin: 0 auto;
65+
-webkit-transform: rotate3d(0,0,0,0deg);
66+
-ms-transform: rotate3d(0,0,0,0deg);
67+
transform: rotate3d(0,0,0,0deg);
5668
}
5769

5870
.hex h1, .hex p {
59-
width: 102%;
60-
left:-1%; /* prevent line on the right where background doesn't cover image */
61-
padding: 5%;
62-
box-sizing:border-box;
63-
background-color: rgba(0, 128, 128, 0.8);
64-
font-weight: 300;
65-
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
66-
transition: transform .2s ease-out, opacity .3s ease-out;
71+
width: 100%;
72+
padding: 5%;
73+
box-sizing:border-box;
74+
background-color: rgba(0, 128, 128, 0.8);
75+
font-weight: 300;
76+
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
77+
transition: transform .2s ease-out, opacity .3s ease-out;
6778
}
6879
.hex h1 {
69-
bottom: 50%;
70-
padding-top:50%;
71-
font-size: 1.5em;
72-
z-index: 1;
73-
-webkit-transform:translateY(-100%) translatez(-1px);
74-
-ms-transform:translateY(-100%) translatez(-1px);
75-
transform:translateY(-100%) translatez(-1px);
76-
}
77-
.hex h1:after {
78-
content: '';
79-
position: absolute;
80-
bottom: 0;
81-
left: 45%;
82-
width: 10%;
83-
text-align: center;
84-
border-bottom: 1px solid #fff;
80+
bottom: 50%;
81+
padding-top:50%;
82+
font-size: 1.5em;
83+
z-index: 1;
84+
-webkit-transform:translate3d(0,-100%,0);
85+
-ms-transform:translate3d(0,-100%,0);
86+
transform:translate3d(0,-100%,0);
87+
}
88+
.hex h1::after {
89+
content: '';
90+
position: absolute;
91+
bottom: 0;
92+
left: 45%;
93+
width: 10%;
94+
text-align: center;
95+
border-bottom: 1px solid #fff;
8596
}
8697
.hex p {
87-
top: 50%;
88-
padding-bottom:50%;
89-
-webkit-transform:translateY(100%) translatez(-1px);
90-
-ms-transform:translateY(100%) translatez(-1px);
91-
transform:translateY(100%) translatez(-1px);
98+
top: 50%;
99+
padding-bottom:50%;
100+
-webkit-transform:translate3d(0,100%,0);
101+
-ms-transform:translate3d(0,100%,0);
102+
transform:translate3d(0,100%,0);
92103
}
93104

94105

95106
/*** HOVER EFFECT **********************************************************************/
96-
.hexIn:hover h1, .hexIn:focus h1,
97-
.hexIn:hover p, .hexIn:focus p{
98-
-webkit-transform:translateY(0%) translatez(-1px);
99-
-ms-transform:translateY(0%) translatez(-1px);
100-
transform:translateY(0%) translatez(-1px);
107+
.hexLink:hover h1, .hexLink:focus h1,
108+
.hexLink:hover p, .hexLink:focus p{
109+
-webkit-transform:translate3d(0,0,0);
110+
-ms-transform:translate3d(0,0,0);
111+
transform:translate3d(0,0,0);
101112
}
102113

103114
/*** SPACING AND SIZING *****************************************************************/
104115
@media (min-width:1201px) { /* <- 5-4 hexagons per row */
105-
.hex {
106-
width: 19.2%; /* = (100-4) / 5 */
107-
padding-bottom: 22.170%; /* = width / sin(60deg) */
108-
}
109-
.hex:nth-child(9n+6),
110-
.hex:nth-child(9n+7),
111-
.hex:nth-child(9n+8),
112-
.hex:nth-child(9n+9) {
113-
margin-top: -4.676%;
114-
margin-bottom: -4.676%;
115-
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
116-
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
117-
transform: translateX(50%) rotate(-60deg) skewY(30deg);
118-
}
119-
.hex:nth-child(9n+6):last-child,
120-
.hex:nth-child(9n+7):last-child,
121-
.hex:nth-child(9n+8):last-child,
122-
.hex:nth-child(9n+9):last-child {
123-
margin-bottom: 0;
124-
}
125-
.hex:nth-child(9n+6) {
126-
margin-left: 0.5%;
127-
clear: left;
128-
}
129-
.hex:nth-child(9n+10) {
130-
clear: left;
131-
}
132-
.hex:nth-child(9n+2),
133-
.hex:nth-child(9n+ 7) {
134-
margin-left: 1%;
135-
margin-right: 1%;
136-
}
137-
.hex:nth-child(9n+3),
138-
.hex:nth-child(9n+4),
139-
.hex:nth-child(9n+8) {
140-
margin-right: 1%;
141-
}
116+
#hexGrid{
117+
padding-bottom: 4.4%
118+
}
119+
.hex {
120+
width: 20%; /* = 100 / 5 */
121+
}
122+
.hex:nth-child(9n+6){ /* first hexagon of even rows */
123+
margin-left:10%; /* = width / 2 */
124+
}
142125
}
143-
@media (max-width: 1200px) and (min-width:901px) {/* <- 4-3 hexagons per row */
144-
.hex {
145-
width: 24.25%; /* = (100-3) / 4 */
146-
padding-bottom: 28.001%; /* = width / sin(60deg) */
147-
}
148-
.hex:nth-child(7n+5),
149-
.hex:nth-child(7n+6),
150-
.hex:nth-child(7n+7) {
151-
margin-top: -6.134%;
152-
margin-bottom: -6.134%;
153-
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
154-
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
155-
transform: translateX(50%) rotate(-60deg) skewY(30deg);
156-
}
157-
.hex:nth-child(7n+5):last-child,
158-
.hex:nth-child(7n+6):last-child,
159-
.hex:nth-child(7n+7):last-child {
160-
margin-bottom: 0;
161-
}
162-
.hex:nth-child(7n+2),
163-
.hex:nth-child(7n+6) {
164-
margin-left: 1%;
165-
margin-right: 1%;
166-
}
167-
.hex:nth-child(7n+3) {
168-
margin-right: 1%;
169-
}
170-
.hex:nth-child(7n+8) {
171-
clear: left;
172-
}
173-
.hex:nth-child(7n+5) {
174-
clear: left;
175-
margin-left: 0.5%;
176-
}
126+
127+
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */
128+
#hexGrid{
129+
padding-bottom: 5.5%
130+
}
131+
.hex {
132+
width: 25%; /* = 100 / 4 */
133+
}
134+
.hex:nth-child(7n+5){ /* first hexagon of even rows */
135+
margin-left:12.5%; /* = width / 2 */
136+
}
177137
}
138+
178139
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */
179-
.hex {
180-
width: 32.666%; /* = (100-2) / 3 */
181-
padding-bottom: 37.720%; /* = width / sin(60) */
182-
}
183-
.hex:nth-child(5n+4),
184-
.hex:nth-child(5n+5) {
185-
margin-top: -8.564%;
186-
margin-bottom: -8.564%;
187-
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
188-
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
189-
transform: translateX(50%) rotate(-60deg) skewY(30deg);
190-
}
191-
.hex:nth-child(5n+4):last-child,
192-
.hex:nth-child(5n+5):last-child {
193-
margin-bottom: 0;
194-
}
195-
.hex:nth-child(5n+4) {
196-
margin-right: 1%;
197-
margin-left: 0.5%;
198-
}
199-
.hex:nth-child(5n+2) {
200-
margin-left: 1%;
201-
margin-right: 1%;
202-
}
203-
.hex:nth-child(5n+6) {
204-
clear: left;
205-
}
140+
#hexGrid{
141+
padding-bottom: 7.4%
142+
}
143+
.hex {
144+
width: 33.333%; /* = 100 / 3 */
145+
}
146+
.hex:nth-child(5n+4){ /* first hexagon of even rows */
147+
margin-left:16.666%; /* = width / 2 */
148+
}
206149
}
150+
207151
@media (max-width: 600px) { /* <- 2-1 hexagons per row */
208-
.hex {
209-
width: 49.5%; /* = (100-1) / 2 */
210-
padding-bottom: 57.158%; /* = width / sin(60) */
211-
}
212-
.hex:nth-child(3n+3) {
213-
margin-top: -13.423%;
214-
margin-bottom: -13.423%;
215-
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
216-
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
217-
transform: translateX(50%) rotate(-60deg) skewY(30deg);
218-
}
219-
.hex:nth-child(3n+3):last-child {
220-
margin-bottom: 0;
221-
}
222-
.hex:nth-child(3n+3) {
223-
margin-left: 0.5%;
224-
}
225-
.hex:nth-child(3n+2) {
226-
margin-left: 1%;
227-
}
228-
.hex:nth-child(3n+4) {
229-
clear: left;
230-
}
152+
#hexGrid{
153+
padding-bottom: 11.2%
154+
}
155+
.hex {
156+
width: 50%; /* = 100 / 3 */
157+
}
158+
.hex:nth-child(3n+3){ /* first hexagon of even rows */
159+
margin-left:25%; /* = width / 2 */
160+
}
231161
}
162+
232163
@media (max-width: 400px) {
233164
#hexGrid {
234165
font-size: 13px;

0 commit comments

Comments
 (0)