mirror_css/spcss
1
0
Fork 0
mirror of https://github.com/susam/spcss.git synced 2025-09-02 10:23:21 +02:00
Code Issues Projects Releases Wiki Activity

Describe features in more detail

Browse Source
This commit is contained in:
Susam Pal
2020-12-10 00:19:45 +05:30
parent 9db9513bab
commit 235e5548e7
2 changed files with 105 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -125,17 +125,17 @@ Here is a summary of the style changes provided by SPCSS:
- Maximum width for the `<body>` element to prevent the lines from being - Maximum width for the `<body>` element to prevent the lines from being
too long. Shorter lines make it easier for our eyes to gauge the too long. Shorter lines make it easier for our eyes to gauge the
beginning and end of the lines. beginning and end of the lines.
- Dark gray (`#333`) text color instead of black (`#000`). - Dark gray (`#333`) text color instead of black (`#000`) in light mode.
- Increased line-height to add more room around the lines and make them - Increased line-height to add more room around the lines and make them
easier to read. easier to read.
- More margin above headings to separate them more conspicuously from - More margin above headings to separate them more conspicuously from
preceding content. preceding content.
- Less margin below headings as well as less `line-height` for margins - Less margin below headings as well as less `line-height` for margins
to associate them more tightly with succeeding content. to associate them more tightly with succeeding content.
- Consistent blue color for hyperlinks throughout the content with the - Support for heading anchor links to facilitate sharing direct links to
exception of headings (see next point). sections of a page.
- Retain dark gray text color for headings even when the headings are - Support for special styling of keyboard input (`<kbd>`) within code
hyperlinks. blocks (`<pre>`).
- Ensure width of images do not exceed the maximum width for the - Ensure width of images do not exceed the maximum width for the
`<body>` element. `<body>` element.
- Simple styling for `<figure>` and `<figcaption>` elements such as - Simple styling for `<figure>` and `<figcaption>` elements such as

134
index.html
View File

