sidewalklabs / dtpr

Open source components from the Digital Transparency in the Public Realm project
https://sidewalklabs.com/dtpr/
Apache License 2.0
65 stars 19 forks source link

Hexagon shape and size does not allow proper spacing (remove border to correct) #8

Open sevaan opened 5 years ago

sevaan commented 5 years ago

In the design guidelines there are lots of examples of stacked hexagons.

Here's an example: image

However, if you use the hexagons provided in the repo, they don't stack elegantly and it requires splitting pixels in order to align things correctly. Here's an example; notice how the bottom two hexagons don't have a white space between them like they do when placed next to the hexagon above:

image

Upon further investigation, it seems that the hexagons have a black 2px border on the outside of the shape. This is throwing everything off. If you remove the border and resize the hexagon correctly, the spacing is corrected:

image

patrickkeenan commented 5 years ago

Great point, love the detail, I've revised the template

patrickkeenan commented 5 years ago

Great point, love the detail, I've revised the template