Redo landing page
This commit is contained in:
parent
ac66f6747e
commit
c100daeba5
GPG Key ID:
3786C5262ECB4A3F
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
122
docs/index.md
122
docs/index.md
|
|
@ -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>
|
||||
|
||||
|
||||
# {: .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>
|
||||
|
||||
<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>
|
||||
[{: .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 class="command-button">
|
||||
<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>
|
||||
<span>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
### Windows
|
||||
|
||||
</div>
|
||||
Run the following in a PowerShell session (as a non-admin user):
|
||||
|
||||
<div class="command-button">
|
||||
<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>
|
||||
|
||||
|
||||
----
|
||||
|
||||
{: .center style="width:700px"}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -20,6 +20,9 @@ nav:
|
|||
extra_css:
|
||||
- css/extra.css
|
||||
|
||||
extra_javascript:
|
||||
- javascripts/extra.js
|
||||
|
||||
markdown_extensions:
|
||||
- toc:
|
||||
permalink:
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue