diff --git a/source/articles/installation/index.html.erb b/source/articles/installation/index.html.erb index 3496110..cb860cf 100644 --- a/source/articles/installation/index.html.erb +++ b/source/articles/installation/index.html.erb @@ -24,8 +24,113 @@ platforms: href: /articles/installation/vm --- - + +
+
+
+
+
+
+

Install on Windows

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+ Download for Windows +
For Windows 10 and higher
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
iex ((New-Object System.Net.WebClient).DownloadString('iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh'))'))
+
Click to copy
+
+
+
+
+
+
+
+

Install on MacOS

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
bash <(curl -s https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh)
+
Click to copy
+
+
+
+
+
+
+
+

Install on Linux (Ubuntu)

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
To install using CLI, Run the following code at the PowerShell Terminal:
+
+
wget https://raw.githubusercontent.com/thoth-tech/splashkit-aio/main/aio-install.sh -O - | bash
+
Click to copy
+
+
+
+
+
+
+
+

Install on Virtual Machine

+
+
SplashKit is a beginner's all-purpose software toolkit.
+
+
+

If you cannot get SplashKit working natively, you can download and use the provided SplashKit Virtual Machine. The provided virtual maching comes with everything you need to get started quickly with SplashKit.

+ +

The provided virtual machine is portable and will work with VirtualBox or VMware Player.

+ +
    +
  • Download the SplashKitVM.ova virtual machine archive file
    • +
  • Import this file into your local virtual machine host (eg VirtualBox or VMWare)
    • +
  • Start the virtual machine and login using skuser as the username and splashkit.io as the password.
    • +
+ +

This comes with everything you need installed including:

+ +
    +
  • Ubuntu operating system
    • +
  • Visual Studio Code
    • +
  • Terminal
    • +
  • C/C++ using the clang++ compiler
    • +
  • .NET using dotnet core
    • +
+ +
+ +
+
+
+
+
+
+

Sorry!

+
+
Splashkit isn't available on mobile devices.
+
+
+
+
+
+
+

Other Platforms

