diff --git a/README.md b/README.md index b18fe81..922b58a 100644 --- 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 `
` element of your HTML file: ```html - + ``` +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 `` 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 + `` element. +- Simple styling for `