Verified Commit b61079a9 authored by Aral Balkan's avatar Aral Balkan
Browse files

Start implementing platform chooser tabs progressive enhancement

parent 8ea48003
......@@ -202,6 +202,33 @@ pre, code[class*="language-"], pre[class*="language-"], pre code span {
}
/********************************************************************************
* *
* Tabs *
* *
********************************************************************************/
#platform-tabs {
text-align: center;
border-bottom: 0.25em solid lightblue;
margin-bottom: 2em;
}
#platform-tabs li {
font-size: 1.5em;
display: inline-block;
margin-left: 0.25em;
padding-bottom: 0.25em;
padding-right: 1em;
padding-left: 1em;
padding-top: 0.25em;
}
#platform-tabs li.active {
background-color: lightblue;
}
/********************************************************************************
* *
* Syntax highlighting *
......@@ -623,7 +650,7 @@ footer {
border-radius: 0;
}
ol li h3::before {
ol li > h3:first-of-type::before {
content: counter(index) '. ';
}
......
......@@ -121,6 +121,12 @@
<section id='get-started'>
<h2>Get started in seconds</h2>
<ul id='platform-tabs'>
<li class='active'>Linux</li>
<li>macOS</li>
<li>Windows</li>
</ul>
<ol id='install'>
<li>
<h3>Install Site.js.</h3>
......@@ -128,8 +134,6 @@
<aside>The following command pipes the installation script into your shell. The installation script downloads the correct Site.js binary for your platform and places it on your path. <strong>Make sure you understand what any script does before piping it into your shell.</strong> View the source of the <a class='linux macos' href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a class='windows' href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a> installation script<span class='no-js'>s</span>.</aside>
<aside id='copy-tip' class='tip hidden'><h3>Tip</h3><p>Click on the code samples to copy them to the clipboard.</p></aside>
<h4 class='no-js'>Linux</h4>
<pre class='linux'><code class='language-bash'>wget -qO- https://sitejs.org/install | bash</code></pre>
......@@ -138,6 +142,11 @@
<h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content</code></pre>
<aside id='copy-tip' class='tip hidden'>
<h3>Tip</h3>
<p>Click on the code samples to copy them to the clipboard.</p>
</aside>
</li>
<li>
<h3>Create a basic static web page.</h3>
......
......@@ -50,7 +50,7 @@ if (userAgent.includes('mac os x')) { currentPlatform = 'macos' }
if (userAgent.includes('windows')) { currentPlatform = 'windows'}
// If we know the platform, remove instructions that are not
// relevant for the current person
// relevant for the current platform.
if (currentPlatform !== 'unknown') {
$$('.no-js').forEach(node => node.className='hidden')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment