Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e33d2c6
Fixed Boostrap mistakes on landing page.
Martinsos Jan 29, 2023
2c3606a
Improved landing page design a bit (more spacing).
Martinsos Jan 29, 2023
1177fa6
fix
Martinsos Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 28 additions & 11 deletions site/index.html
View file
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></div>
<div class="row">
<div class=" span12 col-sm-12 hidden-xs"><br><br></div>
</div>
<div class="row">
<div class=" span6 col-md-6">
<div class="branding">
<br class="hidden-xs"><img src="/img/haskell-logo.svg" class="img-responsive">
<br class="hidden-xs">
<img src="/img/haskell-logo.svg" class="img-responsive">
Comment on lines +14 to +15
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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="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&#39;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'>&lt;-</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 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&#39;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'>&lt;-</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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-xs hidden-sm"><br class="hidden-xs hidden-sm">

<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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


<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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as with spacings above.

<div id="community-wrapper">
<div class="videos">
<div class=" container ">