https://susam.github.io/spcss/

SPCSS Demo

SPCSS is a simple and minimal stylesheet for simple text-based
websites. To learn more about it and how to use it, visit github.com/
susam/spcss.

This page demonstrates how some common HTML elements are styled with
this stylesheet.

Code Block 

Here is a code block that displays the famous "hello, world" program
written in C:

#include <stdio.h>

int main()
{
    printf("hello, world\n");
    return 0;
}

On a Unix or Unix-like system, this program can be compiled to a
binary executable with the following command:

$ cc hello.c && ./a.out
hello, world

The command displayed in green above denotes keyboard input entered
by a user. SPCSS shows any <kbd> element nested within a <pre> in
green in order to highlight keyboard input. For example, the above
code example was created with the following HTML code:

<pre>
<samp>$ <kbd>cc hello.c &amp;&amp; ./a.out</kbd>
hello, world</samp>
</pre>

Here is a code block with a wide ruler that can be helpful to see how
much horizontal and vertical space a certain amount of code consumes:

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

Since the above code block is too wide to fit within the width of the
HTML body, SPCSS makes it horizontally scrollable.

Blockquote 

This section shows a few examples of the <blockquote> element.

In a letter to Robert Hooke in 1675, Issac Newton famously wrote,

    If I have seen further it is by standing on the shoulders of
    giants.

In a later memoir, Newton wrote:

    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.

To read more about Newton, see the Wikipedia entry on Issac Newton.

Image 

This section shows an example of <img> nested within a <figure>
element. The caption is created with <figcaption> within the same
<figure> element.

Screenshot of Digger original PC booter version Digger original PC
booter version running in DOSBox

SPCSS styles the <figure> element to center-align all its content.
That is why the caption appears centered. The font size of the
caption is made smaller. The original width of the image above
exceeds the width of the HTML body, however SPCSS ensures that the
rendered width of any image on the page does not exceed the width of
the HTML body. This prevents the page layout from appearing broken.

Table 

This section shows an example of an HTML table.

      Editor           Creator        License   First Release
GNU Emacs          Richard Stallman GNU GPLv3+  20 Mar 1985
Vim                Bram Moolenaar   Vim License 02 Nov 1991
GNU nano           Chris Allegretta GNU GPLv3   18 Nov 1999
Notepad++          Don Ho           GNU GPLv2   24 Nov 2003
Atom               GitHub           MIT         26 Feb 2014
Visual Studio Code Microsoft        MIT         29 Apr 2015

Heading Anchor 

When you hover your cursor (mouse pointer) on the section heading
above, a hash sign appears to its right. This is a heading anchor
link. Heading anchor links are useful for sharing direct links to
sections of a web page.

Heading anchor links are enabled with a special feature of SPCSS: If
a heading element contains an empty anchor element, SPCSS turns that
into an anchor link that becomes visible while hovering the cursor on
the heading. For example, the above heading is created with the
following HTML code:

<h2 id="heading-anchor">Heading Anchor<a href="#heading-anchor"></a></h2>

If a heading element does not have an empty anchor element within it,
then no heading anchor link is created. For example, the top-level
heading of this page does not have an empty anchor element, so it is
rendered as a plain heading without an anchor link.

More 

Apart from the features described above, SPCSS has the following
additional features:

  * Support for dark color theme. By default, this page shows dark
    text on light background. However, on a system or web browser
    with dark theme enabled, SPCSS automatically selects light
    foreground colors on a dark background.
  * Maximum width for the HTML body in order to prevent the lines of
    text from becoming too long. Shorter lines are easier to read.
  * In light mode, the text color is dark gray (#333) instead of
    black (#000). This reduces the contrast a little bit which some
    people find more pleasant.
  * Increased line-height to add more room around the lines.
  * More margin above headings to separate them more conspicuously
    from preceding content.
  * Less margin below headings as well as less line-height for
    margins to associate them more tightly with succeeding content.

About This Demo 

This is a demo of SPCSS. To learn more about SPCSS and how to use it,
visit github.com/susam/spcss.