index.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2020-12-23 Wed 20:41 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>org-notes-style</title>
<meta name="generator" content="Org mode">
<meta name="author" content="Tao Peng">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://taopeng.me/org-notes-style/css/notes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<header>
<h1 class="title">org-notes-style</h1>
</header><nav id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#org06c1967">Introduction</a>
<ul>
<li><a href="#org4f5b4a8">Features</a></li>
</ul>
</li>
<li><a href="#orgf58a43c">Installation</a>
<ul>
<li><a href="#orgefee683">Requirements</a></li>
<li><a href="#org3c137c5">Configuration</a></li>
</ul>
</li>
<li><a href="#orga2d2fdf">Development</a></li>
</ul>
</div>
</nav>

<div id="outline-container-org06c1967" class="outline-2">
<h2 id="org06c1967">Introduction</h2>
<div class="outline-text-2" id="text-org06c1967">
<p>
<code>org-notes-style</code> is a light CSS theme for <a href="http://orgmode.org/">Org mode</a>. It provides a
stylesheet to style your exported HTML documents.
</p>

<p>
This HTML page is styled with <code>org-notes-style</code> from its <a href="https://raw.githubusercontent.com/ptpt/org-notes-style/master/index.org">org source file</a>. Check more examples at <a href="https://taopeng.me/org-notes-style/examples.html">here</a>.
</p>
</div>

<div id="outline-container-org4f5b4a8" class="outline-3">
<h3 id="org4f5b4a8">Features</h3>
<div class="outline-text-3" id="text-org4f5b4a8">
<ul class="org-ul">
<li>Pure HTML5 and CSS3</li>
<li>Responsive web design</li>
</ul>
</div>
</div>
</div>

<div id="outline-container-orgf58a43c" class="outline-2">
<h2 id="orgf58a43c">Installation</h2>
<div class="outline-text-2" id="text-orgf58a43c">
</div>
<div id="outline-container-orgefee683" class="outline-3">
<h3 id="orgefee683">Requirements</h3>
<div class="outline-text-3" id="text-orgefee683">
<p>
It requires Org mode of version <code>8.2.5h</code> or above. To install the
latest Org mode in Emacs 24, please refer to
<a href="http://orgmode.org/elpa.html">http://orgmode.org/elpa.html</a>
</p>
</div>
</div>

<div id="outline-container-org3c137c5" class="outline-3">
<h3 id="org3c137c5">Configuration</h3>
<div class="outline-text-3" id="text-org3c137c5">
<p>
Add following settings to your org documents.
</p>
<div class="org-src-container">
<pre class="src src-org-mode"># Turn off default internal styles
#+OPTIONS: html-style:nil html5-fancy:t

# Exporting to HTML5
#+HTML_DOCTYPE: html5
#+HTML_HEAD: &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
#+HTML_HEAD: &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

# Add notes.css here
#+HTML_HEAD: &lt;link href="https://taopeng.me/org-notes-style/css/notes.css" rel="stylesheet" type="text/css" /&gt;
</pre>
</div>

<p>
A better option is to save all the settings in a single org file
(let's say <code>~/org/notes-style.org</code>), and then include this file in
your org documents:
</p>

<div class="org-src-container">
<pre class="src src-org-mode">#+SETUPFILE: ~/org/notes-style.org
</pre>
</div>
</div>
</div>
</div>

<div id="outline-container-orga2d2fdf" class="outline-2">
<h2 id="orga2d2fdf">Development</h2>
<div class="outline-text-2" id="text-orga2d2fdf">
<p>
<code>org-notes-style</code> is develped based on the <a href="http://compass-style.org/">Compass</a> framework. To
setup the development environment:
</p>
<pre class="example">
$ git clone git@github.com:ptpt/org-notes-style.git
$ cd org-notes-style
$ compass watch
</pre>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="author">Author: Tao Peng</p>
<p class="date">Created: 2020-12-23 Wed 20:41</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>