Redo landing page

This commit is contained in:
Julian Ospald 2021-10-06 18:32:28 +02:00
parent ac66f6747e
commit c100daeba5
Signed by: hasufell
GPG Key ID: 3786C5262ECB4A3F
5 changed files with 80 additions and 227 deletions

View File

@ -146,128 +146,18 @@ a:hover {
background-color: #453A62;
}
input[type="checkbox"] {
display: none;
}
.wrap-collabsible {
margin: 1.2rem 0;
}
.lbl-toggle {
margin: 0px;
}
.toggle:checked + .lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
margin-top: 5px;
max-height: 0px;
overflow: hidden;
transition: max-height 0.25s ease-in-out;
}
.toggle:checked + .lbl-toggle ~ .collapsible-content {
max-height: 500px;
}
.toggle:checked + .lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
background: rgba(0, 105, 255, 0.2);
border-bottom: 1px solid rgba(0, 105, 255, 0.45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0.5rem 1rem;
}
.collapsible-content p {
margin-bottom: 0;
}
.platform-name img {
max-width: 40px;
max-height: 30px;
display: block;
max-width: 100%;
padding: unset;
line-height: unset;
background-color: unset;
border: unset;
border-radius: unset;
margin: 20px auto 0px auto;
}
.expander div {
position: relative;
height: 50px;
width: 40px;
margin: 10px auto 0px auto;
display: block;
}
.expander img {
position: absolute;
width: 40px;
display: block;
transition: all 400ms ease;
max-width: 100%;
padding: unset;
line-height: unset;
background-color: unset;
border: unset;
border-radius: unset;
margin: 0px auto 0px auto;
}
.expander img.expand-2 {
top: 8px;
}
.expander img.expand-3 {
top: 16px;
}
.expander:hover img.expand-2 {transform: translateY(5px);}
.expander:hover img.expand-3 {transform: translateY(10px);}
div.platforms {
.main-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
div.platform {
margin: 0px 20px 0px 20px;
.main-buttons a {
margin-right: 5px;
margin-bottom: 5px;
}
#linux-link, #mac-link, #freebsd-link, #windows-link, #wsl-link {
display: none;
}
#linux-link:target, #mac-link:target, #freebsd-link:target, #windows-link:target, #wsl-link:target {
display: block;
}
:target:before {
content:"";
display:block;
height:150px; /* fixed header height*/
margin:-150px 0 0; /* negative fixed header height */
}
.command-button {
display: flex;
align-items: center;
@ -293,6 +183,7 @@ margin:-150px 0 0; /* negative fixed header height */
.ghcup-command:before {
color: #999;
content: " $ ";
margin-left: 15px;
}
div.command-button {
@ -301,24 +192,32 @@ div.command-button {
}
div.command-button button {
color: white;
color: #515151;
/* border: none; */
background-color: rgb(242, 242, 242);
border-width: 2px;
border-style: solid;
border-radius: 3px;
background: rgb(230, 230, 230);
border-width: 2px !important;
border-style: solid !important;
border-radius: 3px !important;
border: grey;
margin-left: 0.5rem;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
text-align: center;
margin-left: 0.5rem !important;
margin-right: auto !important;
text-align: center !important;
padding: 18px;
padding-bottom: 16px;
}
div.command-button button .fa {
font-size: x-large;
}
div.command-button button:hover {
background: rgb(232, 232, 232);
background: rgb(220, 220, 220);
color: black;
border: black;
}
div.command-button button:focus {
background: rgb(222, 222, 222);
color: green;
}

View File

@ -4,6 +4,10 @@ hide:
- toc
---
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="javascripts/extra.js"></script>
# ![](./haskell_logo.png){: .main-logo style="width:100px"} GHCup
GHCup is an installer for the general purpose language [Haskell](https://www.haskell.org/).
@ -22,115 +26,37 @@ GHCup makes it easy to install specific versions of GHC on GNU/Linux,
macOS (aka Darwin), FreeBSD and Windows and can also bootstrap a fresh [Haskell developer environment](./install/#supported-tools) from scratch.
It follows the unix UNIX philosophy of [do one thing and do it well](https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well). Similar in scope to [rustup](https://github.com/rust-lang-nursery/rustup.rs), [pyenv](https://github.com/pyenv/pyenv) and [jenv](http://www.jenv.be).
<div class="wrap-collabsible text-center"> <input id="collapsible" class="toggle" type="checkbox">
<label for="collapsible" class="lbl-toggle btn btn-primary">Quick Install</label>
<div class="text-center main-buttons">
<a href="#quick-install" class="btn btn-primary" role="button">Quick Install</a>
<a href="install/" class="btn btn-primary" role="button">Getting Started</a>
<a href="guide/" class="btn btn-primary" role="button">User Guide</a>
<a href="https://gitlab.haskell.org/haskell/ghcup-hs/-/issues" class="btn btn-primary" role="button">Issue tracker</a>
<div class="collapsible-content">
<div class="content-inner">
<h2>Select your platform</h3>
<div class="platforms">
<div class="platform">
<div class="platform-name"><img src="os-linux.svg" alt="Linux logo"> <h3>Linux</h3></div>
<a class="expander" href="#linux-link">
<div>
<img src="expand-piece.svg" class="expand-1">
<img src="expand-piece.svg" class="expand-2">
<img src="expand-piece.svg" class="expand-3">
</div>
</a>
</div>
<div class="platform">
<div class="platform-name"><img src="os-osx.svg" alt="Mac logo"> <h3>Mac OS X</h3></div>
<a class="expander" href="#mac-link">
<div>
<img src="expand-piece.svg" class="expand-1">
<img src="expand-piece.svg" class="expand-2">
<img src="expand-piece.svg" class="expand-3">
</div>
</a>
</div>
[![GHCup](./ghcup.gif){: .center style="width:700px"}](install#installation)
<div class="platform">
<div class="platform-name"><img src="os-freebsd.svg" alt="FreeBSD logo" style="fill: black;"> <h3>FreeBSD</h3></div>
<a class="expander" href="#freebsd-link">
<div>
<img src="expand-piece.svg" class="expand-1">
<img src="expand-piece.svg" class="expand-2">
<img src="expand-piece.svg" class="expand-3">
</div>
</a>
</div>
<h2 class="text-center" id="quick-install">Quick Install<a class="headerlink" href="#quick-install" title="Permanent link"></a>
</h2>
<div class="platform">
<div class="platform-name"><img src="os-windows.svg" alt="Windows logo"> <h3>Windows</h3></div>
<a class="expander" href="#windows-link">
<div>
<img src="expand-piece.svg" class="expand-1">
<img src="expand-piece.svg" class="expand-2">
<img src="expand-piece.svg" class="expand-3">
</div>
</a>
</div>
### Linux, macOS, FreeBSD or [WSL2](https://docs.microsoft.com/en-us/windows/wsl/)
<div class="platform">
<div class="platform-name"><img src="os-windows.svg" alt="Windows logo"> <h3>WSL2</h3></div>
<a class="expander" href="#wsl-link">
<div>
<img src="expand-piece.svg" class="expand-1">
<img src="expand-piece.svg" class="expand-2">
<img src="expand-piece.svg" class="expand-3">
</div>
</a>
</div>
Run the following in a terminal (as a non-root user):
</div>
<div id="linux-link">
<hr/>
<h4>On Linux, run the following in your terminal (as a user other than root), then follow the onscreen instructions:</h4>
<div class="command-button">
<pre><span class="ghcup-command">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
<pre><span class="ghcup-command" id="ghcup-command-linux">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
<button class="btn" onclick="copyToClipboardNux()" id="ghcup-linux-button"><i class="fa fa-copy"></i></button>
</div>
</div>
<div id="mac-link">
<hr/>
<h4>On Mac, run the following in your terminal (as a user other than root), then follow the onscreen instructions:</h4>
<span>
</span>
### Windows
Run the following in a PowerShell session (as a non-admin user):
<div class="command-button">
<pre><span class="ghcup-command">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
</div>
</div>
<div id="freebsd-link">
<hr/>
<h4>On FreeBSD, run the following in your terminal (as a user other than root), then follow the onscreen instructions:</h4>
<div class="command-button">
<pre><span class="ghcup-command">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
</div>
</div>
<div id="windows-link" class="anchor">
<hr/>
<h4>On Windows, run the following in a powershell session (as a non-admin user), then follow the onscreen instructions:</h4>
<div class="command-button">
<pre><span class="ghcup-command">Set-ExecutionPolicy Bypass -Scope Process -Force;[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;Invoke-Command -ScriptBlock ([ScriptBlock]::Create((Invoke-WebRequest https://www.haskell.org/ghcup/sh/bootstrap-haskell.ps1 -UseBasicParsing))) -ArgumentList $true</span></pre>
</div>
</div>
<div id="wsl-link">
<hr/>
<h4>On WSL2, run the following in your terminal (as a user other than root), then follow the onscreen instructions:</h4>
<div class="command-button">
<pre><span class="ghcup-command">curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh</span></pre>
</div>
</div>
</div>
</div>
<pre><span class="ghcup-command" id="ghcup-command-windows">Set-ExecutionPolicy Bypass -Scope Process -Force;[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;Invoke-Command -ScriptBlock ([ScriptBlock]::Create((Invoke-WebRequest https://www.haskell.org/ghcup/sh/bootstrap-haskell.ps1 -UseBasicParsing))) -ArgumentList $true</span></pre>
<button class="btn" onclick="copyToClipboardWin()" id="ghcup-windows-button"><i class="fa fa-copy"></i></button>
</div>
----
![GHCup](./ghcup.gif){: .center style="width:700px"}

23
docs/javascripts/extra.js Normal file
View File

@ -0,0 +1,23 @@
function copyToClipboardNux() {
const text = document.getElementById("ghcup-command-linux").innerText;
const el = document.createElement('textarea');
el.value = text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
const button = document.getElementById("ghcup-linux-button");
button.focus();
}
function copyToClipboardWin() {
const text = document.getElementById("ghcup-command-windows").innerText;
const el = document.createElement('textarea');
el.value = text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
const button = document.getElementById("ghcup-windows-button");
button.focus();
}

View File

@ -20,6 +20,9 @@ nav:
extra_css:
- css/extra.css
extra_javascript:
- javascripts/extra.js
markdown_extensions:
- toc:
permalink:

View File

@ -117,10 +117,12 @@ body#idx p.other-help {
margin-top: 25px;
margin-bottom: 25px;
text-align: center;
padding: 18px;
}
.instructions div.command-button button:hover {
background: rgb(232, 232, 232);
background: rgb(100, 100, 100);
}
.instructions div.command-button button:focus {