doc: Improve CSS using nice fonts with `@font-face'.

* doc/user/FONTS, doc/user/junction.ttf, doc/user/lobster-1.4.otf: New
  files.
* doc/user/Makefile.am (EXTRA_DIST): Add `FONTS'.
  (dist_html_DATA): Add `lobster-1.otf', and `junction.ttf'.

* doc/user/skribilo.css: Use Lobster and Junction via `@font-face'.
  Improve other details.

* web/skribilo.css: Likewise.

6 files changed, 101 insertions, 19 deletions

diff --git a/doc/user/FONTS b/doc/user/FONTS
new file mode 100644
index 0000000..6a6d1a4
--- /dev/null
+++ b/doc/user/FONTS
@@ -0,0 +1,7 @@
+The fonts in this directory are released under the terms of the
+SIL Open Font License (OFL).  They are used in ‘skribilo.css’.
+
+  • Lobster 1.4 was taken from <http://www.impallari.com/lobster/>.
+
+  • Junction was taken from
+    <http://www.theleagueofmoveabletype.com/junction>.
diff --git a/doc/user/Makefile.am b/doc/user/Makefile.am
index 1637ebb..a2e6eab 100644
--- a/doc/user/Makefile.am
+++ b/doc/user/Makefile.am
@@ -25,12 +25,14 @@ EXTRA_DIST += src/api1.skb						\
   src/start3.skb src/start4.skb src/start5.skb				\
   src/outline.txt src/scheme.scm
 
+EXTRA_DIST += FONTS
 
 skrinfodir = $(infodir)
 skrinfo_DATA = skribilo.info
 
 html_DATA = user.html user.sui
-dist_html_DATA = skribilo.css
+dist_html_DATA = skribilo.css			\
+  lobster-1.4.otf junction.ttf
 BUILT_SOURCES = lout/front-page.lout
 CLEANFILES = $(BUILT_SOURCES) $(html_DATA) skribilo.info
 
diff --git a/doc/user/junction.ttf b/doc/user/junction.ttf
new file mode 100644
index 0000000..6ad3a25
--- /dev/null
+++ b/doc/user/junction.ttf
diff --git a/doc/user/lobster-1.4.otf b/doc/user/lobster-1.4.otf
new file mode 100644
index 0000000..86effca
--- /dev/null
+++ b/doc/user/lobster-1.4.otf
diff --git a/doc/user/skribilo.css b/doc/user/skribilo.css
index 956fb72..670a844 100644
--- a/doc/user/skribilo.css
+++ b/doc/user/skribilo.css
@@ -2,7 +2,7 @@
 
    CSS style sheet for the Skribilo manual.
 
-   Copyright 2007, 2008 Ludovic Courtès <ludo@gnu.org>
+   Copyright 2007, 2008, 2012 Ludovic Courtès <ludo@gnu.org>
 
    Copying and distribution of this file, with or without modification,
    are permitted in any medium without royalty provided the copyright
@@ -10,6 +10,22 @@
 
 /* FIXME: This file is messy and contains loads of useless stuff.  */
 
+/* http://www.impallari.com/lobster/  */
+@font-face {
+  font-family: 'Lobster';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Lobster'), url('lobster-1.4.otf') format('opentype');
+}
+
+/* http://www.theleagueofmoveabletype.com/junction */
+@font-face {
+  font-family: 'Junction';
+  src: local('Junction'), url('junction.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 pre { font-family: monospace; text-align: left; }
 tt { font-family: monospace }
 code { font-family: monospace }
@@ -21,24 +37,50 @@ span.sc { font-variant: small-caps }
 span.sf { font-family: sans-serif }
 
 
-.skribilo-title {
+body.document {
+  font-family: Lobster, sans-serif;
+  font-weight: bolder;
+}
+
+body.chapter {       /* chapter title when `:file #t' */
+  font-family: sans-serif;
+  font-weight: bolder;
+}
+body.section {       /* section title when `:file #t' */
   font-family: sans-serif;
   font-weight: bolder;
+}
+
+
+div.skribilo-title {
   font-size: large;
   text-align: right;
   background: #ee7777; /* #dddde0; */
   border-top-color: black;
-  border-top-style: solid;
-  border-top-width: 1px;
+  border-top-style: none;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+table.author {
+  font-family: Junction, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  text-align: right;
 }
 
 .skribilo-body {
-  font-family: sans-serif;
+  font-family: Junction, sans-serif;
   font-weight: normal;
   font-size: normal;
   text-align: left;
   background: #ffffff;
-  padding: 0 5% 0 5%
+  padding: 0 5% 0 5%;
+}
+
+table.toc {
+  border-spacing: 8px;
 }
 
 .small-toc {
@@ -79,10 +121,12 @@ span.sf { font-family: sans-serif }
 .section-title {
   background: #eeeef0;
   font-family: sans-serif;
+  font-weight: bold;
+  font-size: larger;
   text-align: right;
 }
 
-.subsection-title { font-family: sans-serif; }
+.subsection-title { font-family: Junction, sans-serif; }
 
 .code-excerpt {
   background: #eeeef0;
diff --git a/web/skribilo.css b/web/skribilo.css
index 403defb..6f7da56 100644
--- a/web/skribilo.css
+++ b/web/skribilo.css
@@ -1,4 +1,20 @@
-pre { font-family: monospace }
+/* http://www.impallari.com/lobster/  */
+@font-face {
+  font-family: 'Lobster';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Lobster'), url('doc/lobster-1.4.otf') format('opentype');
+}
+
+/* http://www.theleagueofmoveabletype.com/junction */
+@font-face {
+  font-family: 'Junction';
+  src: local('Junction'), url('doc/junction.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+pre { font-family: monospace; text-align: left; }
 tt { font-family: monospace }
 code { font-family: monospace }
 body { margin: 1em 1.5em 1.5em 1.5em; background: #ffffff; }
@@ -9,20 +25,34 @@ span.sc { font-variant: small-caps }
 span.sf { font-family: sans-serif }
 li { margin: 1%; text-align: justify; }
 
+body.document {
+  font-family: Lobster, sans-serif;
+  font-weight: bolder;
+}
 
-.skribilo-title {
+body.chapter {       /* chapter title when `:file #t' */
+  font-family: sans-serif;
+  font-weight: bolder;
+}
+body.section {       /* section title when `:file #t' */
   font-family: sans-serif;
   font-weight: bolder;
-  font-size: large;
+}
+
+
+div.skribilo-title {
+  font-size: x-large;
   text-align: right;
   background: #ee7777; /* #dddde0; */
   border-top-color: black;
-  border-top-style: solid;
-  border-top-width: 1px;
+  border-top-style: none;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 10px;
 }
 
 .skribilo-body {
-  font-family: sans-serif;
+  font-family: Junction, sans-serif;
   font-weight: normal;
   text-align: left;
   background: #ffffff;
@@ -76,7 +106,7 @@ a:hover { background: #ee7777; color: #333344; }
 a:visited { color: #443333; }
 
 
-/* Navigation tabs (currently unused) */
+/* Navigation tabs.  */
 
 a.inactive { padding: 0px 10px 0px 10px; }
 
@@ -85,10 +115,9 @@ div.navtabs-title {
   margin: 0 0 0 0;
   border: 0 0 0 0;
   text-align: right;
-  background: #8381de;
 }
 div.navtabs-bar {
-  margin: 0 0 0 0;
+  margin: 0 10px 0 10px;
   border: 0 0 0 0;
   text-align: right;
   border-top-color: black;
@@ -103,8 +132,8 @@ div.navtabs-tabs {
   border-width: 0;
   border-color: black;
   border-style: dotted;
-  padding: 2px 10px 0px 10px;
-  margin: 0 1px 0 0;
+  padding: 0px 10px 0px 10px;
+  margin: 0px 10px 0px 10px;
   text-decoration: none;
   background: white;
   font-family: sans-serif;