/
index.html
173 lines (172 loc) · 5.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>yue.css</title>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="yue.css">
<meta name="twitter:description" content="A typography stylesheet for readable content.">
<meta name="twitter:image" content="https://github-camo.global.ssl.fastly.net/9dd35e35cced3d2be53bfe42b5b250a0d17e47b9/687474703a2f2f696d67332e646f7562616e2e636f6d2f766965772f70686f746f2f70686f746f2f7075626c69632f70313438373536333931312e6a7067">
<meta name="twitter:site" content="@lepture">
<meta name="twitter:creator" content="@lepture">
<meta name="twitter:domain" content="lab.lepture.com">
<link rel="stylesheet" href="yue.css" />
<style type="text/css">
body {
margin: 0;
padding: 0.4em 1em 6em;
background: #fff;
}
.yue {
max-width: 650px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21475122-5']);
_gaq.push(['_setCustomVar', 1, 'Repo', 'lepture/yue.css']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = '//www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="yue">
<h1>yue.css</h1>
<p><strong>yue.css</strong> is a typography stylesheet for readable content. It was
created for my blog at first since I always designed a new theme for my
blog. But later it becomes the offical stylesheet for yuehu site.</p>
<blockquote><p><strong>yue.css</strong> is not a reset stylesheet.</p>
</blockquote><p>It is designed for article content, and only article content. If you are
looking for a reset css, you are watching the wrong repository.</p>
<h2>Installation</h2>
<p>Install with <a href="http://component.io">component(1)</a>:</p>
<pre><code>$ component install lepture/yue.css</code></pre>
<p>However, if you don't fancy component, you can just grab the css file
from GitHub. There is no dependency of <a href="https://github.com/lepture/yue.css">this project</a>.</p>
<h2>API</h2>
<p>For readable content, wrapper them under the <code>.yue</code> class, and everything
would be ok now:</p>
<pre><code class="lang-css"><div class="yue">
<h1>Heading</h1>
<p>Paragraph of contents...</p>
</div></code></pre>
<h2>Tags</h2>
<p><strong>yue.css</strong> only supports selected tags which are commonly used in an
article.</p>
<table>
<thead><tr>
<th>Tag Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1 - h6</td>
<td>headings for title</td>
</tr>
<tr>
<td>p</td>
<td>paragraph</td>
</tr>
<tr>
<td>a</td>
<td>anchor links</td>
</tr>
<tr>
<td>strong b</td>
<td>emphasis in bold style</td>
</tr>
<tr>
<td>em i</td>
<td>emphasis in italic style</td>
</tr>
<tr>
<td>img</td>
<td>image</td>
</tr>
<tr>
<td>figure</td>
<td>figure wrapper for images</td>
</tr>
<tr>
<td>figcaption</td>
<td>figcaption in figure</td>
</tr>
<tr>
<td>hr</td>
<td>separator</td>
</tr>
<tr>
<td>blockquote</td>
<td>style for quotes</td>
</tr>
<tr>
<td>ul ol li</td>
<td>ordered and unordered list</td>
</tr>
<tr>
<td>pre</td>
<td>code block</td>
</tr>
<tr>
<td>code tt</td>
<td>inline code</td>
</tr>
<tr>
<td>table ..</td>
<td>tables (not well designed)</td>
</tr>
<tr>
<td>iframe</td>
<td>embed iframe style</td>
</tr>
</tbody>
</table>
<h3>Headings</h3>
<p>Headings are tags <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code> and <code><h6></code>.
But the most commonly used tags are <code><h1></code>, <code><h2></code>, and <code><h3></code>.</p>
<h3>Emphasis</h3>
<p>Emphasis works on something <strong>important</strong> or <em>valuable</em>. <code><b></code> and <code><i></code>
are not designed for this purpose, you should always use <code><strong></code> and <code><em></code>.</p>
<h3>Links & Images</h3>
<p>Links are the soul of internet. <a href="https://github.com/lepture/yue.css">Fork it on GitHub</a>.</p>
<p><a href="http://www.douban.com/photos/photo/1487563850/"><img src="https://github-camo.global.ssl.fastly.net/4828f1a080d88c40be73f558e5951689b105b4f3/687474703a2f2f696d67332e646f7562616e2e636f6d2f766965772f70686f746f2f70686f746f2f7075626c69632f70313438373536333835302e6a7067" alt="art of human body" /></a></p>
<p>Images can be wrappered in a <code><figure></code> tag:</p>
<figure><img src="https://github-camo.global.ssl.fastly.net/9dd35e35cced3d2be53bfe42b5b250a0d17e47b9/687474703a2f2f696d67332e646f7562616e2e636f6d2f766965772f70686f746f2f70686f746f2f7075626c69632f70313438373536333931312e6a7067" alt="human body" /><figcaption>The Art of Human Body</figcaption></figure><h3>List</h3>
<p>There is ordered list <code><ol></code> and unordered list <code><ul></code>.</p>
<ul>
<li>Unordered list is tagged in <code><ul></code></li>
<li>Another item of unordered list<ol>
<li>An ordered list in un ordered list</li>
<li>Another ordered item</li>
</ol>
</li>
<li>Unordered list can has unordered list children<ul>
<li>Item of the children</li>
<li>Another item of the children</li>
</ul>
</li>
</ul>
<hr>
<ol>
<li>Ordered list is tagged in <code><ol></code></li>
<li>Each item is tagged in <code><li></code></li>
</ol>
<hr>
<h2>Note</h2>
<p>yue.css has no target language, however it looks great in both English
and Chinese.</p>
<blockquote><p>yue.css 并不是为某一特定语言设计的，但是它确实在英文和中文上表现出色。</p>
</blockquote><h2>License</h2>
<p>MIT for personal websites only. Commercial websites should contact me
for more information.</p>
</div>
</body>
</html>