Skip to content

Home redesign 2: Choose your Haskell Path #381

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
Zelenya wants to merge 7 commits into
base: master
Choose a base branch
from
+204 −6
Open

Home redesign 2: Choose your Haskell Path #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3e1348e
Bump the size of pillars
Zelenya Apr 24, 2026
34a545a
Add choose path section
Zelenya Apr 24, 2026
48d0895
Fix mobile
Zelenya Apr 24, 2026
2331589
Move things around to make clickability clear
Zelenya Apr 24, 2026
1683832
Dim the colors
Zelenya Apr 24, 2026
fb18223
Extract the ctas
Zelenya Apr 24, 2026
146f87a
Apply suggestion from @Zelenya
Zelenya Apr 26, 2026
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
99 changes: 99 additions & 0 deletions site/css/hl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4603,6 +4603,105 @@ pre .hs-keyglyph {
font-size: 95%;
line-height: 130%; }

.home-pillar h3 {
font-size: 30px;
line-height: 1.2; }

@media (min-width: 992px) {
.home-pillar h3 {
white-space: nowrap; } }

.home-pillar p {
font-size: 20px;
line-height: 1.5; }

.choose-path-section,
.path-start-section {
background-color: #f7f4fb;
border-top: 1px solid #ebe4f3;
border-bottom: 1px solid #ebe4f3; }

.choose-path-section {
padding: 40px 0; }

.choose-path-nav {
display: inline-block; }
.choose-path-nav > li {
float: none;
display: inline-block; }
.choose-path-nav > li + li {
margin-left: 8px; }
.choose-path-nav > li > a {
border: 1px solid #ddd; }
.choose-path-nav > li > a:hover, .choose-path-nav > li > a:focus {
background-color: #ebe4f3;
border-color: #d7c9eb;
color: #5d4f85; }
.choose-path-nav > li.active > a, .choose-path-nav > li.active > a:hover, .choose-path-nav > li.active > a:focus {
background-color: #5d4f85;
border: 1px solid #5d4f85;
color: #fff; }

.choose-path-panel {
text-align: center; }

.choose-path-section .choose-path-description {
font-size: 20px;
line-height: 1.5; }

.path-start-section {
padding: 30px 0; }

.path-start-heading {
font-size: 20px;
line-height: 1.5;
margin-top: 0;
margin-bottom: 20px; }

.cta-pane {
display: none; }

.cta-pane.is-active {
display: block; }

/*If the browser understands :has(), let css show content according to the selected/active path.
* Otherwise, always show default content (whatever is active in html by default) */
@supports selector(.choose-path-section:has(.tab-pane.active)) {
.choose-path-section:has(.tab-pane.active) ~ .path-start-section .cta-pane {
display: none; }

.choose-path-section:has(.choose-path-nav li.active a[data-path="industry"]) ~ .path-start-section .cta-pane[data-path="industry"],
.choose-path-section:has(.choose-path-nav li.active a[data-path="academia"]) ~ .path-start-section .cta-pane[data-path="academia"],
.choose-path-section:has(.choose-path-nav li.active a[data-path="hobbyists"]) ~ .path-start-section .cta-pane[data-path="hobbyists"],
.choose-path-section:has(.choose-path-nav li.active a[data-path="wildcard"]) ~ .path-start-section .cta-pane[data-path="wildcard"] {
display: block; }
}

.path-start-links .btn {
margin-left: 4px; }

.path-start-links .btn:first-child {
margin-left: 0; }

.path-start-links .btn-sm {
font-size: 17px;
line-height: 1.4; }

@media (max-width: 767px) {
.choose-path-nav {
display: block; }
.choose-path-nav > li {
display: block; }
.choose-path-nav > li + li {
margin-left: 0;
margin-top: 10px; }
.path-start-links .btn {
margin-bottom: 10px;
margin-left: 8px; }
.path-start-links .btn:first-child {
margin-left: 0; }
}

.features .col-md-6 {
cursor: pointer; }

Expand Down
110 changes: 105 additions & 5 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,28 +25,84 @@ <h3 class="summary">Enjoy long-term maintainable software you can rely on</h3>
</div>
</div>

<br class="hidden-xs hidden-sm">
<br class="hidden-xs hidden-sm">

<div class="container">
<div class="row">
<div class="span4 col-xs-12 col-sm-4">
<div class="span4 col-xs-12 col-sm-4 home-pillar">
<h3>Model complex domains</h3>
<p>Express domain rules, invariants, and possible states directly in code instead of scattering them through comments, docs, and informal practices.</p>
</div>
<div class="span4 col-xs-12 col-sm-4">
<div class="span4 col-xs-12 col-sm-4 home-pillar">
<h3>Build reliable software</h3>
<p>Catch mistakes before they escape into production and build systems that stay dependable as the logic gets more complex and the stakes get higher.</p>
</div>
<div class="span4 col-xs-12 col-sm-4">
<div class="span4 col-xs-12 col-sm-4 home-pillar">
<h3>Refactor with confidence</h3>
<p>Keep your codebase maintainable, even as requirements shift, teams change, and environments evolve.</p>
</div>
</div>
</div>

<br>
<br>
<br class="hidden-xs hidden-sm">

<div class="choose-path-section">
<div class="container">
<div class="row">
<div class="span12 col-sm-12 text-center">
<h2>With Haskell, you are in control. Choose your own path</h2>
</div>
</div>
<div class="row">
<div class="span12 col-sm-12 text-center">
<!-- Note that data-path keys and pane order should be aligned with other dependent panes. -->
<ul class="nav nav-pills choose-path-nav" role="tablist">
<li role="presentation">
<a href="#choose-path-academia" aria-controls="choose-path-academia" role="tab" data-toggle="pill" data-path="academia">Academia and language design</a>
</li>
<li role="presentation" class="active">
<a href="#choose-path-industry" aria-controls="choose-path-industry" role="tab" data-toggle="pill" data-path="industry">Build reliable systems</a>
</li>
<li role="presentation">
<a href="#choose-path-hobbyists" aria-controls="choose-path-hobbyists" role="tab" data-toggle="pill" data-path="hobbyists">Build your next pet project</a>
</li>
<li role="presentation">
<a href="#choose-path-wildcard" aria-controls="choose-path-wildcard" role="tab" data-toggle="pill" data-path="wildcard">Use it your way</a>
</li>
</ul>
</div>
</div>
<br>
<div class="row">
<div class="span12 col-sm-12">
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="choose-path-academia">
<div class="choose-path-panel">
<p class="choose-path-description">Use Haskell for research and contribute to ideas that continue to shape modern programming languages since 1990.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="choose-path-industry">
<div class="choose-path-panel">
<p class="choose-path-description">Use Haskell in production for web apps, tools, and systems where correctness and maintainability matter.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="choose-path-hobbyists">
<div class="choose-path-panel">
<p class="choose-path-description">Use Haskell to build tools, games, and side projects that are satisfying to make and rewarding to understand.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="choose-path-wildcard">
<div class="choose-path-panel">
<p class="choose-path-description">There is no one way to do Haskell. Use Haskell the way that fits how you like to work.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="pattern-bg">
<div class=" container ">
<div class=" row ">
Expand Down Expand Up @@ -530,6 +586,50 @@ <h3>Packages</h3>
</div>
</div>
<br>
<div class="path-start-section">
<div class="container">
<div class="row">
<div class="span12 col-sm-12">
<!-- Note that data-path keys and pane order should be aligned with the top choose-path tabs. -->
<div class="cta-pane is-active" data-path="industry">
<h3 class="path-start-heading text-center">Start building something real with confidence.</h3>
<p class="path-start-links text-center">
<a href="/get-started/" class="btn btn-primary btn-sm">Get started</a>
<a href="https://blog.haskell.org/a-couple-million-lines-of-haskell/" class="btn btn-default btn-sm">A couple million lines of Haskell</a>
<a href="https://serokell.io/blog/haskell-in-production" class="btn btn-default btn-sm">Haskell in production</a>
<a href="#community-wrapper" class="btn btn-default btn-sm">Testimonials</a>
</p>
</div>
<div class="cta-pane" data-path="academia">
<h3 class="path-start-heading text-center">Start exploring Haskell's ideas.</h3>
<p class="path-start-links text-center">
<a href="/get-started/" class="btn btn-primary btn-sm">Get started</a>
<a href="https://ghc.gitlab.haskell.org/ghc/doc/users_guide/exts/table.html" class="btn btn-default btn-sm">GHC language extensions</a>
<a href="https://github.com/ghc-proposals/ghc-proposals" class="btn btn-default btn-sm">GHC Proposals</a>
<a href="/documentation/" class="btn btn-default btn-sm">Documentation</a>
</p>
</div>
<div class="cta-pane" data-path="hobbyists">
<h3 class="path-start-heading text-center">Start building your next fun project.</h3>
<p class="path-start-links text-center">
<a href="/get-started/" class="btn btn-primary btn-sm">Get started</a>
<a href="https://serokell.io/blog/best-haskell-open-source-projects" class="btn btn-default btn-sm">29 Awesome Projects</a>
<a href="https://discourse.haskell.org/c/show-and-tell/7" class="btn btn-default btn-sm">Show and Tell</a>
<a href="https://play.haskell.org/" class="btn btn-default btn-sm">Playground</a>
</p>
</div>
<div class="cta-pane" data-path="wildcard">
<h3 class="path-start-heading text-center">Start building projects and applications you care about.</h3>
<p class="path-start-links text-center">
<a href="/get-started/" class="btn btn-primary btn-sm">Get started</a>
<a href="/downloads/" class="btn btn-default btn-sm">Downloads</a>
<a href="/documentation/" class="btn btn-default btn-sm">Documentation</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="sponsors pattern-bg">
<div class=" container ">
<div class=" row ">
Expand Down
1 change: 0 additions & 1 deletion site/js/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,3 @@ function setupFeatures(){
$this.find('.expand').hide();
});
}

Loading