Skip to content

GitLab

Verified Commit 62f86ec5 authored by Aral Balkan's avatar Aral Balkan
Browse files

Update heading styles to be more presentation-like

parent 2c6a9e66
Hide whitespace changes
Inline Side-by-side
css/index.css
View file @ 62f86ec5
......@@ -7,6 +7,18 @@
* *
********************************************************************************/
/********************************************************************************
* *
* Global variables *
* *
********************************************************************************/
:root {
--alert-height: 2.75rem;
}
/********************************************************************************
* *
* Minimal CSS reset *
......@@ -68,6 +80,10 @@ body {
margin-bottom: 1em;
}
aside span {
display: inline-block;
}
h1 {
font-size: 5rem;
text-align: center;
......@@ -324,20 +340,34 @@ aside.tip::before {
********************************************************************************/
#small-web {
margin-top: -1em;
margin-bottom: 2em;
/* margin-top: -1em; */
/* margin-bottom: 4rem; */
}
#small-web h2 {
#small-web h2, #highlights h2, main h2 {
text-align: center;
margin-top: 1.5em;
/*👉 margin-top: 1.5em;
margin-bottom: 1em;
👈*/
margin-top: 4rem;
margin-bottom: 4rem;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
padding-top: 1em;
padding-bottom: 1em;
width: 75%;
margin-left: auto;
margin-right: auto;
}
#small-web-details {
display: flex;
justify-content: space-between;
margin-top: 2em;
/* margin-top: 2em; */
/* margin-bottom: 6em; */
}
#small-web-details div {
......@@ -345,7 +375,6 @@ aside.tip::before {
flex-direction: column;
justify-content: space-between;
flex-basis: 32%;
margin-bottom:2em;
}
#small-web-details div h3 {
......@@ -375,7 +404,7 @@ aside.tip::before {
********************************************************************************/
#highlights {
margin-top: -5em;
/* margin-top: -5em; */
}
#highlights ul {
......@@ -397,11 +426,11 @@ aside.tip::before {
margin-left: 2.3em;
}
#highlights h2 {
/*👉#highlights h2 {
text-align: center;
margin-top: 2em;
margin-bottom: 0.75em;
}
}👈*/
#highlights h3 {
margin-bottom: 0.15rem;
......@@ -447,9 +476,6 @@ main li {
********************************************************************************/
:root {
--alert-height: 2.75rem;
}
#copy-alert {
display: block;
......@@ -631,6 +657,11 @@ main li {
/* single column on narrower viewports. */
#small-web-details div {
flex-basis: 100%;
margin-bottom:2em;
}
#small-web-details div:last-of-type {
margin-bottom: 0;
}
#small-web-details div h3 {
......
index.html
View file @ 62f86ec5
......@@ -14,7 +14,6 @@
<header>
<!-- Title -->
<h1><strong>Site</strong>.js</h1>
<h2>Small Web construction set.</h2>
<img id='header-image' src='/images/person.svg'>
......@@ -57,7 +56,7 @@
<ul>
<li>
<h3>Just works.</h3>
<p>No configuration or setup; install and go in 30 seconds.</p>
<p>No configuration or setup; <a href='#install'>install</a> and go in 30 seconds on <a href='https://source.small-tech.org/site.js/app#system-requirements'>Linux, macOS, and Windows</a>.</p>
</li>
<li>
<h3>Free as in freedom.</h3>
......@@ -83,15 +82,29 @@
<h2>Get started in 30 seconds.</h2>
<p>Fire up a terminal window and follow along.</p>
<p>Fire up a terminal on Linux/macOS (only use Windows Terminal on Windows) and follow along.</p>
<aside id='switch-auto-detect'></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>
<ol>
<ol id='install'>
<li>
<h3>Install Site.js.</h3>
<p>The installation script downloads the correct Site.js binary for your platform and places it on your path (<span id='view-installation-script-source'>View the source code (<a href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a>, <a href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a>)</span>).</p>
<pre><code class='language-bash'>wget -qO- https://sitejs.org/install | bash</code></pre>
<p>The installation script downloads the correct Site.js binary for your platform and places it on your path</p>
<aside>
<p>(<strong>Make sure you understand what a script does before piping it into your shell.</strong> View the source of the <a href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a><span class='no-js'> scripts.</span>)</p>
</aside>
<h4 class='no-js'>Linux</h4>
<pre class='linux'><code class='language-bash'>wget -qO- https://sitejs.org/install | bash</code></pre>
<h4 class='no-js'>macOS</h4>
<pre class='macos'><code class='language-bash'>curl -s https://sitejs.org/install | bash</code></pre>
<h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content</code></pre>
</li>
<li>
<h3>Create a basic static web page.</h3>
......@@ -102,8 +115,13 @@
</li>
<li>
<p>Enter the folder.</p>
<pre><code class='language-bash'>cd $_</code></pre>
<aside>(<code>$_</code> is shorthand for the argument from your last command. In this case, it evaluates to <code>hello-world</code>.)</aside>
<h4 class='no-js'>Linux and macOS</h4>
<pre class='linux-and-macos'><code class='language-bash'>cd $_</code></pre>
<aside class='linux-and-macos'>(<code>$_</code> is shorthand for the argument from your last command. In this case, it evaluates to <code>hello-world</code>.)</aside>
<h4 class='no-js'>Windows</h4>
<pre class='windows'><code>cd hello-world</code></pre>
</li>
<li>
<p>Write the string <code>'Hello, world'</code> into a file called <em>index.html</em>, creating or overwriting it as necessary.</p>
......
js/index.js
View file @ 62f86ec5
// //////////////////////////////////////////////////////////////////////
// //
// // ⚠ GENERATED CODE. Please do not change.
// //
// // These are the latest versions of the various release channels.
// // They are automatically populated by the Site.js build script
// // on deployment.
// //
// //////////////////////////////////////////////////////////////////////
// const versions = {
// alphaBinaryVersion: 00000000000000,
// alphaNodeVersion: '00.00.00',
// alphaHugoVersion: '00.00.00',
// alphaPackageVersion: '00.00.00',
// alphaSourceVersion: 'bedface',
// betaBinaryVersion: 00000000000000,
// betaNodeVersion: '00.00.00',
// betaHugoVersion: '00.00.00',
// betaPackageVersion: '00.00.00',
// betaSourceVersion: 'acecafe',
// releaseBinaryVersion: 00000000000000,
// releaseNodeVersion: '00.00.00',
// releaseHugoVersion: '00.00.00',
// releasePackageVersion: '00.00.00',
// releaseSourceVersion: 'decafAF',
// }
//////////////////////////////////////////////////////////////////////
//
// ⚠ GENERATED CODE. Please do not change.
//
// These are the latest versions of the various release channels.
// They are automatically populated by the Site.js build script
// on deployment.
//
//////////////////////////////////////////////////////////////////////
const versions = {
alphaBinaryVersion: 00000000000000,
alphaNodeVersion: '00.00.00',
alphaHugoVersion: '00.00.00',
alphaPackageVersion: '00.00.00',
alphaSourceVersion: 'bedface',
betaBinaryVersion: 00000000000000,
betaNodeVersion: '00.00.00',
betaHugoVersion: '00.00.00',
betaPackageVersion: '00.00.00',
betaSourceVersion: 'acecafe',
releaseBinaryVersion: 00000000000000,
releaseNodeVersion: '00.00.00',
releaseHugoVersion: '00.00.00',
releasePackageVersion: '00.00.00',
releaseSourceVersion: 'decafAF',
}
// //////////////////////////////////////////////////////////////////////
// // End of generated code.
......
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

Like this? Fund us! Your patronage helps keep us independent and going.