From b5b09d0ca2fa155cc58fb7fd225d7ac481ff86a9 Mon Sep 17 00:00:00 2001 From: Julian Ospald Date: Sun, 3 Oct 2021 21:22:52 +0200 Subject: [PATCH] Beef up Quick Install --- docs/css/extra.css | 177 ++++++++++++++++++++++++++++++++++++++++++ docs/expand-piece.svg | 65 ++++++++++++++++ docs/index.md | 104 ++++++++++++++++++++++++- docs/os-freebsd.svg | 7 ++ docs/os-linux.svg | 69 ++++++++++++++++ docs/os-osx.svg | 143 ++++++++++++++++++++++++++++++++++ docs/os-windows.svg | 18 +++++ 7 files changed, 581 insertions(+), 2 deletions(-) create mode 100644 docs/expand-piece.svg create mode 100644 docs/os-freebsd.svg create mode 100644 docs/os-linux.svg create mode 100644 docs/os-osx.svg create mode 100644 docs/os-windows.svg diff --git a/docs/css/extra.css b/docs/css/extra.css index 0f6c9c5..9876f66 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -120,3 +120,180 @@ a:hover { color: #fff; 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 { + display: flex; + justify-content: center; +} + +div.platform { + margin: 0px 20px 0px 20px; +} + + +#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; +} + +.command-button > pre { + background-color: #515151; + color: white; + margin: auto; + margin-top: 0px; + padding-top: 1rem; + padding-bottom: 1rem; + padding-right: 1rem; + text-align: center; + border-radius: 3px; + box-shadow: inset 0px 0px 20px 0px #333333; + font-size: 1em; + width: 55rem; + overflow: auto; + white-space: nowrap; +} + +.ghcup-command:before { + color: #999; + content: " $ "; +} + +div.command-button { + display: flex; + align-items: center; +} + +div.command-button button { + color: white; + /* border: none; */ + background-color: rgb(242, 242, 242); + border-width: 2px; + border-style: solid; + border-radius: 3px; + + margin-left: 0.5rem; + margin-right: auto; + margin-top: 25px; + margin-bottom: 25px; + text-align: center; +} + +div.command-button button:hover { + background: rgb(232, 232, 232); +} + +div.command-button button:focus { + background: rgb(222, 222, 222); +} diff --git a/docs/expand-piece.svg b/docs/expand-piece.svg new file mode 100644 index 0000000..d76090f --- /dev/null +++ b/docs/expand-piece.svg @@ -0,0 +1,65 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/docs/index.md b/docs/index.md index 2e46ec1..e6caa7b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,11 +22,111 @@ 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

+ +
+ + + +
+ +
+ +
+
FreeBSD logo

FreeBSD

+ +
+ + + +
+ +
+ +
+
Windows logo

Windows

+ +
+ + + +
+ +
+ +
+
Windows logo

WSL2

+ +
+ + + +
+ +
+ +
+ + + + + + + +
+ +
diff --git a/docs/os-freebsd.svg b/docs/os-freebsd.svg new file mode 100644 index 0000000..ce1b597 --- /dev/null +++ b/docs/os-freebsd.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/docs/os-linux.svg b/docs/os-linux.svg new file mode 100644 index 0000000..18e483c --- /dev/null +++ b/docs/os-linux.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/docs/os-osx.svg b/docs/os-osx.svg new file mode 100644 index 0000000..f64d769 --- /dev/null +++ b/docs/os-osx.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/os-windows.svg b/docs/os-windows.svg new file mode 100644 index 0000000..818da41 --- /dev/null +++ b/docs/os-windows.svg @@ -0,0 +1,18 @@ + + + + + + + +