Added the option to tweak an otterwiki with a custom.css (and custom.js)

- The by default empty files static/custom/custom.css and custom.js
  are now loaded by the navigation.html template

- Added an example of how to tweak the template.

docs/custom_css_example/README.md

@@ -0,0 +1,6 @@
+# Customizing (tweaking) an Otter Wiki
+
+This is an example for tewaking the CSS of An Otter Wiki.
+
+Please check <https://otterwiki.com/Theme%20Customization> for
+more examples.

docs/custom_css_example/custom/custom.css

@@ -0,0 +1,11 @@
+/*
+ * This is an example custom.css that uses the serif font
+ * Baskervville for the content rendered in the page.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Baskervville');
+
+.content > .page {
+    font-family: 'Baskervville', serif;
+    font-weight: 400;
+}

docs/custom_css_example/custom/custom.js

@@ -0,0 +1,5 @@
+/*
+ * this javascript file is sourced but not used, since
+ * we mount the entire directory a missing file would cause
+ * http 404 not found errors.
+ */

docs/custom_css_example/docker-compose.yaml

@@ -0,0 +1,18 @@
+---
+#
+# This docker-compose.yaml is for running the latest development version
+#
+version: '3'
+services:
+  web:
+    build: ../..
+    restart: unless-stopped
+    ports:
+      # forward the http port to 8080
+      - "8080:80"
+    volumes:
+      # mount the local custom.css
+      -  ./custom:/app/otterwiki/static/custom:ro
+      # For this example we do not persist any data
+      # - ./app-data:/app-data
+

otterwiki/static/custom/custom.css

@@ -0,0 +1,9 @@
+/*
+* custom.css
+ *
+ * This file is loaded via the layout.html template in every
+ * page of an Otter Wiki.
+ *
+ * see https://otterwiki.com/Customization for examples.
+ *
+*/

otterwiki/static/custom/custom.js

@@ -0,0 +1,8 @@
+/*
+ * custom.js
+ *
+ * This file is loaded via the layout.html template in every
+ * page of an Otter Wiki.
+ *
+ * see https://otterwiki.com/Customization for examples.
+ */

otterwiki/templates/layout.html

@@ -42,6 +42,8 @@
     <link href="{{ url_for("static", filename="css/pygments.css") | debug_unixtime }}" rel="stylesheet" />
     <!-- Roboto font (Used when Apple system fonts are not available) -->
     <link href="{{ url_for("static", filename="css/roboto.css") | debug_unixtime }}" rel="stylesheet"/>
+    <!-- custom.css for tweaking the default themes -->
+    <link href="{{ url_for("static", filename="custom/custom.css") }}" rel="stylesheet" media="screen" />
     <!-- Documentation styles -->
 {%- block head %}
 {% endblock -%}
@@ -240,5 +242,7 @@
   {% endfor %}
 {% endwith %}
 </script>
+  <!-- custom js for tweaking an otter wiki -->
+  <script src="{{ url_for("static", filename="custom/custom.js") }}"></script>
 </body>
 </html>