Fixed landing page design a bit (bootstrap errors, spacing, alignment). #242
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,22 +5,27 @@ | |
| --- | ||
| <div class="header"> | ||
| <div class=" container "> | ||
| <div class="row"> | ||
| <div class=" span12 col-sm-12 hidden-xs"><br><br></div> | ||
| </div> | ||
| <div class="row" style="display: flex; align-items: center"> | ||
| <div class=" span6 col-md-6"> | ||
| <div class="branding"> | ||
| <br class="hidden-xs"> | ||
| <img src="/img/haskell-logo.svg" class="img-responsive"> | ||
|
Comment on lines
+14
to
+15
Contributor
Author
There was a problem hiding this comment. Here I merely formatted the html a bit. |
||
| <h4 class="summary">An advanced, purely functional programming language</h4> | ||
| </div> | ||
| </div> | ||
| <div class=" span6 col-md-6"> | ||
| <div class="row" id="code-example"> | ||
| <div class="branding sample"> | ||
| <br class="visible-xs visible-sm"> | ||
| <h4 class="tag">Declarative, statically typed code.</h4> | ||
| <div title="This example is contrived in order to demonstrate what Haskell looks like, including: (1) where syntax, (2) enumeration syntax, (3) pattern matching, (4) consing as an operator, (5) list comprehensions, (6) infix functions. Don't take it seriously as an efficient prime number generator." class="code-sample"> | ||
| <pre><span class='hs-definition'>primes</span> <span class='hs-keyglyph'>=</span> <span class='hs-varid'>filterPrime</span> <span class='hs-keyglyph'>[</span><span class='hs-num'>2</span><span class='hs-keyglyph'>..</span><span class='hs-keyglyph'>]</span> | ||
| <span class='hs-keyword'>where</span> <span class='hs-varid'>filterPrime</span> <span class='hs-layout'>(</span><span class='hs-varid'>p</span><span class='hs-conop'>:</span><span class='hs-varid'>xs</span><span class='hs-layout'>)</span> <span class='hs-keyglyph'>=</span> | ||
| <span class='hs-varid'>p</span> <span class='hs-conop'>:</span> <span class='hs-varid'>filterPrime</span> <span class='hs-keyglyph'>[</span><span class='hs-varid'>x</span> <span class='hs-keyglyph'>|</span> <span class='hs-varid'>x</span> <span class='hs-keyglyph'><-</span> <span class='hs-varid'>xs</span><span class='hs-layout'>,</span> <span class='hs-varid'>x</span> <span class='hs-varop'>`mod`</span> <span class='hs-varid'>p</span> <span class='hs-varop'>/=</span> <span class='hs-num'>0</span><span class='hs-keyglyph'>]</span></pre> | ||
| </div> | ||
|
Comment on lines
+20
to
+28
Contributor
Author
There was a problem hiding this comment. 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. |
||
| </div> | ||
| </div> | ||
| <div class="row" id="get-started-button"> | ||
|
|
@@ -35,7 +40,13 @@ <h4 class="tag">Declarative, statically typed code.</h4> | |
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <br> | ||
| <br class="hidden-sm"> | ||
| <br class="hidden-sm"> | ||
| <br class="hidden-xs hidden-sm"> | ||
| <br class="hidden-xs hidden-sm"> | ||
|
Comment on lines
+44
to
+48
Contributor
Author
There was a problem hiding this comment. 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.
Contributor
There was a problem hiding this comment. The idea of adding gaps via In general, if the intention is to give a container "more room", I'd change it's padding / margin. 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 |
||
|
|
||
| <div class="pattern-bg"> | ||
| <div class=" container "> | ||
| <div class=" row "> | ||
|
|
@@ -63,7 +74,13 @@ <h2>Try it!</h2> | |
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <br> | ||
| <br class="hidden-sm"> | ||
| <br class="hidden-sm"> | ||
| <br class="hidden-xs hidden-sm"> | ||
| <br class="hidden-xs hidden-sm"> | ||
|
|
||
|
Comment on lines
+79
to
+83
Contributor
Author
There was a problem hiding this comment. Same as with spacings above. |
||
| <div id="community-wrapper"> | ||
| <div class="videos"> | ||
| <div class=" container "> | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here I did 3 changes:
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.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.
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.