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.

1 files changed, 10 insertions, 1 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 {