Fix awkward spacing in main page

[gschare]

Fixes #150.

Just to summarize how it was fixed: In Bootstrap 3, you can add something called a "clearfix" in the middle of a row to force the grid to start a new row. Technically it doesn't create a new row div, but it has the same effect. We want different clearfixes for different devices. For example, computers have large screens so they should display 3 missions per row. Tablets should only display 2. Phones automatically already display 1 per row because Bootstrap forces grids on small devices to appear as rows. To get each clearfix to apply to just that media size, we use Bootstrap's "visible--" classes, which make that div only appear for whichever device size you specify. Here we only need to worry about small (sm), medium (md), and large (lg). To get the clearfixes to only appear after every 3 rows for computers and 2 rows for tablets, we use a Jekyll Liquid variable which is simply the appropriate modulus of the index of the for loop which iterates over the mission pages. I had to modify the for loop to do this, though, because in the way it was originally written, it iterates over all the site pages and then just ignores (using an if statement) the ones that aren't missions. This would mess up the moduluses (moduli?) because they would be "counting" the pages which don't appear on the grid. Instead, we filter the list down to just the mission pages first, assign that to a variable, and then iterate over that variable.

As far as I can tell from the Chrome developer window, this works on all devices.

[tigerlily-he]

Nice fix! Looks so much better without the giant gaps! 😄