-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.html
264 lines (235 loc) · 10.7 KB
/
README.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
254
255
256
257
258
259
260
261
262
263
264
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Emacs Org mode CSS for HTML export</title>
<meta name="generator" content="Org Mode" />
<style type="text/css">:root{--color-black1:#0a0a0a;--color-black2:#333;--color-gray1:#777;--color-gray2:#ccc;--color-white1:#fafafa;--color-blue1:#0a0ad8;--color-purple1:#6e0ab9;--color-tag:#bbb;--color-headline:#375eab}html{line-height:130%;-webkit-text-size-adjust:100%}body{font-family:serif,serif;font-size:16px;margin-left:2em;max-width:48em;color:var(--color-black1)}@media(pointer:coarse){body{margin-left:0}}h1{font:200% sans-serif}h2{font:180% sans-serif}h3{font:150% sans-serif}h4{font:125% sans-serif}h5{font:110% sans-serif}h1,h2,h3,h4,h5{margin-top:1em;margin-bottom:.5em;color:var(--color-headline)}h2{padding-top:.5rem;border-top:3px dotted var(--color-gray2)}blockquote{border-left:5px solid var(--color-gray2);margin:1em 1.5em;padding-left:1em}tt,code,pre{font-family:monospace,monospace;font-size:90%}pre code{font-size:100%}pre{border:1px solid var(--color-gray2);border-radius:3px;background-color:var(--color-white1);padding:8pt;overflow:auto;margin:0}dt{font-weight:bold}li:not(:last-child){margin-bottom:.2em}hr{border:0;height:1px;background-color:var(--color-black2);margin-top:1.5em}a{border:0;outline:0;color:var(--color-blue1);text-decoration:none}a:visited{color:var(--color-purple1)}a:hover{border-bottom:1px solid}table{margin:1em;border-top:1.5px solid;border-bottom:1.5px solid;border-collapse:collapse}thead{border-bottom:1.5px solid}table td+td,table th+th{border-left:1px solid var(--color-gray1)}table tr{border-top:1px solid var(--color-gray2)}th,td{padding:.3em .6em;vertical-align:middle}td{vertical-align:top}caption.t-above{caption-side:top}caption.t-bottom{caption-side:bottom}caption{margin-bottom:.3em}figcaption{margin-top:.3em}th.org-right{text-align:center}th.org-left{text-align:center}th.org-center{text-align:center}td.org-right{text-align:right}td.org-left{text-align:left}td.org-center{text-align:center}p.verse{margin-left:3%}#postamble p,#preamble p{font-size:90%}#postamble p{margin-top:1.5rem;padding-top:.5rem;border-top:1px solid var(--color-black2)}.title{text-align:center;margin-bottom:.2em}.subtitle{text-align:center;font-size:large;font-weight:bold;margin-top:0}.todo,.done,.priority,.tag{font-family:monospace,monospace}.tag{background-color:#eee;border-radius:3px;font-size:80%;font-weight:normal;padding:2px}.todo{color:red}.done{color:green}.priority{color:orange}.timestamp{color:#bebebe}.timestamp-kwd{color:#5f9ea0}.org-right{margin-left:auto;margin-right:0;text-align:right}.org-left{margin-left:0;margin-right:auto;text-align:left}.org-center{margin-left:auto;margin-right:auto;text-align:center}.underline{text-decoration:underline}.footpara{display:inline}.footdef{margin-bottom:1em}.figure{padding:1em}.figure p{text-align:center}</style>
<link rel="stylesheet" type="text/css" href="https://bitmaster.se/css/org-font-optimized.css" />
</head>
<body>
<div id="content" class="content">
<h1 class="title">Emacs Org mode CSS for HTML export</h1>
<p>
A CSS file for <a href="https://orgmode.org/">Emacs Org mode</a> HTML export that provides an easy to read style suitable for smaller documents.
</p>
<p>
I've come to use Org mode for much of my work related planning and tracking progress on tasks.
I also write longer emails in Org mode as I think it's easier to create a decent structure.
The Org mode HTML export is a convenient way to share such documents with less blessed individuals (non Org users).
</p>
<p>
See <a href="https://johan-bolmsjo.github.io/org_css/README.html">https://johan-bolmsjo.github.io/org_css/README.html</a> for how this document is rendered as HTML.
</p>
<div id="outline-container-orgdb34a14" class="outline-2">
<h2 id="orgdb34a14">CSS Usage</h2>
<div class="outline-text-2" id="text-orgdb34a14">
<p>
Three CSS files are contained in this repository.
Files named <i>main</i> contains non font related layout.
Files named <i>font</i> attempts to use fonts hosted on my domain.
Finally, files named <i>full</i> contains the previously mentioned files concatenated.
</p>
<p>
Versions of the CSS files named <i>optimized</i> has been run through the <code>yui-compressor</code> to reduce their size.
</p>
<p>
Files with a <code>.css.el</code> post-fix are meant to be loaded either from an org-publish file or from <code>init.el</code> to embed CSS into exported HTML files.
See how this is done in <code>./org-publish.el</code>.
</p>
<p>
The org-publish file disables many export elements.
I like the default to be usable for small documents where these elements are excessive.
They can be enabled selectively by tweaking an Org file's <code>#+options:</code> line.
See <a href="https://orgmode.org/manual/Export-Settings.html">https://orgmode.org/manual/Export-Settings.html</a> for details.
</p>
<p>
Export an Org file to HTML with the command <code>M-x org-html-export-to-html</code>.
</p>
</div>
</div>
<div id="outline-container-orgf1c33ed" class="outline-2">
<h2 id="orgf1c33ed">CSS Modifications</h2>
<div class="outline-text-2" id="text-orgf1c33ed">
<p>
Edit the CSS files according to taste.
Build using the <code>Makefile</code>.
</p>
<p>
The <a href="https://yui.github.io/yuicompressor/">YUI Compressor</a> program is used to compress the CSS to reduce their size.
</p>
<p>
Example (Debian based Linux):
</p>
<pre class="example">
sudo apt-get install yui-compressor
make
</pre>
</div>
</div>
<div id="outline-container-org086fe54" class="outline-2">
<h2 id="org086fe54">Licensing Terms</h2>
<div class="outline-text-2" id="text-org086fe54">
<p>
This work is a derivative of <a href="https://github.com/gongzhitaao/orgcss">https://github.com/gongzhitaao/orgcss</a>.
</p>
<p>
The license files <a href="LICENSE.MIT">LICENSE.MIT</a> and <a href="LICENSE.996">LICENSE.996ICU</a> applies to files <code>org-*.css</code> and <code>org-*.css.el</code>.
</p>
<p>
The license file <a href="LICENSE.MIT">LICENSE.MIT</a> applies to the remaining sources in the root
directory of this source distribution.
</p>
</div>
<div id="outline-container-org22a5024" class="outline-3">
<h3 id="org22a5024">Fonts</h3>
<div class="outline-text-3" id="text-org22a5024">
<p>
The license file <a href="fonts/Lora/OFL.txt">fonts/Lora/OFL.txt</a> describes the terms under which the font
<i>Lora</i> is distributed.
</p>
<p>
The license file <a href="fonts/Inconsolata/OFL.txt">fonts/Inconsolata/OFL.txt</a> describes the terms under which the font
<i>Inconsolata</i> is distributed.
</p>
</div>
</div>
</div>
<div id="outline-container-org3276e1b" class="outline-2">
<h2 id="org3276e1b">Style Demonstration</h2>
<div class="outline-text-2" id="text-org3276e1b">
<p>
A style demonstration of typographical elements not already employed by this document.
</p>
</div>
<div id="outline-container-org34f6b44" class="outline-3">
<h3 id="org34f6b44">Block Quotes</h3>
<div class="outline-text-3" id="text-org34f6b44">
<blockquote>
<p>
At 19.00 hours, ship's time, I made my way to the launching bay.
The men around the shaft stood aside to let me pass, and I climbed down into the capsule.
<i>– Opening of the book Solaris by Stanislaw Lem</i>
</p>
</blockquote>
</div>
</div>
<div id="outline-container-org3df5cec" class="outline-3">
<h3 id="org3df5cec">Lists</h3>
<div class="outline-text-3" id="text-org3df5cec">
</div>
<div id="outline-container-org4007c0e" class="outline-4">
<h4 id="org4007c0e">Bullet List <code>[2/3]</code></h4>
<div class="outline-text-4" id="text-org4007c0e">
<ul class="org-ul">
<li class="on"><code>[X]</code> Wash the car</li>
<li class="off"><code>[ ]</code> Buy groceries
<ul class="org-ul">
<li>Milk</li>
<li>Bread</li>
<li>Bananas</li>
</ul></li>
<li class="on"><code>[X]</code> Feed the dog</li>
</ul>
</div>
</div>
<div id="outline-container-org61d488e" class="outline-4">
<h4 id="org61d488e">Numbered List</h4>
<div class="outline-text-4" id="text-org61d488e">
<ol class="org-ol">
<li>Dogs
<ol class="org-ol">
<li>Akita</li>
<li>Beagle</li>
</ol></li>
<li>Cats
<ol class="org-ol">
<li>Bengal</li>
</ol></li>
</ol>
</div>
</div>
<div id="outline-container-orgd0de7c6" class="outline-4">
<h4 id="orgd0de7c6">Definition List</h4>
<div class="outline-text-4" id="text-orgd0de7c6">
<dl class="org-dl">
<dt>GNU</dt><dd>GNU's Not Unix</dd>
<dt>Unix</dt><dd>Multitasking, multi-user operating system. Conceived at Bell Labs
research center by Ken Thompson, Dennis Ritchie, and others in the 1970s.</dd>
<dt>Linux</dt><dd>Popular Unix like operating system kernel.</dd>
</dl>
</div>
</div>
</div>
<div id="outline-container-orga59bf98" class="outline-3">
<h3 id="orga59bf98">Tables</h3>
<div class="outline-text-3" id="text-orga59bf98">
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<caption class="t-above"><span class="table-number">Table 1:</span> Nutritional content per 100 g</caption>
<colgroup>
<col class="org-left" />
<col class="org-right" />
<col class="org-right" />
<col class="org-right" />
<col class="org-right" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">Grocery</th>
<th scope="col" class="org-right">kcal</th>
<th scope="col" class="org-right">Carbs (g)</th>
<th scope="col" class="org-right">Protein (g)</th>
<th scope="col" class="org-right">Fat (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">Banana</td>
<td class="org-right">95</td>
<td class="org-right">21.3</td>
<td class="org-right">1.1</td>
<td class="org-right">0.1</td>
</tr>
<tr>
<td class="org-left">Milk (3%)</td>
<td class="org-right">60</td>
<td class="org-right">4.7</td>
<td class="org-right">3.5</td>
<td class="org-right">3</td>
</tr>
<tr>
<td class="org-left">Pasta</td>
<td class="org-right">360</td>
<td class="org-right">71.9</td>
<td class="org-right">12.5</td>
<td class="org-right">1.2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="outline-container-org9380447" class="outline-3">
<h3 id="org9380447">Org Keywords and Tags</h3>
<div class="outline-text-3" id="text-org9380447">
</div>
<div id="outline-container-orga9dab86" class="outline-4">
<h4 id="orga9dab86"><span class="todo TODO">TODO</span> <span class="priority">[A]</span> Do Laundry   <span class="tag"><span class="weekly">weekly</span></span></h4>
<div class="outline-text-4" id="text-orga9dab86">
</div>
</div>
<div id="outline-container-org8ef251f" class="outline-4">
<h4 id="org8ef251f"><span class="done DONE">DONE</span> Cook Sunday Dinner</h4>
<div class="outline-text-4" id="text-org8ef251f">
</div>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="date">Date: 2022-12-07</p>
</div>
</body>
</html>