mirror of
https://github.com/susam/spcss.git
synced 2025-08-20 12:42:20 +02:00
Add sp.css
This commit is contained in:
Susam Pal
4
.gitignore
vendored
Executable file
4
.gitignore
vendored
Executable file
@@ -0,0 +1,4 @@
|
||||
*.sw?
|
||||
.DS_Store
|
||||
/package-lock.json
|
||||
/node_modules
|
||||
58
README.md
Normal file
58
README.md
Normal file
@@ -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 `<head>` element of
|
||||
your HTML file:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://susam.github.io/spcss/sp.min.css">
|
||||
```
|
||||
|
||||
|
||||
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
|
||||
98
index.html
Normal file
98
index.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>SPCSS - Simple and Plain Stylesheet</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, intial-scale=1">
|
||||
<link rel="stylesheet" href="sp.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="spcss"><a href="#spcss">SPCSS</a></a></h1>
|
||||
<p>
|
||||
SPCSS is a simple and plain stylesheet for simple text-based
|
||||
websites.
|
||||
</p>
|
||||
<p>
|
||||
The sections below demonstrate how some common HTML elements are
|
||||
styled with this stylesheet.
|
||||
</p>
|
||||
<h2 id="lorem-ipsum"><a href="#lorem-ipsum">Lorem Ipsum</a></h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</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>
|
||||
<pre>
|
||||
<code>#include <stdio.h>
|
||||
|
||||
int main()
|
||||
{
|
||||
printf("hello, world\n");
|
||||
return 0;
|
||||
}</code>
|
||||
</pre>
|
||||
<p>
|
||||
On a Unix or Unix-like system, this program can be compiled to a
|
||||
binary executable named <code>a.out</code> with the <code>cc</code>
|
||||
command as shown below.
|
||||
</p>
|
||||
<pre>
|
||||
<samp>$ <kbd>cc hello.c && ./a.out</kbd>
|
||||
hello, world</samp>
|
||||
</pre>
|
||||
<h2 id="Blockquote"><a href="#blockquote">Blockquote</a></h2>
|
||||
<p>
|
||||
Issac Newton was relatively modest about his achievements, writing in
|
||||
a letter to Robert Hooke in February 1676:
|
||||
</p>
|
||||
<blockquote>
|
||||
If I have seen further it is by standing on the shoulders of giants.
|
||||
</blockquote>
|
||||
<p>
|
||||
In a later memoir, Newton wrote:
|
||||
</p>
|
||||
<blockquote>
|
||||
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.
|
||||
</blockquote>
|
||||
<p>
|
||||
To read more about Newton, see the
|
||||
<a href="https://en.wikipedia.org/wiki/Isaac_Newton">Wikipedia entry
|
||||
on Issac Newton</a>.
|
||||
</p>
|
||||
<h2 id="image"><a href="#image">Image</a></h2>
|
||||
<figure>
|
||||
<a href="https://i.imgur.com/UrJrpo1.png"><img
|
||||
src="https://i.imgur.com/UrJrpo1.png"
|
||||
alt="Screenshot of Digger original PC booter version"></a>
|
||||
<figcaption>
|
||||
Digger original PC booter version running in DOSBox
|
||||
</figcaption>
|
||||
</figure>
|
||||
<h2 id="about-this-demo"><a href="#about-this-demo">About This Demo</a></h2>
|
||||
<p>
|
||||
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>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
24
package.json
Normal file
24
package.json
Normal file
@@ -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 <susam@susam.in> (https://susam.in/)",
|
||||
"repository": "github:susam/spcss",
|
||||
"devDependencies": {
|
||||
"csso-cli": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"min": "csso sp.css -o sp.min.css"
|
||||
}
|
||||
}
|
||||
65
sp.css
Normal file
65
sp.css
Normal file
@@ -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;
|
||||
}
|
||||
1
sp.min.css
vendored
Normal file
1
sp.min.css
vendored
Normal file
@@ -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}
|
||||
Reference in New Issue
Block a user