Add Hexagon Code

3 files changed, 180 insertions, 286 deletions

diff --git a/assets/css/hexagon.css b/assets/css/hexagon.css
new file mode 100644
index 0000000..cd97e9e
--- /dev/null
+++ b/assets/css/hexagon.css
@@ -0,0 +1,180 @@
+* {
+    margin: 0 ;
+    padding: 0 ;
+}
+
+a h1 {
+    margin:0;
+    padding: 0 ;
+}
+
+a p{
+    margin: 0;
+    padding: 0;
+}
+
+
+
+#hexGrid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 90%;
+    margin: 0 auto;
+    overflow: hidden;
+    font-family: 'Raleway', sans-serif;
+    font-size: 15px;
+    list-style-type: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.hex {
+    position: relative;
+    visibility:hidden;
+    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
+}
+.hex::after{
+    content:'';
+    display:block;
+    padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
+}
+.hexIn{
+    position: absolute;
+    width:96%;
+    padding-bottom: 110.851%; /* =  width / sin(60) */
+    margin:0 2%;
+    overflow: hidden;
+    visibility: hidden;
+    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
+    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
+    -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
+    transform: rotate3d(0,0,1,-60deg) skewY(30deg);
+}
+.hexIn * {
+    position: absolute;
+    visibility: visible;
+    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
+}
+.hexLink {
+    display:block;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    overflow: hidden;
+    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
+    -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
+    transform: skewY(-30deg) rotate3d(0,0,1,60deg);
+}
+
+/*** HEX CONTENT **********************************************************************/
+.hex img {
+    left: -100%;
+    right: -100%;
+    width: auto;
+    height: 100%;
+    margin: 0 auto;
+    -webkit-transform: rotate3d(0,0,0,0deg);
+    -ms-transform: rotate3d(0,0,0,0deg);
+    transform: rotate3d(0,0,0,0deg);
+}
+
+.hex h1, .hex p {
+    width: 100%;
+    padding: 5%;
+    box-sizing:border-box;
+    background-color: black;
+    color: white;
+    font-weight: 300;
+    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
+    transition:          transform .2s ease-out, opacity .3s ease-out;
+}
+.hex h1 {
+    bottom: 50%;
+    padding-top:50%;
+    font-size: 1.5em;
+    z-index: 1;
+    -webkit-transform:translate3d(0,-100%,0);
+    -ms-transform:translate3d(0,-100%,0);
+    transform:translate3d(0,-100%,0);
+}
+.hex h1::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 45%;
+    width: 10%;
+    text-align: center;
+    border-bottom: 1px solid #fff;
+}
+.hex p {
+    top: 50%;
+    padding-bottom:50%;
+    -webkit-transform:translate3d(0,100%,0);
+    -ms-transform:translate3d(0,100%,0);
+    transform:translate3d(0,100%,0);
+}
+
+
+/*** HOVER EFFECT  **********************************************************************/
+.hexLink:hover h1, .hexLink:focus h1,
+.hexLink:hover p, .hexLink:focus p{
+    -webkit-transform:translate3d(0,0,0);
+    -ms-transform:translate3d(0,0,0);
+    transform:translate3d(0,0,0);
+}
+
+/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
+@media (min-width:1201px) { /* <- 5-4  hexagons per row */
+    #hexGrid{
+        padding-bottom: 4.4%
+    }
+    .hex {
+        width: 15%; /* = 100 / 5 */
+    }
+    .hex:nth-child(9n+6){ /* first hexagon of even rows */
+        margin-left:10%;  /* = width of .hex / 2  to indent even rows */
+    }
+}
+
+@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
+    #hexGrid{
+        padding-bottom: 5.5%
+    }
+    .hex {
+        width: 25%; /* = 100 / 4 */
+    }
+    .hex:nth-child(7n+5){ /* first hexagon of even rows */
+        margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
+    }
+}
+
+@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
+    #hexGrid{
+        padding-bottom: 7.4%
+    }
+    .hex {
+        width: 33.333%; /* = 100 / 3 */
+    }
+    .hex:nth-child(5n+4){ /* first hexagon of even rows */
+        margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
+    }
+}
+
+@media (max-width: 600px) { /* <- 2-1  hexagons per row */
+    #hexGrid{
+        padding-bottom: 11.2%
+    }
+    .hex {
+        width: 50%; /* = 100 / 3 */
+    }
+    .hex:nth-child(3n+3){ /* first hexagon of even rows */
+        margin-left:25%;  /* = width of .hex / 2  to indent even rows */
+    }
+}
+
+@media (max-width: 400px) {
+    #hexGrid {
+        font-size: 13px;
+    }
+}
diff --git a/assets/css/theme.css b/assets/css/theme.css
deleted file mode 100644
index 707f984..0000000
--- a/assets/css/theme.css
+++ /dev/null
@@ -1,63 +0,0 @@
-body {
-    background-color: white;
-    font-family: Helvetica Neue,Helvetica,Arial,sans-serif
-
-}
-
-.hex {
-    clip-path: polygon(0px 51px, 89px 0px, 181px 51px, 181px 156px, 89px 209px, 0px 157px);
-}
-
-.hex > img {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 1;
-    transition: .5s ease;
-}
-
-.hex:hover > img {
-    opacity: 0.1;
-    background-color: #ffffff;
-}
-
-.hex:hover > div {
-    opacity: 1.0;
-}
-
-.hex > div {
-    opacity: 0;
-    transition: .5s ease;
-}
-
-.container {
-    position: relative;
-    text-align: center;
-}
-
-.centered {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.sticker-name {
-    font-weight: 900;
-}
-
-.sticker-desc {
-    font-size: 90%;
-}
-
-.sticker-links {
-
-}
-
-.pad {
-    margin: 4px;
-}
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
deleted file mode 100644
index 2f060d3..0000000
--- a/assets/js/bundle.js
+++ /dev/null
@@ -1,223 +0,0 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global $ */
-var grid = require('hex-grid')
-
-$.getJSON('/hexy/data.json', function (data) {
-  var shuffled = shuffle(data)
-  $.each(shuffled, function (key, val) {
-    var img = $('<img />', {
-      'class': 'overlay',
-      'src': val.raster,
-      'alt': val.description,
-      'title': val.description
-    })
-
-    var text = $('<div />', {
-      'class': 'centered'
-    })
-
-    var name = $('<div />', {
-      'class': 'sticker-name'
-    }).append(val.name)
-
-
-    var desc = $('<div />', {
-      'class': 'sticker-desc'
-    }).append(val.description)
-
-    var links = $('<div />', {
-      'class': 'sticker-links'
-    })
-
-
-    var vector = $('<i title="vector" class="pad fas fa-shapes"></i>')
-    var raster = $('<i title="raster" class="pad fas fa-images"></i>')
-    if (val.raster) {
-      links.append($('<a />', {
-        'href': val.raster
-      }).append(raster))
-    }
-    if (val.vector) {
-      links.append($('<a />', {
-        'href': val.vector
-      }).append(vector))
-    }
-    
-    text.append(name)
-    text.append(desc)
-    text.append(links)
-  
-
-    var container = $('<div />', {
-      'class': 'hex',
-      'width': '181px',
-      'height': '209px',
-    })
-    container.append(img);
-    container.append(text);
-
-    container.appendTo('#grid')
-  })
-
-  var hexes = document.querySelectorAll('.hex')
-  var root = document.querySelector('#grid')
-
-  function scan () {
-    grid({ element: root, spacing: 4}, hexes)
-  }
-
-  scan()
-  window.addEventListener('resize', scan)
-  window.addEventListener('load', scan)
-})
-
-function shuffle (array) {
-  var currentIndex = array.length
-  var temporaryValue
-  var randomIndex
-
-  // While there remain elements to shuffle...
-  while (currentIndex !== 0) {
-    // Pick a remaining element...
-    randomIndex = Math.floor(Math.random() * currentIndex)
-    currentIndex -= 1
-
-    // And swap it with the current element.
-    temporaryValue = array[currentIndex]
-    array[currentIndex] = array[randomIndex]
-    array[randomIndex] = temporaryValue
-  }
-
-  return array
-}
-
-},{"hex-grid":3}],2:[function(require,module,exports){
-module.exports = function () {
-    for (var i = 0; i < arguments.length; i++) {
-        if (arguments[i] !== undefined) return arguments[i];
-    }
-};
-
-},{}],3:[function(require,module,exports){
-var inside = require('point-in-polygon');
-var defined = require('defined');
-
-module.exports = function (opts, hexes) {
-    var rsize = dims(opts);
-    var hsize = dims(isharray(hexes) ? hexes[0] : hexes);
-    if (!isharray(hexes)) {
-        var h = hexes;
-        hexes = [];
-        for (var i = 0; i < h.n; i++) hexes.push(h);
-    }
-    var spacing = defined(opts.spacing, 0);
-    var offset = opts.offset;
-    if (!offset && opts.element) {
-        offset = {
-            x: opts.element.offsetLeft,
-            y: opts.element.offsetTop
-        };
-    }
-    if (!offset) {
-        offset = {
-            x: defined(opts.offsetLeft, 0),
-            y: defined(opts.offsetTop, 0)
-        };
-    }
-    var initRow = defined(opts.initRow, 0);
-    initRow = parseInt(initRow, 10);
-    if (initRow > 1) initRow = 1;
-    if (initRow < 0) initRow = 0;
-
-    var x = (initRow === 1) ? (hsize.width / 2) + (spacing / 2) : 0;
-    var y = 0;
-    var row = initRow;
-    var results = [], points = [];
-    for (var i = 0; i < hexes.length; i++) {
-        var hex = hexes[i];
-        if (hex.style) {
-            hex.style.position = 'absolute';
-            hex.style.left = x;
-            hex.style.top = y;
-        }
-        results.push({ x: x, y: y });
-
-        var hw = hsize.width / 2, hh = hsize.height / 2;
-        var cx = x + hw, cy = y + hh;
-        var pts = [
-            [ cx, cy - hh ],
-            [ cx + hw, cy - hh / 2 ],
-            [ cx + hw, cy + hh / 2 ],
-            [ cx, cy + hh ],
-            [ cx - hw, cy + hh / 2 ],
-            [ cx - hw, cy - hh / 2 ]
-        ];
-        points.push(pts);
-
-        x += hsize.width + spacing;
-        if (x > rsize.width - hsize.width) {
-            y += Math.floor(hsize.height * 3/4) + spacing;
-            row ++;
-            x = (row % 2 ? (hsize.width / 2) + (spacing / 2) : 0);
-        }
-    }
-    var res = {
-        grid: results,
-        points: points,
-        lookupIndex: function (x, y) {
-            var pt = [ x - offset.x, y - offset.y ];
-            for (var i = 0; i < points.length; i++) {
-                if (inside(pt, points[i])) return i;
-            }
-            return -1;
-        },
-        lookup: function (x, y) {
-            var i = res.lookupIndex(x, y);
-            return i >= 0 ? hexes[i] : undefined;
-        }
-    };
-    return res;
-};
-
-function dims (opts) {
-    var s = opts;
-    if (opts.width || opts.height) {
-        s = opts;
-    }
-    else if (opts.element) {
-        s = window.getComputedStyle(opts.element);
-    }
-    else if (typeof window !== 'undefined' && window.getComputedStyle) {
-        s = window.getComputedStyle(opts);
-    }
-    return {
-        width: parseInt(s.width),
-        height: parseInt(s.height)
-    };
-}
-
-function isharray (xs) {
-    return xs && typeof xs === 'object' && typeof xs.length === 'number';
-}
-
-},{"defined":2,"point-in-polygon":4}],4:[function(require,module,exports){
-module.exports = function (point, vs) {
-    // ray-casting algorithm based on
-    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
-    
-    var x = point[0], y = point[1];
-    
-    var inside = false;
-    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
-        var xi = vs[i][0], yi = vs[i][1];
-        var xj = vs[j][0], yj = vs[j][1];
-        
-        var intersect = ((yi > y) != (yj > y))
-            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
-        if (intersect) inside = !inside;
-    }
-    
-    return inside;
-};
-
-},{}]},{},[1]);