mirror of
https://github.com/susam/spcss.git
synced 2025-09-02 02:12:36 +02:00
119 lines
3.8 KiB
HTML
119 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>SPCSS Demo</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, intial-scale=1">
|
|
<link rel="stylesheet" href="sp.css">
|
|
</head>
|
|
<body>
|
|
<h1 id="#spcss-demo"><a href="#spcss-demo">SPCSS Demo</a></h1>
|
|
<p>
|
|
SPCSS is a simple and plain stylesheet for simple text-based
|
|
websites.
|
|
</p>
|
|
<p>
|
|
The sections below demonstrate how some common HTML elements are
|
|
styled with this stylesheet.
|
|
</p>
|
|
<h2 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue
|
|
est sit amet purus suscipit scelerisque. In pulvinar lectus aliquet
|
|
ipsum vulputate feugiat sodales et lacus. Integer ut tellus nec quam
|
|
elementum fermentum. Nam risus nunc, malesuada eget libero tincidunt,
|
|
maximus rutrum mauris. Aliquam accumsan dignissim dui ut tincidunt.
|
|
</p>
|
|
<p>
|
|
Suspendisse malesuada volutpat tincidunt. Nam eu malesuada eros.
|
|
Aenean at metus nec diam venenatis rhoncus a eu turpis. Nam varius
|
|
consectetur ante, at lobortis nisl eleifend vel.
|
|
</p>
|
|
<p>
|
|
Vestibulum sit amet congue lorem, id lacinia nisl. Nam convallis purus
|
|
est, ut dignissim erat ornare nec. Etiam sit amet volutpat dolor.
|
|
Praesent auctor augue eget diam porttitor, ut auctor sapien
|
|
vestibulum. Phasellus id condimentum sapien.
|
|
</p>
|
|
<h2 id="code-block"><a href="#code-block">Code Block</a></h2>
|
|
<p>
|
|
Here is the famous "hello, world" program written in C:
|
|
</p>
|
|
<pre>
|
|
<code>#include <stdio.h>
|
|
|
|
int main()
|
|
{
|
|
printf("hello, world\n");
|
|
return 0;
|
|
}</code>
|
|
</pre>
|
|
<p>
|
|
On a Unix or Unix-like system, this program can be compiled to a
|
|
binary executable named <code>a.out</code> with the <code>cc</code>
|
|
command as shown below.
|
|
</p>
|
|
<pre>
|
|
<samp>$ <kbd>cc hello.c && ./a.out</kbd>
|
|
hello, world</samp>
|
|
</pre>
|
|
<p>
|
|
Here is a code block with a ruler that can be helpful to see how much
|
|
horizontal and vertical space a certain amount of code consumes:
|
|
</p>
|
|
<pre>
|
|
<code>1---5---10---15---20---25---30---35---40---45---50---55---60---65---70---75---80---85---90---95--100--105--110--115--120--125--130--135--140--145--150--155--160--165--170--175--180--185--190--195--200--205--210--215--220--225--230--235--240--245--250--255--260--265--270--275--280--285--290--295--300
|
|
2
|
|
3
|
|
4
|
|
5
|
|
6
|
|
7
|
|
8
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
It is worth noting that the above code block is horizontally
|
|
scrollable which is due to the fact that the first line is too long to
|
|
fit within the width of the HTML body.
|
|
</p>
|
|
<h2 id="Blockquote"><a href="#blockquote">Blockquote</a></h2>
|
|
<p>
|
|
Issac Newton was relatively modest about his achievements, writing in
|
|
a letter to Robert Hooke in February 1676:
|
|
</p>
|
|
<blockquote>
|
|
If I have seen further it is by standing on the shoulders of giants.
|
|
</blockquote>
|
|
<p>
|
|
In a later memoir, Newton wrote:
|
|
</p>
|
|
<blockquote>
|
|
I do not know what I may appear to the world, but to myself I seem to
|
|
have been only like a boy playing on the sea-shore, and diverting
|
|
myself in now and then finding a smoother pebble or a prettier shell
|
|
than ordinary, whilst the great ocean of truth lay all undiscovered
|
|
before me.
|
|
</blockquote>
|
|
<p>
|
|
To read more about Newton, see the
|
|
<a href="https://en.wikipedia.org/wiki/Isaac_Newton">Wikipedia entry
|
|
on Issac Newton</a>.
|
|
</p>
|
|
<h2 id="image"><a href="#image">Image</a></h2>
|
|
<figure>
|
|
<a href="https://i.imgur.com/UrJrpo1.png"><img
|
|
src="https://i.imgur.com/UrJrpo1.png"
|
|
alt="Screenshot of Digger original PC booter version"></a>
|
|
<figcaption>
|
|
Digger original PC booter version running in DOSBox
|
|
</figcaption>
|
|
</figure>
|
|
<h2 id="about-this-demo"><a href="#about-this-demo">About This Demo</a></h2>
|
|
<p>
|
|
This is a demo of SPCSS. To learn more about SPCSS and how to use it,
|
|
visit <a href="https://github.com/susam/spcss">github.com/susam/spcss</a>.
|
|
</p>
|
|
</body>
|
|
</html>
|