From b7119247eed199ece8aeb9400f07c9b150462095 Mon Sep 17 00:00:00 2001 From: Susam Pal Date: Sun, 29 Nov 2020 23:06:44 +0530 Subject: [PATCH] Add sp.css --- .gitignore | 4 +++ README.md | 58 +++++++++++++++++++++++++++++++ index.html | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 24 +++++++++++++ sp.css | 65 ++++++++++++++++++++++++++++++++++ sp.min.css | 1 + 6 files changed, 250 insertions(+) create mode 100755 .gitignore create mode 100644 README.md create mode 100644 index.html create mode 100644 package.json create mode 100644 sp.css create mode 100644 sp.min.css diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..3bd3972 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.sw? +.DS_Store +/package-lock.json +/node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..dcb54ef --- /dev/null +++ b/README.md @@ -0,0 +1,58 @@ +SPCSS +===== + +SPCSS is a simple and plain stylesheet for simple text-based websites. + +[![View Demo][Demo SVG]][Demo URL] +[![View CSS][CSS SVG]][CSS URL] +[![NPM Version][Version SVG]][NPM URL] +[![MIT License][License SVG]][L] +[![Twitter][Twitter SVG]][Twitter URL] + +[Demo SVG]: https://img.shields.io/badge/view-demo-brightgreen.svg +[Demo URL]: https://susam.github.io/spcss/ + +[CSS SVG]: https://img.shields.io/badge/view-sp.css-brightgreen.svg +[CSS URL]: https://susam.github.io/spcss/sp.css + +[Version SVG]: https://img.shields.io/npm/v/spcss.svg +[NPM URL]: https://www.npmjs.com/package/spcss + +[License SVG]: https://img.shields.io/badge/license-MIT-%233ea639 +[L]: LICENSE.md + +[Twitter SVG]: https://img.shields.io/badge/twitter-%40susam-%231da1f2 +[Twitter URL]: https://twitter.com/susam + + +Use SPCSS +--------- + +To use SPCSS, merely add this line of code to the `` element of +your HTML file: + +```html + +``` + + +License +------- + +This is free and open source software. You can use, copy, modify, +merge, publish, distribute, sublicense, and/or sell copies of it, +under the terms of the MIT License. See [LICENSE.md][L] for details. + +This software is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, +express or implied. See [LICENSE.md][L] for details. + +[L]: LICENSE.md + + +Support +------- + +To report bugs, suggest improvements, or ask questions, +[create issues][ISSUES]. + +[ISSUES]: https://github.com/susam/spcss/issues diff --git a/index.html b/index.html new file mode 100644 index 0000000..1983062 --- /dev/null +++ b/index.html @@ -0,0 +1,98 @@ + + + + SPCSS - Simple and Plain Stylesheet + + + + + +

SPCSS

+

+ SPCSS is a simple and plain stylesheet for simple text-based + websites. +

+

+ The sections below demonstrate how some common HTML elements are + styled with this stylesheet. +

+

Lorem Ipsum

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

Code Block

+

+ Here is 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 named a.out with the cc + command as shown below. +

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

Blockquote

+

+ Issac Newton was relatively modest about his achievements, writing in + a letter to Robert Hooke in February 1676: +

+
+ 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

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

About This Demo

+

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

+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..ec29a27 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "spcss", + "version": "0.1.0", + "description": "Simple and Plain Stylesheet", + "files": [ + "sp.css" + ], + "keywords": [ + "css", + "stylesheet", + "browser" + ], + "homepage": "http://github.com/susam/spcss", + "bugs": "http://github.com/susam/spcss/issues", + "license": "MIT", + "author": "Susam Pal (https://susam.in/)", + "repository": "github:susam/spcss", + "devDependencies": { + "csso-cli": "latest" + }, + "scripts": { + "min": "csso sp.css -o sp.min.css" + } +} diff --git a/sp.css b/sp.css new file mode 100644 index 0000000..a7e7640 --- /dev/null +++ b/sp.css @@ -0,0 +1,65 @@ +body { + color: #333; + font-family: helvetica, arial, sans-serif; + line-height: 1.5; + margin: 0 auto; + max-width: 40em; +} +h1, h2, h3, h4, h5, h6 { + margin: 1em 0 0.5em 0; + line-height: 1.2em; +} +a:link, a:visited { + color: #03c; + text-decoration: none; +} +a:hover, a:active { + color: #03f; + text-decoration: underline; +} +h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, +h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited { + color: #333; +} +h1 a:hover, h1 a:active, h2 a:hover, h2 a:active, h3 a:hover, h3 a:active, +h4 a:hover, h4 a:active, h5 a:hover, h5 a:active, h6 a:hover, h6 a:active { + color: #444; +} +img { + max-width: 100%; +} +figure { + margin: 1em 0; + text-align: center; +} +figcaption { + font-size: small; +} +pre, code, samp, kbd { + color: #009; + font-family: monospace, monospace; + font-size: 0.9em; +} +pre code, pre samp, pre kbd { + font-size: 1em; +} +pre kbd { + color: #060; +} +pre { + background: #eee; + padding: 0.5em; + overflow: auto; +} +blockquote { + background: #eee; + border-left: medium solid #ccc; + margin: 1em 0; + padding: 0.5em; +} +blockquote :first-child { + margin-top: 0; +} +blockquote :last-child { + margin-bottom: 0; +} diff --git a/sp.min.css b/sp.min.css new file mode 100644 index 0000000..5d7c95e --- /dev/null +++ b/sp.min.css @@ -0,0 +1 @@ +body{font-family:helvetica,arial,sans-serif;line-height:1.5;margin:0 auto;max-width:40em}h1,h2,h3,h4,h5,h6{margin:1em 0 .5em;line-height:1.2em}a:link,a:visited{color:#03c;text-decoration:none}a:active,a:hover{color:#03f;text-decoration:underline}body,h1 a:link,h1 a:visited,h2 a:link,h2 a:visited,h3 a:link,h3 a:visited,h4 a:link,h4 a:visited,h5 a:link,h5 a:visited,h6 a:link,h6 a:visited{color:#333}h1 a:active,h1 a:hover,h2 a:active,h2 a:hover,h3 a:active,h3 a:hover,h4 a:active,h4 a:hover,h5 a:active,h5 a:hover,h6 a:active,h6 a:hover{color:#444}img{max-width:100%}figure{margin:1em 0;text-align:center}figcaption{font-size:small}code,kbd,pre,samp{color:#009;font-family:monospace,monospace;font-size:.9em}pre code,pre kbd,pre samp{font-size:1em}pre kbd{color:#060}blockquote,pre{background:#eee;padding:.5em}pre{overflow:auto}blockquote{border-left:medium solid #ccc;margin:1em 0}blockquote :first-child{margin-top:0}blockquote :last-child{margin-bottom:0} \ No newline at end of file