Make code content and tables more responsive

* 'pre' blocks and tables use scrollbars if the viewport is too narrow
* Code content which is not within a 'pre' element wraps automatically
* Code content and 'pre' blocks have a gray background color

The added background color has two purposes:
* The left-margin for pre blocks is removed, because it consumes too
  much space on narrow viewports. However by using a background color,
  the reader can still recognize 'pre' content as code blocks.
* Code content which is *not* within a 'pre' element wraps
  automatically now. The background color allows the reader to
  recognize the "connection" between automatically splitted lines of
  a single code element. This way, nobody will mistake a one-liner for
  a multi-liner.

2 files changed, 10 insertions, 2 deletions

diff --git a/www/global.css b/www/global.css
index 35df49d6..87df287d 100644
--- a/www/global.css
+++ b/www/global.css
@@ -18,7 +18,16 @@ body {
 }
 
 pre {
-    margin-left: 2.5em
+    padding: 0.3em;
+}
+
+pre,table {
+    overflow-x: auto;
+    display: block;
+}
+
+code, pre {
+    background-color: #DDD;
 }
 
 img {
diff --git a/www/template.html b/www/template.html
index 4ce72774..c2bdcda0 100644
--- a/www/template.html
+++ b/www/template.html
@@ -14,7 +14,6 @@ $if(keywords)$
   <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
 $endif$
   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
-  <style type="text/css">code{white-space: pre;}</style>
 $if(quotes)$
   <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
 $endif$