forked from web-tiki/responsive-grid-of-hexagons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (151 loc) · 6.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zero Waste Slovenija</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="hexagons.css">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
</head>
<body>
<ul id="hexGrid">
<li class="hex"> <!-- r1 h1 -->
<a class="hexIn" href="http://ebm.si/zw//novice/">
<img src="assets/zws_logod.png" alt="Zero Waste Slovenija" />
</a>
</li>
<li class="hex off" id="blank"> <!-- r1 h2 -->
<span class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</span>
</li>
<li class="hex off mid"> <!-- r1 h3 -->
<span class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</span>
</li>
<li class="hex mid1"> <!-- r1 h4 -->
<a class="hexIn" href="http://ebm.si/zw/turizem/prireditve/">
<img src="assets/zw_prireditve.svg" alt="Zero Waste Prireditve" />
<img src="assets/blank.svg" class="hide1 hide2 hide3" />
</a>
</li>
<li class="hex off sm"> <!-- r1 h5 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex off sm"> <!-- r2 h1 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex sm1 sm2"> <!-- r2 h2 -->
<a class="hexIn" href="http://ebm.si/zw/obcine/">
<img src="assets/zw_obcina.svg" alt="Zero Waste Občina" />
<img src="assets/blank.svg" class="hide1 hide2 hide3" />
</a>
</li>
<li class="hex off mid"> <!-- r2 h3 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex mid1"> <!-- r2 h4 -->
<a class="hexIn" href="http://ebm.si/zw/turizem/hoteli/">
<img src="assets/zw_hotel.svg" alt="Zero Waste Hotel" />
<img src="assets/blank.svg" class="hide1" />
</a>
</li>
<li class="hex off mid"> <!-- r3 h1 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex off mid"> <!-- r3 h2 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex mid1 mid2"> <!-- r3 h3 -->
<a class="hexIn" href="http://ebm.si/zw/dom/">
<img src="assets/zw_dom.svg" alt="Zero Waste Dom" />
<img src="assets/blank.svg" class="hide1 hide2" />
</a>
</li>
<li class="hex off sm"> <!-- r3 h4 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex off mid"> <!-- r3 h5 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex mid1 sm1"> <!-- r4 h1 -->
<a class="hexIn" href="http://ebm.si/zw/zakonodaja/zakonodaja-eu/pravo-eu/">
<img src="assets/zakonodaja.svg" alt="Zero Waste Zakonodaja" />
<img src="assets/blank.svg" class="hide1" />
</a>
</li>
<li class="hex off mid"> <!-- r4 h2 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex off mid"> <!-- r4 h3 -->
<a class="hexIn" href="#">
<img src="assets/blank.svg" alt="" />
</a>
</li>
<li class="hex mid1 mid2"> <!-- r4 h4 -->
<a class="hexIn" href="http://ebm.si/" target="_blank">
<img src="assets/logo_EBM_negativ_hex.png" alt="Društvo Ekologi brez meja" />
<img src="assets/blank.svg" class="hide1 hide2 hide3 hide4 hide5" />
</a>
</li>
</ul>
<script src="enquire.min.js"></script>
<script>
// delete unwanted hexagons
var thin = function(cls) {
var duds = document.getElementsByClassName(cls);
for (var i = duds.length - 1; 0 <= i; i--) {
var dud = duds[i];
if (!dud || !dud.parentNode) continue;
dud.parentNode.removeChild(dud);
}
};
// recreate the deleted hexagons
var fat = function(cls, suf) {
var itm = document.getElementById("blank");
for (var n=1; n<=suf; n++) {
var pres = document.getElementsByClassName(cls+n);
for (var i = pres.length - 1; 0 <= i; i--) {
var pre = pres[i];
if (!pre) continue;
// add mid/sm class first
var blank = itm.cloneNode(true);
blank.className += " " + cls;
pre.parentNode.insertBefore(blank, pre);
}
}
// check if we overdid it (mostly for testing purposes — happens on transition back to 100%, but could also on orientation change)
var count = document.getElementsByClassName(cls);
var exp = { "mid":7, "sm":3 };
if (count.length > exp[cls]) window.location.reload(false);
};
enquire.register("screen and (max-width: 1200px) and (min-width:901px)", {
// triggered when a media query matches
match : function() { thin("mid"); },
unmatch : function() { fat("mid", 2); },
deferSetup : true,
}).register("(max-width: 900px) and (min-width:601px), (max-width: 600px), (max-width: 400px)", {
match : function() { thin("mid"); thin("sm"); },
unmatch : function() { fat("mid", 2); fat("sm", 2); },
deferSetup : true,
});
</script>
</body>
</html>