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

Add section with further reading links leading to the documentation

parent 9f7335a8
......@@ -340,7 +340,7 @@ aside.tip::before {
* *
********************************************************************************/
#small-web h2, #highlights h2, main h2 {
#small-web h2, .highlights h2, main h2 {
text-align: center;
margin-top: 4rem;
margin-bottom: 4rem;
......@@ -397,7 +397,7 @@ aside.tip::before {
* *
********************************************************************************/
#highlights ul {
.highlights ul {
display: grid;
grid-template-columns: 47.5% 47.5%;
grid-column-gap: 5%;
......@@ -405,38 +405,37 @@ aside.tip::before {
margin-right: auto;
}
#highlights li {
.highlights li {
font-size: 1.5em;
list-style-type: none;
margin-bottom: 0.5em;
}
/* Remove all margins from elements in the last row of highlights */
#highlights li:nth-last-of-type(2),
#highlights li:last-of-type,
#highlights li:nth-last-of-type(2) p,
#highlights li:last-of-type p {
.highlights li:nth-last-of-type(2),
.highlights li:last-of-type,
.highlights li:nth-last-of-type(2) p,
.highlights li:last-of-type p {
margin-bottom: 0;
}
#highlights li p {
.highlights li p {
margin-left: 2.3em;
}
/*👉#highlights h2 {
/*👉.highlights h2 {
text-align: center;
margin-top: 2em;
margin-bottom: 0.75em;
}👈*/
#highlights h3 {
.highlights h3 {
margin-bottom: 0.15rem;
}
#highlights h3::before {
.highlights h3::before {
content: '';
display: inline-block;
background-image: url('../images/emoji/0010_2705.svg'); /* Check mark. */
background-repeat: no-repeat;
height: 1.5rem;
width: 1.5rem;
......@@ -444,6 +443,14 @@ aside.tip::before {
vertical-align: -0.2rem;
}
#features h3::before {
background-image: url('../images/emoji/0010_2705.svg'); /* Check mark. */
}
#learn-more h3::before {
background-image: url('../images/emoji/0030_1f4d6.svg'); /* Open book. */
}
/********************************************************************************
* *
......@@ -650,7 +657,7 @@ main li {
padding-right: 0.5em;
}
#small-web h2, #highlights h2, main h2 {
#small-web h2, .highlights h2, main h2 {
width: 90%
}
......@@ -676,16 +683,16 @@ main li {
}
/* Make the highlights grid a single column as titles wrap into two lines otherwise. */
#highlights ul {
.highlights ul {
grid-template-columns: 100%;
}
/* Restore the bottom margins on the next-to-last highlight. */
#highlights li:nth-last-of-type(2) {
.highlights li:nth-last-of-type(2) {
margin-bottom: 0.5em;
}
#highlights li:nth-last-of-type(2) p {
.highlights li:nth-last-of-type(2) p {
margin-bottom: 1em;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#269" d="M32 7H4c-2.209 0-4 1.791-4 4v15c0 2.209 1.791 4 4 4h11.416c.52.596 1.477 1 2.584 1s2.065-.404 2.584-1H32c2.209 0 4-1.791 4-4V11c0-2.209-1.791-4-4-4z"/><path fill="#292F33" d="M20 27c0 1.104-.896 2-2 2s-2-.896-2-2V9c0-1.104.896-2 2-2s2 .896 2 2v18z"/><path fill="#99AAB5" d="M18 26c0 1.104-.896 2-2 2H4c-1.104 0-2-.896-2-2V8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v18z"/><path fill="#E1E8ED" d="M18 26c-.999-1.998-3.657-2-4-2-2 0-5 2-8 2-1 0-2-.896-2-2V8c0-1.104 1-2 2-2 3.255 0 6-2 8-2 3 0 4 1.896 4 3v19z"/><path fill="#99AAB5" d="M34 26c0 1.104-.896 2-2 2H20c-1.104 0-2-.896-2-2V8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v18z"/><path fill="#CCD6DD" d="M18 26c.999-1.998 3.657-2 4-2 2 0 5 2 8 2 1 0 2-.896 2-2V8c0-1.104-1-2-2-2-3.256 0-6-2-8-2-3 0-4 1.896-4 3v19z"/></svg>
\ No newline at end of file
......@@ -50,7 +50,7 @@
</div>
</section>
<section id='highlights'>
<section id='features' class='highlights'>
<h2><strong>Develop, test, sync, and deploy</strong> <small>(using a single tool that comes in a single binary).</small></h2>
<ul>
......@@ -108,18 +108,12 @@
<h3>Create a basic static web page.</h3>
<ol>
<li>
<p>Create a folder</p>
<p>Create a folder.</p>
<pre><code class='language-bash'>mkdir hello-world</code></pre>
</li>
<li>
<p>Enter the folder.</p>
<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>
<pre><code class='language-bash'>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>
......@@ -150,8 +144,17 @@
<ol>
<li>
<h3>Create a new project folder and switch to it.</h3>
<pre><code class='language-bash'>mkdir my-hugo-site && cd $_</code></pre>
<h3>Set up a new project.</h3>
<ol>
<li>
<h4>Create a folder.</h4>
<pre><code class='language-bash'>mkdir my-hugo-site</code></pre>
</li>
<li>
<h4>Enter the folder.</h4>
<pre><code class='language-bash'>cd my-hugo-site</code></pre>
</li>
</ol>
</li>
<li>
<h3>Create a new Hugo site.</h3>
......@@ -296,6 +299,37 @@ EOF</code></pre>
<p>For full details, see the <a href='https://github.com/small-tech/site.js/blob/master/README.md#dynamic-sites'>Dynamic Sites documentation</a> and view the <a href='https://github.com/small-tech/site.js/tree/master/examples'>examples</a>.</p>
</aside>
<section id='learn-more' class='highlights'>
<h2>Learn more</h2>
<ul>
<li>
<h3><a href='https://github.com/small-tech/site.js#testing-servers-hostname'>Multi-device testing</a></h3>
<p>Start a server with <code>site @hostname</code> and use a service like ngrok to test on all your devices with live reload or to test your site with others over the Internet.</p>
</li>
<li>
<h3><a href='https://github.com/small-tech/site.js#deployment-live-and-one-time-sync'>Sync</a></h3>
<p>Deploy using <a href='https://github.com/small-tech/site.js#deployment-live-and-one-time-sync'>the built-in sync feature</a>. Live blog with continuous sync.</p>
</li>
<li>
<h3><a href='https://github.com/small-tech/site.js#native-support-for-an-evergreen-web'>Evergreen Web</a></h3>
<p>Migrate your existing sites without breaking links on the web with native support for <a href='https://github.com/small-tech/site.js#the-archival-cascade'>archival cascades</a> and <a href='https://github.com/small-tech/site.js#native-404--302-support'>native 404 → 302 support</a>.</p>
</li>
<li>
<h3><a href='https://github.com/small-tech/site.js#custom-error-pages'>Custom error pages</a></h3>
<p>Easily create <a href='https://github.com/small-tech/site.js#custom-error-pages'>custom 404 and 500 error pages</a>.</p>
</li>
<li>
<h3><a href='https://github.com/small-tech/site.js#ephemeral-statistics'>Ephemeral statistics</a></h3>
<p>See your most popular pages and discover broken links using privacy-respecting, <a href='https://github.com/small-tech/site.js#ephemeral-statistics'>ephemeral statistics</a> that are reset on every server start.</p>
</li>
<li>
<h3><a href='https://github.com/small-tech/site.js#sitejs'>Documentation</a></h3>
<p>Learn more about building static and dynamic web sites and applications using Site.js in the <a href='https://github.com/small-tech/site.js#testing-servers-hostname'>Site.js documentation</a>.</p>
</li>
</ul>
</section>
<h2 id="about">About</h2>
<p>Made with love by <a href='https://small-tech.org'>Small Technology Foundation</a>.</p>
......
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