The original notes can be found below. This fork, besides changing the content and getting rid of the hover effects (can't work on touch devices anyway), adds adaptive removal and readdition of (empty) hexes depending on viewport size. Empty hexes are those with just an image outline, since we wanted to preserve the visual of a honeycomb.
First empty hex is present in all scenarios and is used as the source. "mid" and "sm" classes mark which hexes to remove in which viewports (for us two was enough). Their suffixed variants dictate the count of hexes to add and are placed on the content hexes that never disappear.
Yes, I know, the formatting is not ideal and the approach not particularly general.
#CSS and HTML responsive grid of hexagons.
##Features
- The hexagon grid is responsive according to the width of the container
- Hexagons keep their aspect ratio according to their width
- The number of hexagons per row is adaptive and changes from 5 to 2 on media query break points
- A title and short text slide in on hover
- Focused hexagons are highlighted and can be cycled through with tab
Text and hover effect:
The CSS for the text and hover effect is identified in the hexagons.css stylesheet. You can remove it completly or change the hover effect, font, size...
Changing the number of hexagons per row:
The sizing and spacing defines the number of hexagons per row. The CSS properties for that are all in the media queries.
Everything works in percents to make the hexagon grid responsive.
w = width of the hexagon
n = number of hexagons per odd row
m = width of all left and right margins
w = (100 - m) / n
The height of the hexagons it defined by the bottom padding on the .hex element. This way they keep their aspect ratio and height changes according to the width.
height = width * sin(60deg)
Horizontal margins are only applied in between hexagons. They are fluid and equal to 1% of width.
Even numbered rows are pushed to the right with left margin on the first hexagon
m = left margin on first hexagon of even rows
w = width of hexagons
s = space between hexagons
m = (w + s)/2
To make the vertical spacing between the hexagons the same as the horizontal spacing, the top and bottom margins of the even rows are negative.
m = margin top and bottom
h = 1/2 height of hexagon
s = horizontal spacing between hexagons
m = - h + h * cos(60deg) + s * sin (60deg)