From fb2f1ce4a5f07682219bf944254d1003d52a16c8 Mon Sep 17 00:00:00 2001
From: John Stevenson <john@jr0cket.co.uk>
Date: Wed, 17 Oct 2018 23:05:00 +0100
Subject: [PATCH] Updated: website style and style related plugins

Some of the content did not stand out very well, especially inline code and code
blocks. Added website.css styles to make the code stand out.

Added the wide-page plugin to spread the content wider on the page, so it looks
better on a higher resolution monitor.  The plugin has a maximum width of 95%
which was a bit high, but it was easy to over-ride this by adding a style to the
website.css file.  A width of 72% looks good and will seek further feedback on
this.
---
 book.json          |  4 ++-
 styles/website.css | 63 +++++++++++++++++++++++++++++++---------------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/book.json b/book.json
index a012830..1cafcaf 100644
--- a/book.json
+++ b/book.json
@@ -6,6 +6,7 @@
         "readme": "introduction.md"
     },
     "styles": {
+        "website": "styles/website.css",
         "ebook": "styles/ebook.css",
         "pdf": "styles/pdf.css",
         "mobi": "styles/mobi.css",
@@ -21,7 +22,8 @@
         "sectionx",
         "simpletabs",
         "youtube",
-        "klipse"
+        "klipse",
+        "wide-page"
     ],
     "pluginsConfig": {
         "callouts": {
diff --git a/styles/website.css b/styles/website.css
index 61404c8..abfe929 100644
--- a/styles/website.css
+++ b/styles/website.css
@@ -1,34 +1,57 @@
-.book-body p , .book-body h1,.book-body h2,.book-body h3,.book-body h4,.book-body h5,.book-body h6,.book-body div,.book-body span ,  .summary , .summary li , .summary li a  {
+@import url(https://fonts.googleapis.com/css?family=Ubuntu);
+@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
+
+/* Use Ubuntu font as default font for all content */
+body {
+    font-family: Ubuntu;
+    font-size: 1.6rem;
+}
+
+.book-body h1,.book-body h2,.book-body h3,.book-body h4,.book-body h5,.book-body h6 {
     font-family : "Ubuntu", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.book .book-body .page-wrapper .page-inner section.normal code {
-    font-family: "Ubuntu Mono", Consolas, Menlo, Courier, monospace;
+.book-body p, .book-body div, .book-body span, .summary, .book-body li, .summary li a  {
+    font-family : "Ubuntu", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
 }
 
-img {
+/* .book .book-body .page-wrapper .page-inner section.normal code { */
+/* } */
+
+/* Center images and tables */
+img, div, table {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
-/* Place thin green boarder around code blocks & increase font size from 85% to 108% */
-/* .book .book-body .page-wrapper .page-inner section.normal .highlight pre, .book .book-body .page-wrapper .page-inner section.normal pre { */
-/*     background-color: #f7f7f7; */
-/*     border: 5px solid #D9EDF7; */
-/*     border-radius: 3px; */
-/*     font-size: 108%; */
-/*     line-height: 1.45; */
-/*     overflow: auto; */
-/*     padding: 16px; */
-/* } */
+/* Over-ride the wide-page plugin  */
+.book .book-body .page-wrapper .page-inner {
+    max-width: 72%;
+}
+
 
-/* red text for all non-language specific code sections & increased font size to 108% */
-.book .book-body .page-wrapper .page-inner section.normal code {
+/* Make inline and code blocks stand out   */
+.markdown-section pre>code, .markdown-section code {
+    font-family: "Ubuntu Mono", Consolas, Menlo, Courier, monospace;
     background-color: #f7f7f7;
-    color: #FF0077;
-    border-radius: 3px;
-    font-size: 108%;
+    color: #702b70;             /* Spacemacs purple*/
+    font-size: 1.4em;
     margin: 0;
-    padding: 0.2em 0;
+    padding: 0.2em 0.1em;
+ }
+
+
+.CodeMirror pre {
+    font-size: 2em;
 }
+
+
+/* Add a border around a code block, but not inline code */
+/* .book .book-body .page-wrapper .page-inner section.normal .highlight pre, .book .book-body .page-wrapper .page-inner section.normal pre { */
+/*     border: 1px solid #7030a0; */
+/*     border-radius: 3px; */
+/*     overflow: auto; */
+/*     padding: 1em; */
+/* } */