Use cmark.

6 files changed, 213 insertions, 3 deletions

diff --git a/.gitignore b/.gitignore
index 08bbd2c..1f0cf72 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 css/*.css
+*.html
diff --git a/Makefile b/Makefile
index a55daf4..2ba1f46 100644
--- a/Makefile
+++ b/Makefile
@@ -1,13 +1,25 @@
+htmlpages = index.html
+htmlheader = templates/header.html
+htmlfooter = templates/footer.html
 cssfiles := css/main.css css/print.css
 
 sass_includedir = /usr/share/compass/frameworks/toolkit/stylesheets
 
-all: $(cssfiles)
+all: $(htmlpages)
+
+$(htmlpages): %.html : %.md $(htmlheader) $(htmlfooter) $(cssfiles)
+	cat $(htmlheader) > $@
+	echo "<div id="book">" >> $@
+	echo "<div id="page1" class="page"><div class="inner">" >> $@
+	cmark $< >> $@
+	perl -p0i -e '$$i or $$i++; s!(<hr\s*/?>\s*){2}(?{$$i++})!</div></div>\n\n<div id="page$$i" class="page"><div class="inner">!g' $@
+	echo "</div></div>" >> $@
+	cat $(htmlfooter) >> $@
 
 $(cssfiles): css/%.css : css/%.scss $(sass_includedir)
 	sassc -I $(sass_includedir) $< $@
 
 clean:
-	rm -f $(cssfiles)
+	rm -f $(cssfiles) $(htmlpages)
 
 .PHONY: clean
diff --git a/README b/README
index 1104d61..2790ce2 100644
--- a/README
+++ b/README
@@ -8,7 +8,7 @@ Preparations
  1) Use the stable release (Stretch) of Debian <http://www.debian.org/>
  2) Install needed tools:
 
-	sudo apt install git sassc compass-toolkit-plugin
+	sudo apt install git sassc compass-toolkit-plugin cmark
 
 
 Use
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..929672d
--- /dev/null
+++ b/index.md
@@ -0,0 +1,184 @@
+[dinky pocket book]{}CSS Selectors
+==================================
+
+---
+
+---
+
+Simple selectors
+----------------
+
+assume throughout that `E` and `F` are elements,
+they can have attribute `foo`
+e.g. `<e foo="bar">`{style="white-space: nowrap"}
+you can replace these with any elements or attributes.
+
+In HTML, elements in CSS can be uppercase like these examples.
+In XHTML, elements must be lower case.
+Classes and IDs are **always** case sensitive
+
+[**universal selector**, match any element]{.micro} `*`
+
+[**type** (or element) selector]{.micro} `E`
+
+[**ID selector** an E element with ID equal to "myid",
+e.g.`<e id="myid">`]{.micro} `E#myid`
+
+[**class selector** an E element whose class is "myclass",
+e.g.`<e class="myclass">`]{.micro} `E.myclass`
+
+---
+
+---
+
+Combinators & negation
+----------------------
+
+[**descendant combinator** to style an F element,
+which is a descendant of an E element]{.micro} `E F`
+
+[**child combinator** an F element
+which is the direct child of an E element]{.micro} `E > F`
+
+[**adjacent sibling combinator** an F element
+that is immediately preceded by an E element]{.micro} `E + F`
+
+[**general sibling combinator** an F element
+preceded at some point by an E element]{.micro} `E ~ F`
+
+[**negation pseudo-class** an E element
+that does not match simple selector `s`]{.micro} `E:not(s)`
+
+---
+
+---
+
+Attribute selectors
+-------------------
+
+[element E with a "foo" attribute]{.micro} `E[foo]`
+
+[E’s attribute `foo`,
+value exactly equal to `bar`]{.micro} `E[foo="bar"]`
+
+[E’s attribute `foo`,
+value is whitespace-separated values,
+one of which is exactly "bar"]{.micro} `E[foo~="bar"]`
+
+[E’s attribute `foo`,
+value begins exactly "bar"]{.micro} `E[foo^="bar"]`
+
+[E’s attribute `foo`,
+value ends exactly "bar"]{.micro} `E[foo$="bar"]`
+
+[E’s attribute `foo`,
+value contains substring "bar"]{.micro} `E[foo*="bar"]`
+
+[E’s attribute `foo` has a hyphen-separated list of values
+beginning (from the left) with "en"]{.micro} `E[foo|="en"]`
+
+---
+
+---
+
+Structural pseudo-classes
+-------------------------
+
+`n` can be replaced with an expression
+in all following cases
+`n` can be (odd), (even) or expressions such as (3n + 1)
+
+an E element,
+the n-th child of its parent
+
+`E:nth-child(n)`
+[an E element, the n-th child of its parent,
+counting from the last one]{.micro} `E:nth-last-child(n)`
+
+[an E element,
+the n-th sibling of its type]{.micro} `E:nth-of-type(n)`
+
+[an E element,
+the n-th sibling of its type,
+counting from the last one]{.micro} `E:nth-last-of-type(n)`
+
+[an E element that is the document root,
+i.e. html]{.micro} `E:root`
+
+---
+
+---
+
+Structural pseudo-classes
+-------------------------
+
+[an E element,
+first child of its parent]{.micro} `E:first-child`
+
+[an E element,
+first sibling of its type]{.micro} `E:first-of-type`
+
+[an E element,
+last child of its parent]{.micro} `E:last-child `
+
+[an E element,
+last sibling of its type]{.micro} `E:last-of-type`
+
+[an E element,
+only child of its parent]{.micro} `E:only-child`
+
+[an E element,
+only sibling of its type]{.micro} `E:only-of-type`
+
+[an E element that has no children
+(including text nodes)]{.micro} `E:empty`
+
+---
+
+---
+
+Pseudo-classes
+--------------
+
+[matches a link E when E is a link
+and not visited, hovered over focused on or active]{.micro} `E:link`
+
+[the href target of the link E has been visited]{.micro} `E:visited`
+
+[the link E has been activated]{.micro} `E:active`
+
+[any element E
+when hovered over with a mouse]{.micro} `E:hover`
+
+[the link or form control E
+when tabbed to with a keyboard]{.micro} `E:focus`
+
+[element E is the fragment in the referring URI]{.micro} `E:target`
+
+[an element of type E in language "fr"]{.micro} `E:lang(fr)`
+
+---
+
+---
+
+Forms & [Pseudo-elements]{style="white-space: nowrap"}
+------------------------------------------------------
+
+[a user interface element E
+which is enabled]{.micro} `E:enabled`
+
+[a user interface element E
+which is disabled ]{.micro} `E:disabled`
+
+[a user interface element E
+which is checked]{.micro} `E:checked`
+
+[the first formatted line of an E element]{.micro} `E::first-line`
+
+[the first formatted letter of an E element]{.micro} `E::first-letter`
+
+[generated content before an E element]{.micro} `E::before`
+
+[generated content after an E element]{.micro} `E::after`
+
+[http://www.w3.org/TR/css3-selectors/]{.micro}
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..308b1d0
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,2 @@
+</body>
+</html>
diff --git a/templates/header.html b/templates/header.html
new file mode 100644
index 0000000..d8f909c
--- /dev/null
+++ b/templates/header.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>pocket book</title>
+<meta name="author" content="Jonas Smedegaard">
+<!-- heavily based on http://natbat.net/2009/May/21/pocketbooks/ -->
+<link rel="stylesheet" href="css/main.css" type="text/css">
+<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
+</head>
+<body>