-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (251 loc) · 7.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<title>SPCSS Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/crisp.css">
</head>
<body>
<h1>SPCSS Demo</h1>
<p>
SPCSS is a simple and minimal stylesheet for simple text-based
websites. To learn more about it and how to use it, visit <a
href="https://github.com/susam/spcss">github.com/susam/spcss</a>.
</p>
<p>
This page demonstrates how some common HTML elements are styled with
this stylesheet.
</p>
<h2 id="code-block">Code Block<a href="#code-block"></a></h2>
<p>
Here is a code block that displays 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 with the following command:
</p>
<pre>
<samp>$ <kbd>cc hello.c && ./a.out</kbd>
hello, world</samp>
</pre>
<p>
The command displayed in green above denotes keyboard input entered by
a user. SPCSS shows any <code><kbd></code> element nested within
a <code><pre></code> in green in order to highlight keyboard
input. For example, the above code example was created with the
following HTML code:
</p>
<pre>
<code><pre>
<samp>$ <kbd>cc hello.c &amp;&amp; ./a.out</kbd>
hello, world</samp>
</pre></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>
<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
2
3
4
5
6
7
8</code>
</pre>
<p>
Since the above code block is too wide to fit within the width of the
HTML body, SPCSS makes it horizontally scrollable.
</p>
<h2 id="blockquote">Blockquote<a href="#blockquote"></a></h2>
<p>
This section shows a few examples of the
<code><blockquote></code> element.
</p>
<p>
In a letter to Robert Hooke in 1675, Issac Newton famously wrote,
</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">Image<a href="#image"></a></h2>
<p>
This section shows an example of <code><img></code> nested
within a <code><figure></code> element. The caption is created
with <code><figcaption></code> within the same
<code><figure></code> element.
</p>
<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>
<p>
SPCSS styles the <code><figure></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="table">Table<a href="#table"></a></h2>
<p>
This section shows an example of an HTML table.
</p>
<table>
<tr>
<th>Editor</th>
<th>Creator</th>
<th>License</th>
<th>First Release</th>
</tr>
<tr>
<td>GNU Emacs</td>
<td>Richard Stallman</td>
<td>GNU GPLv3+</td>
<td>20 Mar 1985</td>
</tr>
<tr>
<td>Vim</td>
<td>Bram Moolenaar</td>
<td>Vim License</td>
<td>02 Nov 1991</td>
</tr>
<tr>
<td>GNU nano</td>
<td>Chris Allegretta</td>
<td>GNU GPLv3</td>
<td>18 Nov 1999</td>
</tr>
<tr>
<td>Notepad++</td>
<td>Don Ho</td>
<td>GNU GPLv2</td>
<td>24 Nov 2003</td>
</tr>
<tr>
<td>Atom</td>
<td>GitHub</td>
<td>MIT</td>
<td>26 Feb 2014</td>
</tr>
<tr>
<td>Visual Studio Code</td>
<td>Microsoft</td>
<td>MIT</td>
<td>29 Apr 2015</td>
</tr>
</table>
<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>
Heading anchor links are enabled with a special feature of SPCSS: If a
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>
<pre>
<code><h2 id="heading-anchor">Heading Anchor<a href="#heading-anchor"></a></h2></code>
</pre>
<p>
If a heading element does not have an empty anchor element within it,
then no heading anchor link is created. For example, the top-level
heading of this page does not have an empty anchor element, so it is
rendered as a plain heading without an anchor link.
</p>
<h2 id="section">Section<a href="#section"></a></h2>
<section>
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.
</section>
<h2 id="form">Form<a href="#form"></a></h2>
<p>
This section shows an example of an HTML table.
</p>
<form>
<input type="text">
<select><option>Option #1</option><option>Option #2</option></select>
<textarea></textarea>
<div align="right">
<button type="button">Button</button>
</div>
</form>
<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>
This is a demo of Crisp. To learn more about Crisp and how to use it,
visit <a href="https://github.com/susam/spcss">github.com/javanile/crisp</a>.
</p>
<a href="https://github.com/javanile/crisp" target="_blank"><img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png?resize=149%2C149" style="position:absolute;top:0;right:0;border:0;" width="149" height="149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1" /></a>
</body>
</html>