@@ -7,37 +7,41 @@
<link rel="stylesheet" href="sp.css"> <link rel="stylesheet" href="sp.css">
</head> </head>
<body> <body>
<h1 id="#spcss-demo"><a href="#spcss-demo">SPCSS Demo</a></h1> <h1>SPCSS Demo</h1>
<p> <p>
SPCSS is a simple and plain stylesheet for simple text-based SPCSS is a simple and minimal stylesheet for simple text-based
websites. websites. To learn more about it and how to use it, visit <a
href="https://github.com/susam/spcss">github.com/susam/spcss</a>. This
page demonstrates how some common HTML elements are styled with this
stylesheet.
</p>
<h2 id="heading-anchor">Heading Anchor<a href="#heading-anchor"></a></h2>
<p>
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.
</p> </p>
<p> <p>
The sections below demonstrate how some common HTML elements are Heading anchor links are enabled with a special feature of SPCSS: If a
styled with this stylesheet. 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:
</p> </p>
<h2 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h2> <pre>
<code>&lt;h2 id="heading-anchor"&gt;Heading Anchor&lt;a href="#heading-anchor"&gt;&lt;/a&gt;&lt;/h2&gt;</code>
</pre>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue If a heading element does not have an empty anchor element within it,
est sit amet purus suscipit scelerisque. In pulvinar lectus aliquet then no heading anchor link is created. For example, the top-level
ipsum vulputate feugiat sodales et lacus. Integer ut tellus nec quam heading of this page does not have an empty anchor element, so it is
elementum fermentum. Nam risus nunc, malesuada eget libero tincidunt, rendered as a plain heading without an anchor link.
maximus rutrum mauris. Aliquam accumsan dignissim dui ut tincidunt.
</p> </p>
<h2 id="code-block">Code Block<a href="#code-block"></a></h2>
<p> <p>
Suspendisse malesuada volutpat tincidunt. Nam eu malesuada eros. Here is a code block that displays the famous "hello, world" program
Aenean at metus nec diam venenatis rhoncus a eu turpis. Nam varius written in C:
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> </p>
<pre> <pre>
<code>#include &lt;stdio.h&gt; <code>#include &lt;stdio.h&gt;
@@ -58,8 +62,21 @@ int main()
hello, world</samp> hello, world</samp>
</pre> </pre>
<p> <p>
Here is a code block with a ruler that can be helpful to see how much The command displayed in green above denotes keyboard input entered by
horizontal and vertical space a certain amount of code consumes: a user. SPCSS considers any text in <code>&lt;kbd&gt;</code> element
nested within a <code>&lt;pre&gt;</code> element is considered to be
keyboard input and highlighted in green by SPCSS. For example, the
above code example was created with the following HTML code:
</p>
<pre>
<code>&lt;pre&gt;
&lt;samp&gt;$ &lt;kbd&gt;cc hello.c &amp;amp;&amp;amp; ./a.out&lt;/kbd&gt;
hello, world&lt;/samp&gt;
&lt;/pre&gt;</code>
</pre>
<p>
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:
</p> </p>
<pre> <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 <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
@@ -72,14 +89,16 @@ hello, world</samp>
8</code> 8</code>
</pre> </pre>
<p> <p>
It is worth noting that the above code block is horizontally Since the above code block is too wide to fit within the width of the
scrollable which is due to the fact that the first line is too long to HTML body, SPCSS makes it horizontally scrollable.
fit within the width of the HTML body.
</p> </p>
<h2 id="blockquote"><a href="#blockquote">Blockquote</a></h2> <h2 id="blockquote">Blockquote<a href="#blockquote"></a></h2>
<p> <p>
Issac Newton was relatively modest about his achievements, writing in This section shows a few examples of the
a letter to Robert Hooke in February 1676: <code>&lt;blockquote&gt;</code> element.
</p>
<p>
In a letter to Robert Hooke in 1675, Issac Newton famously wrote,
</p> </p>
<blockquote> <blockquote>
If I have seen further it is by standing on the shoulders of giants. If I have seen further it is by standing on the shoulders of giants.
@@ -99,7 +118,13 @@ hello, world</samp>
<a href="https://en.wikipedia.org/wiki/Isaac_Newton">Wikipedia entry <a href="https://en.wikipedia.org/wiki/Isaac_Newton">Wikipedia entry
on Issac Newton</a>. on Issac Newton</a>.
</p> </p>
<h2 id="image"><a href="#image">Image</a></h2> <h2 id="image">Image<a href="#image"></a></h2>
<p>
This section shows an example of <code>&lt;img&gt;</code> nested
within a <code>&lt;figure&gt;</code> element. The caption is created
with <code>&lt;figcaption&gt;</code> within the same
<code>&lt;figure&gt;</code> element.
</p>
<figure> <figure>
<a href="https://i.imgur.com/UrJrpo1.png"><img <a href="https://i.imgur.com/UrJrpo1.png"><img
src="https://i.imgur.com/UrJrpo1.png" src="https://i.imgur.com/UrJrpo1.png"
@@ -108,7 +133,48 @@ hello, world</samp>
Digger original PC booter version running in DOSBox Digger original PC booter version running in DOSBox
</figcaption> </figcaption>
</figure> </figure>
<h2 id="about-this-demo"><a href="#about-this-demo">About This Demo</a></h2> <p>
SPCSS styles the <code>&lt;figure&gt;</code> 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.
</p>
<h2 id="more">More<a href="#more"></a></h2>
<p>
Apart from the features described above, SPCSS has the following
additional features:
</p>
<ul>
<li>
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.
</li>
<li>
Maximum width for the HTML body in order to prevent the lines of
text from becoming too long. Shorter lines are easier to read.
</li>
<li>
In light mode, the text color is dark gray (<code>#333</code>)
instead of black (<code>#000</code>). This reduces the contrast a
little bit which some people find more pleasant.
</li>
<li>
Increased line-height to add more room around the lines.
</li>
<li>
More margin above headings to separate them more conspicuously from
preceding content.
</li>
<li>
Less margin below headings as well as less line-height for margins
to associate them more tightly with succeeding content.
</li>
</ul>
<h2 id="about-this-demo">About This Demo<a href="#about-this-demo"></a></h2>
<p> <p>
This is a demo of SPCSS. To learn more about SPCSS and how to use it, 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>. visit <a href="https://github.com/susam/spcss">github.com/susam/spcss</a>.