Fixed landing page design a bit (bootstrap errors, spacing, alignment).

[Martinsos]

I did a couple of things here at once:

1. Closed a bootstrap "row" that was incorrectly left open for too long -> fixing of old mistake.
2. Did some tiny amount of html formatting to make it a bit more readable.
3. Added missing bootstrap "row" -> fix of old mistake.
4. Added some more space between top level page sections, via adding some <br>s, in order to visually put more focus on "get started" button and on the "try" section, and to remove a bit of focus from the "videos" section and reduce visual clutter.
5. Adjusted alignment of big "Haskell" logo with the example of code on the right, so that they are aligned by their centers, not their tops.

Check out specific comments in the code for more details.

This is what the page looks like without this PR:

This is what it looks like with this PR:

[Martinsos]

Here I did 3 changes:

1. I added additional <br>. There was one before, now it is two. I added this <br> and a couple of others below in some places in order to put the "get started" button close to the center of the page, and push Videos section closer to the bottom of it. I did this guided by the typical advice for designing a landing page -> you want your CTA to be the most attractive thing to click that is visible above the fold. In our case that is "getting started" button, potentially also purple "try" section. Videos section is still partially visible above the fold, but is a bit more down and therefore looks more like smth additional to explore than one of the main things to look at.

2. I closed the div that is Bootstrap row here, instead of letting it also capture the stuff below. One Bootstrap row is always organized as 12 columns, but it was misused here, because somebody first added an element that spans all 12 columns, and then below one more element that spans 6, and then one more that spans 6!
   The way Bootstrap handles such situation result in ok result, but it is semantically incorrect. So I closed this div here, so it contains only one element of 12 columns, and then opened a new one below (that is the last line). This element of 12 columns is anyway used to add vertical empty space in the whole width of the page, so it makes perfect sense that it is a standalone row.
   This is merely a Bootstrap fix of the previous mistake somebody did.

3. In the new "row" I created, I used the opportunity to align Haskell logo with the code example to the right by their centers. Before they were aligned by their tops. That wasn't that much of a bit deal before when there was no "get started" button, but now with that button added, height of haskell logo vs code example + get-started button has bigger difference than before, which resulted in a bit weird look in my opinion.

[Martinsos]

Here I merely formatted the html a bit.

[Martinsos]

Here I just added a bootstrap "row", in line 20, because it was missing, which is a mistake from before. Everything else is not a change, just indentation changed a bit so git thinks its new.

[Martinsos]

Here I added some extra spacing, as explained above. So before it was 3 brs, now it is 5. Notice that just one happens on any screen size, other 2 happen only when screen is > sm, and other 2 happen only when screen > xs. So, smaller the screen, less spacing, which is what we want.

[andys8]

The idea of adding gaps via <br> tags looks wrong to me. Combining multiple makes it worse.

In general, if the intention is to give a container "more room", I'd change it's padding / margin.
If the idea is to change the gap between containers, I'd suggest looking into the gap property.

If one still ends up wanting a customized "spacer", I'd be more explicit, and define one. It's height can change depending on media queries. The also seems to be a $spacer variable in bootstrap.

[Martinsos]

Same as with spacings above.

[tomjaguarpaw]

Personally I'm not particularly keen on this. For me it's a question of "if it ain't broke, don't fix it" and I don't see that there's anything particularly broken here. I'd be interested to know what others think.

[TikhonJelvis]

Looks like a reasonable set of improvements to me. The small visible tweaks are an improvement, and it seems better to match with bootstrap's semantic model if we can.

[Martinsos]

Personally I'm not particularly keen on this. For me it's a question of "if it ain't broke, don't fix it" and I don't see that there's anything particularly broken here. I'd be interested to know what others think.

Makes sense, although I would argue that in this instance it is broken, just hasn't manifested yet -> here I am referencing to incorrect usage of bootstrap rows.

[tomjaguarpaw]

Yes, fixing the bootstrap thing makes more sense. I think it can afford to be separated into its own PR.

[Martinsos]

Ok, I opened a new one with just bootstrap stuff here: #243 .

I adjusted this PR to be the same as the bootstrap one + 1 commit extra that brings landing page improvements via spacing -> so the same thing as it was, but changes it does are clearly delineated in commits (the second one is what this PR really does). If I could I would have made it to point to bootstrap PR but I can't because it is on my fork. And I didn't want to make it directly to master because changes I made in bootstrap PR are needed for this PR.

[tomjaguarpaw]

Looks like some merge conflicts got into here after the force push.

[Martinsos]

Looks like some merge conflicts got into here after the force push.

Thanks, my mistake, should be ok now.

[tomjaguarpaw]

Unfortunately this seems to introduce a problem, because on narrow screens the "Haskell logo" block is forced to stay next to the "primes" block.

The status quo is that they wrap nicely:

[Martinsos]

@tomjaguarpaw auf that is an issue indeed, thanks for this and I should have checked that.

I fixed it now by removing the flexbox styling I did to align Haskell logo with the code on the right.

I am not adamant that this PR needs to be merged -> I thought adding some spacing might be useful, but if you all feel it doesn't help much, I am ok with closing it, and somebody else can address the design in a better, more knowledgeable way, I am not very adept in design.