+ +
+
+
+ Install on Windows + Install on MacOS + Install on Linux + Install on VM +
+
+
+ diff --git a/source/javascripts/main.js b/source/javascripts/main.js index 561a77e..611af0d 100644 --- a/source/javascripts/main.js +++ b/source/javascripts/main.js @@ -1,3 +1,83 @@ //= require_tree ./vendor //= require_tree . -$('#sticky').Stickyfill(); \ No newline at end of file +$('#sticky').Stickyfill(); + + +$(document).ready(function () { + if (detectMobile()) { + $('.os_mobile').show(); + return; + } + var OSName = "Unknown"; + if (navigator.platform.indexOf("Win") != -1) OSName = "Windows"; + else if (navigator.platform.indexOf("Mac") != -1) OSName = "MacOS"; + else if (navigator.platform.indexOf("X11") != -1) OSName = "MacOS"; + else if (navigator.platform.indexOf("Linux") != -1) OSName = "Linux"; + if (OSName == "MacOS") { + $('.os_mac').show(); + } else if (OSName == "Linux") { + $('.os_linux').show(); + } else { + $('.os_windows').show(); + } + +}); +$('#btn_platforms').click(function (e) { + $('.button_area').slideToggle(200); + +}); +$(".copy_code").click(function (e) { + let code = $('.sk_cli_code').text(); + + $('.copy_code').fadeOut(600); + $('.sk_cli_area').css('overflow', 'scroll'); + if (navigator.clipboard) { + navigator.clipboard.writeText(code); + $(this).text("Copied") + } +}); +$('.sk_cli_area').mouseenter(function () { + $('.copy_code').fadeIn(200); + $(".copy_code").text("Click to copy"); + $('.sk_cli_area').css('overflow', 'hidden'); +}); +$('.sk_cli_area').mouseleave(function () { + $('.copy_code').fadeOut(200); +}); +$('.sk_btn_light').click(function (e) { + e.preventDefault(); + let cid = this.id; + if (cid == "windows") { + $('.content_area').hide(); + $('.os_windows').show(300); + } + if (cid == "mac") { + $('.content_area').hide(); + $('.os_mac').show(300); + } + if (cid == "linux") { + $('.content_area').hide(); + $('.os_linux').show(300); + } + if (cid == "vm") { + $('.content_area').hide(); + $('.os_vm').show(300); + } + +}); + +function detectMobile() { + const toMatch = [ + /Android/i, + /webOS/i, + /iPhone/i, + /iPad/i, + /iPod/i, + /BlackBerry/i, + /Windows Phone/i, + ]; + + return toMatch.some((toMatchItem) => { + return navigator.userAgent.match(toMatchItem); + }); +} \ No newline at end of file diff --git a/source/stylesheets/partials/articles/_article.scss b/source/stylesheets/partials/articles/_article.scss index e6b4b03..4d0c4ad 100644 --- a/source/stylesheets/partials/articles/_article.scss +++ b/source/stylesheets/partials/articles/_article.scss @@ -1,53 +1,237 @@ -body.articles main#content .container { - margin-top: 3.5rem; +@media (min-width: 1400px) { + .container { + max-width: 1140px !important; + } } -.sk-article + .sk-sidebar { - margin-top: 4rem; - margin-bottom: 4rem; +@media (max-width: 800px) { + .container { + max-width: 576px; + } + .sk-search { + display: none; + } + .cont_left { + width: 100% !important; + } + .cont_right { + width: 100% !important; + height: 200px !important; + } + .cont_right img { + object-position: center !important; + } + .cont_left { + text-align: center; + } + .sk_btn_area { + width: 100% !important; + padding: 20px; + } + .sk_btn_light { + width: 220px; + } } -.sk-article:first-child { - margin: 4rem auto 2.5em; - - @include media-breakpoint-down(sm) { - padding: 1.5rem 1.5rem 0; - margin: 0 auto; +@media (max-width: 768px) { + .container { + max-width: 576px; } } -.sk-article img { - @extend .img-thumbnail; + + +a { + color: #0275d8; + text-decoration: none !important; } -.sk-text-center { - text-align: center; +.container { + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 5px; + padding-top: 5px; +} + +.content_area { + overflow: auto; + display: none; + min-height: 300px; } -.sk-article-nav-root { - // Just use the API nav root style - @extend .sk-api-nav-root; +.cont_left { + width: 70%; + float: left; } -a.sk-article-link { - color: unset; - margin-top: 1rem; - margin-bottom: 1rem; - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); +.sk_btn_light, +.sk_btn_light:hover { + border-radius: 3px; + border: 2px solid #36459b; + color: #36459b; + text-decoration: none; display: inline-block; - padding: 1rem; - &:hover { - text-decoration: none; - background-color: $gray-lightest; - span.sk-read-more { - color: $link-hover-color; - } - } - p { - font-size: 0.9rem; - } - span.sk-read-more { - color: $link-color; - } + margin-top: 20px; + text-align: center; + padding: 5px; + margin: 5px; + padding-left: 20px; + padding-right: 20px; } + +.sk_btn_light:hover { + background-color: #828fda; +} + +.sk_btn_light i { + font-size: 1.8rem; + color: #e47d00; + padding-right: 5px; +} + +.cont_right { + width: 30%; + height: 240px; + padding-top: 40px; + float: right; +} + +.cont_right img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: right bottom; + /*-webkit-filter: drop-shadow( 10px 3px 5px rgba(0, 0, 0, .5)); + filter: drop-shadow( 10px 10px 5px rgba(0, 0, 0, .5));*/ +} + +.sk_cli_code { + padding: 15px; + padding-left: 25px; + border-radius: 3px; + background-color: #dbdbdb; + line-height: 2.5rem; + width: max-content; +} + +.sk_cli_area { + overflow: scroll; + position: relative; +} + +.sk_cli_code:hover { + background-color: #cfcfcf; + cursor: pointer; +} + + +.form-control { + border-radius: 0; + box-shadow: none; +} + + +.v_space_40 { + height: 40px; +} + +.sk_btn_dark, +.sk_btn_dark:hover { + padding: 10px; + border-radius: 3px; + background-color: #36459b; + color: #ffffff; + text-decoration: none; + display: block; + margin-top: 20px; + text-align: center; +} + +.sk_btn_dark:hover { + background-color: #828fda; +} + +.sk_btn_dark i { + font-size: 1.8rem; + color: #ffb03a; + padding-right: 5px; +} + +.sk_btn_area { + width: 250px; + margin-bottom: 15px; +} + +.sk_btn_info { + text-align: center; + color: #878787; + font-size: 1.2rem; + padding-top: 5px; +} + +.other_title { + text-align: center; +} + +.other_title h2 { + margin-bottom: 0px; + padding-bottom: 0px; +} + +.other_title span { + font-size: 2rem; + padding: 10px; + padding-top: 0px; + cursor: pointer; + border-color: #ffffff; + transition: border-color 1s; +} + +.other_title span:hover { + color: #707477; + border-radius: 3px; + border: 1px solid #707477; + border-color: #707477; + padding-bottom: 5px; +} + +.button_area { + text-align: center; + display: none; +} + +::-webkit-scrollbar { + width: 3px; + height: 4px; +} + +::-webkit-scrollbar-track { + background: transparent; + height: 5px; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.5); + border-radius: 20px; + border: transparent; +} + +.copy_code { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.766); + color: #ffffff; + text-align: center; + cursor: pointer; + line-height: 5.5rem; + display: none; +} + +.v_space_20 { + height: 20px; +} \ No newline at end of file