Add "Why SPCSS?" and "Features" sections

2025-09-01 18:02:43 +02:00 · 2020-11-30 12:14:22 +05:30
parent bad5202187
commit cbcf75da0d
1 changed files with 52 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -30,6 +30,8 @@ Contents

 * [Use SPCSS](#use-spcss)
 * [CDN URLs](#cdn-urls)
+* [Why SPCSS?](#why-spcss)
+* [Features](#features)
 * [License](#license)
 * [Support](#support)

@@ -41,9 +43,14 @@ To use SPCSS, merely add this line of code to the `<head>` element of
 your HTML file:

 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.2.0/sp.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.2.0">
 ```

+Alternatively, download the CSS file from [here][DL], edit and customie
+it as per your requirements, and use it in your project.
+
+[DL]: https://cdn.jsdelivr.net/npm/spcss@0.2.0/sp.css
+

 CDN URLs
 --------
@@ -70,6 +77,50 @@ https://unpkg.com/spcss
 ```


+Why SPCSS?
+----------
+
+I often develop primarily text-based websites and webpages. The default
+style chosen by the web browsers while decent leaves a bit to be
+desired, so I often add a minimal stylesheet to improve the apperance of
+the document, hyperlinks, code blocks, blockquotes, etc. This project
+shares the minimal stylesheet that I often rely on for styling simple
+websites and webpages.
+
+
+Features
+--------
+
+Here is a summary of the style changes provided by SPCSS:
+
+- 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
+  beginning and end of the lines.
+- Dark gray (`#333`) text color instead of black (`#000`).
+- Increased line-height to add more room around the lines and make them
+  easier to read.
+- 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.
+- Consistent blue color for hyperlinks throughout the content with the
+  exception of headings (see next point).
+- Retain dark gray text color for headings even when the headings are
+  hyperlinks.
+- Ensure width of images do not exceed the maximum width for the
+  `<body>` element.
+- Simple styling for `<figure>` and `<figcaption>` elements such as
+  margins aligned with the margins of text paragraphs, centered
+  captions, reduced font size for captions.
+- Light gray background for code blocks and blockquotes.
+- Prevent very long lines of code from overflowing outside the gray box
+  for code blocks. Instead, make the code block scrollable when the code
+  overflows the gray box.
+
+See [this example page][Demo URL] to see a quick demonstration of some
+of these features.
+
+
 License
 -------