fancy on-hover permalinks for section headers

dip3.css

@@ -45,6 +45,7 @@ Classname Legend
 .pf = "padded frame"  = black border with internal padding
 .fr = "framed"        = black border, no padding
 .ss = "screenshot"    = image, floated right, with margin
+.hl = "header link"   = auto-inserted pilcrow after h2 and h3 section headers
 
 .note = "note/caution/important"   = indented block for tips/gotchas/language comparisons
 .baa  = "best available ampersand" = wrapper block for ampersands
@@ -184,6 +185,17 @@ a:visited {
 .c a {
   color: inherit;
 }
+a.hl:link,a.hl:visited {
+  color: #fff;
+  padding-left: 0.2em;
+  text-decoration: none;
+  border: 0;
+}
+a.hl:hover, h2[id]:hover a.hl, h3[id]:hover a.hl {
+  background: transparent;
+  color: gainsboro;
+}
+
 
 /* code blocks */
 

j/dip3.js

@@ -93,6 +93,13 @@ $(document).ready(function() {
 	hideTOC();
 	prettyPrint();
 
+	/* on-hover permalink markers on each section header */
+	$('*:header[id]').each(function() {
+		$('<a class=hl>#</a>').
+		    attr('href', '#' + this.id).
+		    appendTo(this);
+	    });
+
 	/* "hide", "open in new window", and (optionally) "download" widgets on code & screen blocks */
 	$("pre > code").each(function(i) {
 		var pre = $(this.parentNode);

util/lesscss.py

@@ -7,7 +7,7 @@ import sys
 # These selectors are kept regardless of whether this script thinks they are used.
 # Most of these match nodes that are dynamically inserted or manipulated by script
 # after the page has loaded, which is why a static analysis thinks they're unused.
-SELECTOR_EXCEPTIONS = ('.w', '.b', '.str', '.kwd', '.com', '.typ', '.lit', '.pun', '.tag', '.atn', '.atv', '.dec', 'pre .u', 'pre .u span', 'li ol')
+SELECTOR_EXCEPTIONS = ('.w', '.b', '.str', '.kwd', '.com', '.typ', '.lit', '.pun', '.tag', '.atn', '.atv', '.dec', 'pre .u', 'pre .u span', 'li ol', '.hl')
 
 filename = sys.argv[1]
 pqd = pq(filename=filename)