diff --git a/docs/css/extra.css b/docs/css/extra.css index fab049d..15c8e6d 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -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; } diff --git a/docs/index.md b/docs/index.md index e6caa7b..6531d58 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,6 +4,10 @@ hide: - toc --- + + + + # ![](./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). -
- +
+Quick Install Getting Started User Guide Issue tracker -
-
-

Select your platform

-
-
-
Linux logo

Linux

- -
- - - -
- -
+
-
-
Mac logo

Mac OS X

- -
- - - -
- -
+[![GHCup](./ghcup.gif){: .center style="width:700px"}](install#installation) -
-
FreeBSD logo

FreeBSD

- -
- - - -
- -
+

Quick Install +

-
-
Windows logo

Windows

- -
- - - -
- -
+### Linux, macOS, FreeBSD or [WSL2](https://docs.microsoft.com/en-us/windows/wsl/) -
-
Windows logo

WSL2

- -
- - - -
- -
+Run the following in a terminal (as a non-root user): -
+
+ 
curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
+ +
+ - - - - + - -
+### Windows -
+Run the following in a PowerShell session (as a non-admin user): + +
+ 
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
+
----- - -![GHCup](./ghcup.gif){: .center style="width:700px"} - diff --git a/docs/javascripts/extra.js b/docs/javascripts/extra.js new file mode 100644 index 0000000..15c6c58 --- /dev/null +++ b/docs/javascripts/extra.js @@ -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(); +} diff --git a/mkdocs.yml b/mkdocs.yml index ded0add..256dc2f 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -20,6 +20,9 @@ nav: extra_css: - css/extra.css +extra_javascript: + - javascripts/extra.js + markdown_extensions: - toc: permalink:  diff --git a/www/ghcup.css b/www/ghcup.css index d186f8a..fe3ce41 100644 --- a/www/ghcup.css +++ b/www/ghcup.css @@ -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 {