Refactoring CSS/JS

.gitignore

@@ -2,8 +2,7 @@ build
 __pycache__
 *.pyc
 .*.swp
-ui/node_modules
+node_modules
-ui/dist
 dist
 demo/_build
 sphinx_nervproject_theme.egg-info

CHANGES

@@ -2,6 +2,15 @@
 Changes
 =======
 
+1.1.0 (*2020-06-20*)
+====================
+
+- Remove dependency of vue, rewrite all JS
+- Refactor all CSS
+- Add print theme (some bugs must be fixed)
+- Add weasyprint theme (some bugs must be fixed)
+- Add epub theme (some bugs must be fixed)
+
 1.0.8 (*2020-06-10*)
 ====================
 

README.rst

@@ -23,14 +23,12 @@ See details on `Sphinx theming docs <http://www.sphinx-doc.org/en/master/theming
 Development
 ~~~~~~~~~~~
 
-First build web assets:
+To rebuild web assets:
 
 .. code:: bash
 
-   cd ui
    npm run build
 
-Sphinx theme has a soft link to built assets...
 Install theme locally with `pip install -e .`.
 
 `docs` folder contains theme's own documentantion.
@@ -40,17 +38,6 @@ Install theme locally with `pip install -e .`.
    cd docs
    make clean; make html
 
-Website
-~~~~~~~
-
-To update website:
-
-.. code:: bash
-
-   cd ../press_site
-   rsync -rvi ../sphinx_vuepress_theme/docs/build/html/ .
-   git add --all
-
 Compatibility
 ~~~~~~~~~~~~~
 

demo/conf.py

@@ -23,6 +23,7 @@ author = 'Kujiu'
 
 # The full version, including alpha/beta/rc tags
 release = '0.1'
+version = '0.1'
 
 
 # -- General configuration ---------------------------------------------------
@@ -52,6 +53,13 @@ exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
 # a list of builtin themes.
 #
 html_theme = 'nervproject'
+epub_theme = 'nervproject'
+epub_exclude_files = [
+    '_static/sphinx_nervproject_print.css',
+    '_static/sphinx_nervproject_theme.css',
+    '_static/sphinx_nervproject_theme.js',
+    '_static/basic.css',
+]
 html_theme_options = {
     "logoalt": project,
     "social": [
@@ -68,3 +76,7 @@ html_theme_options = {
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ['_static']
+weasyprint_theme = 'nervproject'
+weasyprint_footer_selector = 'footer.footer'
+weasyprint_header_selector = 'header.navbar'
+weasyprint_main_selector = 'main.content'

docs/source/configuration.rst

@@ -52,6 +52,9 @@ Adds custom CSS files to the theme
 
 If provided, creates external links (e.g. Github) in the top right corner:
 
+``html_theme_options``
+^^^^^^^^^^^^^^^^^^^^^^
+
 .. code-block:: python
 
    html_theme_options = {
@@ -186,7 +189,7 @@ Links for previous/next page.
 
 Copyright information.
 
-``ui/src/vuepress/styles/config.less``
+``ui/vuepress/styles/config.less``
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 This file contains the four sub-themes color schemes.

package-lock.json

@@ -0,0 +1,534 @@
+{
+  "name": "sphinx_nervproject_theme",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "ajv": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
+      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
+      "optional": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "optional": true
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "optional": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "optional": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "optional": true
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "optional": true
+    },
+    "aws4": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
+      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
+      "optional": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "optional": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "optional": true
+    },
+    "clean-css": {
+      "version": "3.4.28",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+      "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+      "requires": {
+        "commander": "2.8.x",
+        "source-map": "0.4.x"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "optional": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+      "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+      "requires": {
+        "graceful-readlink": ">= 1.0.0"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "optional": true
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "optional": true
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "optional": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "errno": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
+      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "optional": true
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "optional": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "optional": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "optional": true
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "optional": true
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "optional": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "optional": true
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "optional": true
+    },
+    "har-validator": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "optional": true,
+      "requires": {
+        "ajv": "^6.5.5",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "optional": true
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "optional": true
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "optional": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "optional": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "optional": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "optional": true
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "less": {
+      "version": "3.11.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.11.3.tgz",
+      "integrity": "sha512-VkZiTDdtNEzXA3LgjQiC3D7/ejleBPFVvq+aRI9mIj+Zhmif5TvFPM244bT4rzkvOCvJ9q4zAztok1M7Nygagw==",
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "less-plugin-clean-css": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/less-plugin-clean-css/-/less-plugin-clean-css-1.5.1.tgz",
+      "integrity": "sha1-zFeveqM5iVflbezr5jy2DCNClwM=",
+      "requires": {
+        "clean-css": "^3.0.1"
+      }
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "optional": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "optional": true
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
+      "optional": true
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "optional": true,
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "optional": true
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "optional": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "optional": true
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "optional": true
+    },
+    "psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
+      "optional": true
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "optional": true
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "optional": true
+    },
+    "request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "optional": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "optional": true
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "optional": true
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "optional": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "optional": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "optional": true,
+      "requires": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "tslib": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "optional": true
+    },
+    "uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "optional": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "optional": true
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "sphinx_nervproject_theme",
+  "version": "1.0.0",
+  "description": "Sphinx Nerv Project Theme",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "build:theme": "lessc --clean-css='--advanced' ui/theme.less sphinx_nervproject_theme/static/sphinx_nervproject_theme.css",
+    "build:weasyprint": "lessc --clean-css='--advanced' ui/theme-weasyprint.less sphinx_nervproject_theme/static/sphinx_nervproject_weasyprint.css",
+    "build:epub": "lessc --clean-css='--advanced' ui/theme-epub.less sphinx_nervproject_theme/static/sphinx_nervproject_epub.css",
+    "build": "npm run build:theme && npm run build:weasyprint && npm run build:epub"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@procrastinator.nerv-project.eu:nerv-project/communication/sphinx_nervproject_theme"
+  },
+  "author": "kujiu",
+  "license": "EUPL 1.2",
+  "dependencies": {
+    "less": "^3.11.3",
+    "less-plugin-clean-css": "^1.5.1"
+  }
+}

setup.py

@@ -22,12 +22,13 @@ class TranslateCommand(distutils.cmd.Command):
         for cmd_name in self.get_sub_commands():
             self.run_command(cmd_name)
 
+
 with open("README.rst", "r") as fh:
     long_description = fh.read()
 
 setup(
     name="sphinx_nervproject_theme",
-    version="1.0.8",
+    version="1.1.0",
     url="https://procrastinator.nerv-project.eu/nerv-project/communication/sphinx_nervproject_theme",
     license="EUPL 1.2",
     author="Kujiu",
@@ -36,7 +37,7 @@ setup(
     long_description=long_description,
     long_description_content_type="text/x-rst",
     packages=["sphinx_nervproject_theme"],
-    cmdclass = {
+    cmdclass={
         'translate': TranslateCommand,
     },
     package_data={

sphinx_nervproject_theme/__init__.py

@@ -1,11 +1,15 @@
 from os import path
+import sys
 
 from docutils import nodes
 from sphinx.environment.collectors import EnvironmentCollector
 from sphinx import addnodes
 from sphinx.util.osutil import relative_uri
 
-__version__ = (1, 0, 8)
+__version__ = (1, 1, 0)
+
+
+sys.setrecursionlimit(15000)
 
 
 class SimpleTocTreeCollector(EnvironmentCollector):
@@ -35,19 +39,15 @@ class SimpleTocTreeCollector(EnvironmentCollector):
         for docname in docnames:
             env.toc_dict[docname] = other.toc_dict[docname]
 
-
     def process_doc(self, app, doctree):
-        docname = app.env.docname # sphinx mutates this, ouch!!!
+        docname = app.env.docname
-
-        # print(f"================ Collector\n{docname}\n============\n")
-        # get 1 level document toc (sections)
         section_nodes = [s for s in doctree if isinstance(s, nodes.section)]
         # if first level is a single section,
         # ignore it and use second level of sections
         if len(section_nodes) == 1:
             section2_nodes = [s for s in section_nodes[0]
                               if isinstance(s, nodes.section)]
-            if section2_nodes: # do not replace with level-2 sections if None
+            if section2_nodes:  # do not replace with level-2 sections if None
                 section_nodes = section2_nodes
 
         sections = []
@@ -63,7 +63,6 @@ class SimpleTocTreeCollector(EnvironmentCollector):
         }
 
 
-
 def add_toctree_data(app, pagename, templatename, context, doctree):
     """Create toctree_data, used to build sidebar navigation
 
@@ -88,7 +87,7 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
     master = app.env.get_doctree(app.env.config.master_doc)
 
     # each toctree will create navigation section
-    res = [] # list of top level toctrees in master_doc
+    res = []  # list of top level toctrees in master_doc
     for tree in master.traverse(addnodes.toctree):
 
         # special case for toctree that includes a single item
@@ -101,7 +100,7 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
             for tree in toctrees:
                 pass
 
-        current0 = False # same page might have multiple tocs
+        current0 = False  # same page might have multiple tocs
 
         # add toc tree items, expand one more level if toctree is current page
         entries = []
@@ -123,7 +122,7 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
                 'children': children,
             })
 
-        toc_docname = tree['parent'] # docname where this toc appears
+        toc_docname = tree['parent']  # docname where this toc appears
         title = tree['caption']
         toc_caption = tree['caption']
 
@@ -135,7 +134,7 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
         # First parent is "compound" node toctree-wrapper,
         # second parent is the section containing the toctree
         toc_section = tree.parent.parent
-        if toc_section['ids']: # no id means toc actually not in a section
+        if toc_section['ids']:  # no id means toc actually not in a section
             # TODO: should we be strict about toc being inside a section
             anchor_id = toc_section['ids'][0]
             if not title:
@@ -157,10 +156,22 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
     context['toctree_data'] = res
 
 
+def on_config_inited(app, conf):
+    exclude_files = list(app.config.get('epub_exclude_files', []))
+    exclude_files.append('_static/sphinx_nervproject_theme.js')
+    exclude_files.append('_static/sphinx_nervproject_simple.css')
+    exclude_files.append('_static/sphinx_nervproject_theme.css')
+    exclude_files.append('_static/basic.css')
+    app.config.exclude_files = exclude_files
+
+    app.config.weasyprint_footer_selector = 'footer.footer'
+    app.config.weasyprint_header_selector = 'header.navbar'
+
 
 def setup(app):
     app.add_env_collector(SimpleTocTreeCollector)
     app.connect('html-page-context', add_toctree_data)
+    app.connect('config-inited', on_config_inited)
     app.add_html_theme('nervproject', path.abspath(path.dirname(__file__)))
 
     locale_path = path.join(path.abspath(path.dirname(__file__)), 'locale')

sphinx_nervproject_theme/layout.html

@@ -1,36 +1,41 @@
 <!DOCTYPE html>
-<html {% if language is not none %} lang="{{ language }}"{% endif %}>
+<html {% if language is not none %} lang="{{ language }}"{% endif %}{% if builder=='epub' %} xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"{% endif%}>
   <head>
-    <meta charset="{{ encoding }}">
+    <meta charset="{{ encoding }}"/>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
     {{- metatags }}
     {%- block htmltitle %}
       <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
     {%- endblock %}
-    {# <meta name="description" content="{{ description }}"> #}
+    {# <meta name="description" content="{{ description }}"/> #}
     {%- block css %}
-      <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1)}}">
+      <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1)}}"/>
-      <link rel="stylesheet" href="{{ pathto('_static/theme.css', 1)}}">
+      {% if builder=='weasyprint' %}
-      <link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_theme.css', 1)}}">
+        <link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_weasyprint.css', 1)}}"/>
-    {% if theme_isso %}
+      {% elif builder=='epub' %}
-      <link rel="stylesheet" href="{{ pathto('_static/isso.css', 1)}}">
+        <link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_epub.css', 1)}}"/>
-      <script data-isso="{{ theme_isso['prefix'] }}"
+      {% else %}
-        data-isso-id="{{ pagename }}"
+        <link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_theme.css', 1)}}"/>
-        data-isso-css="false"
+        {% if theme_isso %}
-        data-isso-lang="{{ theme_isso.get('lang', language) }}"
+          <link rel="stylesheet" href="{{ pathto('_static/isso.css', 1)}}">
-        data-isso-reply-to-self="{{ theme_isso['reply_to_self'] }}"
+          <script data-isso="{{ theme_isso['prefix'] }}"
-        data-isso-require-author="{{ theme_isso['require_author'] }}"
+            data-isso-id="{{ pagename }}"
-        data-isso-require-email="{{ theme_isso['require_email'] }}"
+            data-isso-css="false"
-        data-isso-reply-notifications="{{ theme_isso['reply_notif'] }}"
+            data-isso-lang="{{ theme_isso['lang'] }}"
-        data-isso-max-comments-top="{{ theme_isso['max_comments_top'] }}"
+            data-isso-reply-to-self="{{ theme_isso['reply_to_self'] }}"
-        data-isso-max-comments-nested="{{ theme_isso['max_comments_nested'] }}"
+            data-isso-require-author="{{ theme_isso['require_author'] }}"
-        data-isso-reveal-on-click="{{ theme_isso['reveal_on_click'] }}"
+            data-isso-require-email="{{ theme_isso['require_email'] }}"
-        data-isso-avatar="{{ theme_isso['avatar'] }}"
+            data-isso-reply-notifications="{{ theme_isso['reply_notif'] }}"
-        data-isso-vote="{{ theme_isso['vote'] }}"
+            data-isso-max-comments-top="{{ theme_isso['max_comments_top'] }}"
-        data-isso-vote-levels="{{ theme_isso['vote_levels'] }}"
+            data-isso-max-comments-nested="{{ theme_isso['max_comments_nested'] }}"
-        data-isso-feed="{{ theme_isso['feed'] }}"
+            data-isso-reveal-on-click="{{ theme_isso['reveal_on_click'] }}"
-        src="{{ theme_isso['url'] }}/js/embed.min.js"></script>
+            data-isso-avatar="{{ theme_isso['avatar'] }}"
-      <style id="isso-style"></style>
+            data-isso-vote="{{ theme_isso['vote'] }}"
+            data-isso-vote-levels="{{ theme_isso['vote_levels'] }}"
+            data-isso-feed="{{ theme_isso['feed'] }}"
+            src="{{ theme_isso['url'] }}/js/embed.min.js"></script>
+          <style id="isso-style"></style>
+        {% endif %}
       {% endif %}
       {%- for css in css_files %}
         {%- if css|attr("rel") %}
@@ -42,20 +47,22 @@
     {%- endblock %}
 
     {%- block scripts %}
-      {# FIXME: use link-preload #}
+      {% if builder=='html' %}
-      <script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
+        {# FIXME: use link-preload #}
-      {% if theme_fathom %}
+        <script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
-        {%- include "util/fathom.html" %}
+        {% if theme_fathom %}
+          {%- include "util/fathom.html" %}
+        {% endif %}
+
+        <!-- sphinx script_files -->
+        {%- for scriptfile in script_files %}
+          {{ js_tag(scriptfile) }}
+        {%- endfor %}
+
+        <script src="{{ pathto('_static/sphinx_nervproject_theme.js', 1)}}" defer></script>
+
+        <script src="{{ pathto('_static/sphinx_nervproject_theme.js', 1)}}" defer></script>
       {% endif %}
-
-      <!-- sphinx script_files -->
-      {%- for scriptfile in script_files %}
-        {{ js_tag(scriptfile) }}
-      {%- endfor %}
-
-      {# press js #}
-      <script src="{{ pathto('_static/theme-vendors.js', 1)}}"></script>
-      <script src="{{ pathto('_static/theme.js', 1)}}" defer></script>
     {%- endblock %}
     {%- if pageurl %}
       <link rel="canonical" href="{{ pageurl }}" />
@@ -70,33 +77,31 @@
   </head>
 
   <body>
-    <div id="app" class="theme-container" :class="pageClasses">
+    <div id="app" class="theme-container">
     {%- block container %}
       {%- block header %}{%- include "util/navbar.html" %}{% endblock %}
 
-      {# close sidebar when clicked out of it #}
-      <div class="sidebar-mask" @click="toggleSidebar(false)">
-      </div>
-
       <div id="appflex">
         {%- block sidebar %}
-          <sidebar @toggle-sidebar="toggleSidebar">
+        {% if builder=='html' %}
+          <div class="sidebar" id="sidebar">
             {# sidebar navlinks displayed only on mobile #}
-            <navlinks>
+            <nav class="nav-links can-hide">
               {% block side_links %}
                 {%- include "util/navlinks.html" %}
                 {%- include "util/extlinks.html" %}
               {% endblock %}
-            </navlinks>
+            </nav>
             {%- if sidebars != None %}
               {%- for sidebartemplate in sidebars %}
                 {%- include sidebartemplate %}
               {%- endfor %}
             {%- endif %}
-          </sidebar>
+          </div>
+        {% endif %}
         {%- endblock %}
 
-        <page>
+        <div class="page">
           {%- block document %}
             {% block body_header %}
               {%- include "util/bodyheader.html" %}
@@ -105,7 +110,7 @@
               {% block body %} {% endblock %}
             </main>
           {%- endblock %}
-        </page>
+        </div>
       </div>
 
       {%- block footer %}

sphinx_nervproject_theme/page.html

@@ -2,40 +2,29 @@
 {%- block extrahead %}
   {{ super() }}
   {% if feed_path %}
-  <link rel="alternate" type="application/atom+xml"  href="{{ pathto(feed_path, 1) }}/atom.xml" title="{{ feed_title }}">
+  <link rel="alternate" type="application/atom+xml"  href="{{ pathto(feed_path, 1) }}/atom.xml" title="{{ feed_title }}"/>
   {% endif %}
 {% endblock %}
 
 {% block body %}
   {{ body }}
-  <div class="section">
+  {% if builder=='html' %}
-  {% if ablog and pagename in ablog %}
+    <div class="section">
-    {% include "postnavy.html" %}
+    {% if ablog and pagename in ablog %}
-    {% include "share.html" %}
+      {% include "postnavy.html" %}
-  {% else %}
-    {% if ablog and theme_share_all %}
       {% include "share.html" %}
+    {% else %}
+      {% if ablog and theme_share_all %}
+        {% include "share.html" %}
+      {% endif %}
     {% endif %}
+    {% if ablog and ablog.disqus_shortname and ablog.blog_baseurl and
+          (not ablog[pagename].nocomments) and
+          ((pagename in ablog and (ablog[pagename].published or
+            ablog.disqus_drafts)) or
+           (not pagename in ablog and ablog.disqus_pages)) %}
+      {% include "util/disqus.html" %}
+    {% endif %}
+    </div>
   {% endif %}
-  {% if ablog and ablog.disqus_shortname and ablog.blog_baseurl and
-        (not ablog[pagename].nocomments) and
-        ((pagename in ablog and (ablog[pagename].published or
-          ablog.disqus_drafts)) or
-         (not pagename in ablog and ablog.disqus_pages)) %}
-    {% include "util/disqus.html" %}
-  {% endif %}
-  {% if ablog and theme_isso and
-        (not ablog[pagename].nocomments) and
-        ((pagename in ablog and (ablog[pagename].published or
-          ablog.disqus_drafts)) or
-         (not pagename in ablog and ablog.disqus_pages)) %}
-<section class="comments" id="comments">
-    <h2 class="panel">{{ _("Comments") }}</h2>
-        <section id="isso-thread"
-                 data-isso-id="{{ pagename }}"
-            data-title="{{ title }}"
-            ></section>
-</section>
-  {% endif %}
-  </div>
 {% endblock %}

sphinx_nervproject_theme/share.html

@@ -1,6 +1,6 @@
 <section>
   {% set post = ablog[pagename] %}
-    <div class="center social-share">
+    <div class="center social-share no-print">
         <p>{{ gettext('Like this article? Share it!') }}</p>
         <ul class="social">
             <li>

sphinx_nervproject_theme/social.html

@@ -1,4 +1,4 @@
-<div class="sidebar-links">
+<div class="sidebar-links no-print">
     <div class="sidebar-group">
 
       <ul class="social">

sphinx_nervproject_theme/static/sphinx_nervproject_theme.js

@@ -0,0 +1,13 @@
+function toggleSidebar() {
+    document.querySelector('#sidebar').toggleAttribute('opened');
+}
+
+const buttonToggle = document.querySelector('button.sidebar-button');
+buttonToggle.addEventListener('click', event => {
+    toggleSidebar();
+});
+buttonToggle.addEventListener('keydown', event => {
+    if(event.keyCode === 13 || event.keyCode === 32 ) {
+        toggleSidebar();
+    }
+});

sphinx_nervproject_theme/static/theme-vendors.js

@@ -1 +0,0 @@
-../../ui/dist/js/chunk-vendors.js

sphinx_nervproject_theme/static/theme.css

@@ -1 +0,0 @@
-../../ui/dist/css/app.css

sphinx_nervproject_theme/static/theme.js

@@ -1 +0,0 @@
-../../ui/dist/js/app.js

sphinx_nervproject_theme/util/footer.html

@@ -5,7 +5,7 @@
     {% else %}
       {% trans copyright=copyright|e %}© Copyright {{ copyright }}.{% endtrans %}
     {% endif %}
-    <br>
+    <br/>
   {% endif %}
   {% if theme_license['type'] == "CC" %}
   <a href="{{ theme_license.url }}">
@@ -44,4 +44,5 @@
     based on <a href="https://github.com/schettino72/sphinx_press_theme">Press Theme</a>
     and <a href="https://ablog.readthedocs.io/">ABlog</a>.{% endtrans %}
   {% endif %}
+  <div class="pagecount"></div>
 </footer>

sphinx_nervproject_theme/util/navbar.html

@@ -1,12 +1,28 @@
-<navbar @toggle-sidebar="toggleSidebar">
+<header class="navbar">
+    <div id="header-identity" class="print-only">
+        <img id="navbar_logo" src="{{ pathto('_static/' + logo, 1) }}"/>
+        <div id="navbar_title">{{ html_title }}</div>
+    </div>
+
+  {% if builder=='html' %}
+  <button class="sidebar-button">
+      <svg id="sidebar-button-svg" role="img" aria-labelledby="sidebar-button_label">
+          <title id="sidebar-button_label">
+              {{ gettext('Toggle sidebar') }}
+          </title>
+          <use xlink:href="{{ pathto('_static/fa/solid.svg', 1) }}#bars"></use>
+      </svg>
+  </button>
+
+  <a href="{{pathto(master_doc)}}" class="home-link">
+      <span class="site-name">{{ project|e }}</span>
+  </a>
+
   <div class="links">
-    <navlinks class="can-hide">
+    <div class="nav-links can-hide">
       {%- include "util/navlinks.html" %}
       {%- include "util/extlinks.html" %}
-    </navlinks>
+    </div>
   </div>
-
+  {% endif %}
-  <router-link to="{{pathto(master_doc)}}" class="home-link">
+</header>
-      <span class="site-name">{{ project|e }}</span>
-  </router-link>
-</navbar>

sphinx_nervproject_theme/util/navlinks.html

@@ -4,7 +4,7 @@
     <details>
       <summary>
         <span
-           class="nav-link {% if tree.current %} router-link-active{% endif %}">
+           class="nav-link {% if tree.current %} link-active{% endif %}">
            {{tree.title}}
         </span>
       </summary>

ui/.gitignore

@@ -1,21 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*

ui/README.md

@@ -1,21 +0,0 @@
-# ui
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```

ui/arrow.less

@@ -1,5 +1,3 @@
-@import './config.less';
-
 .arrow {
   display: inline-block;
   width: 0;
@@ -7,21 +5,21 @@
   &.up {
     border-left: 0.3rem solid transparent;
     border-right: 0.3rem solid transparent;
-    border-bottom: 0.5rem solid var(--ArBgClr);
+    border-bottom: 0.5rem solid @ArBgClr;
   }
   &.down {
     border-left: 0.3rem solid transparent;
     border-right: 0.3rem solid transparent;
-    border-top: 0.5rem solid var(--ArBgClr);
+    border-top: 0.5rem solid @ArBgClr;
   }
   &.right {
     border-top: 0.3rem solid transparent;
     border-bottom: 0.3rem solid transparent;
-    border-left: 0.5rem solid var(--ArBgClr);
+    border-left: 0.5rem solid @ArBgClr;
   }
   &.left {
     border-top: 0.3rem solid transparent;
     border-bottom: 0.3rem solid transparent;
-    border-right: 0.5rem solid var(--ArBgClr);
+    border-right: 0.5rem solid @ArBgClr;
   }
 }

ui/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

ui/code.less

@@ -1,41 +1,54 @@
-@import './config.less';
+pre {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
 
 .content {
+  td.linenos, td.code {
+    border: none;
+    padding: 0;
+    margin: 0;
+    > .highlight pre {
+      border: none;
+    }
+  }
   code {
-    color: var(--CdTClr);
+    color: @CdTClr;
-    padding: 0.25rem 0.5rem;
+    padding: 0.25rem 0.1rem;
     margin: 0;
     font-size: 0.85em;
-    background-color: var(--CdBgClr);
+    background-color: @CdBgClr;
-    border-radius: 0.2em;
+    border-bottom: @CdBClr solid 0.2em;
-    border-color: var(--CdBClr);
     a, a:visited {
-      color: var(--CdLClr);
+      color: @CdLClr;
       &:hover {
-        color: var(--CdLHClr);
+        color: @CdLHClr;
       }
     }
   }
 
+  td.linenos pre {
+    background-color: @CdBClr;
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+
   pre, pre[class*="language-"] {
     line-height: 1.4;
     padding: 1.25rem 1.5rem;
     margin: 0.85rem 0;
-    background-color: var(--PrBgClr);
+    background-color: @PrBgClr;
-    color: var(--PrTClr);
+    color: @PrTClr;
-    border-radius: 0.5rem;
+    border-left: @PrBClr solid 0.5em;
-    border-color: var(--PrBClr);
-    overflow: auto;
     code {
-      color: var(--PrTClr);
+      color: @PrTClr;
       padding: 0;
       background-color: transparent;
-      border-radius: 0;
     }
     a, a:visited {
-      color: var(--PrLClr);
+      color: @PrLClr;
       &:hover {
-        color: var(--PrLHClr);
+        color: @PrLHClr;
       }
     }
   }
@@ -43,19 +56,14 @@
 
 div[class*="language-"] {
   position: relative;
-  background-color: var(--CdBgClr);
+  background-color: @CdBgClr;
-  border-radius: 0.5rem;
   .highlight-lines {
-    user-select: none;
     padding-top: 1.3rem;
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
     line-height: 1.4;
     .highlighted {
-      background-color: var(--CdBgAClr);
+      background-color: @CdBgAClr;
-      color: var(--CdAClr);
+      color: @CdAClr;
     }
   }
   pre, pre[class*="language-"] {
@@ -64,12 +72,9 @@ div[class*="language-"] {
     z-index: 1;
   }
   &::before {
-    position: absolute;
     z-index: 3;
-    top: 0.8em;
-    right: 1em;
     font-size: 0.75rem;
-    color: hsla(var(--CdTClr-h), var(--CdTClr-s), var(--CdTClr-l), 0.4);
+    color: @CdT2Clr;
   }
   &:not(.line-numbers-mode) {
     .line-numbers-wrapper {
@@ -82,51 +87,38 @@ div[class*="language-"] {
         position: relative;
         &:before {
           content: ' ';
-          position: absolute;
           z-index: 3;
-          left: 0;
-          top: 0;
           display: block;
-          width: var(--lineNumbersWrapperWidth);
+          width: @lineNumbersWrapperWidth;
           height: 100%;
-          background-color: var(--CdBgAClr);
+          background-color: @CdBgAClr;
-          color: var(--CdBgClr);
+          color: @CdBgClr;
         }
       }
     }
     pre {
-      padding-left: calc(var(--lineNumbersWrapperWidth) + 1rem);
+      padding-left: @lineNumbersWrapperWidth;
       vertical-align: middle;
     }
     .line-numbers-wrapper {
-      position: absolute;
+      width: @lineNumbersWrapperWidth;
-      top: 0;
-      width: var(--lineNumbersWrapperWidth);
       text-align: center;
-      color: hsla(var(--PrTClr-h), var(--PrTClr-s), var(--PrTClr-l), 0.3);
+      color: @PrLNClr;
       padding: 1.25rem 0;
       line-height: 1.4;
-      br {
-        user-select: none;
-      }
       .line-number {
         position: relative;
         z-index: 4;
-        user-select: none;
         font-size: 0.85em;
       }
     }
     &::after {
       content: '';
-      position: absolute;
       z-index: 2;
-      top: 0;
+      width: @lineNumbersWrapperWidth;
-      left: 0;
-      width: var(--lineNumbersWrapperWidth);
       height: 100%;
-      border-radius: 0.5rem 0 0 0.5rem;
+      border-left: 0.5rem solid @PrB2Clr;
-      border-right: 0.1rem solid hsla(var(--PrBClr-h), var(--PrBClr-s), var(--PrBClr-l), 66%);
+      background-color: @PrBgClr;
-      background-color: var(--PrBgClr);
     }
   }
 }

ui/common.less

@@ -0,0 +1,772 @@
+@import './code.less';
+@import './custom-blocks.less';
+@import './arrow.less';
+@import './sphinx.less';
+@import './toc.less';
+
+@font-face {
+    font-family: Hack;
+    font-weight: normal;
+    font-style: normal;
+    src: url("fonts/hack/Hack-Regular.ttf");
+}
+
+@font-face {
+    font-family: Hack;
+    font-weight: bold;
+    font-style: normal;
+    src: url("fonts/hack/Hack-Bold.ttf");
+}
+
+@font-face {
+    font-family: Hack;
+    font-weight: bold;
+    font-style: italic;
+    src: url("fonts/hack/Hack-BoldItalic.ttf");
+}
+
+@font-face {
+    font-family: Hack;
+    font-weight: normal;
+    font-style: italic;
+    src: url("fonts/hack/Hack-Italic.ttf");
+}
+
+@font-face {
+    font-family: Luciole;
+    font-weight: normal;
+    font-style: normal;
+    src: url("fonts/luciole/Luciole-Regular.ttf");
+}
+
+@font-face {
+    font-family: Luciole;
+    font-weight: bold;
+    font-style: normal;
+    src: url("fonts/luciole/Luciole-Bold.ttf");
+}
+
+@font-face {
+    font-family: Luciole;
+    font-weight: bold;
+    font-style: italic;
+    src: url("fonts/luciole/Luciole-Bold-Italic.ttf");
+}
+
+@font-face {
+    font-family: Luciole;
+    font-weight: normal;
+    font-style: italic;
+    src: url("fonts/luciole/Luciole-Regular-Italic.ttf");
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: Luciole;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: @TClr;
+  background-color: @BgClr;
+  a, a:visited {
+    color: @LClr;
+    &:hover {
+      color: @LHClr;
+    }
+  }
+}
+
+
+#app {
+  display: flex;
+  flex-flow: column;
+
+  .navbar {
+    z-index: 20;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    background-color: @NvBgClr;
+    box-sizing: border-box;
+    border-bottom: 0.3em solid @NvBClr;
+    color: @NvTClr;
+    .nav-dropdown-menu {
+      vertical-align: top;
+      max-height: 2em;
+      details {
+        padding: 0 0.5em 0 0.5em;
+        background: @NvBgClr;
+        border-radius: 0.5em;
+        color: @NvTClr;
+        ul {
+          list-style: none;
+        }
+        a, a:visited {
+          color: @NvLClr;
+          &:hover {
+            color: @NvLHClr;
+          }
+        }
+      }
+    }
+
+    a, a:visited {
+      color: @NvLClr;
+      &:hover {
+        color: @NvLHClr;
+      }
+    }
+
+  }
+  footer.footer {
+    padding: 0.3em;;
+    box-sizing: border-box;
+    border-top: 0.3em solid @FoBClr;
+    background-color: @FoBgClr;
+    color: @FoTClr;
+    margin-top: -1.1em;
+    min-height: 5em;
+    z-index: 1000;
+
+    a, a:visited {
+      color: @FoLClr;
+      &:hover {
+        color: @FoLHClr;
+      }
+    }
+  }
+
+  #appflex {
+    display: flex;
+    flex-flow: row;
+    flex-grow: 1;
+
+    .page {
+      width: 100%;
+      ul.simple {
+        list-style: '– ';
+      }
+    }
+  }
+}
+
+.content:not(.custom) {
+  .wrapper();
+  a:hover {
+    text-decoration: underline;
+  }
+  p.demo {
+    padding: 1rem 1.5rem;
+    border: 0.3em solid @BClr;
+    border-radius: 0.4em;
+  }
+  img {
+    max-width: 100%;
+  }
+}
+
+.content.custom {
+  padding: 0;
+  margin: 0;
+  img {
+    max-width: 100%;
+  }
+}
+
+a, a:visited {
+  font-weight: 500;
+  color: @AClr;
+  text-decoration: none;
+}
+
+p a code, p a:visited code {
+  font-weight: 400;
+  color: @AClr;
+}
+
+kbd {
+  background: @BgClr;
+  border: solid 0.05rem @BClr;
+  border-bottom: solid 0.1rem @BClr;
+  border-radius: 0.15rem;
+  line-height: 1.5em;
+  padding: 0.25em;
+}
+
+blockquote {
+  font-size: 1.2rem;
+  color: @BqTClr;
+  border-left: .25rem solid @BqBClr;
+  background-color: @BqBgClr;
+  margin-left: 0;
+  padding-left: 1rem;
+}
+
+ul, ol {
+  padding-left: 1.2em;
+}
+
+strong {
+  font-weight: 600;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  .content:not(.custom) > & {
+    margin-bottom: 0;
+    &:first-child {
+      margin-top: -1.5rem;
+      margin-bottom: 1rem;
+      + p, + pre, + .custom-block {
+        margin-top: 2rem;
+      }
+    }
+  }
+  &:hover .header-anchor {
+    opacity: 1;
+  }
+}
+
+h1 {
+  font-size: 2.2rem;
+}
+
+h2 {
+  font-size: 1.65rem;
+  padding-bottom: .3rem;
+  border-bottom: 0.3em solid @BClr;
+}
+
+h3 {
+  font-size: 1.35rem;
+}
+
+a.header-anchor, a:visited.header-anchor {
+  font-size: 0.85em;
+  float: left;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  margin-top: 0.125em;
+  opacity: 0;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+code, kbd, .line-number {
+  font-family: Hack;
+}
+
+p, ul, ol {
+  line-height: 1.7;
+}
+
+hr {
+  border: 0;
+  border-top: 0.3em solid @BClr;
+}
+
+table {
+  border-collapse: collapse;
+  margin: 1rem 0;
+  display: block;
+}
+
+tr {
+  border-top: 0.3em solid @TeBClr;
+  &:nth-child(2n) {
+    background-color: @ToBgClr;
+    color: @ToTClr;
+  }
+}
+
+th, td {
+  border: 0.3em solid @TeBClr;
+  padding: .6em 1em;
+}
+
+.custom-layout {
+}
+
+.theme-container {
+  &.no-navbar {
+    .content:not(.custom) > h1, h2, h3, h4, h5, h6 {
+        margin-top: 1.5rem;
+        padding-top: 0;
+    }
+    .custom-layout {
+      padding-top: 0;
+    }
+  }
+}
+
+:focus {
+  border-radius: 0.5em;
+}
+
+a.btn, a:visited.btn {
+  background-color: @BtnBgClr;
+  padding: .6em .6em;
+  font-size: .8em;
+  line-height: 0.1em;
+  color: @BtnTClr;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+
+  &:hover {
+    background-color: @BtnBgAClr;
+  }
+}
+
+svg.fasvg {
+  max-height: 1.5em;
+  max-width: 1.5ex;
+  width: 1.5ex;
+  height: 1.5em;
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  vertical-align: baseline;
+}
+
+a.fasvglink, a:visited.fasvglink {
+  display: inline-flex !important;
+  flex-flow: row nowrap;
+  height: 2em;
+  border-radius: 2em;
+  border: 0.2em solid @LClr;
+  text-align: center;
+  line-height: 2em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin: 0.2em 0.2em 0.2em 0.2em;
+  color: @BtnTClr;
+
+  svg {
+    max-height: 1.2em;
+    max-width: 1.2ex;
+    height: 1.2em;
+    width: 1.2ex;
+    margin: 0.2em 0.5em 0.2em 0.2em;
+    display: inline-block;
+    vertical-align: baseline;
+  }
+
+  &.email {
+    color: @SEmailClr;
+    border-color: @SEmailClr;
+  }
+
+  &.contact {
+    color: @SContactClr;
+    border-color: @SContactClr;
+  }
+
+  &.facebook {
+    color: @SFacebookClr;
+    border-color: @SFacebookClr;
+  }
+
+  &.github {
+    color: @SGithubClr;
+    border-color: @SGithubClr;
+  }
+
+  &.google {
+    color: @SGoogleClr;
+    border-color: @SGoogleClr;
+  }
+
+  &.linkedin {
+    color: @SLinkedinClr;
+    border-color: @SLinkedinClr;
+  }
+
+  &.pinterest {
+    color: @SPinterestClr;
+    border-color: @SPinterestClr;
+  }
+
+  &.reddit {
+    color: @SRedditClr;
+    border-color: @SRedditClr;
+  }
+
+  &.rss {
+    color: @SRssClr;
+    border-color: @SRssClr;
+  }
+
+  &.soundcloud {
+    color: @SSoundcloudClr;
+    border-color: @SSoundcloudClr;
+  }
+
+  &.stackOverflow {
+    color: @SStackOverflowClr;
+    border-color: @SStackOverflowClr;
+  }
+
+  &.twitter {
+    color: @STwitterClr;
+    border-color: @STwitterClr;
+  }
+
+  &.mastodon {
+    color: @SMastodonClr;
+    border-color: @SMastodonClr;
+  }
+
+  &.diaspora {
+    color: @SDiasporaClr;
+    border-color: @SDiasporaClr;
+  }
+
+  &.youtube {
+    color: @SYoutubeClr;
+    border-color: @SYoutubeClr;
+  }
+
+  &:hover {
+    z-index: 2;
+    color: @BtnAClr !important;
+    border-color: @BtnAClr !important;
+  }
+}
+
+form {
+  footer {
+    text-align: right;
+
+    > * {
+      text-align: left;
+    }
+  }
+  main {
+    width: 100%;
+
+    .formctl {
+      display: inline-flex;
+      flex-flow: row wrap;
+      justify-content: flex-end;
+      margin: 0.3em;
+      padding: 0.3em;
+      width: 100%;
+
+      label {
+        flex-grow: 1;
+      }
+
+      input, textarea {
+        flex-grow: 2;
+        display: inline-flex;
+        max-width: 90%;
+      }
+    }
+  }
+}
+
+button, a.btn, a:visited.btn {
+  background-color: @BtnBgClr;
+  color: @BtnTClr;
+  border: solid 0.3em @BtnBClr;
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 2em;
+  height: 2em;
+  padding: 0.2em 0.8em 0.2em 0.8em;
+  font-size: 1.2em;
+
+  &:hover {
+    background-color: @BtnHClr;
+  }
+}
+
+.flexgroup {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+
+  > img {
+    height: 100%;
+  }
+
+  > * {
+    border-radius: 1em;
+    width: 40%;
+    flex-grow: 1;
+    max-width: 80ex;
+    padding: 1em;
+    margin: 1em 0.5em 1em 0.5em;
+  }
+}
+
+#mainlogo {
+  text-align: center;
+  width: 100%;
+
+  img {
+    text-align: center;
+    border-radius: 50%;
+    width: 90%;
+    max-width: 15ex;
+  }
+}
+
+.content:not(.custom) {
+  max-width: 90%;
+}
+
+
+/* THE SECTION BELOW DEFINES THE APPEARANCE OF AUTODOC-GENERATED DOCS */
+
+.sig-name.descname {
+  font-weight: bold;
+}
+
+.sig-param {
+  margin-left: 0.3em;
+}
+
+.sig-paren {
+  margin-left: 0.3em;
+}
+
+dt {
+  line-height: 1.5em;
+  margin-bottom: 1em;
+}
+
+dt.field-odd, dt.field-even, p.rubric {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: @TrClr;
+}
+
+dd {
+  margin-left: 0.8em;
+}
+
+dd.field-odd p strong {
+  margin-left: 1em;
+}
+
+dl.method, dl.function {
+  margin-top: 2em;
+  margin-bottom: 3em;
+}
+
+dl.navdl {
+  margin-top: 0.2em;
+  margin-bottom: 0.3em;
+}
+
+dl.navdl dt {
+  margin-top: 0em;
+  margin-bottom: 0em;
+  padding: 0rem 1rem 0rem 1.45rem !important;
+  line-height: 1.1em;
+  font-weight: bold;
+  font-style: italic;
+}
+
+dl.navdl dd {
+  margin-top: 0em;
+  margin-bottom: 0em;
+  line-height: 1.1em;
+  padding: 0.1rem 1rem 0.1rem 2.25rem !important;
+}
+
+.viewcode-link {
+  margin-left: 1em;
+  color: @LClr;
+}
+
+/* THE SECTION BELOW DEFINES THE APPEARANCE OF TABLE-OF-CONTENTS */
+
+/* color fixes for table of contents */
+.toc-backref {
+  color: inherit;
+}
+
+/* Hide all TOC titles */
+.contents.topic p.topic-title {
+  display: none;
+}
+
+.contents.topic {
+  margin-bottom: 3em;
+}
+
+/* THE SECTION BELOW CHANGES CODE FONTS FOR BETTER 80-CHARS READABILITY */
+code, pre {
+  font-family: 'Hack', monospace;
+}
+
+blockquote {
+  font-size: inherit;
+}
+
+blockquote h2 {
+  margin-left: 1em;
+}
+
+/* THE SECTION BELOW FIXES A SPHINX-MERMAID OPACITY PROBLEM */
+.content .section {
+  opacity: 1.0 !important;
+}
+.section {
+  opacity: 1.0 !important;
+}
+
+/* MAKES SPHINX SYNTAX figure:: :align:center WORK AGAIN */
+.figure.align-center {
+  text-align: center;
+}
+
+.postlist-style-flex, .flexgroup {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+
+  > img {
+    height: 100%;
+  }
+
+  > * {
+    flex-basis: 20%;
+    margin: 2em;
+    border-radius: 1em;
+    flex-grow: 1;
+    min-width: 20ex;
+    max-width: 80ex;
+    padding: 1em;
+    margin: 1em 0.5em 1em 0.5em;
+  }
+
+  li {
+    list-style: none;
+  }
+}
+
+img.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.align-right, figure.align-right {
+  display: inline-block;
+  float: right;
+  margin: 2em;
+
+  &::after {
+    clear: both;
+    display: block;
+  }
+}
+
+ul.ablog-archive {
+  list-style: none;
+  margin-left: 0;
+}
+
+ul.ablog-archive li {
+  float: left;
+  margin-right: 0.1em;
+  font-size: 0.9em;
+}
+
+ul.postlist a {
+  font-style: italic;
+}
+
+ul.postlist-style-disc {
+  list-style-type: disc;
+}
+
+ul.postlist-style-none {
+  list-style-type: none;
+}
+
+ul.postlist-style-circle {
+  list-style-type: circle;
+}
+
+ul.ablog-cloud {
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+ul.ablog-cloud li {
+  float: left;
+  margin: 0 0 0 0;
+  padding: 0.005em 1em 0.005em 1em;
+
+  a {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+  }
+}
+
+ul.ablog-cloud a, ul.ablog-cloud a:visited {
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+li.ablog-cloud-1 {
+  font-size: 0.8em !important;
+}
+
+li.ablog-cloud-2 {
+  font-size: 0.95em !important;
+}
+
+li.ablog-cloud-3 {
+  font-size: 1.1em !important;
+}
+
+li.ablog-cloud-4 {
+  font-size: 1.25em !important;
+}
+
+li.ablog-cloud-5 {
+  font-size: 1.4em !important;
+}
+
+.nav-links {
+  summary {
+    cursor: pointer;
+    width: 100%;
+  }
+}
+
+#header-identity {
+  width: 100%;
+  flex-basis: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+  img {
+      max-height: 5em;
+      max-width: 30%;
+      min-width: 5em;
+  }
+  #navbar_title {
+      padding: 0 1em 0 1em;
+  }
+}
+
+@media screen {
+  .print-only {
+    display: none !important;
+  }
+}

ui/config.less

@@ -0,0 +1,903 @@
+// responsive breakpoints
+@MQNarrow: 95ex;
+@MQMobile: 72ex;
+@MQMobileNarrow: 42ex;
+
+// colors
+
+/*
+S..Clr: Social network
+
+Suffixes:
+AClr: Accent color
+BClr: Border color
+BgClr: Background color
+FClr: Focus color
+HClr: Hover color
+LClr: Link color
+LHClr: Link hover color
+TClr: Text color
+
+Prefixes:
+
+Aa: Admonition (standard)
+Ac: Admonition (caution)
+Ad: Admonition (danger)
+Ae: Admonition (error)
+Ah: Admonition (hint)
+Ai: Admonition (important)
+An: Admonition (note)
+As: Admonition (success)
+At: Admonition (tip)
+Aw: Admonition (warning)
+Ar: Arrow
+
+Bh: ButtonHover
+Bq: Blockquote
+Btn: Button
+Cd: Code
+Fo: Footer
+In: Input
+Pr: Pre
+Sd: Sidebar
+Te: Table even
+To: Table odd
+Tr: Term
+Nv: Navbar
+
+*/
+
+@basesidebarWidth: 20rem;
+@basecontentWidth: 100%;
+
+  // code
+@baselineNumbersWrapperWidth: 4.5rem;
+
+@baseAClr: hsl(211, 49%, 53%);
+@baseSdA2Clr: hsl(211, 49%, 74.2%);
+@baseFClr: hsl(347, 100%, 43%);
+@baseBgClr: hsl(0, 0%, 95%);
+@baseTClr: hsl(210, 29%, 24%);
+@baseT2Clr: hsl(210, 29%, 11%);
+@baseSdT2Clr: hsl(210, 29%, 33%);
+@baseTrClr: hsl(209, 27%, 41%);
+@baseBClr: hsl(211, 49%, 63%);
+@baseLClr: @baseAClr;
+@baseLHClr: hsl(36, 97%, 38%);
+@baseArBgClr: hsl(0, 0%, 80%);
+
+@baseNvAClr: hsl(36, 97%, 82%);
+@baseNvBgClr: hsl(0, 0%, 16%);
+@baseNvBClr: hsl(211, 49%, 63%);
+@baseNvTClr: hsl(211, 49%, 75%);
+@baseNvLClr: hsl(211, 49%, 75%);
+@baseNvLHClr: hsl(36, 97%, 82%);
+
+@baseInBgClr: hsl(0, 0%, 100%);
+@baseInBClr: hsl(211, 49%, 63%);
+
+@baseBtnBgAClr: hsl(0, 0%, 100%);
+@baseBtnBgClr: hsl(0, 0%, 100%);
+@baseBtnBClr: hsl(211, 49%, 63%);
+@baseBtnTClr: @baseTClr;
+
+@baseAaBgClr: hsl(0, 0%, 89%);
+@baseAaBClr: hsl(0, 0%, 47%);
+@baseAaTClr: @baseTClr;
+@baseAaLClr: @baseLClr;
+@baseAaLHClr: @baseLHClr;
+
+@baseAtBgClr: hsl(210, 20%, 96%);
+@baseAtBClr: hsl(153, 47%, 49%);
+@baseAtTClr: hsl(153, 47%, 10%);
+@baseAtLClr: @baseLClr;
+@baseAtLHClr: @baseLHClr;
+
+@baseAwBgClr: hsla(50, 100%, 70%, 0.3);
+@baseAwBClr: hsl(50, 100%, 45.5%);
+@baseAwTClr: hsl(50, 100%, 21%);
+@baseAwLClr: @baseLClr;
+@baseAwLHClr: @baseLHClr;
+
+@baseAdBgClr: hsl(0, 100%, 95%);
+@baseAdBClr: hsl(0, 100%, 40%);
+@baseAdTClr: hsl(0, 100%, 15%);
+@baseAdLClr: @baseLClr;
+@baseAdLHClr: @baseLHClr;
+
+@baseAsBgClr: @baseAtBgClr;
+@baseAsBClr: @baseAtBClr;
+@baseAsTClr: @baseAtTClr;
+@baseAsLClr: @baseAtLClr;
+@baseAsLHClr: @baseAtLHClr;
+
+@baseAhBgClr: @baseAtBgClr;
+@baseAhBClr: @baseAtBClr;
+@baseAhTClr: @baseAtTClr;
+@baseAhLClr: @baseAtLClr;
+@baseAhLHClr: @baseAtLHClr;
+
+@baseAiBgClr: hsl(207, 73%, 94%);
+@baseAiBClr: hsl(208, 77%, 65%);
+@baseAiTClr: @baseTClr;
+@baseAiLClr: @baseLClr;
+@baseAiLHClr: @baseLHClr;
+
+@baseAnBgClr: @baseAiBgClr;
+@baseAnBClr: @baseAiBClr;
+@baseAnTClr: @baseAiTClr;
+@baseAnLClr: @baseAiLClr;
+@baseAnLHClr: @baseAiLHClr;
+
+@baseAcBgClr: @baseAwBgClr;
+@baseAcBClr: @baseAwBClr;
+@baseAcTClr: @baseAwTClr;
+@baseAcLClr: @baseAwLClr;
+@baseAcLHClr: @baseAwLHClr;
+
+@baseAeBgClr: @baseAdBgClr;
+@baseAeBClr: @baseAdBClr;
+@baseAeTClr: @baseAdTClr;
+@baseAeLClr: @baseAdLClr;
+@baseAeLHClr: @baseAdLHClr;
+
+@baseBqAClr: @baseAClr;
+@baseBqBgClr: hsl(0, 0%, 100%);
+@baseBqBClr: hsl(210, 10%, 49%);
+@baseBqTClr: hsl(0, 0%, 40%);
+@baseBqLClr: @baseLClr;
+@baseBqLHClr: @baseLHClr;
+
+@baseCdAClr: hsl(211, 49%, 15%);
+@baseCdBgAClr: hsl(211, 49%, 89%);
+@baseCdBgClr: @baseAaBgClr;
+@baseCdBClr: @baseAaBClr;
+@baseCdTClr: @baseAaTClr;
+@baseCdT2Clr: hsla(211, 29%, 27%, 0.4);
+@baseCdLClr: @baseAaLClr;
+@baseCdLHClr: @baseAaLHClr;
+
+
+@basePrAClr: @baseCdAClr;
+@basePrBgAClr: @baseCdBgAClr;
+@basePrBgClr: @baseCdBgClr;
+@basePrBClr: @baseCdBClr;
+@basePrB2Clr: hsla(0, 0%, 47%, 66%);
+@basePrTClr: @baseCdBgClr;
+@basePrLNClr: hsla(0, 0%, 89%, 0.3);
+@basePrLClr: @baseCdLClr;
+@basePrLHClr: @baseCdLHClr;
+
+@baseTeAClr: @baseAClr;
+@baseTeBgAClr: hsl(211, 49%, 80%);
+@baseTeBgClr: hsl(0, 0%, 100%);
+@baseTeBClr: hsl(210, 10%, 90%);
+@baseTeTClr: @baseTClr;
+@baseTeLClr: @baseLClr;
+@baseTeLHClr: @baseLHClr;
+
+@baseToAClr: @baseAClr;
+@baseToBgAClr: hsl(211, 49%, 85%);
+@baseToBgClr: hsl(0, 0%, 95%);
+@baseToBClr: hsl(210, 10%, 89%);
+@baseToTClr: @baseTClr;
+@baseToLClr: @baseLClr;
+@baseToLHClr: @baseLHClr;
+
+@baseSdAClr: @baseAClr;
+@baseSdBgClr: hsl(0, 0%, 100%);
+@baseSdBClr: hsl(0, 0%, 50%);
+@baseSdTClr: @baseTClr;
+@baseSdLClr: @baseLClr;
+@baseSdLHClr: @baseLHClr;
+
+@baseFoAClr: @baseNvAClr;
+@baseFoBClr: hsl(36, 97%, 62%);
+@baseFoBgClr: @baseNvBgClr;
+@baseFoTClr: @baseNvTClr;
+@baseFoLClr: @baseNvLClr;
+@baseFoLHClr: @baseNvLHClr;
+
+@baseInAClr: @baseAClr;
+@baseInTClr: @baseTClr;
+@baseInHClr: @baseLHClr;
+
+@baseBtnAClr: @baseAClr;
+@baseBtnHClr: @baseLHClr;
+@baseBhBgClr: @baseBtnBgClr;
+
+@baseSEmailClr: hsl(216, 61%, 59%);
+@baseSContactClr: hsl(216, 61%, 59%);
+@baseSFacebookClr: hsl(221, 42%, 42%);
+@baseSGithubClr: hsl(180, 3%, 14%);
+@baseSGoogleClr: hsl(6, 69%, 51%);
+@baseSLinkedinClr: hsl(212, 56%, 46%);
+@baseSPinterestClr: hsl(4, 78%, 44%);
+@baseSRedditClr: hsl(16, 100%, 50%);
+@baseSRssClr: hsl(23, 93%, 49%);
+@baseSSoundcloudClr: hsl(20, 100%, 50%);
+@baseSStackOverflowClr: hsl(347, 100%, 50%);
+@baseSTwitterClr: hsl(203, 69%, 59%);
+@baseSMastodonClr: hsl(205, 100%, 54%);
+@baseSDiasporaClr: hsl(0, 0%, 0%);
+@baseSYoutubeClr: hsl(3, 76%, 50%);
+
+// High contrast colors
+@highContrastBaseAClr: hsl(211, 49%, 40%);
+@highContrastBaseSdA2Clr: hsl(211, 49%, 56%);
+@highContrastBaseFClr: hsl(36, 97%, 42%);
+@highContrastBaseBgClr: hsl(0, 0%, 100%);
+@highContrastBaseTClr: hsl(210, 29%, 2%);
+@highContrastBaseT2Clr: hsl(210, 29%, 0.8%);
+@highContrastBaseSdT2Clr: hsl(210, 29%, 3%);
+@highContrastBaseTrClr: hsl(209, 27%, 10%);
+@highContrastBaseBClr: hsl(211, 49%, 43%);
+@highContrastBaseLClr: hsl(36, 97%, 42%);
+@highContrastBaseLHClr: hsl(36, 97%, 28%);
+@highContrastBaseArBgClr: hsl(0, 0%, 10%);
+
+@highContrastBaseNvAClr: hsl(36, 97%, 12%);
+@highContrastBaseNvBgClr: hsl(0, 0%, 100%);
+@highContrastBaseNvBClr: hsl(211, 49%, 3%);
+@highContrastBaseNvTClr: hsl(211, 49%, 75%);
+@highContrastBaseNvLClr: hsl(211, 49%, 75%);
+@highContrastBaseNvLHClr: hsl(36, 97%, 62%);
+
+@highContrastBaseInBgClr: hsl(0, 0%, 100%);
+@highContrastBaseInBClr: hsl(211, 49%, 5%);
+
+@highContrastBaseBtnBgAClr: hsl(0, 0%, 100%);
+@highContrastBaseBtnBgClr: hsl(0, 0%, 100%);
+@highContrastBaseBtnBClr: hsl(211, 49%, 3%);
+
+@highContrastBaseBtnTClr: @highContrastBaseTClr;
+
+@highContrastBaseAaBgClr: hsl(0, 0%, 100%);
+@highContrastBaseAaBClr: hsl(0, 0%, 37%);
+@highContrastBaseAaTClr: @highContrastBaseTClr;
+@highContrastBaseAaLClr: @highContrastBaseLClr;
+@highContrastBaseAaLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseAtBgClr: hsl(210, 20%, 100%);
+@highContrastBaseAtBClr: hsl(153, 47%, 39%);
+@highContrastBaseAtTClr: hsl(153, 47%, 2%);
+@highContrastBaseAtLClr: @highContrastBaseLClr;
+@highContrastBaseAtLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseAwBgClr: hsla(50, 100%, 100%, 0.3);
+@highContrastBaseAwBClr: hsl(50, 100%, 35.5%);
+@highContrastBaseAwTClr: hsl(50, 100%, 2%);
+@highContrastBaseAwLClr: @highContrastBaseLClr;
+@highContrastBaseAwLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseAdBgClr: hsl(0, 100%, 100%);
+@highContrastBaseAdBClr: hsl(0, 100%, 40%);
+@highContrastBaseAdTClr: hsl(0, 100%, 2%);
+@highContrastBaseAdLClr: @highContrastBaseLClr;
+@highContrastBaseAdLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseAsBgClr: @highContrastBaseAtBgClr;
+@highContrastBaseAsBClr: @highContrastBaseAtBClr;
+@highContrastBaseAsTClr: @highContrastBaseAtTClr;
+@highContrastBaseAsLClr: @highContrastBaseAtLClr;
+@highContrastBaseAsLHClr: @highContrastBaseAtLHClr;
+
+@highContrastBaseAhBgClr: @highContrastBaseAtBgClr;
+@highContrastBaseAhBClr: @highContrastBaseAtBClr;
+@highContrastBaseAhTClr: @highContrastBaseAtTClr;
+@highContrastBaseAhLClr: @highContrastBaseAtLClr;
+@highContrastBaseAhLHClr: @highContrastBaseAtLHClr;
+
+@highContrastBaseAiBgClr: hsl(207, 73%, 100%);
+@highContrastBaseAiBClr: hsl(208, 77%, 45%);
+@highContrastBaseAiTClr: @highContrastBaseTClr;
+@highContrastBaseAiLClr: @highContrastBaseLClr;
+@highContrastBaseAiLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseAnBgClr: @highContrastBaseAiBgClr;
+@highContrastBaseAnBClr: @highContrastBaseAiBClr;
+@highContrastBaseAnTClr: @highContrastBaseAiTClr;
+@highContrastBaseAnLClr: @highContrastBaseAiLClr;
+@highContrastBaseAnLHClr: @highContrastBaseAiLHClr;
+
+@highContrastBaseAcBgClr: @highContrastBaseAwBgClr;
+@highContrastBaseAcBClr: @highContrastBaseAwBClr;
+@highContrastBaseAcTClr: @highContrastBaseAwTClr;
+@highContrastBaseAcLClr: @highContrastBaseAwLClr;
+@highContrastBaseAcLHClr: @highContrastBaseAwLHClr;
+
+@highContrastBaseAeBgClr: @highContrastBaseAdBgClr;
+@highContrastBaseAeBClr: @highContrastBaseAdBClr;
+@highContrastBaseAeTClr: @highContrastBaseAdTClr;
+@highContrastBaseAeLClr: @highContrastBaseAdLClr;
+@highContrastBaseAeLHClr: @highContrastBaseAdLHClr;
+
+@highContrastBaseBqAClr: @highContrastBaseAClr;
+@highContrastBaseBqBgClr: hsl(0, 0%, 100%);
+@highContrastBaseBqBClr: hsl(210, 10%, 39%);
+@highContrastBaseBqTClr: hsl(0, 0%, 40%);
+@highContrastBaseBqLClr: @highContrastBaseLClr;
+@highContrastBaseBqLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseCdAClr: hsl(211, 49%, 15%);
+@highContrastBaseCdBgAClr: hsl(211, 49%, 89%);
+@highContrastBaseCdBgClr: @highContrastBaseAaBgClr;
+@highContrastBaseCdBClr: @highContrastBaseAaBClr;
+@highContrastBaseCdTClr: @highContrastBaseAaTClr;
+@highContrastBaseCdT2Clr: hsla(206, 99%, 2%, 0.4);
+@highContrastBaseCdLClr: @highContrastBaseAaLClr;
+@highContrastBaseCdLHClr: @highContrastBaseAaLHClr;
+
+
+@highContrastBasePrAClr: @highContrastBaseCdAClr;
+@highContrastBasePrBgAClr: @highContrastBaseCdBgAClr;
+@highContrastBasePrBgClr: @highContrastBaseCdBgClr;
+@highContrastBasePrBClr: @highContrastBaseCdBClr;
+@highContrastBasePrB2Clr: hsla(0, 0%, 37%, 66%);
+@highContrastBasePrTClr: @highContrastBaseCdBgClr;
+@highContrastBasePrLNClr: hsla(0, 0%, 100%, 0.3);
+@highContrastBasePrLClr: @highContrastBaseCdLClr;
+@highContrastBasePrLHClr: @highContrastBaseCdLHClr;
+
+@highContrastBaseTeAClr: @highContrastBaseAClr;
+@highContrastBaseTeBgAClr: hsl(211, 49%, 100%);
+@highContrastBaseTeBgClr: hsl(0, 0%, 100%);
+@highContrastBaseTeBClr: hsl(210, 10%, 20%);
+@highContrastBaseTeTClr: @highContrastBaseTClr;
+@highContrastBaseTeLClr: @highContrastBaseLClr;
+@highContrastBaseTeLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseToAClr: @highContrastBaseAClr;
+@highContrastBaseToBgAClr: hsl(211, 49%, 100%);
+@highContrastBaseToBgClr: hsl(0, 0%, 100%);
+@highContrastBaseToBClr: hsl(210, 10%, 29%);
+@highContrastBaseToTClr: @highContrastBaseTClr;
+@highContrastBaseToLClr: @highContrastBaseLClr;
+@highContrastBaseToLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseSdAClr: @highContrastBaseAClr;
+@highContrastBaseSdBgClr: hsl(0, 0%, 100%);
+@highContrastBaseSdBClr: hsl(0, 0%, 30%);
+@highContrastBaseSdTClr: @highContrastBaseTClr;
+@highContrastBaseSdLClr: @highContrastBaseLClr;
+@highContrastBaseSdLHClr: @highContrastBaseLHClr;
+
+@highContrastBaseFoAClr: @highContrastBaseNvAClr;
+@highContrastBaseFoBClr: hsl(36, 97%, 42%);
+@highContrastBaseFoBgClr: @highContrastBaseNvBgClr;
+@highContrastBaseFoTClr: @highContrastBaseNvTClr;
+@highContrastBaseFoLClr: @highContrastBaseNvLClr;
+@highContrastBaseFoLHClr: @highContrastBaseNvLHClr;
+
+@highContrastBaseInAClr: @highContrastBaseAClr;
+@highContrastBaseInTClr: @highContrastBaseTClr;
+@highContrastBaseInHClr: @highContrastBaseLHClr;
+
+@highContrastBaseBtnAClr: @highContrastBaseAClr;
+@highContrastBaseBtnHClr: @highContrastBaseLHClr;
+@highContrastBaseBhBgClr: @highContrastBaseBtnBgClr;
+
+@highContrastBaseSEmailClr: hsl(216, 61%, 19%);
+@highContrastBaseSContactClr: hsl(216, 61%, 19%);
+@highContrastBaseSFacebookClr: hsl(221, 42%, 12%);
+@highContrastBaseSGithubClr: hsl(180, 3%, 14%);
+@highContrastBaseSGoogleClr: hsl(6, 69%, 11%);
+@highContrastBaseSLinkedinClr: hsl(212, 56%, 16%);
+@highContrastBaseSPinterestClr: hsl(4, 78%, 14%);
+@highContrastBaseSRedditClr: hsl(16, 100%, 10%);
+@highContrastBaseSRssClr: hsl(23, 93%, 19%);
+@highContrastBaseSSoundcloudClr: hsl(20, 100%, 10%);
+@highContrastBaseSStackOverflowClr: hsl(347, 100%, 10%);
+@highContrastBaseSTwitterClr: hsl(203, 69%, 19%);
+@highContrastBaseSMastodonClr: hsl(205, 100%, 14%);
+@highContrastBaseSDiasporaClr: hsl(0, 0%, 10%);
+@highContrastBaseSYoutubeClr: hsl(3, 76%, 10%);
+
+// Dark colors
+@darkBaseAClr: hsl(36, 97%, 62%);
+@darkBaseSdA2Clr: hsl(36, 97%, 86%);
+@darkBaseFClr: hsl(36, 97%, 62%);
+@darkBaseBgClr: hsl(0, 0%, 8%);
+@darkBaseTClr: hsl(210, 29%, 90%);
+@darkBaseT2Clr: hsl(210, 29%, 4%);
+@darkBaseSdT2Clr: hsl(210, 29%, 100%);
+@darkBaseTrClr: hsl(209, 27%, 61%);
+@darkBaseBClr: hsl(211, 49%, 63%);
+@darkBaseLClr: hsl(211, 49%, 63%);
+@darkBaseLHClr: hsl(36, 97%, 82%);
+@darkBaseArBgClr: hsl(0, 0%, 80%);
+
+@darkBaseNvAClr: hsl(36, 97%, 82%);
+@darkBaseNvBgClr: hsl(0, 0%, 16%);
+@darkBaseNvBClr: hsl(211, 49%, 63%);
+@darkBaseNvTClr: hsl(211, 49%, 75%);
+@darkBaseNvLClr: hsl(211, 49%, 75%);
+@darkBaseNvLHClr: hsl(36, 97%, 82%);
+
+@darkBaseInBgClr: hsl(0, 0%, 10%);
+@darkBaseInBClr: hsl(211, 49%, 63%);
+
+@darkBaseBtnBgAClr: hsl(0, 0%, 10%);
+@darkBaseBtnBgClr: hsl(0, 0%, 10%);
+@darkBaseBtnBClr: hsl(211, 49%, 63%);
+@darkBaseBtnTClr: @darkBaseTClr;
+
+@darkBaseAaBgClr: hsl(0, 0%, 5%);
+@darkBaseAaBClr: hsl(0, 0%, 47%);
+@darkBaseAaTClr: @darkBaseTClr;
+@darkBaseAaLClr: @darkBaseLClr;
+@darkBaseAaLHClr: @darkBaseLHClr;
+
+@darkBaseAtBgClr: hsl(210, 20%, 16%);
+@darkBaseAtBClr: hsl(153, 47%, 49%);
+@darkBaseAtTClr: hsl(153, 47%, 90%);
+@darkBaseAtLClr: @darkBaseLClr;
+@darkBaseAtLHClr: @darkBaseLHClr;
+
+@darkBaseAwBgClr: hsla(50, 100%, 10%, 0.3);
+@darkBaseAwBClr: hsl(50, 100%, 45.5%);
+@darkBaseAwTClr: hsl(50, 100%, 81%);
+@darkBaseAwLClr: @darkBaseLClr;
+@darkBaseAwLHClr: @darkBaseLHClr;
+
+@darkBaseAdBgClr: hsl(0, 100%, 10%);
+@darkBaseAdBClr: hsl(0, 100%, 40%);
+@darkBaseAdTClr: hsl(0, 100%, 90%);
+@darkBaseAdLClr: @darkBaseLClr;
+@darkBaseAdLHClr: @darkBaseLHClr;
+
+@darkBaseAsBgClr: @darkBaseAtBgClr;
+@darkBaseAsBClr: @darkBaseAtBClr;
+@darkBaseAsTClr: @darkBaseAtTClr;
+@darkBaseAsLClr: @darkBaseAtLClr;
+@darkBaseAsLHClr: @darkBaseAtLHClr;
+
+@darkBaseAhBgClr: @darkBaseAtBgClr;
+@darkBaseAhBClr: @darkBaseAtBClr;
+@darkBaseAhTClr: @darkBaseAtTClr;
+@darkBaseAhLClr: @darkBaseAtLClr;
+@darkBaseAhLHClr: @darkBaseAtLHClr;
+
+@darkBaseAiBgClr: hsl(207, 73%, 14%);
+@darkBaseAiBClr: hsl(208, 77%, 65%);
+@darkBaseAiTClr: @darkBaseTClr;
+@darkBaseAiLClr: @darkBaseLClr;
+@darkBaseAiLHClr: @darkBaseLHClr;
+
+@darkBaseAnBgClr: @darkBaseAiBgClr;
+@darkBaseAnBClr: @darkBaseAiBClr;
+@darkBaseAnTClr: @darkBaseAiTClr;
+@darkBaseAnLClr: @darkBaseAiLClr;
+@darkBaseAnLHClr: @darkBaseAiLHClr;
+
+@darkBaseAcBgClr: @darkBaseAwBgClr;
+@darkBaseAcBClr: @darkBaseAwBClr;
+@darkBaseAcTClr: @darkBaseAwTClr;
+@darkBaseAcLClr: @darkBaseAwLClr;
+@darkBaseAcLHClr: @darkBaseAwLHClr;
+
+@darkBaseAeBgClr: @darkBaseAdBgClr;
+@darkBaseAeBClr: @darkBaseAdBClr;
+@darkBaseAeTClr: @darkBaseAdTClr;
+@darkBaseAeLClr: @darkBaseAdLClr;
+@darkBaseAeLHClr: @darkBaseAdLHClr;
+
+@darkBaseBqAClr: @darkBaseAClr;
+@darkBaseBqBgClr: hsl(0, 0%, 5%);
+@darkBaseBqBClr: hsl(210, 10%, 49%);
+@darkBaseBqTClr: hsl(0, 0%, 90%);
+@darkBaseBqLClr: @darkBaseLClr;
+@darkBaseBqLHClr: @darkBaseLHClr;
+
+@darkBaseCdAClr: hsl(211, 49%, 85%);
+@darkBaseCdBgAClr: hsl(211, 49%, 10%);
+@darkBaseCdBgClr: @darkBaseAaBgClr;
+@darkBaseCdBClr: @darkBaseAaBClr;
+@darkBaseCdTClr: @darkBaseAaTClr;
+@darkBaseCdT2Clr: hsla(206, 99%, 90%, 0.4);
+@darkBaseCdLClr: @darkBaseAaLClr;
+@darkBaseCdLHClr: @darkBaseAaLHClr;
+
+@darkBasePrAClr: @darkBaseCdAClr;
+@darkBasePrBgAClr: @darkBaseCdBgAClr;
+@darkBasePrBgClr: @darkBaseCdBgClr;
+@darkBasePrBClr: @darkBaseCdBClr;
+@darkBasePrB2Clr: hsla(0, 0%, 47%, 66%);
+@darkBasePrTClr: @darkBaseCdBgClr;
+@darkBasePrLNClr: hsla(0, 0%, 5%, 0.3);
+@darkBasePrLClr: @darkBaseCdLClr;
+@darkBasePrLHClr: @darkBaseCdLHClr;
+
+@darkBaseTeAClr: @darkBaseAClr;
+@darkBaseTeBgAClr: hsl(211, 49%, 80%);
+@darkBaseTeBgClr: hsl(0, 0%, 100%);
+@darkBaseTeBClr: hsl(210, 10%, 20%);
+@darkBaseTeTClr: @darkBaseTClr;
+@darkBaseTeLClr: @darkBaseLClr;
+@darkBaseTeLHClr: @darkBaseLHClr;
+
+@darkBaseToAClr: @darkBaseAClr;
+@darkBaseToBgAClr: hsl(211, 49%, 15%);
+@darkBaseToBgClr: hsl(0, 0%, 15%);
+@darkBaseToBClr: hsl(210, 10%, 29%);
+@darkBaseToTClr: @darkBaseTClr;
+@darkBaseToLClr: @darkBaseLClr;
+@darkBaseToLHClr: @darkBaseLHClr;
+
+@darkBaseSdAClr: @darkBaseAClr;
+@darkBaseSdBgClr: hsl(0, 0%, 5%);
+@darkBaseSdBClr: hsl(0, 0%, 50%);
+@darkBaseSdTClr: @darkBaseTClr;
+@darkBaseSdLClr: @darkBaseLClr;
+@darkBaseSdLHClr: @darkBaseLHClr;
+
+@darkBaseFoAClr: @darkBaseNvAClr;
+@darkBaseFoBClr: hsl(36, 97%, 62%);
+@darkBaseFoBgClr: @darkBaseNvBgClr;
+@darkBaseFoTClr: @darkBaseNvTClr;
+@darkBaseFoLClr: @darkBaseNvLClr;
+@darkBaseFoLHClr: @darkBaseNvLHClr;
+
+@darkBaseInAClr: @darkBaseAClr;
+@darkBaseInTClr: @darkBaseTClr;
+@darkBaseInHClr: @darkBaseLHClr;
+
+@darkBaseBtnAClr: @darkBaseAClr;
+@darkBaseBtnHClr: @darkBaseLHClr;
+@darkBaseBhBgClr: @darkBaseBtnBgClr;
+
+@darkBaseSEmailClr: hsl(216, 61%, 69%);
+@darkBaseSContactClr: hsl(216, 61%, 69%);
+@darkBaseSFacebookClr: hsl(221, 42%, 43%);
+@darkBaseSGithubClr: hsl(180, 3%, 94%);
+@darkBaseSGoogleClr: hsl(6, 69%, 61%);
+@darkBaseSLinkedinClr: hsl(212, 56%, 66%);
+@darkBaseSPinterestClr: hsl(4, 78%, 64%);
+@darkBaseSRedditClr: hsl(16, 100%, 60%);
+@darkBaseSRssClr: hsl(23, 93%, 69%);
+@darkBaseSSoundcloudClr: hsl(20, 100%, 60%);
+@darkBaseSStackOverflowClr: hsl(347, 100%, 60%);
+@darkBaseSTwitterClr: hsl(203, 69%, 69%);
+@darkBaseSMastodonClr: hsl(205, 100%, 64%);
+@darkBaseSDiasporaClr: hsl(0, 0%, 100%);
+@darkBaseSYoutubeClr: hsl(3, 76%, 60%);
+
+// High contrast dark colors
+@darkHighContrastBaseAClr: hsl(36, 97%, 62%);
+@darkHighContrastBaseSdA2Clr: hsl(36, 97%, 86%);
+@darkHighContrastBaseFClr: hsl(36, 97%, 43%);
+@darkHighContrastBaseBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseTClr: hsl(210, 29%, 98%);
+@darkHighContrastBaseT2Clr: hsl(210, 29%, 39.2%);
+@darkHighContrastBaseSdT2Clr: hsl(210, 29%, 100%);
+@darkHighContrastBaseTrClr: hsl(209, 27%, 98%);
+@darkHighContrastBaseBClr: hsl(211, 49%, 80%);
+@darkHighContrastBaseLClr: hsl(36, 97%, 60%);
+@darkHighContrastBaseLHClr: hsl(36, 97%, 72%);
+@darkHighContrastBaseArBgClr: hsl(0, 0%, 100%);
+
+@darkHighContrastBaseNvAClr: hsl(36, 97%, 92%);
+@darkHighContrastBaseNvBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseNvBClr: hsl(211, 49%, 73%);
+@darkHighContrastBaseNvTClr: hsl(211, 49%, 95%);
+@darkHighContrastBaseNvLClr: hsl(211, 49%, 95%);
+@darkHighContrastBaseNvLHClr: hsl(36, 97%, 82%);
+
+@darkHighContrastBaseInBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseInBClr: hsl(211, 49%, 93%);
+
+@darkHighContrastBaseBtnBgAClr: hsl(0, 0%, 10%);
+@darkHighContrastBaseBtnBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseBtnBClr: hsl(211, 49%, 83%);
+@darkHighContrastBaseBtnTClr: @darkHighContrastBaseTClr;
+
+@darkHighContrastBaseAaBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseAaBClr: hsl(0, 0%, 47%);
+@darkHighContrastBaseAaTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseAaLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseAaLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseAtBgClr: hsl(210, 20%, 0%);
+@darkHighContrastBaseAtBClr: hsl(153, 47%, 49%);
+@darkHighContrastBaseAtTClr: hsl(153, 47%, 90%);
+@darkHighContrastBaseAtLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseAtLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseAwBgClr: hsla(50, 100%, 0%, 0.3);
+@darkHighContrastBaseAwBClr: hsl(50, 100%, 45.5%);
+@darkHighContrastBaseAwTClr: hsl(50, 100%, 81%);
+@darkHighContrastBaseAwLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseAwLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseAdBgClr: hsl(0, 100%, 0%);
+@darkHighContrastBaseAdBClr: hsl(0, 100%, 40%);
+@darkHighContrastBaseAdTClr: hsl(0, 100%, 90%);
+@darkHighContrastBaseAdLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseAdLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseAsBgClr: @darkHighContrastBaseAtBgClr;
+@darkHighContrastBaseAsBClr: @darkHighContrastBaseAtBClr;
+@darkHighContrastBaseAsTClr: @darkHighContrastBaseAtTClr;
+@darkHighContrastBaseAsLClr: @darkHighContrastBaseAtLClr;
+@darkHighContrastBaseAsLHClr: @darkHighContrastBaseAtLHClr;
+
+@darkHighContrastBaseAhBgClr: @darkHighContrastBaseAtBgClr;
+@darkHighContrastBaseAhBClr: @darkHighContrastBaseAtBClr;
+@darkHighContrastBaseAhTClr: @darkHighContrastBaseAtTClr;
+@darkHighContrastBaseAhLClr: @darkHighContrastBaseAtLClr;
+@darkHighContrastBaseAhLHClr: @darkHighContrastBaseAtLHClr;
+
+@darkHighContrastBaseAiBgClr: hsl(207, 73%, 0%);
+@darkHighContrastBaseAiBClr: hsl(208, 77%, 65%);
+@darkHighContrastBaseAiTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseAiLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseAiLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseAnBgClr: @darkHighContrastBaseAiBgClr;
+@darkHighContrastBaseAnBClr: @darkHighContrastBaseAiBClr;
+@darkHighContrastBaseAnTClr: @darkHighContrastBaseAiTClr;
+@darkHighContrastBaseAnLClr: @darkHighContrastBaseAiLClr;
+@darkHighContrastBaseAnLHClr: @darkHighContrastBaseAiLHClr;
+
+@darkHighContrastBaseAcBgClr: @darkHighContrastBaseAwBgClr;
+@darkHighContrastBaseAcBClr: @darkHighContrastBaseAwBClr;
+@darkHighContrastBaseAcTClr: @darkHighContrastBaseAwTClr;
+@darkHighContrastBaseAcLClr: @darkHighContrastBaseAwLClr;
+@darkHighContrastBaseAcLHClr: @darkHighContrastBaseAwLHClr;
+
+@darkHighContrastBaseAeBgClr: @darkHighContrastBaseAdBgClr;
+@darkHighContrastBaseAeBClr: @darkHighContrastBaseAdBClr;
+@darkHighContrastBaseAeTClr: @darkHighContrastBaseAdTClr;
+@darkHighContrastBaseAeLClr: @darkHighContrastBaseAdLClr;
+@darkHighContrastBaseAeLHClr: @darkHighContrastBaseAdLHClr;
+
+@darkHighContrastBaseBqAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseBqBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseBqBClr: hsl(210, 10%, 49%);
+@darkHighContrastBaseBqTClr: hsl(0, 0%, 90%);
+@darkHighContrastBaseBqLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseBqLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseCdAClr: hsl(211, 49%, 85%);
+@darkHighContrastBaseCdBgAClr: hsl(211, 49%, 0%);
+@darkHighContrastBaseCdBgClr: @darkHighContrastBaseAaBgClr;
+@darkHighContrastBaseCdBClr: @darkHighContrastBaseAaBClr;
+@darkHighContrastBaseCdTClr: @darkHighContrastBaseAaTClr;
+@darkHighContrastBaseCdT2Clr: hsla(211, 29%, 98%, 0.4);
+@darkHighContrastBaseCdLClr: @darkHighContrastBaseAaLClr;
+@darkHighContrastBaseCdLHClr: @darkHighContrastBaseAaLHClr;
+
+@darkHighContrastBasePrAClr: @darkHighContrastBaseCdAClr;
+@darkHighContrastBasePrBgAClr: @darkHighContrastBaseCdBgAClr;
+@darkHighContrastBasePrBgClr: @darkHighContrastBaseCdBgClr;
+@darkHighContrastBasePrBClr: @darkHighContrastBaseCdBClr;
+@darkHighContrastBasePrB2Clr: hsla(0, 0%, 47%, 66%);
+@darkHighContrastBasePrTClr: @darkHighContrastBaseCdBgClr;
+@darkHighContrastBasePrLNClr: hsla(0, 0%, 0%, 0.3);
+@darkHighContrastBasePrLClr: @darkHighContrastBaseCdLClr;
+@darkHighContrastBasePrLHClr: @darkHighContrastBaseCdLHClr;
+
+@darkHighContrastBaseTeAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseTeBgAClr: hsl(211, 49%, 80%);
+@darkHighContrastBaseTeBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseTeBClr: hsl(210, 10%, 500%);
+@darkHighContrastBaseTeTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseTeLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseTeLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseToAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseToBgAClr: hsl(211, 49%, 0%);
+@darkHighContrastBaseToBgClr: hsl(0, 0%, 0%);
+@darkHighContrastBaseToBClr: hsl(210, 10%, 50%);
+@darkHighContrastBaseToTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseToLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseToLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseSdAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseSdBgClr: hsl(0, 0%, 2%);
+@darkHighContrastBaseSdBClr: hsl(0, 0%, 50%);
+@darkHighContrastBaseSdTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseSdLClr: @darkHighContrastBaseLClr;
+@darkHighContrastBaseSdLHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseFoAClr: @darkHighContrastBaseNvAClr;
+@darkHighContrastBaseFoBClr: hsl(36, 97%, 62%);
+@darkHighContrastBaseFoBgClr: @darkHighContrastBaseNvBgClr;
+@darkHighContrastBaseFoTClr: @darkHighContrastBaseNvTClr;
+@darkHighContrastBaseFoLClr: @darkHighContrastBaseNvLClr;
+@darkHighContrastBaseFoLHClr: @darkHighContrastBaseNvLHClr;
+
+@darkHighContrastBaseInAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseInTClr: @darkHighContrastBaseTClr;
+@darkHighContrastBaseInHClr: @darkHighContrastBaseLHClr;
+
+@darkHighContrastBaseBtnAClr: @darkHighContrastBaseAClr;
+@darkHighContrastBaseBtnHClr: @darkHighContrastBaseLHClr;
+@darkHighContrastBaseBhBgClr: @darkHighContrastBaseBtnBgClr;
+
+@darkHighContrastBaseSEmailClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSContactClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSFacebookClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSGithubClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSGoogleClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSLinkedinClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSPinterestClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSRedditClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSRssClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSSoundcloudClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSStackOverflowClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSTwitterClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSMastodonClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSDiasporaClr: hsl(209, 69%, 73%);
+@darkHighContrastBaseSYoutubeClr: hsl(209, 69%, 73%);
+
+// Print colors
+
+@printBaseAClr: @baseAClr;
+@printBaseSdA2Clr: @baseSdA2Clr;
+@printBaseFClr: @baseFClr;
+@printBaseBgClr: transparent;
+@printBaseTClr: black;
+@printBaseT2Clr: @baseT2Clr;
+@printBaseSdT2Clr: @baseSdT2Clr;
+@printBaseTrClr: @baseTrClr;
+@printBaseBClr: @baseBClr;
+@printBaseLClr: @printBaseAClr;
+@printBaseLHClr: @baseLHClr;
+@printBaseArBgClr: @baseArBgClr;
+
+@printBaseNvAClr: @baseNvAClr;
+@printBaseNvBgClr: transparent;
+@printBaseNvBClr: @baseNvBClr;
+@printBaseNvTClr: black;
+@printBaseNvLClr: @baseNvLClr;
+@printBaseNvLHClr: @baseNvLHClr;
+
+@printBaseInBgClr: @baseInBgClr;
+@printBaseInBClr: @baseInBClr;
+
+@printBaseBtnBgAClr: @baseBtnBgAClr;
+@printBaseBtnBgClr: @baseBtnBgClr;
+@printBaseBtnBClr: @baseBtnBClr;
+@printBaseBtnTClr: @printBaseTClr;
+
+@printBaseAaBgClr: @baseAaBgClr;
+@printBaseAaBClr: @baseAaBClr;
+@printBaseAaTClr: @printBaseTClr;
+@printBaseAaLClr: @printBaseLClr;
+@printBaseAaLHClr: @printBaseLHClr;
+
+@printBaseAtBgClr: @baseAtBgClr;
+@printBaseAtBClr: @baseAtBClr;
+@printBaseAtTClr: @baseAtTClr;
+@printBaseAtLClr: @printBaseLClr;
+@printBaseAtLHClr: @printBaseLHClr;
+
+@printBaseAwBgClr: @baseAwBgClr;
+@printBaseAwBClr: @baseAwBClr;
+@printBaseAwTClr: @baseAwTClr;
+@printBaseAwLClr: @printBaseLClr;
+@printBaseAwLHClr: @printBaseLHClr;
+
+@printBaseAdBgClr: @baseAdBgClr;
+@printBaseAdBClr: @baseAdBClr;
+@printBaseAdTClr: @baseAdTClr;
+@printBaseAdLClr: @printBaseLClr;
+@printBaseAdLHClr: @printBaseLHClr;
+
+@printBaseAsBgClr: @printBaseAtBgClr;
+@printBaseAsBClr: @printBaseAtBClr;
+@printBaseAsTClr: @printBaseAtTClr;
+@printBaseAsLClr: @printBaseAtLClr;
+@printBaseAsLHClr: @printBaseAtLHClr;
+
+@printBaseAhBgClr: @printBaseAtBgClr;
+@printBaseAhBClr: @printBaseAtBClr;
+@printBaseAhTClr: @printBaseAtTClr;
+@printBaseAhLClr: @printBaseAtLClr;
+@printBaseAhLHClr: @printBaseAtLHClr;
+
+@printBaseAiBgClr: @baseAiBgClr;
+@printBaseAiBClr: @baseAiBClr;
+@printBaseAiTClr: @printBaseTClr;
+@printBaseAiLClr: @printBaseLClr;
+@printBaseAiLHClr: @printBaseLHClr;
+
+@printBaseAnBgClr: @printBaseAiBgClr;
+@printBaseAnBClr: @printBaseAiBClr;
+@printBaseAnTClr: @printBaseAiTClr;
+@printBaseAnLClr: @printBaseAiLClr;
+@printBaseAnLHClr: @printBaseAiLHClr;
+
+@printBaseAcBgClr: @printBaseAwBgClr;
+@printBaseAcBClr: @printBaseAwBClr;
+@printBaseAcTClr: @printBaseAwTClr;
+@printBaseAcLClr: @printBaseAwLClr;
+@printBaseAcLHClr: @printBaseAwLHClr;
+
+@printBaseAeBgClr: @printBaseAdBgClr;
+@printBaseAeBClr: @printBaseAdBClr;
+@printBaseAeTClr: @printBaseAdTClr;
+@printBaseAeLClr: @printBaseAdLClr;
+@printBaseAeLHClr: @printBaseAdLHClr;
+
+@printBaseBqAClr: @printBaseAClr;
+@printBaseBqBgClr: @baseBqBgClr;
+@printBaseBqBClr: @baseBqBClr;
+@printBaseBqTClr: @baseBqTClr;
+@printBaseBqLClr: @printBaseLClr;
+@printBaseBqLHClr: @printBaseLHClr;
+
+@printBaseCdAClr: @baseCdAClr;
+@printBaseCdBgAClr: @baseCdBgAClr;
+@printBaseCdBgClr: @printBaseAaBgClr;
+@printBaseCdBClr: @printBaseAaBClr;
+@printBaseCdTClr: @printBaseAaTClr;
+@printBaseCdT2Clr: @baseCdT2Clr;
+@printBaseCdLClr: @printBaseAaLClr;
+@printBaseCdLHClr: @printBaseAaLHClr;
+
+
+@printBasePrAClr: @printBaseCdAClr;
+@printBasePrBgAClr: @printBaseCdBgAClr;
+@printBasePrBgClr: @printBaseCdBgClr;
+@printBasePrBClr: @printBaseCdBClr;
+@printBasePrB2Clr: @basePrB2Clr;
+@printBasePrTClr: @printBaseCdBgClr;
+@printBasePrLNClr: @basePrLNClr;
+@printBasePrLClr: @printBaseCdLClr;
+@printBasePrLHClr: @printBaseCdLHClr;
+
+@printBaseTeAClr: @printBaseAClr;
+@printBaseTeBgAClr: @baseTeBgAClr;
+@printBaseTeBgClr: @baseTeBgClr;
+@printBaseTeBClr: @baseTeBClr;
+@printBaseTeTClr: @printBaseTClr;
+@printBaseTeLClr: @printBaseLClr;
+@printBaseTeLHClr: @printBaseLHClr;
+
+@printBaseToAClr: @printBaseAClr;
+@printBaseToBgAClr: @baseToBgAClr;
+@printBaseToBgClr: @baseToBgClr;
+@printBaseToBClr: @baseToBClr;
+@printBaseToTClr: @printBaseTClr;
+@printBaseToLClr: @printBaseLClr;
+@printBaseToLHClr: @printBaseLHClr;
+
+@printBaseSdAClr: @printBaseAClr;
+@printBaseSdBgClr: @baseSdBgClr;
+@printBaseSdBClr: @baseSdBClr;
+@printBaseSdTClr: @printBaseTClr;
+@printBaseSdLClr: @printBaseLClr;
+@printBaseSdLHClr: @printBaseLHClr;
+
+@printBaseFoAClr: @printBaseNvAClr;
+@printBaseFoBClr: @baseFoBClr;
+@printBaseFoBgClr: @printBaseNvBgClr;
+@printBaseFoTClr: @printBaseNvTClr;
+@printBaseFoLClr: @printBaseNvLClr;
+@printBaseFoLHClr: @printBaseNvLHClr;
+
+@printBaseInAClr: @printBaseAClr;
+@printBaseInTClr: @printBaseTClr;
+@printBaseInHClr: @printBaseLHClr;
+
+@printBaseBtnAClr: @printBaseAClr;
+@printBaseBtnHClr: @printBaseLHClr;
+@printBaseBhBgClr: @printBaseBtnBgClr;
+
+@printBaseSEmailClr: @baseSEmailClr;
+@printBaseSContactClr: @baseSContactClr;
+@printBaseSFacebookClr: @baseSFacebookClr;
+@printBaseSGithubClr: @baseSGithubClr;
+@printBaseSGoogleClr: @baseSGoogleClr;
+@printBaseSLinkedinClr: @baseSLinkedinClr;
+@printBaseSPinterestClr: @baseSPinterestClr;
+@printBaseSRedditClr: @baseSRedditClr;
+@printBaseSRssClr: @baseSRssClr;
+@printBaseSSoundcloudClr: @baseSSoundcloudClr;
+@printBaseSStackOverflowClr: @baseSStackOverflowClr;
+@printBaseSTwitterClr: @baseSTwitterClr;
+@printBaseSMastodonClr: @baseSMastodonClr;
+@printBaseSDiasporaClr: @baseSDiasporaClr;
+@printBaseSYoutubeClr: @baseSYoutubeClr;

ui/custom-blocks.less

@@ -0,0 +1,120 @@
+.custom-block {
+  background-color: @AaBgClr;
+  border-color: @AaBClr;
+  color: @AaTClr;
+  a, a:visited {
+    color: @AaLClr;
+    :hover {
+      color: @AaLHClr;
+    }
+  }
+  .custom-block-title {
+    font-weight: 600;
+    margin-bottom: -0.4rem;
+  }
+  &.tip, &.warning, &.danger {
+    padding: .1rem 1.5rem;
+    border-left-width: .5rem;
+    border-left-style: solid;
+    margin: 1rem 0;
+  }
+  &.tip {
+    background-color: @AtBgClr;
+    border-color: @AtBClr;
+    color: @AtTClr;
+    a, a:visited {
+      color: @AtLClr;
+      :hover {
+        color: @AtLHClr;
+      }
+    }
+  }
+  &.hint {
+    background-color: @AhBgClr;
+    border-color: @AhBClr;
+    color: @AhTClr;
+    a, a:visited {
+      color: @AhLClr;
+      :hover {
+        color: @AhLHClr;
+      }
+    }
+  }
+  &.important {
+    background-color: @AiBgClr;
+    border-color: @AiBClr;
+    color: @AiTClr;
+    a, a:visited {
+      color: @AiLClr;
+      :hover {
+        color: @AiLHClr;
+      }
+    }
+  }
+  &.note {
+    background-color: @AnBgClr;
+    border-color: @AnBClr;
+    color: @AnTClr;
+    a, a:visited {
+      color: @AnLClr;
+      :hover {
+        color: @AnLHClr;
+      }
+    }
+  }
+  &.success {
+    background-color: @AsBgClr;
+    border-color: @AsBClr;
+    color: @AsTClr;
+    a, a:visited {
+      color: @AsLClr;
+      :hover {
+        color: @AsLHClr;
+      }
+    }
+  }
+  &.warning {
+    background-color: @AwBgClr;
+    border-color: @AwBClr;
+    color: @AwTClr;
+    a, a:visited {
+      color: @AwLClr;
+      :hover {
+        color: @AwLHClr;
+      }
+    }
+  }
+  &.caution {
+    background-color: @AcBgClr;
+    border-color: @AcBClr;
+    color: @AcTClr;
+    a, a:visited {
+      color: @AcLClr;
+      :hover {
+        color: @AcLHClr;
+      }
+    }
+  }
+  &.danger {
+    background-color: @AdBgClr;
+    border-color: @AdBClr;
+    color: @AdTClr;
+    a, a:visited {
+      color: @AdLClr;
+      :hover {
+        color: @AdLHClr;
+      }
+    }
+  }
+  &.error {
+    background-color: @AeBgClr;
+    border-color: @AeBClr;
+    color: @AeTClr;
+    a, a:visited {
+      color: @AeLClr;
+      :hover {
+        color: @AeLHClr;
+      }
+    }
+  }
+}

ui/input.less

@@ -0,0 +1,37 @@
+input, textarea {
+  background-color: @InBgClr;
+  color: @InTClr;
+  border: solid 0.1em @InBClr;
+  text-decoration: none;
+  border-radius: 0.3em;
+  padding: 0.2em 0.8em 0.2em 0.8em;
+  margin: 0.2em;
+  font-size: 1rem;
+
+  + span.validity {
+    height: 1.5em;
+    width: 1.5ex;
+
+    &:invalid {
+      border: solid 0.12em @AeBClr;
+    }
+    &:focus {
+      border: solid 0.1em @InBClr;
+    }
+    + span.validity::after {
+      content: "✘";
+      color: @AeBClr;
+    }
+  }
+
+  &:valid {
+    border: solid 0.12em @AsBClr;
+    &:focus {
+      border: solid 0.1em @InBClr;
+    }
+    + span.validity::after {
+      content: "✓";
+      color: @AsBClr;
+    }
+  }
+}

ui/mobile.less

@@ -1,14 +1,8 @@
-@import './config.less';
-
-:root {
-  --mobileSidebarWidth: calc(var(--sidebarWidth) * 0.82);
-}
-
 // narrow desktop / iPad
 @media (max-width: @MQNarrow) {
   .sidebar {
     font-size: 1.1rem;
-    width: var(--mobileSidebarWidth);
+    width: @sidebarWidth;
   }
   .page {
     padding-left: 0;
@@ -19,13 +13,17 @@
 @media (max-width: @MQMobile) {
   .sidebar {
     top: 0;
-    padding-top: var(--navbarHeight);
     transform: translateX(-100%);
     transition: transform .2s ease;
+    margin-right: calc(0rem - @sidebarWidth);
   }
   .page {
     padding-left: 0;
-    margin-left: calc(0rem - (var(--sidebarWidth)));
+    margin-left: 0;
+  }
+  .home-link {
+    text-align: right;
+    flex-grow: 1;
   }
   .theme-container {
     &.sidebar-open {

ui/no-weasyprint.less

@@ -0,0 +1,154 @@
+#app, html, body {
+  min-height: 100vh;
+}
+
+#app {
+  .navbar {
+    box-shadow: 0 0.3em @NvBClr, 0 0 0.3em 0.4em @NvBgClr;
+  }
+
+  footer.footer {
+    box-shadow: 0 -0.3em @FoBClr, 0 0 0.3em 0.4em @FoBgClr;
+  }
+}
+
+:focus {
+  box-shadow: 0 0 0.4em 0.3em @FClr !important;
+}
+
+.flexgroup {
+  > * {
+    box-shadow: 0 0 0.2em 0.1em @BClr;
+    &a, &a:visited {
+      box-shadow: 0 0 0.2em 0.1em @LClr;
+      &:hover {
+        box-shadow: 0 0 0.2em 0.1em @LHClr;
+      }
+    }
+  }
+}
+
+.postlist-style-flex, .flexgroup {
+  > * {
+    box-shadow: 0 0 0.2em 0.1em @BClr;
+    &a, &a:visited {
+      box-shadow: 0 0 0.2em 0.1em @LClr;
+      &:hover {
+        box-shadow: 0 0 0.2em 0.1em @LHClr;
+      }
+    }
+  }
+}
+
+.sidebar {
+  box-shadow: 0 0 @SdBClr, -0.3em 0.1em 0.2em 0.3em @NvBgClr;
+}
+
+a.fasvglink, a:visited.fasvglink {
+  svg {
+    fill: @BtnTClr;
+  }
+
+  &.email svg {
+    fill: @SEmailClr;
+  }
+
+  &.contact svg {
+    fill: @SContactClr;
+  }
+
+  &.facebook svg {
+    fill: @SFacebookClr;
+  }
+
+  &.github svg {
+    fill: @SGithubClr;
+  }
+
+  &.google svg {
+    fill: @SGoogleClr;
+  }
+
+  &.linkedin svg {
+    fill: @SLinkedinClr;
+  }
+
+  &.pinterest svg {
+    fill: @SPinterestClr;
+  }
+
+  &.reddit svg {
+    fill: @SRedditClr;
+  }
+
+  &.rss svg {
+    fill: @SRssClr;
+  }
+
+  &.soundcloud svg {
+    fill: @SSoundcloudClr;
+  }
+
+  &.stackOverflow svg {
+    fill: @SStackOverflowClr;
+  }
+
+  &.twitter svg {
+    fill: @STwitterClr;
+  }
+
+  &.mastodon svg {
+    fill: @SMastodonClr;
+  }
+
+  &.diaspora svg {
+    fill: @SDiasporaClr;
+  }
+
+  &.youtube svg {
+    fill: @SYoutubeClr;
+  }
+
+  &:hover {
+    -webkit-transform: scale(1.3em);
+    transform: scale(1.3em);
+    svg {
+      fill: @BtnAClr !important;
+    }
+  }
+}
+
+svg.fasvg {
+  fill: @TClr;
+}
+
+ul.social {
+  font-size: 0.9em;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+
+  > li {
+    margin: 0.5em;
+    flex-basis: min-content;
+    flex-grow: 0;
+    list-style: none;
+  }
+}
+
+@media print {
+  #app {
+    .navbar {
+      box-shadow: none;
+    }
+
+    footer.footer {
+      box-shadow: none;
+    }
+  }
+  main.content {
+    column-count: 2;
+    column-gap: 3em;
+    column-rule: solid 0.2em @BClr;
+  }
+}

ui/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "sphinx_nervproject_theme",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "less": "^3.11.1",
-    "less-loader": "^6.1.0",
-    "npm": "^6.14.5",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {
-      "no-console": "off"
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie<=12"
-  ]
-}

ui/print.less

@@ -0,0 +1,83 @@
+@media print {
+  @page {
+    margin: 0mm auto !important;
+    padding: 7rem 0 7rem 0;
+    size: A4;
+  }
+
+  .print-only {
+    display: block;
+  }
+  .no-print {
+    display: none;
+  }
+
+  main.content {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidebar, .sidebar-mask, .nav-links,
+  .sidebar-button {
+    display: none;
+  }
+  html {
+    padding: 0;
+    margin: 0;
+    width: 210mm;
+    size: A4;
+    font-size: 12pt;
+    hyphens: auto;
+    overflow-wrap: break-word;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+  }
+  #app {
+    footer.footer {
+      position: fixed;
+      bottom: 297mm;
+      left: 10mm;
+      width: 190mm;
+      height: 7rem;
+      z-index: 1000;
+      margin: 0;
+      .pagecount {
+        position: absolute;
+        bottom: 1cm;
+        left: 1cm;
+        font-weight: bold;
+        content: counter(page) "/" counter(pages);
+      }
+    }
+
+    header.navbar {
+      position: fixed;
+      top: 0mm;
+      left: 10mm;
+      width: 190mm;
+      height: 7rem;
+      z-index: 1000;
+      margin: 0;
+
+      .home-link {
+        display: none;
+      }
+    }
+    h1 {
+      column-span: all;
+    }
+    h2 {
+      page-break-before: always;
+      width: 100%;
+      text-align: right;
+      font-size: 3rem;
+      column-span: all;
+    }
+    pre, table {
+      column-span: all;
+    }
+  }
+}

ui/public/index.html

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>ui</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-
-    <div id="app" class="theme-container" :class="pageClasses">
-      <navbar @toggle-sidebar="toggleSidebar">
-        <div class="links">
-          <navlinks class="can-hide">
-            xxx
-          </navlinks>
-        </div>
-        <router-link to='/' class="home-link">
-          <span class="site-name">Foo</span>
-        </router-link>
-      </navbar>
-
-      <div
-        class="sidebar-mask"
-        @click="toggleSidebar(false)"
-        ></div>
-
-      <sidebar
-        @toggle-sidebar="toggleSidebar"
-        >
-        <navlinks>
-          xxx
-        </navlinks>
-
-        <div class="sidebar-links" role="navigation" aria-label="main navigation">
-          <div class="sidebar-group">
-            <p class="caption"><span class="caption-text">Docs</span></p>
-            <ul class="current">
-              <li class="toctree-l1 current"><a class="current reference internal" href="#">About</a><ul>
-                  <li class="toctree-l2"><a class="reference internal" href="#usage">Usage</a></li>
-                  <li class="toctree-l2"><a class="reference internal" href="#status">Status</a></li>
-                </ul>
-              </li>
-              <li class="toctree-l1"><a class="reference internal" href="configuration.html">Configuration</a></li>
-            </ul>
-
-            <p class="caption"><span class="caption-text">Demo</span></p>
-            <ul class="current">
-              <li class="toctree-l1 current"><a class="reference internal" href="index.html">Demo</a>
-                <ul class="current">
-                  <li class="toctree-l2 current"><a class="current reference internal" href="#">Basic Specification</a></li>
-                  <li class="toctree-l2"><a class="reference internal" href="admonition.html">Admonitions</a></li>
-                  <li class="toctree-l2"><a class="reference internal" href="domain.html">domain</a></li>
-                  <li class="toctree-l2"><a class="reference internal" href="extensions.html">Extensions</a></li>
-                </ul>
-              </li>
-            </ul>
-
-          </div>
-        </div><!-- sidebar-links -->
-
-      </sidebar>
-
-      <page> <!-- :sidebar-items="sidebarItems"> -->
-        <div class="content">
-          <h1 id="my-page-content">My page content
-            <a class="headerlink" href="my-page-content">¶</a>
-          </h1>
-
-          <div class="section">
-            <p>section 2</p>
-          </div>
-        </div>
-      </page>
-
-    </div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

ui/sidebar.less

@@ -0,0 +1,439 @@
+.navbar {
+  padding: 0.7rem 1.5rem;
+  background: @NvBgClr;
+  color: @NvTClr;
+  a, span, img {
+    display: inline-block;
+  }
+  .logo {
+    margin-right: 0.8rem;
+    vertical-align: top;
+  }
+  .site-name {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: @NvTClr;
+  }
+  .links {
+    font-size: 0.9rem;
+    right: 1.5rem;
+    top: 0.7rem;
+  }
+}
+
+.nav-links {
+  display: inline-block;
+  a, a:visited {
+    line-height: 1.4rem;
+    color: inherit;
+    &.link-active {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvAClr;
+    }
+    &:hover {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvLHClr;
+    }
+  }
+  .nav-item {
+    display: inline-block;
+    margin-left: 1.5rem;
+    line-height: 2rem;
+  }
+  .repo-link {
+    margin-left: 1.5rem;
+  }
+  .nav-links summary {
+    &:hover, &.link-active {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvLClr;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon.outbound {
+  color: @TClr;
+  display: inline-block;
+}
+
+.page {
+  padding-top: 0rem;
+  padding-bottom: 2rem;
+}
+
+.page-nav {
+  .wrapper();
+  padding-top: 1rem;
+  padding-bottom: 0;
+  .inner {
+    min-height: 2rem;
+    margin-top: 0;
+    border-top: 0.1em solid @BClr;
+    padding-top: 1rem;
+    overflow: auto // clear float;
+  }
+  .next {
+    float: right;
+  }
+}
+
+.sidebar {
+  font-size: 0.95em;
+  background-color: @SdBgClr;
+  width: @sidebarWidth;
+  min-height: 100%;
+  z-index: 10;
+  box-sizing: border-box;
+  border-right: 0.2em solid @SdBClr;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+  a, a:visited {
+    display: inline-block;
+  }
+  .nav-links {
+    display: none;
+    border-bottom: 0.3em solid @SdBClr;
+    padding: 0.5rem 0 0.75rem 0;
+    a, a:visited {
+      font-weight: 600;
+    }
+    .nav-item, .repo-link {
+      display: block;
+      line-height: 1.25rem;
+      font-size: 1.1em;
+      padding: 0.5rem 0 0.5rem 1.5rem;
+    }
+  }
+  .searchbox {
+    font-weight: 600;
+    font-size: 1.1em;
+    line-height: 1.5rem;
+    padding: 1rem 0 1.5rem 1.5rem;
+    border-bottom: 0.1em solid @BClr;
+    input[type='text'] {
+      width: calc(@sidebarWidth - 4.5rem) !important;
+      margin-right: 1.5em;
+    }
+  }
+  .sidebar-links {
+    padding: 1.5rem 0;
+  }
+  .toctree-l1 a, .toctree-l2 a, .toctree-l3 a, .toctree-l4 a {
+    font-weight: 400;
+    display: inline-block;
+    color: @SdTClr;
+    line-height: 1.4;
+    width: 100%;
+    box-sizing: border-box;
+    border-left: 0.5rem solid transparent;
+    &.current {
+      color: @SdAClr;
+      font-weight: 600;
+    }
+    &:hover {
+      color: @SdLHClr;
+    }
+  }
+}
+
+.sidebar-group .caption {
+  color: @SdT2Clr;
+  transition: color .15s ease;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-weight: bold;
+  padding: 0 1.5rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  &.open, &:hover {
+    color: inherit;
+  }
+  .arrow {
+    top: -0.12em;
+    left: 0.5em;
+  }
+  &.open .arrow {
+    top: -0.18em;
+  }
+}
+
+.sidebar .toctree-l1 ul {
+  font-size: 0.95em;
+}
+
+.toctree-l1.current a {
+  border-left: .5rem solid @SdA2Clr;
+}
+.toctree-l1 a {
+  padding: 0.35rem 1rem 0.35rem 1.25rem;
+  &.current {
+    border-left-color: @SdAClr;
+  }
+}
+.toctree-l2 a {
+  padding: 0.25rem 1rem 0.25rem 1.75rem;
+}
+.toctree-l3 a {
+  padding: 0.15rem 1rem 0.15rem 1.75rem;
+}
+.toctree-l4 a {
+  padding: 0.05rem 1rem 0.05rem 1.75rem;
+}
+
+.home {
+  padding: var(--navbarHeight) 2rem 0;
+  max-width: 96em;
+  margin: 0 auto;
+  .hero {
+    text-align: center;
+    img {
+      max-height: 28em;
+      display: block;
+      margin: 3rem auto 1.5rem;
+    }
+    h1 {
+      font-size: 3rem;
+    }
+    h1, .description, .action {
+      margin: 1.8rem auto;
+    }
+    .description {
+      max-width: 35rem;
+      font-size: 1.6rem;
+      line-height: 1.3;
+      color: @T2Clr;
+    }
+  }
+  .footer {
+    padding: 2.5rem;
+    border-top: 0.1em solid @BClr;
+    text-align: center;
+    color: @FoTClr;
+  }
+}
+
+.sidebar-button {
+  display: none;
+  width: 1.65rem;
+  height: 1.65rem;
+  padding: 0.2rem;
+  border: 0.1em solid @NvBClr !important;
+  border-radius: 0.1em !important;
+  background-color: transparent;
+  svg {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+.sidebar-group {
+  &:not(.first) {
+    margin-top: 1em;
+  }
+  .sidebar-group {
+    padding-left: 0.5em;
+  }
+  &:not(.collapsable) {
+    .sidebar-heading {
+      cursor: auto;
+      color: inherit;
+    }
+  }
+}
+
+.sidebar-heading {
+  color: @SdTClr;
+  transition: color .15s ease;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-weight: bold;
+  padding: 0 1.5rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  &.open, &:hover {
+    color: inherit;
+  }
+  .arrow {
+    top: -0.12em;
+    left: 0.5em;
+  }
+  &.open .arrow {
+    top: -0.18em;
+  }
+}
+
+.sidebar-group-items {
+  transition: height .1s ease-out;
+  overflow: hidden;
+}
+
+.sidebar .sidebar-sub-headers {
+  padding-left: 1rem;
+  font-size: 0.95em;
+}
+
+a.sidebar-link, a:visited.sidebar-link {
+  font-weight: 400;
+  display: inline-block;
+  color: @SdLClr;
+  border-left: 0.25rem solid transparent;
+  padding: 0.35rem 1rem 0.35rem 1.25rem;
+  line-height: 1.4;
+  width: 100%;
+  box-sizing: border-box;
+  &:hover {
+    color: @SdLHClr;
+  }
+  &.active {
+    font-weight: 600;
+    color: @SdAClr;
+    border-left-color: @SdAClr;
+  }
+  .sidebar-group & {
+    padding-left: 2rem;
+  }
+  .sidebar-sub-headers & {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-left: none;
+    &.active {
+      font-weight: 500;
+    }
+  }
+}
+
+@media (max-width: @MQMobile) {
+  .navbar {
+    .can-hide {
+      display: none;
+    }
+  }
+
+  .nav-links {
+    .nav-item, .repo-link {
+      margin-left: 0;
+    }
+  }
+
+  .sidebar {
+    z-index: 9;
+    .nav-links {
+      display: block;
+    }
+    .sidebar-links {
+      padding: 1rem 0;
+    }
+    &[opened] {
+      transform: translateX(0%);
+      transition: transform .2s ease;
+    }
+  }
+
+  .nav-links details {
+    summary {
+      font-size: 1.2em;
+      font-weight: bold;
+      margin-bottom: 0.2em;
+    }
+    font-size: 0.9em;
+    font-weight: normal;
+    ul li.nav-link {
+      margin-left: 2.4em;
+      a, a:visited, a:focus {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .sidebar-button {
+    display: inline;
+  }
+}
+
+@media (min-width: @MQMobile) {
+  .nav-links a, .nav-links a:visited {
+    &:hover, &.link-active {
+      color: @NvLClr;
+    }
+  }
+  .nav-item > a:not(.external),
+  .nav-item > a:visited:not(.external) {
+    &:hover, &.link-active {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvBClr;
+      color: @NvLHClr;
+    }
+  }
+}
+
+@media (min-width: @MQMobile) {
+  .nav-links summary {
+    cursor: pointer;
+    color: @NvLClr;
+    &.link-active, .link-active {
+      color: @NvAClr;
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvAClr;
+    }
+    &:hover {
+      color: @NvLHClr;
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvLHClr;
+    }
+  }
+  .nav-item > a:not(.external),
+  .nav-item > a:visited:not(.external) {
+    &.link-active {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvAClr;
+    }
+    &:hover {
+      margin-bottom: -0.2em;
+      border-bottom: 0.2em solid @NvLHClr;
+    }
+  }
+}
+
+@media (max-width: @MQMobileNarrow) {
+  .home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    .hero {
+      img {
+        max-height: 21em;
+        margin: 2rem auto 1.2rem;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      h1, .description, .action {
+        margin: 1.2rem auto;
+      }
+      .description {
+        font-size: 1.2rem;
+      }
+    }
+  }
+}
+
+@media (min-width: @MQMobile + 0.2ex) {
+  .theme-container.no-sidebar {
+    .sidebar {
+        display: none;
+    }
+    .page {
+      padding-left: 0;
+    }
+    img.align-right, figure.align-right {
+      float: none;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}

ui/sphinx.less

@@ -1,10 +1,3 @@
-@import './vuepress/styles/config.less';
-
-/* fix anchor link positioning  for fixed navbar */
-// FIXME this is not enough as it works only for section headers
-:root {
-  --anchorHeight: calc(var(--navbarHeight) + 0.5rem);
-}
 .content .section {
   margin-bottom: 0;
   &:hover {
@@ -79,7 +72,7 @@ ul.breadcrumbs {
   line-height: 1.25em;
   font-size: 1.65rem;
   padding-bottom: .3rem;
-  border-bottom: 0.1em solid var(--BClr);
+  border-bottom: 0.1em solid @BClr;
 }
 
 
@@ -89,7 +82,6 @@ ul.breadcrumbs {
   clear: both;
   min-height: 2rem;
   padding-top: 1rem;
-  overflow: auto;
   color: grey;
   font-size: small;
   line-height: 1.5rem;
@@ -107,7 +99,7 @@ ul.breadcrumbs {
 }
 
 .content .highlighted {
-  background-color: var(--AClr); //#fbe54e;
+  background-color: @AClr; //#fbe54e;
   font-weight: bold;
   padding: 0 4px;
 }
@@ -119,13 +111,13 @@ ul.breadcrumbs {
   border-left-style: solid;
   margin: 1rem 0;
   // default color
-  background-color: var(--AaBgClr);
+  background-color: @AaBgClr;
-  border-color: var(--AaBClr);
+  border-color: @AaBClr;
-  color: var(--AaTClr);
+  color: @AaTClr;
   a, a:visited {
-    color: var(--AaLClr);
+    color: @AaLClr;
     &:hover {
-      color: var(--AaLHClr);
+      color: @AaLHClr;
     }
   }
 
@@ -134,115 +126,115 @@ ul.breadcrumbs {
     margin-bottom: -0.4rem;
   }
   &.success {
-    background-color: var(--AsBgClr);
+    background-color: @AsBgClr;
-    border-color: var(--AsBClr);
+    border-color: @AsBClr;
-    color: var(--AsTClr);
+    color: @AsTClr;
     a, a:visited {
-      color: var(--AsLClr);
+      color: @AsLClr;
       &:hover {
-        color: var(--AsLHClr);
+        color: @AsLHClr;
       }
     }
   }
   &.hint {
-    background-color: var(--AhBgClr);
+    background-color: @AhBgClr;
-    border-color: var(--AhBClr);
+    border-color: @AhBClr;
-    color: var(--AhTClr);
+    color: @AhTClr;
     a, a:visited {
-      color: var(--AhLClr);
+      color: @AhLClr;
       &:hover {
-        color: var(--AhLHClr);
+        color: @AhLHClr;
       }
     }
   }
   &.tip {
-    background-color: var(--AtBgClr);
+    background-color: @AtBgClr;
-    border-color: var(--AtBClr);
+    border-color: @AtBClr;
-    color: var(--AtTClr);
+    color: @AtTClr;
     a, a:visited {
-      color: var(--AtLClr);
+      color: @AtLClr;
       &:hover {
-        color: var(--AtLHClr);
+        color: @AtLHClr;
       }
     }
   }
   &.important {
-    background-color: var(--AiBgClr);
+    background-color: @AiBgClr;
-    border-color: var(--AiBClr);
+    border-color: @AiBClr;
-    color: var(--AiTClr);
+    color: @AiTClr;
     a, a:visited {
-      color: var(--AiLClr);
+      color: @AiLClr;
       &:hover {
-        color: var(--AiLHClr);
+        color: @AiLHClr;
       }
     }
   }
   &.note {
-    background-color: var(--AnBgClr);
+    background-color: @AnBgClr;
-    border-color: var(--AnBClr);
+    border-color: @AnBClr;
-    color: var(--AnTClr);
+    color: @AnTClr;
     a, a:visited {
-      color: var(--AnLClr);
+      color: @AnLClr;
       &:hover {
-        color: var(--AnLHClr);
+        color: @AnLHClr;
       }
     }
   }
   &.warning {
-    background-color: var(--AwBgClr);
+    background-color: @AwBgClr;
-    border-color: var(--AwBClr);
+    border-color: @AwBClr;
-    color: var(--AwTClr);
+    color: @AwTClr;
     a, a:visited {
-      color: var(--AwLClr);
+      color: @AwLClr;
       &:hover {
-        color: var(--AwLHClr);
+        color: @AwLHClr;
       }
     }
   }
   &.danger {
-    background-color: var(--AdBgClr);
+    background-color: @AdBgClr;
-    border-color: var(--AdBClr);
+    border-color: @AdBClr;
-    color: var(--AdTClr);
+    color: @AdTClr;
     a, a:visited {
-      color: var(--AdLClr);
+      color: @AdLClr;
       &:hover {
-        color: var(--AdLHClr);
+        color: @AdLHClr;
       }
     }
   }
   &.caution {
-    background-color: var(--AcBgClr);
+    background-color: @AcBgClr;
-    border-color: var(--AcBClr);
+    border-color: @AcBClr;
-    color: var(--AcTClr);
+    color: @AcTClr;
     a, a:visited {
-      color: var(--AcLClr);
+      color: @AcLClr;
       &:hover {
-        color: var(--AcLHClr);
+        color: @AcLHClr;
       }
     }
   }
   &.danger {
-    background-color: var(--AdBgClr);
+    background-color: @AdBgClr;
-    border-color: var(--AdBClr);
+    border-color: @AdBClr;
-    color: var(--AdTClr);
+    color: @AdTClr;
     a, a:visited {
-      color: var(--AdLClr);
+      color: @AdLClr;
       &:hover {
-        color: var(--AdLHClr);
+        color: @AdLHClr;
       }
     }
   }
 }
 
 blockquote {
-  background-color: var(--BqBgClr);
+  background-color: @BqBgClr;
-  border-color: var(--BqBClr);
+  border-color: @BqBClr;
   margin-left: -0.4rem;
-  color: var(--BqTClr);
+  color: @BqTClr;
   a, a:visited {
-    color: var(--BqLClr);
+    color: @BqLClr;
     &:hover {
-      color: var(--BqLHClr);
+      color: @BqLHClr;
     }
   }
 }

ui/src/NavLinks.vue

@@ -1,166 +0,0 @@
-<template>
-  <nav
-    class="nav-links"
-    >
-        <!-- v-if="userLinks.length || repoLink" -->
-        <slot></slot>
-    <!-- <\!-- user links -\-> -->
-    <!-- <div -->
-    <!--   class="nav-item" -->
-    <!--   v-for="item in userLinks" -->
-    <!--   :key="item.link" -->
-    <!-- > -->
-    <!--   <DropdownLink -->
-    <!--     v-if="item.type === 'links'" -->
-    <!--     :item="item" -->
-    <!--   /> -->
-    <!--   <NavLink -->
-    <!--     v-else -->
-    <!--     :item="item" -->
-    <!--   /> -->
-    <!-- </div> -->
-
-    <!-- <\!-- repo link -\-> -->
-    <!-- <a -->
-    <!--   v-if="repoLink" -->
-    <!--   :href="repoLink" -->
-    <!--   class="repo-link" -->
-    <!--   target="_blank" -->
-    <!--   rel="noopener noreferrer" -->
-    <!-- > -->
-    <!--   {{ repoLabel }} -->
-    <!--   <OutboundLink/> -->
-    <!-- </a> -->
-  </nav>
-</template>
-
-<script>
-// import DropdownLink from './DropdownLink.vue'
-// import { resolveNavLinkItem } from './util'
-// import NavLink from './NavLink.vue'
-
-export default {
-/*
-  components: { NavLink, DropdownLink },
-
-  computed: {
-    userNav () {
-      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
-    },
-
-    nav () {
-      const { locales } = this.$site
-      if (locales && Object.keys(locales).length > 1) {
-        const currentLink = this.$page.path
-        const routes = this.$router.options.routes
-        const themeLocales = this.$site.themeConfig.locales || {}
-        const languageDropdown = {
-          text: this.$themeLocaleConfig.selectText || 'Languages',
-          items: Object.keys(locales).map(path => {
-            const locale = locales[path]
-            const text = themeLocales[path] && themeLocales[path].label || locale.lang
-            let link
-            // Stay on the current page
-            if (locale.lang === this.$lang) {
-              link = currentLink
-            } else {
-              // Try to stay on the same page
-              link = currentLink.replace(this.$localeConfig.path, path)
-              // fallback to homepage
-              if (!routes.some(route => route.path === link)) {
-                link = path
-              }
-            }
-            return { text, link }
-          })
-        }
-        return [...this.userNav, languageDropdown]
-      }
-      return this.userNav
-    },
-
-    userLinks () {
-      return (this.nav || []).map(link => {
-        return Object.assign(resolveNavLinkItem(link), {
-          items: (link.items || []).map(resolveNavLinkItem)
-        })
-      })
-    },
-
-    repoLink () {
-      const { repo } = this.$site.themeConfig
-      if (repo) {
-        return /^https?:/.test(repo)
-          ? repo
-          : `https://github.com/${repo}`
-      }
-    },
-
-    repoLabel () {
-      if (!this.repoLink) return
-      if (this.$site.themeConfig.repoLabel) {
-        return this.$site.themeConfig.repoLabel
-      }
-
-      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
-      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
-      for (let i = 0; i < platforms.length; i++) {
-        const platform = platforms[i]
-        if (new RegExp(platform, 'i').test(repoHost)) {
-          return platform
-        }
-      }
-
-      return 'Source'
-    }
-  }
-*/
-}
-</script>
-
-<style lang="less">
-@import './vuepress/styles/config.less';
-
-.nav-links {
-  display inline-block :hover, .router-link-active {
-    border-bottom: solid 0.2em var(--NvAClr);
-  }
-  a, a:visited {
-    line-height: 1.4rem;
-    color: inherit;
-  }
-  .nav-item {
-    position: relative;
-    display: inline-block;
-    margin-left: 1.5rem;
-    line-height: 2rem;
-  }
-  .repo-link {
-    margin-left: 1.5rem;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .nav-links {
-    .nav-item, .repo-link {
-      margin-left: 0;
-    }
-  }
-}
-
-@media (min-width: @MQMobile) {
-  .nav-links a, .nav-links a:visited {
-    &:hover, &.router-link-active {
-      color: var(--NvLClr);
-    }
-  }
-  .nav-item > a:not(.external),
-  .nav-item > a:visited:not(.external) {
-    &:hover, &.router-link-active {
-      margin-bottom: -2px;
-      border-bottom: 2px solid var(--NvBClr);
-      color: var(--NvLHClr);
-    }
-  }
-}
-</style>

ui/src/Navbar.vue

@@ -1,89 +0,0 @@
-<template>
-<header class="navbar">
-  <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
-  <slot></slot>
-
-    <!--   <img -->
-    <!--     class="logo" -->
-    <!--     v-if="$site.themeConfig.logo" -->
-    <!--     :src="$withBase($site.themeConfig.logo)" -->
-    <!--     :alt="$siteTitle" -->
-    <!--   > -->
-    <!--   <span -->
-    <!--     class="site-name" -->
-    <!--     v-if="$siteTitle" -->
-    <!--     :class="{ 'can-hide': $site.themeConfig.logo }" -->
-    <!--   >{{ $siteTitle }}</span> -->
-    <!-- </router-link> -->
-
-    <!-- <div class="links"> -->
-    <!--   <AlgoliaSearchBox -->
-    <!--     v-if="isAlgoliaSearch" -->
-    <!--     :options="algolia" -->
-    <!--   /> -->
-    <!--   <SearchBox v-else-if="$site.themeConfig.search !== false"/> -->
-    <!-- </div> -->
-  </header>
-</template>
-
-<script>
-import SidebarButton from './vuepress/SidebarButton.vue'
-// import AlgoliaSearchBox from '@AlgoliaSearchBox'
-// import SearchBox from './SearchBox.vue'
-// import NavLinks from './NavLinks.vue'
-
-export default {
-  components: { SidebarButton }, // NavLinks, SearchBox, AlgoliaSearchBox },
-
-//   computed: {
-//     algolia () {
-//       return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-//     },
-
-//     isAlgoliaSearch () {
-//       return this.algolia && this.algolia.apiKey && this.algolia.indexName
-//     }
-//   }
-}
-</script>
-
-<style lang="less">
-
-@import './vuepress/styles/config.less';
-
-.navbar {
-  padding: 0.7rem 1.5rem;
-  line-height: calc(var(--navbarHeight - 1.4rem));
-  position: fixed; // relative;
-  a, span, img {
-    display: inline-block;
-  }
-  .logo {
-    height: calc(var(--navbarHeight) - 1.4rem);
-    min-width: calc(var(--navbarHeight) - 1.4rem);
-    margin-right: 0.8rem;
-    vertical-align: top;
-  }
-  .site-name {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: var(--NvTClr);
-    position: relative;
-  }
-  .links {
-    font-size: 0.9rem;
-    position: absolute;
-    right: 1.5rem;
-    top: 0.7rem;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .navbar {
-    padding-left: 4rem;
-    .can-hide {
-      display: none;
-    }
-  }
-}
-</style>

ui/src/OutboundLink.vue

@@ -1,13 +0,0 @@
-<template functional>
-  <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
-    <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
-    <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
-  </svg>
-</template>
-
-<style lang="less">
-.icon.outbound {
-  color: var(--TClr);
-  display: inline-block;
-}
-</style>

ui/src/Page.vue

@@ -1,264 +0,0 @@
-<template>
-  <div class="page">
-    <slot/>
-
-    <!-- <Content :custom="false"/> -->
-
-    <!-- <div class="page-edit"> -->
-    <!--   <div -->
-    <!--     class="edit-link" -->
-    <!--     v-if="editLink" -->
-    <!--   > -->
-    <!--     <a -->
-    <!--       :href="editLink" -->
-    <!--       target="_blank" -->
-    <!--       rel="noopener noreferrer" -->
-    <!--     >{{ editLinkText }}</a> -->
-    <!--     <OutboundLink/> -->
-    <!--   </div> -->
-
-    <!--   <div -->
-    <!--     class="last-updated" -->
-    <!--     v-if="lastUpdated" -->
-    <!--   > -->
-    <!--     <span class="prefix">{{ lastUpdatedText }}: </span> -->
-    <!--     <span class="time">{{ lastUpdated }}</span> -->
-    <!--   </div> -->
-    <!-- </div> -->
-
-    <!-- <div class="page-nav" v-if="prev || next"> -->
-    <!--   <p class="inner"> -->
-    <!--     <span -->
-    <!--       v-if="prev" -->
-    <!--       class="prev" -->
-    <!--     > -->
-    <!--       ← -->
-    <!--       <router-link -->
-    <!--         v-if="prev" -->
-    <!--         class="prev" -->
-    <!--         :to="prev.path" -->
-    <!--       > -->
-    <!--         {{ prev.title || prev.path }} -->
-    <!--       </router-link> -->
-    <!--     </span> -->
-
-    <!--     <span -->
-    <!--       v-if="next" -->
-    <!--       class="next" -->
-    <!--     > -->
-    <!--       <router-link -->
-    <!--         v-if="next" -->
-    <!--         :to="next.path" -->
-    <!--       > -->
-    <!--         {{ next.title || next.path }} -->
-    <!--       </router-link> -->
-    <!--       → -->
-    <!--     </span> -->
-    <!--   </p> -->
-    <!-- </div> -->
-
-    <slot name="bottom"/>
-  </div>
-</template>
-
-<script>
-//import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
-
-export default {
-  /*
-  props: ['sidebarItems'],
-
-  computed: {
-    lastUpdated () {
-      if (this.$page.lastUpdated) {
-        return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)
-      }
-    },
-
-    lastUpdatedText () {
-      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
-        return this.$themeLocaleConfig.lastUpdated
-      }
-      if (typeof this.$site.themeConfig.lastUpdated === 'string') {
-        return this.$site.themeConfig.lastUpdated
-      }
-      return 'Last Updated'
-    },
-
-    prev () {
-      const prev = this.$page.frontmatter.prev
-      if (prev === false) {
-        return
-      } else if (prev) {
-        return resolvePage(this.$site.pages, prev, this.$route.path)
-      } else {
-        return resolvePrev(this.$page, this.sidebarItems)
-      }
-    },
-
-    next () {
-      const next = this.$page.frontmatter.next
-      if (next === false) {
-        return
-      } else if (next) {
-        return resolvePage(this.$site.pages, next, this.$route.path)
-      } else {
-        return resolveNext(this.$page, this.sidebarItems)
-      }
-    },
-
-    editLink () {
-      if (this.$page.frontmatter.editLink === false) {
-        return
-      }
-      const {
-        repo,
-        editLinks,
-        docsDir = '',
-        docsBranch = 'master',
-        docsRepo = repo
-      } = this.$site.themeConfig
-
-      let path = normalize(this.$page.path)
-      if (endingSlashRE.test(path)) {
-        path += 'README.md'
-      } else {
-        path += '.md'
-      }
-      if (docsRepo && editLinks) {
-        return this.createEditLink(repo, docsRepo, docsDir, docsBranch, path)
-      }
-    },
-
-    editLinkText () {
-      return (
-        this.$themeLocaleConfig.editLinkText ||
-        this.$site.themeConfig.editLinkText ||
-        `Edit this page`
-      )
-    }
-  },
-
-  methods: {
-    createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
-      const bitbucket = /bitbucket.org/
-      if (bitbucket.test(repo)) {
-        const base = outboundRE.test(docsRepo)
-          ? docsRepo
-          : repo
-        return (
-          base.replace(endingSlashRE, '') +
-           `/${docsBranch}` +
-           (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-           path +
-           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
-        )
-      }
-
-      const base = outboundRE.test(docsRepo)
-        ? docsRepo
-        : `https://github.com/${docsRepo}`
-
-      return (
-        base.replace(endingSlashRE, '') +
-        `/edit/${docsBranch}` +
-        (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-        path
-      )
-    }
-  }
-  */
-}
-/*
-function resolvePrev (page, items) {
-  return find(page, items, -1)
-}
-
-function resolveNext (page, items) {
-  return find(page, items, 1)
-}
-
-function find (page, items, offset) {
-  const res = []
-  items.forEach(item => {
-    if (item.type === 'group') {
-      res.push(...item.children || [])
-    } else {
-      res.push(item)
-    }
-  })
-  for (let i = 0; i < res.length; i++) {
-    const cur = res[i]
-    if (cur.type === 'page' && cur.path === page.path) {
-      return res[i + offset]
-    }
-  }
-}
-*/
-</script>
-
-<style lang="less">
-@import './vuepress/styles/config.less';
-@import './vuepress/styles/wrapper.less';
-
-.page {
-  padding-top: var(--navbarHeight);
-  padding-bottom: 2rem;
-}
-
-.page-edit {
-  .wrapper();
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-  .edit-link {
-    display: inline-block;
-    a, a:visited {
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*1.25), var(--TClr-a));
-      margin-right: 0.25rem;
-    }
-  }
-  .last-updated {
-    float: right;
-    font-size: 0.9em;
-    .prefix {
-      font-weight: 500;
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*1.25), var(--TClr-a));
-    }
-    .time {
-      font-weight: 400;
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*1.25), var(--TClr-a));
-    }
-  }
-}
-
-.page-nav {
-  .wrapper();
-  padding-top: 1rem;
-  padding-bottom: 0;
-  .inner {
-    min-height: 2rem;
-    margin-top: 0;
-    border-top: 1px solid var(--BClr);
-    padding-top: 1rem;
-    overflow: auto; // clear float;
-  }
-  .next {
-    float: right;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .page-edit {
-    .edit-link {
-      margin-bottom: .5rem;
-    }
-    .last-updated {
-      font-size: .8em;
-      float: none;
-      text-align: left;
-    }
-  }
-}
-
-</style>

ui/src/README.md

@@ -1,5 +0,0 @@
-
-* -> components copied/modified from vuepress
-
-* Navbar.vue
- * SidebarButton.vue

ui/src/Sidebar.vue

@@ -1,240 +0,0 @@
-<template>
-  <div class="sidebar">
-    <slot></slot>
-    <!-- <slot name="top"/> -->
-    <!-- <ul class="sidebar-links" v-if="items.length"> -->
-    <!--   <li v-for="(item, i) in items" :key="i"> -->
-    <!--     <SidebarGroup -->
-    <!--       v-if="item.type === 'group'" -->
-    <!--       :item="item" -->
-    <!--       :first="i === 0" -->
-    <!--       :open="i === openGroupIndex" -->
-    <!--       :collapsable="item.collapsable" -->
-    <!--       @toggle="toggleGroup(i)" -->
-    <!--     /> -->
-    <!--     <SidebarLink v-else :item="item"/> -->
-    <!--   </li> -->
-    <!-- </ul> -->
-    <!-- <slot name="bottom"/> -->
-  </div>
-</template>
-
-<script>
-//import SidebarGroup from './SidebarGroup.vue'
-//import SidebarLink from './SidebarLink.vue'
-//import { isActive } from './vuepress/util'
-
-export default {
-  /*
-  components: { SidebarGroup, SidebarLink },
-
-  props: ['items'],
-
-  data () {
-    return {
-      openGroupIndex: 0
-    }
-  },
-
-  created () {
-    this.refreshIndex()
-  },
-
-  watch: {
-    '$route' () {
-      this.refreshIndex()
-    }
-  },
-
-  methods: {
-    refreshIndex () {
-      const index = resolveOpenGroupIndex(
-        this.$route,
-        this.items
-      )
-      if (index > -1) {
-        this.openGroupIndex = index
-      }
-    },
-
-    toggleGroup (index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
-    },
-
-    isActive (page) {
-      return isActive(this.$route, page.path)
-    }
-  }
-}
-
-function resolveOpenGroupIndex (route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (item.type === 'group' && item.children.some(c => isActive(route, c.path))) {
-      return i
-    }
-  }
-  return -1
-*/
-}
-</script>
-
-<style lang="less">
-@import './vuepress/styles/config.less';
-
-.sidebar {
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-  a, a:visited {
-    display: inline-block;
-  }
-  .nav-links {
-    display: none;
-    border-bottom: 1px solid var(--BClr);
-    padding: 0.5rem 0 0.75rem 0;
-    a, a:visited {
-      font-weight: 600;
-    }
-    .nav-item, .repo-link {
-      display: block;
-      line-height: 1.25rem;
-      font-size: 1.1em;
-      padding: 0.5rem 0 0.5rem 1.5rem;
-    }
-  }
-  .searchbox {
-    font-weight: 600;
-    font-size: 1.1em;
-    line-height: 1.5rem;
-    padding: 1rem 0 1.5rem 1.5rem;
-    border-bottom: 1px solid var(--BClr);
-  }
-  .sidebar-links {
-    padding: 1.5rem 0;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .sidebar {
-    .nav-links {
-      display: block;
-      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
-        top: calc(1rem - 2px);
-      }
-    }
-    .sidebar-links {
-      padding: 1rem 0;
-    }
-  }
-}
-
-/********************/
-
-/* rename some classes as no control on what comes from sphinx:
-  - sidebar-heading => caption
-  - sidebar-link => reference
-  - sidebar-sub-headers => toctree-l2
-    Note: sidebar-sub-headers refers to ul in Vuepress
-          while toctree-l2 referes to li in sphinx
-  - active => current
-*/
-
-/**** SidebarGroup.vue  ***/
-.sidebar-group {
-  &:not(.first) {
-    margin-top: 1em;
-  }
-  .sidebar-group {
-    padding-left: 0.5em;
-  }
-  &:not(.collapsable) {
-    .caption {
-      cursor: auto;
-      color: inherit;
-    }
-  }
-}
-
-.sidebar-group .caption {
-  color: hsla(var(--SdTClr-h), var(--SdTClr-s), calc(var(--SdTClr-l)*1.25), var(--SdTClr-a));
-  transition: color .15s ease;
-  cursor: pointer;
-  font-size: 1.1em;
-  font-weight: bold;
-  // text-transform uppercase
-  padding: 0 1.5rem;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  &.open, &:hover {
-    color: inherit;
-  }
-  .arrow {
-    position: relative;
-    top: -0.12em;
-    left: 0.5em;
-  }
-  &.open .arrow {
-    top: -0.18em;
-  }
-}
-
-.sidebar-group-items {
-  transition: height .1s ease-out;
-  overflow: hidden;
-}/* FIXME sphinx toc equivalent */
-
-/**** end: SidebarGroup.vue  ***/
-
-/**** SidebarLink.vue  ***/
-/*.sidebar .sidebar-sub-headers*/
-.sidebar .toctree-l1 ul {
-  font-size: 0.95em;
-}
-
-.sidebar {
-  .toctree-l1 a, .toctree-l2 a, .toctree-l3 a, .toctree-l4 a {
-    font-weight: 400;
-    display: inline-block;
-    color: var(--SdTClr);
-    line-height: 1.4;
-    width: 100%;
-    box-sizing: border-box;
-    border-left: 0.5rem solid transparent;
-    &.current {
-      color: var(--SdAClr);
-      font-weight: 600;
-    }
-    &:hover {
-      color: var(--SdLHClr);
-    }
-  }
-}
-
-  // /* extra indication of current, since no support to hight current location */
-.toctree-l1.current a {
-  border-left: .5rem solid hsla(var(--SdAClr-h), var(--SdAClr-s), calc(var(--SdAClr-l)*1.4), var(--SdAClr-a));
-}
-.toctree-l1 a {
-  padding: 0.35rem 1rem 0.35rem 1.25rem;
-  &.current {
-    border-left-color: var(--SdAClr);
-  }
-}
-.toctree-l2 a {
-  padding: 0.25rem 1rem 0.25rem 1.75rem;
-}
-.toctree-l3 a {
-  padding: 0.15rem 1rem 0.15rem 1.75rem;
-}
-.toctree-l4 a {
-  padding: 0.05rem 1rem 0.05rem 1.75rem;
-}
-
-
-/**** end: SidebarLink.vue  ***/
-
-
-</style>

ui/src/main.js

@@ -1,54 +0,0 @@
-import Vue from 'vue'
-
-import './vuepress/styles/theme.less'
-import './sphinx-theme.less'
-import OutboundLink from './OutboundLink.vue'
-import Navbar from './Navbar.vue'
-import NavLinks from './NavLinks.vue'
-import Sidebar from './Sidebar.vue'
-import Page from './Page.vue'
-
-
-Vue.config.productionTip = false
-
-Vue.component('outboundlink', OutboundLink)
-Vue.component('navbar', Navbar)
-Vue.component('navlinks', NavLinks)
-Vue.component('sidebar', Sidebar)
-Vue.component('page', Page)
-
-
-// fake router element
-Vue.component('router-link', {
-  props: ['to'],
-  template: '<a :href="to"><slot></slot></a>',
-})
-
-new Vue({
-  el: '#app',
-  // taken from Layout.vue
-  data: {
-    isSidebarOpen: false,
-    swUpdateEvent: null
-  },
-  computed: {
-    pageClasses () {
-      //const userPageClass = this.$page.frontmatter.pageClass
-      return [
-        {
-         // 'no-navbar': !this.shouldShowNavbar,
-          'sidebar-open': this.isSidebarOpen,
-         // 'no-sidebar': !this.shouldShowSidebar
-        },
-       // userPageClass
-      ]
-    }
-  },
-  methods: {
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-    },
-  },
-})
-
-

ui/src/vuepress/AlgoliaSearchBox.vue

@@ -1,172 +0,0 @@
-<template>
-  <form
-    id="search-form"
-    class="algolia-search-wrapper search-box"
-  >
-    <input
-      id="algolia-search-input"
-      class="search-query"
-    >
-  </form>
-</template>
-
-<script>
-export default {
-  props: ['options'],
-
-  mounted () {
-    this.initialize()
-  },
-
-  methods: {
-    initialize () {
-      Promise.all([
-        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
-        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
-      ]).then(([docsearch]) => {
-        docsearch = docsearch.default
-        docsearch(Object.assign(this.options, {
-          debug: true,
-          inputSelector: '#algolia-search-input'
-        }))
-      })
-    }
-  },
-
-  watch: {
-    options (newValue) {
-      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
-      this.initialize(newValue)
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.algolia-search-wrapper {
-  & > span {
-  }
-    vertical-align: middle;
-  .algolia-autocomplete {
-    line-height: normal;
-    .ds-dropdown-menu {
-      background-color: var(--SdBgClr);
-      border: 0.1em solid var(--SdBClr);
-      border-radius: 0.3em;
-      font-size: 1.2em;
-      margin: 0.5em 0 0;
-      padding: 0.3em;
-      text-align: left;
-      &:before {
-        border-color: var(--SdBClr);
-      }
-      [class*=ds-dataset-] {
-        border: none;
-        padding: 0;
-      }
-      .ds-suggestions {
-        margin-top: 0;
-      }
-      .ds-suggestion {
-        border-bottom: 0.1em solid var(--SdBClr);
-      }
-    }
-    .algolia-docsearch-suggestion--highlight {
-      color: var(--SdAClr);
-    }
-    .algolia-docsearch-suggestion {
-      border-color: var(--SdBClr);
-      padding: 0;
-      .algolia-docsearch-suggestion--category-header {
-        padding: 0.5em 1em;
-        margin-top: 0;
-        background: var(--SdBgClr);
-        color: var(--SdTClr);
-        font-weight: 600;
-        .algolia-docsearch-suggestion--highlight {
-          background: var(--SdBgClr);
-        }
-      }
-      .algolia-docsearch-suggestion--wrapper {
-        padding: 0;
-      }
-      .algolia-docsearch-suggestion--title {
-        font-weight: 600;
-        margin-bottom: 0;
-        color: var(--TClr);
-      }
-      .algolia-docsearch-suggestion--subcategory-column {
-        vertical-align: top;
-        padding: 0.2em 0.3em 0.2em 0.2em;
-        border-color: var(--SdBClr);
-        background: var(--sidebarBackgroundColor);
-        &:after {
-          display: none;
-        }
-      }
-      .algolia-docsearch-suggestion--subcategory-column-text {
-        color: var(--SdTClr);
-      }
-    }
-    .algolia-docsearch-footer {
-      border-color: var(--SdBClr);
-    }
-    .ds-cursor .algolia-docsearch-suggestion--content {
-      background-color: var(--SdBgClr) !important;
-      color: var(--SdTClr);
-    }
-  }
-}
-
-@media (min-width: @MQMobile) {
-  .algolia-search-wrapper {
-    .algolia-autocomplete {
-      .algolia-docsearch-suggestion {
-        .algolia-docsearch-suggestion--subcategory-column {
-          float: none;
-          width: 15em;
-          min-width: 15em;
-          display: table-cell;
-        }
-        .algolia-docsearch-suggestion--content {
-          float: none;
-          display: table-cell;
-          width: 100%;
-          vertical-align: top;
-        }
-        .ds-dropdown-menu {
-          min-width: 51em !important;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .algolia-search-wrapper {
-    .ds-dropdown-menu {
-      min-width: calc(100vw - 4rem) !important;
-      max-width: calc(100vw - 4rem) !important;
-    }
-    .algolia-docsearch-suggestion--wrapper {
-      padding: 0.2em 0.3em 0.2em 0.2em !important;
-    }
-    .algolia-docsearch-suggestion--subcategory-column {
-      padding: 0 !important;
-      background: white !important;
-    }
-    .algolia-docsearch-suggestion--subcategory-column-text:after {
-      content: " > ";
-      font-size: 1rem;
-      line-height: 1.4rem;
-      display: inline-block;
-      width: 0.5em;
-      margin: -0.2em 0.2em 0;
-      vertical-align: middle;
-    }
-  }
-}
-
-</style>

ui/src/vuepress/DropdownLink.vue

@@ -1,208 +0,0 @@
-<template>
-  <div
-    class="dropdown-wrapper"
-    :class="{ open }"
-  >
-    <a
-      class="dropdown-title"
-      @click="toggle"
-    >
-      <span class="title">{{ item.text }}</span>
-      <span
-        class="arrow"
-        :class="open ? 'down' : 'right'"
-      ></span>
-    </a>
-
-    <DropdownTransition>
-      <ul
-        class="nav-dropdown"
-        v-show="open"
-      >
-        <li
-          class="dropdown-item"
-          :key="subItem.link || index"
-          v-for="(subItem, index) in item.items"
-        >
-          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-
-          <ul
-            class="dropdown-subitem-wrapper"
-            v-if="subItem.type === 'links'"
-          >
-            <li
-              class="dropdown-subitem"
-              :key="childSubItem.link"
-              v-for="childSubItem in subItem.items"
-            >
-              <NavLink :item="childSubItem"/>
-            </li>
-          </ul>
-
-          <NavLink
-            v-else
-            :item="subItem"
-          />
-        </li>
-      </ul>
-    </DropdownTransition>
-  </div>
-</template>
-
-<script>
-import NavLink from './NavLink.vue'
-import DropdownTransition from './DropdownTransition.vue'
-
-export default {
-  components: { NavLink, DropdownTransition },
-
-  data () {
-    return {
-      open: false
-    }
-  },
-
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  methods: {
-    toggle () {
-      this.open = !this.open
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.dropdown-wrapper {
-  cursor: pointer;
-  .dropdown-title {
-    display: block;
-    &:hover {
-      border-color: transparent;
-    }
-    .arrow {
-      vertical-align: middle;
-      margin-top: -0.1em;
-      margin-left: 0.4rem;
-    }
-  }
-  .nav-dropdown {
-    .dropdown-item {
-      color: inherit;
-      line-height: 1.7rem;
-      h4 {
-        margin: 0.45rem 0 0;
-        border-top: 0.1em solid var(--BClr);
-        padding: 0.45rem 1.5rem 0 1.25rem;
-      }
-      .dropdown-subitem-wrapper {
-        padding: 0;
-        list-style: none;
-        .dropdown-subitem {
-          font-size: 0.9em;
-        }
-      }
-      a, a:visited {
-        display: block;
-        line-height: 1.7rem;
-        position: relative;
-        border-bottom: none;
-        font-weight: 400;
-        margin-bottom: 0;
-        padding: 0 1.5rem 0 1.25rem;
-        &:hover {
-          color: var(--LHClr);
-        }
-        &.router-link-active {
-          color: var(--AClr);
-          &::after {
-            content: "";
-            width: 0;
-            height: 0;
-            border-left: 0.3em solid var(--AClr);
-            border-top: 0.2em solid transparent;
-            border-bottom: 0.3em solid transparent;
-            position: absolute;
-            top: calc(50% - 0.1em);
-            left: 0.9em;
-          }
-        }
-      }
-      &:first-child h4 {
-        margin-top: 0;
-        padding-top: 0;
-        border-top: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .dropdown-wrapper {
-    &.open .dropdown-title {
-      margin-bottom: 0.5rem;
-    }
-    .nav-dropdown {
-      transition: height .1s ease-out;
-      overflow: hidden;
-      .dropdown-item {
-        h4 {
-          border-top: 0;
-          margin-top: 0;
-          padding-top: 0;
-        }
-        h4, & > a {
-          font-size: 1.2em;
-          line-height: 2rem;
-        }
-        .dropdown-subitem {
-          font-size: 1em;
-          padding-left: 1rem;
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: @MQMobile) {
-  .dropdown-wrapper {
-    height: 1.8rem;
-    &:hover .nav-dropdown {
-      // override the inline style.
-      display: block !important;
-    }
-    .dropdown-title .arrow {
-      // make the arrow always down at desktop
-      border-left: 0.3em solid transparent;
-      border-right: 0.3em solid transparent;
-      border-top: 0.5em solid var(--ArBgClr);
-      border-bottom: 0;
-    }
-    .nav-dropdown {
-      display: none;
-      // Avoid height shaked by clicking
-      height: auto !important;
-      box-sizing: border-box;;
-      max-height: calc(100vh - 2.7rem);
-      overflow-y: auto;
-      position: absolute;
-      top: 100%;
-      right: 0;
-      background-color: var(--SdBgClr);
-      padding: 0.6rem 0;
-      border: 0.1em solid var(--SdBClr);
-      border-bottom-color: var(--SdBClr);
-      text-align: left;
-      border-radius: 0.25rem;
-      white-space: nowrap;
-      margin: 0;
-    }
-  }
-}
-</style>

ui/src/vuepress/DropdownTransition.vue

@@ -1,34 +0,0 @@
-<template>
-  <transition
-    name="dropdown"
-    @enter="setHeight"
-    @after-enter="unsetHeight"
-    @before-leave="setHeight"
-  >
-    <slot/>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'DropdownTransition',
-
-  methods: {
-    setHeight (items) {
-      // explicitly set height so that it can be transitioned
-      items.style.height = items.scrollHeight + 'px'
-    },
-
-    unsetHeight (items) {
-      items.style.height = ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dropdown-enter, .dropdown-leave-to {
-  height: 0 !important;
-}
-
-</style>

ui/src/vuepress/Home.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="home">
-    <div class="hero">
-      <img
-        v-if="data.heroImage"
-        :src="$withBase(data.heroImage)"
-        alt="hero"
-      >
-
-      <h1>{{ data.heroText || $title || 'Hello' }}</h1>
-
-      <p class="description">
-        {{ data.tagline || $description || 'Welcome to your VuePress site' }}
-      </p>
-
-      <p
-        class="action"
-        v-if="data.actionText && data.actionLink"
-      >
-        <NavLink
-          class="action-button"
-          :item="actionLink"
-        />
-      </p>
-    </div>
-
-    <div
-      class="features"
-      v-if="data.features && data.features.length"
-    >
-      <div
-        class="feature"
-        v-for="feature in data.features"
-      >
-        <h2>{{ feature.title }}</h2>
-        <p>{{ feature.details }}</p>
-      </div>
-    </div>
-
-    <Content custom/>
-
-    <div
-      class="footer"
-      v-if="data.footer"
-    >
-      {{ data.footer }}
-    </div>
-  </div>
-</template>
-
-<script>
-import NavLink from './NavLink.vue'
-
-export default {
-  components: { NavLink },
-
-  computed: {
-    data () {
-      return this.$page.frontmatter
-    },
-
-    actionLink () {
-      return {
-        link: this.data.actionLink,
-        text: this.data.actionText
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.home {
-  padding: var(--navbarHeight) 2rem 0;
-  max-width: 96em;
-  margin: 0 auto;
-  .hero {
-    text-align: center;
-    img {
-      max-height: 28em;
-      display: block;
-      margin: 3rem auto 1.5rem;
-    }
-    h1 {
-      font-size: 3rem;
-    }
-    h1, .description, .action {
-      margin: 1.8rem auto;
-    }
-    .description {
-      max-width: 35rem;
-      font-size: 1.6rem;
-      line-height: 1.3;
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.4), var(--Tclr-a));
-    }
-    .action-button {
-      display: inline-block;
-      font-size: 1.2rem;
-      color: var(--BtnTClr);
-      background-color: var(--BtnBgClr);
-      padding: 0.8rem 1.6rem;
-      border-radius: 2em;
-      height: 2em;
-      transition: background-color .1s ease;
-      box-sizing: border-box;
-      border-bottom: 0.3em solid var(--BtnBClr);
-      &:hover {
-        background-color: var(--BtnAccentBgClr);
-        border-color: var(--BtnAClr);
-        color: var(--BtnAClr);
-      }
-    }
-  }
-  .features {
-    border-top: 0.1em solid var(--BClr);
-    padding: 1.2rem 0;
-    margin-top: 2.5rem;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    align-content: stretch;
-    justify-content: space-between;
-  }
-  .feature {
-    flex-grow: 1;
-    flex-basis: 30%;
-    max-width: 30%;
-    h2 {
-      font-size: 1.4rem;
-      font-weight: 500;
-      border-bottom: none;
-      padding-bottom: 0;
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.10), var(--TClr-a));
-    }
-    p {
-      color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.25), var(--TClr-a));
-    }
-  }
-  .footer {
-    padding: 2.5rem;
-    border-top: 0.1em solid var(--BClr);
-    text-align: center;
-    color: hsla(var(--TClr-h), var(--TClr-s), calc(var(--TClr-l)*0.25), var(--TClr-a));
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .home {
-  .features {
-      flex-direction: column;
-    }
-    .feature {
-      max-width: 100%;
-      padding: 0 2.5rem;
-    }
-  }
-}
-
-@media (max-width: @MQMobileNarrow) {
-  .home {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    .hero {
-      img {
-        max-height: 21em;
-        margin: 2rem auto 1.2rem;
-      }
-      h1 {
-        font-size: 2rem;
-      }
-      h1, .description, .action {
-        margin: 1.2rem auto;
-      }
-      .description {
-        font-size: 1.2rem;
-      }
-      .action-button {
-        font-size: 1rem;
-        padding: 0.6rem 1.2rem;
-      }
-    }
-    .feature {
-      h2 {
-        font-size: 1.25rem;
-      }
-    }
-  }
-}
-</style>

ui/src/vuepress/Layout.vue

@@ -1,183 +0,0 @@
-<template>
-  <div
-    class="theme-container"
-    :class="pageClasses"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-  >
-    <Navbar
-      v-if="shouldShowNavbar"
-      @toggle-sidebar="toggleSidebar"
-    />
-
-    <div
-      class="sidebar-mask"
-      @click="toggleSidebar(false)"
-    ></div>
-
-    <Sidebar
-      :items="sidebarItems"
-      @toggle-sidebar="toggleSidebar"
-    >
-      <slot
-        name="sidebar-top"
-        slot="top"
-      />
-      <slot
-        name="sidebar-bottom"
-        slot="bottom"
-      />
-    </Sidebar>
-
-    <div
-      class="custom-layout"
-      v-if="$page.frontmatter.layout"
-    >
-      <component :is="$page.frontmatter.layout"/>
-    </div>
-
-    <Home v-else-if="$page.frontmatter.home"/>
-
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-    >
-      <slot
-        name="page-top"
-        slot="top"
-      />
-      <slot
-        name="page-bottom"
-        slot="bottom"
-      />
-    </Page>
-
-    <SWUpdatePopup :updateEvent="swUpdateEvent"/>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import nprogress from 'nprogress'
-import Home from './Home.vue'
-import Navbar from './Navbar.vue'
-import Page from './Page.vue'
-import Sidebar from './Sidebar.vue'
-import SWUpdatePopup from './SWUpdatePopup.vue'
-import { resolveSidebarItems } from './util'
-
-export default {
-  components: { Home, Page, Sidebar, Navbar, SWUpdatePopup },
-
-  data () {
-    return {
-      isSidebarOpen: false,
-      swUpdateEvent: null
-    }
-  },
-
-  computed: {
-    shouldShowNavbar () {
-      const { themeConfig } = this.$site
-      const { frontmatter } = this.$page
-      if (
-        frontmatter.navbar === false ||
-        themeConfig.navbar === false) {
-        return false
-      }
-      return (
-        this.$title ||
-        themeConfig.logo ||
-        themeConfig.repo ||
-        themeConfig.nav ||
-        this.$themeLocaleConfig.nav
-      )
-    },
-
-    shouldShowSidebar () {
-      const { frontmatter } = this.$page
-      return (
-        !frontmatter.layout &&
-        !frontmatter.home &&
-        frontmatter.sidebar !== false &&
-        this.sidebarItems.length
-      )
-    },
-
-    sidebarItems () {
-      return resolveSidebarItems(
-        this.$page,
-        this.$route,
-        this.$site,
-        this.$localePath
-      )
-    },
-
-    pageClasses () {
-      const userPageClass = this.$page.frontmatter.pageClass
-      return [
-        {
-          'no-navbar': !this.shouldShowNavbar,
-          'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
-        },
-        userPageClass
-      ]
-    }
-  },
-
-  mounted () {
-    window.addEventListener('scroll', this.onScroll)
-
-    // configure progress bar
-    nprogress.configure({ showSpinner: false })
-
-    this.$router.beforeEach((to, from, next) => {
-      if (to.path !== from.path && !Vue.component(to.name)) {
-        nprogress.start()
-      }
-      next()
-    })
-
-    this.$router.afterEach(() => {
-      nprogress.done()
-      this.isSidebarOpen = false
-    })
-
-    this.$on('sw-updated', this.onSWUpdated)
-  },
-
-  methods: {
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-    },
-
-    // side swipe
-    onTouchStart (e) {
-      this.touchStart = {
-        x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
-      }
-    },
-
-    onTouchEnd (e) {
-      const dx = e.changedTouches[0].clientX - this.touchStart.x
-      const dy = e.changedTouches[0].clientY - this.touchStart.y
-      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
-        if (dx > 0 && this.touchStart.x <= 80) {
-          this.toggleSidebar(true)
-        } else {
-          this.toggleSidebar(false)
-        }
-      }
-    },
-
-    onSWUpdated (e) {
-      this.swUpdateEvent = e
-    }
-  }
-}
-</script>
-
-<style src="prismjs/themes/prism-tomorrow.css"></style>
-<style src="./styles/theme.less" lang="less"></style>

ui/src/vuepress/NavLink.vue

@@ -1,49 +0,0 @@
-<template>
-  <router-link
-    class="nav-link"
-    :to="link"
-    v-if="!isExternal(link)"
-    :exact="exact"
-  >{{ item.text }}</router-link>
-  <a
-    v-else
-    :href="link"
-    class="nav-link external"
-    :target="isMailto(link) || isTel(link) ? null : '_blank'"
-    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
-  >
-    {{ item.text }}
-    <OutboundLink/>
-  </a>
-</template>
-
-<script>
-import { isExternal, isMailto, isTel, ensureExt } from './util'
-
-export default {
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  computed: {
-    link () {
-      return ensureExt(this.item.link)
-    },
-
-    exact () {
-      if (this.$site.locales) {
-        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
-      }
-      return this.link === '/'
-    }
-  },
-
-  methods: {
-    isExternal,
-    isMailto,
-    isTel
-  }
-}
-</script>

ui/src/vuepress/NavLinks.vue

@@ -1,188 +0,0 @@
-<template>
-  <nav
-    class="nav-links"
-    v-if="userLinks.length || repoLink"
-  >
-    <!-- user links -->
-    <div
-      class="nav-item"
-      v-for="item in userLinks"
-      :key="item.link"
-    >
-      <DropdownLink
-        v-if="item.type === 'links'"
-        :item="item"
-      />
-      <NavLink
-        v-else
-        :item="item"
-      />
-    </div>
-
-    <!-- repo link -->
-    <a
-      v-if="repoLink"
-      :href="repoLink"
-      class="repo-link"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {{ repoLabel }}
-      <OutboundLink/>
-    </a>
-  </nav>
-</template>
-
-<script>
-import DropdownLink from './DropdownLink.vue'
-import { resolveNavLinkItem } from './util'
-import NavLink from './NavLink.vue'
-
-export default {
-  components: { NavLink, DropdownLink },
-
-  computed: {
-    userNav () {
-      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
-    },
-
-    nav () {
-      const { locales } = this.$site
-      if (locales && Object.keys(locales).length > 1) {
-        const currentLink = this.$page.path
-        const routes = this.$router.options.routes
-        const themeLocales = this.$site.themeConfig.locales || {}
-        const languageDropdown = {
-          text: this.$themeLocaleConfig.selectText || 'Languages',
-          items: Object.keys(locales).map(path => {
-            const locale = locales[path]
-            const text = themeLocales[path] && themeLocales[path].label || locale.lang
-            let link
-            // Stay on the current page
-            if (locale.lang === this.$lang) {
-              link = currentLink
-            } else {
-              // Try to stay on the same page
-              link = currentLink.replace(this.$localeConfig.path, path)
-              // fallback to homepage
-              if (!routes.some(route => route.path === link)) {
-                link = path
-              }
-            }
-            return { text, link }
-          })
-        }
-        return [...this.userNav, languageDropdown]
-      }
-      return this.userNav
-    },
-
-    userLinks () {
-      return (this.nav || []).map(link => {
-        return Object.assign(resolveNavLinkItem(link), {
-          items: (link.items || []).map(resolveNavLinkItem)
-        })
-      })
-    },
-
-    repoLink () {
-      const { repo } = this.$site.themeConfig
-      if (repo) {
-        return /^https?:/.test(repo)
-          ? repo
-          : `https://github.com/${repo}`
-      }
-    },
-
-    repoLabel () {
-      if (!this.repoLink) return
-      if (this.$site.themeConfig.repoLabel) {
-        return this.$site.themeConfig.repoLabel
-      }
-
-      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
-      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
-      for (let i = 0; i < platforms.length; i++) {
-        const platform = platforms[i]
-        if (new RegExp(platform, 'i').test(repoHost)) {
-          return platform
-        }
-      }
-
-      return 'Source'
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.nav-links {
-  display: inline-block;
-  .nav-links summary {
-    &:hover, &.router-link-active {
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvLClr);
-      cursor: pointer;
-    }
-  }
-  a, a:visited {
-    line-height: 1.4rem;
-    color: inherit;
-    &.router-link-active {
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvAClr);
-    }
-    &:hover {
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvLHClr);
-    }
-  }
-  .nav-item {
-    position: relative;
-    display: inline-block;
-    margin-left: 1.5rem;
-    line-height: 2rem;
-  }
-  .repo-link {
-    margin-left: 1.5rem;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .nav-links {
-    .nav-item, .repo-link {
-      margin-left: 0;
-    }
-  }
-}
-
-@media (min-width: @MQMobile) {
-  .nav-links summary {
-    cursor: pointer;
-    color: var(--NvLClr);
-    &.router-link-active {
-      color: var(--NvAClr);
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvAClr);
-    }
-    &:hover {
-      color: var(--NvLHClr);
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvLHClr);
-    }
-  }
-  .nav-item > a:not(.external),
-  .nav-item > a:visited:not(.external) {
-    &.router-link-active {
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvAClr);
-    }
-    &:hover {
-      margin-bottom: -0.2em;
-      border-bottom: 0.2em solid var(--NvLHClr);
-    }
-  }
-}
-</style>

ui/src/vuepress/Navbar.vue

@@ -1,94 +0,0 @@
-<template>
-  <header class="navbar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
-
-    <div class="links">
-      <NavLinks class="can-hide"/>
-      <AlgoliaSearchBox
-        v-if="isAlgoliaSearch"
-        :options="algolia"
-      />
-      <SearchBox v-else-if="$site.themeConfig.search !== false"/>
-    </div>
-
-    <router-link
-      :to="$localePath"
-      class="home-link"
-    >
-      <img
-        class="logo"
-        v-if="$site.themeConfig.logo"
-        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      >
-      <span
-        class="site-name"
-        v-if="$siteTitle"
-        :class="{ 'can-hide': $site.themeConfig.logo }"
-      >{{ $siteTitle }}</span>
-    </router-link>
-  </header>
-</template>
-
-<script>
-import SidebarButton from './SidebarButton.vue'
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from './SearchBox.vue'
-import NavLinks from './NavLinks.vue'
-
-export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
-
-  computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-    },
-
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.navbar {
-  padding: 0.7rem 1.5rem;
-  line-height: var(--navbarHeight) - 1.4rem;
-  position: relative;
-  background: var(--NvBgClr);
-  color: var(--NvTClr);
-  a, span, img {
-    display: inline-block;
-  }
-  .logo {
-    height: var(--navbarHeight) - 1.4rem;
-    min-width: var(--navbarHeight) - 1.4rem;
-    margin-right: 0.8rem;
-    vertical-align: top;
-  }
-  .site-name {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: var(--NvTClr);
-    position: relative;
-  }
-  .links {
-    font-size: 0.9rem;
-    position: absolute;
-    right: 1.5rem;
-    top: 0.7rem;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .navbar {
-    padding-left: 4rem;
-    .can-hide {
-      display: none;
-    }
-  }
-}
-</style>

ui/src/vuepress/NotFound.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="theme-container">
-    <div class="content">
-      <h1>404</h1>
-      <blockquote>{{ getMsg() }}</blockquote>
-      <router-link to="/">Take me home.</router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-]
-
-export default {
-  methods: {
-    getMsg () {
-      return msgs[Math.floor(Math.random() * msgs.length)]
-    }
-  }
-}
-</script>

ui/src/vuepress/Page.vue

@@ -1,263 +0,0 @@
-<template>
-  <div class="page">
-    <slot name="top"/>
-
-    <Content :custom="false"/>
-
-    <div class="page-edit">
-      <div
-        class="edit-link"
-        v-if="editLink"
-      >
-        <a
-          :href="editLink"
-          target="_blank"
-          rel="noopener noreferrer"
-        >{{ editLinkText }}</a>
-        <OutboundLink/>
-      </div>
-
-      <div
-        class="last-updated"
-        v-if="lastUpdated"
-      >
-        <span class="prefix">{{ lastUpdatedText }}: </span>
-        <span class="time">{{ lastUpdated }}</span>
-      </div>
-    </div>
-
-    <div class="page-nav" v-if="prev || next">
-      <p class="inner">
-        <span
-          v-if="prev"
-          class="prev"
-        >
-          ←
-          <router-link
-            v-if="prev"
-            class="prev"
-            :to="prev.path"
-          >
-            {{ prev.title || prev.path }}
-          </router-link>
-        </span>
-
-        <span
-          v-if="next"
-          class="next"
-        >
-          <router-link
-            v-if="next"
-            :to="next.path"
-          >
-            {{ next.title || next.path }}
-          </router-link>
-          →
-        </span>
-      </p>
-    </div>
-
-    <slot name="bottom"/>
-  </div>
-</template>
-
-<script>
-import { resolvePage, normalize, outboundRE, endingSlashRE } from './util'
-
-export default {
-  props: ['sidebarItems'],
-
-  computed: {
-    lastUpdated () {
-      if (this.$page.lastUpdated) {
-        return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)
-      }
-    },
-
-    lastUpdatedText () {
-      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
-        return this.$themeLocaleConfig.lastUpdated
-      }
-      if (typeof this.$site.themeConfig.lastUpdated === 'string') {
-        return this.$site.themeConfig.lastUpdated
-      }
-      return 'Last Updated'
-    },
-
-    prev () {
-      const prev = this.$page.frontmatter.prev
-      if (prev === false) {
-        return
-      } else if (prev) {
-        return resolvePage(this.$site.pages, prev, this.$route.path)
-      } else {
-        return resolvePrev(this.$page, this.sidebarItems)
-      }
-    },
-
-    next () {
-      const next = this.$page.frontmatter.next
-      if (next === false) {
-        return
-      } else if (next) {
-        return resolvePage(this.$site.pages, next, this.$route.path)
-      } else {
-        return resolveNext(this.$page, this.sidebarItems)
-      }
-    },
-
-    editLink () {
-      if (this.$page.frontmatter.editLink === false) {
-        return
-      }
-      const {
-        repo,
-        editLinks,
-        docsDir = '',
-        docsBranch = 'master',
-        docsRepo = repo
-      } = this.$site.themeConfig
-
-      let path = normalize(this.$page.path)
-      if (endingSlashRE.test(path)) {
-        path += 'README.md'
-      } else {
-        path += '.md'
-      }
-      if (docsRepo && editLinks) {
-        return this.createEditLink(repo, docsRepo, docsDir, docsBranch, path)
-      }
-    },
-
-    editLinkText () {
-      return (
-        this.$themeLocaleConfig.editLinkText ||
-        this.$site.themeConfig.editLinkText ||
-        `Edit this page`
-      )
-    }
-  },
-
-  methods: {
-    createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
-      const bitbucket = /bitbucket.org/
-      if (bitbucket.test(repo)) {
-        const base = outboundRE.test(docsRepo)
-          ? docsRepo
-          : repo
-        return (
-          base.replace(endingSlashRE, '') +
-           `/${docsBranch}` +
-           (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-           path +
-           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
-        )
-      }
-
-      const base = outboundRE.test(docsRepo)
-        ? docsRepo
-        : `https://github.com/${docsRepo}`
-
-      return (
-        base.replace(endingSlashRE, '') +
-        `/edit/${docsBranch}` +
-        (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-        path
-      )
-    }
-  }
-}
-
-function resolvePrev (page, items) {
-  return find(page, items, -1)
-}
-
-function resolveNext (page, items) {
-  return find(page, items, 1)
-}
-
-function find (page, items, offset) {
-  const res = []
-  items.forEach(item => {
-    if (item.type === 'group') {
-      res.push(...item.children || [])
-    } else {
-      res.push(item)
-    }
-  })
-  for (let i = 0; i < res.length; i++) {
-    const cur = res[i]
-    if (cur.type === 'page' && cur.path === page.path) {
-      return res[i + offset]
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-@import './styles/wrapper.less';
-
-.page {
-  padding-bottom: 2rem;
-}
-
-.page-edit {
-  .wrapper();
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-  .edit-link {
-    display: inline-block;
-    a, a:visited {
-      color: var(--LClr);
-      margin-right: 0.25rem;
-      &:hover {
-        color: var(--LHClr);
-      }
-    }
-  }
-  .last-updated {
-    float: right;
-    font-size: 0.9em;
-    .prefix {
-      font-weight: 500;
-      color: var(--TClr);
-    }
-    .time {
-      font-weight: 400;
-      color: var(--TClr);
-    }
-  }
-}
-
-.page-nav {
-  .wrapper();
-  padding-top: 1rem;
-  padding-bottom: 0;
-  .inner {
-    min-height: 2rem;
-    margin-top: 0;
-    border-top: 0.1em solid var(--BClr);
-    padding-top: 1rem;
-    overflow: auto // clear float;
-  }
-  .next {
-    float: right;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .page-edit {
-    .edit-link {
-      margin-bottom: .5rem;
-    }
-    .last-updated {
-      font-size: .8em;
-      float: none;
-      text-align: left;
-    }
-  }
-}
-
-</style>

ui/src/vuepress/SWUpdatePopup.vue

@@ -1,89 +0,0 @@
-<template>
-  <transition name="sw-update-popup">
-    <div
-      v-if="enabled"
-      class="sw-update-popup"
-    >
-      {{message}}<br>
-      <button @click="reload">{{buttonText}}</button>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    updateEvent: {
-      type: Object,
-      default: null
-    }
-  },
-
-  computed: {
-    popupConfig () {
-      for (const config of [this.$themeLocaleConfig, this.$site.themeConfig]) {
-        const sw = config.serviceWorker
-        if (sw && sw.updatePopup) {
-          return typeof sw.updatePopup === 'object' ? sw.updatePopup : {}
-        }
-      }
-      return null
-    },
-
-    enabled () {
-      return Boolean(this.popupConfig && this.updateEvent)
-    },
-
-    message () {
-      const c = this.popupConfig
-      return (c && c.message) || 'New content is available.'
-    },
-
-    buttonText () {
-      const c = this.popupConfig
-      return (c && c.buttonText) || 'Refresh'
-    }
-  },
-
-  methods: {
-    reload () {
-      if (this.updateEvent) {
-        this.updateEvent.skipWaiting().then(() => {
-          location.reload(true)
-        })
-        this.updateEvent = null
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.sw-update-popup {
-  position: fixed;
-  right: 1em;
-  bottom: 1em;
-  padding: 1em;
-  border: 0.3em solid var(--BClr);
-  border-radius: 0.3em;
-  background: var(--BgClr);
-  box-shadow: 0 0.4em 1.2em hsla(var(--BClr-h), var(--BClr-s), var(--BClr-l), 0.5);
-  text-align: center;
-
-  button {
-    margin-top: 0.5em;
-    padding: 0.25em 2em;
-  }
-}
-
-.sw-update-popup-enter-active, .sw-update-popup-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-
-.sw-update-popup-enter, .sw-update-popup-leave-to {
-  opacity: 0;
-  transform: translate(0, 50%) scale(0.5);
-}
-</style>

ui/src/vuepress/SearchBox.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="search-box">
-    <input
-      @input="query = $event.target.value"
-      aria-label="Search"
-      :value="query"
-      autocomplete="off"
-      spellcheck="false"
-      @focus="focused = true"
-      @blur="focused = false"
-      @keyup.enter="go(focusIndex)"
-      @keyup.up="onUp"
-      @keyup.down="onDown"
-    >
-    <ul
-      class="suggestions"
-      v-if="showSuggestions"
-      :class="{ 'align-right': alignRight }"
-      @mouseleave="unfocus"
-    >
-      <li
-        class="suggestion"
-        v-for="(s, i) in suggestions"
-        :class="{ focused: i === focusIndex }"
-        @mousedown="go(i)"
-        @mouseenter="focus(i)"
-      >
-        <a :href="s.path" @click.prevent>
-          <span class="page-title">{{ s.title || s.path }}</span>
-          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      query: '',
-      focused: false,
-      focusIndex: 0
-    }
-  },
-
-  computed: {
-    showSuggestions () {
-      return (
-        this.focused &&
-        this.suggestions &&
-        this.suggestions.length
-      )
-    },
-
-    suggestions () {
-      const query = this.query.trim().toLowerCase()
-      if (!query) {
-        return
-      }
-
-      const { pages, themeConfig } = this.$site
-      const max = themeConfig.searchMaxSuggestions || 5
-      const localePath = this.$localePath
-      const matches = item => (
-        item.title &&
-        item.title.toLowerCase().indexOf(query) > -1
-      )
-      const res = []
-      for (let i = 0; i < pages.length; i++) {
-        if (res.length >= max) break
-        const p = pages[i]
-        // filter out results that do not match current locale
-        if (this.getPageLocalePath(p) !== localePath) {
-          continue
-        }
-        if (matches(p)) {
-          res.push(p)
-        } else if (p.headers) {
-          for (let j = 0; j < p.headers.length; j++) {
-            if (res.length >= max) break
-            const h = p.headers[j]
-            if (matches(h)) {
-              res.push(Object.assign({}, p, {
-                path: p.path + '#' + h.slug,
-                header: h
-              }))
-            }
-          }
-        }
-      }
-      return res
-    },
-
-    // make suggestions align right when there are not enough items
-    alignRight () {
-      const navCount = (this.$site.themeConfig.nav || []).length
-      const repo = this.$site.repo ? 1 : 0
-      return navCount + repo <= 2
-    }
-  },
-
-  methods: {
-    getPageLocalePath (page) {
-      for (const localePath in this.$site.locales || {}) {
-        if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
-          return localePath
-        }
-      }
-      return '/'
-    },
-
-    onUp () {
-      if (this.showSuggestions) {
-        if (this.focusIndex > 0) {
-          this.focusIndex--
-        } else {
-          this.focusIndex = this.suggestions.length - 1
-        }
-      }
-    },
-
-    onDown () {
-      if (this.showSuggestions) {
-        if (this.focusIndex < this.suggestions.length - 1) {
-          this.focusIndex++
-        } else {
-          this.focusIndex = 0
-        }
-      }
-    },
-
-    go (i) {
-      if (!this.showSuggestions) {
-        return
-      }
-      this.$router.push(this.suggestions[i].path)
-      this.query = ''
-      this.focusIndex = 0
-    },
-
-    focus (i) {
-      this.focusIndex = i
-    },
-
-    unfocus () {
-      this.focusIndex = -1
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.search-box {
-  display: inline-block;
-  position: relative;
-  margin-right: 0.5rem;
-  input {
-    cursor: text;
-    width: 10rem;
-    color: var(--InTClr);
-    display: inline-block;
-    border: 0.1em solid var(--InBClr);
-    border-radius: 2rem;
-    font-size: 0.9rem;
-    line-height: 2rem;
-    padding: 0 0.5rem 0 2rem;
-    outline: none;
-    transition: all .2s ease;
-    background: var(--InBgClr) url(./search.svg) 0.6rem 0.5rem no-repeat;
-    background-size: 1rem;
-    &:focus {
-      cursor: auto;
-    }
-  }
-  .suggestions {
-    background: var(--InBgClr);
-    width: 20rem;
-    position: absolute;
-    top: 1.5rem;
-    border: 0.1em solid var(--InBClr);
-    border-radius: 0.5em;
-    padding: 0.4rem;
-    list-style-type: none;
-    &.align-right {
-      right: 0;
-    }
-  }
-  .suggestion {
-    line-height: 1.4;
-    padding: 0.4rem 0.6rem;
-    border-radius: 0.3em;
-    cursor: pointer;
-    a, a:visited {
-      color: var(--LClr);
-      .page-title {
-        font-weight: 600;
-      }
-      .header {
-        font-size: 0.9em;
-        margin-left: 0.25em;
-      }
-    }
-    &.focused {
-      a, a:visited {
-        color: var(--LHClr);
-      }
-    }
-  }
-}
-
-@media (max-width: @MQNarrow) {
-  .search-box {
-    input {
-      cursor: pointer;
-      width: 0;
-      border-color: transparent;
-      position: relative;
-      left: 1rem;
-      &:focus {
-        cursor: text;
-        left: 0;
-        width: 10rem;
-      }
-    }
-  }
-}
-
-@media (max-width: @MQNarrow) and (min-width: @MQMobile) {
-  .search-box {
-    .suggestions {
-      left: 0;
-    }
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .search-box {
-    margin-right: 0;
-    .suggestions {
-      right: 0;
-    }
-  }
-}
-
-@media (max-width: @MQMobileNarrow) {
-  .search-box {
-    .suggestions {
-      width: calc(100vw - 4rem);
-    }
-    input:focus {
-      width: 8rem;
-    }
-  }
-}
-</style>

ui/src/vuepress/Sidebar.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="sidebar">
-    <NavLinks/>
-    <slot name="top"/>
-    <ul class="sidebar-links" v-if="items.length">
-      <li v-for="(item, i) in items" :key="i">
-        <SidebarGroup
-          v-if="item.type === 'group'"
-          :item="item"
-          :first="i === 0"
-          :open="i === openGroupIndex"
-          :collapsable="item.collapsable"
-          @toggle="toggleGroup(i)"
-        />
-        <SidebarLink v-else :item="item"/>
-      </li>
-    </ul>
-    <slot name="bottom"/>
-  </div>
-</template>
-
-<script>
-import SidebarGroup from './SidebarGroup.vue'
-import SidebarLink from './SidebarLink.vue'
-import NavLinks from './NavLinks.vue'
-import { isActive } from './util'
-
-export default {
-  components: { SidebarGroup, SidebarLink, NavLinks },
-
-  props: ['items'],
-
-  data () {
-    return {
-      openGroupIndex: 0
-    }
-  },
-
-  created () {
-    this.refreshIndex()
-  },
-
-  watch: {
-    '$route' () {
-      this.refreshIndex()
-    }
-  },
-
-  methods: {
-    refreshIndex () {
-      const index = resolveOpenGroupIndex(
-        this.$route,
-        this.items
-      )
-      if (index > -1) {
-        this.openGroupIndex = index
-      }
-    },
-
-    toggleGroup (index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
-    },
-
-    isActive (page) {
-      return isActive(this.$route, page.path)
-    }
-  }
-}
-
-function resolveOpenGroupIndex (route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (item.type === 'group' && item.children.some(c => isActive(route, c.path))) {
-      return i
-    }
-  }
-  return -1
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.sidebar {
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-  a, a:visited {
-    display: inline-block;
-  }
-  .nav-links {
-    display: none;
-    border-bottom: 0.3em solid var(--SdBClr);
-    padding: 0.5rem 0 0.75rem 0;
-    a, a:visited {
-      font-weight: 600;
-    }
-    .nav-item, .repo-link {
-      display: block;
-      line-height: 1.25rem;
-      font-size: 1.1em;
-      padding: 0.5rem 0 0.5rem 1.5rem;
-    }
-  }
-  .sidebar-links {
-    padding: 1.5rem 0;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .sidebar {
-    .nav-links {
-      display: block;
-      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after {
-        top: calc(1rem - 0.3em);
-      }
-    }
-    .sidebar-links {
-      padding: 1rem 0;
-    }
-  }
-}
-</style>

ui/src/vuepress/SidebarButton.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
-    <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
-      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
-    </svg>
-  </div>
-</template>
-
-<style lang="less">
-@import './styles/config.less';
-
-.sidebar-button {
-  display: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  position: absolute;
-  padding: 0.6rem;
-  top: 0.6rem;
-  left: 1rem;
-  .icon {
-    display: block;
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
-
-@media (max-width: @MQMobile) {
-  .sidebar-button {
-    display: block;
-  }
-}
-</style>

ui/src/vuepress/SidebarGroup.vue

@@ -1,87 +0,0 @@
-<template>
-  <div
-    class="sidebar-group"
-    :class="{ first, collapsable }"
-  >
-    <p
-      class="sidebar-heading"
-      :class="{ open }"
-      @click="$emit('toggle')"
-    >
-      <span>{{ item.title }}</span>
-      <span
-        class="arrow"
-        v-if="collapsable"
-        :class="open ? 'down' : 'right'">
-      </span>
-    </p>
-
-    <DropdownTransition>
-      <ul
-        ref="items"
-        class="sidebar-group-items"
-        v-if="open || !collapsable"
-      >
-        <li v-for="child in item.children">
-          <SidebarLink :item="child"/>
-        </li>
-      </ul>
-    </DropdownTransition>
-  </div>
-</template>
-
-<script>
-import SidebarLink from './SidebarLink.vue'
-import DropdownTransition from './DropdownTransition.vue'
-
-export default {
-  name: 'SidebarGroup',
-  props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink, DropdownTransition }
-}
-</script>
-
-<style lang="less">
-.sidebar-group {
-  &:not(.first) {
-    margin-top: 1em;
-  }
-  .sidebar-group {
-    padding-left: 0.5em;
-  }
-  &:not(.collapsable) {
-    .sidebar-heading {
-      cursor: auto;
-      color: inherit;
-    }
-  }
-}
-
-.sidebar-heading {
-  color: var(--SdTClr);
-  transition: color .15s ease;
-  cursor: pointer;
-  font-size: 1.1em;
-  font-weight: bold;
- : // text-transform uppercase;
-  padding: 0 1.5rem;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  &.open, &:hover {
-    color: inherit;
-  }
-  .arrow {
-    position: relative;
-    top: -0.12em;
-    left: 0.5em;
-  }
-  &:.open .arrow {
-    top: -0.18em;
-  }
-}
-
-.sidebar-group-items {
-  transition: height .1s ease-out;
-  overflow: hidden;
-}
-</style>

ui/src/vuepress/SidebarLink.vue

@@ -1,98 +0,0 @@
-<script>
-import { isActive, hashRE, groupHeaders } from './util'
-
-export default {
-  functional: true,
-
-  props: ['item'],
-
-  render (h, { parent: { $page, $site, $route }, props: { item }}) {
-    // use custom active class matching logic
-    // due to edge case of paths ending with / + hash
-    const selfActive = isActive($route, item.path)
-    // for sidebar: auto pages, a hash link should be active if one of its child
-    // matches
-    const active = item.type === 'auto'
-      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
-      : selfActive
-    const link = renderLink(h, item.path, item.title || item.path, active)
-    const configDepth = $page.frontmatter.sidebarDepth != null
-      ? $page.frontmatter.sidebarDepth
-      : $site.themeConfig.sidebarDepth
-    const maxDepth = configDepth == null ? 1 : configDepth
-    const displayAllHeaders = !!$site.themeConfig.displayAllHeaders
-    if (item.type === 'auto') {
-      return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
-    } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
-      const children = groupHeaders(item.headers)
-      return [link, renderChildren(h, children, item.path, $route, maxDepth)]
-    } else {
-      return link
-    }
-  }
-}
-
-function renderLink (h, to, text, active) {
-  return h('router-link', {
-    props: {
-      to,
-      activeClass: '',
-      exactActiveClass: ''
-    },
-    class: {
-      active,
-      'sidebar-link': true
-    }
-  }, text)
-}
-
-function renderChildren (h, children, path, route, maxDepth, depth = 1) {
-  if (!children || depth > maxDepth) return null
-  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
-    const active = isActive(route, path + '#' + c.slug)
-    return h('li', { class: 'sidebar-sub-header' }, [
-      renderLink(h, path + '#' + c.slug, c.title, active),
-      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
-    ])
-  }))
-}
-</script>
-
-<style lang="less">
-@import './styles/config.less';
-
-.sidebar .sidebar-sub-headers {
-  padding-left: 1rem;
-  font-size: 0.95em;
-}
-
-a.sidebar-link, a:visited.sidebar-link {
-  font-weight: 400;
-  display: inline-block;
-  color: var(--SdLClr);
-  border-left: 0.25rem solid transparent;
-  padding: 0.35rem 1rem 0.35rem 1.25rem;
-  line-height: 1.4;
- : width: 100%;
- : box-sizing: border-box;
-  &:hover {
-    color: var(--SdLHClr);
-  }
-  &.active {
-    font-weight: 600;
-    color: var(--SdAClr);
-    border-left-color: var(--SdAClr);
-  }
-  .sidebar-group & {
-    padding-left: 2rem;
-  }
-  .sidebar-sub-headers & {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-left: none;
-    &.active {
-      font-weight: 500;
-    }
-  }
-}
-</style>

ui/src/vuepress/search.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

ui/src/vuepress/styles/custom-blocks.less

@@ -1,120 +0,0 @@
-.custom-block {
-  background-color: var(--AaBgClr);
-  border-color: var(--AaBClr);
-  color: var(--AaTClr);
-  a, a:visited {
-    color: var(--AaLClr);
-    :hover {
-      color: var(--AaLHClr);
-    }
-  }
-  .custom-block-title {
-    font-weight: 600;
-    margin-bottom: -0.4rem;
-  }
-  &.tip, &.warning, &.danger {
-    padding: .1rem 1.5rem;
-    border-left-width: .5rem;
-    border-left-style: solid;
-    margin: 1rem 0;
-  }
-  &.tip {
-    background-color: var(--AtBgClr);
-    border-color: var(--AtBClr);
-    color: var(--AtTClr);
-    a, a:visited {
-      color: var(--AtLClr);
-      :hover {
-        color: var(--AtLHClr);
-      }
-    }
-  }
-  &.hint {
-    background-color: var(--AhBgClr);
-    border-color: var(--AhBClr);
-    color: var(--AhTClr);
-    a, a:visited {
-      color: var(--AhLClr);
-      :hover {
-        color: var(--AhLHClr);
-      }
-    }
-  }
-  &.important {
-    background-color: var(--AiBgClr);
-    border-color: var(--AiBClr);
-    color: var(--AiTClr);
-    a, a:visited {
-      color: var(--AiLClr);
-      :hover {
-        color: var(--AiLHClr);
-      }
-    }
-  }
-  &.note {
-    background-color: var(--AnBgClr);
-    border-color: var(--AnBClr);
-    color: var(--AnTClr);
-    a, a:visited {
-      color: var(--AnLClr);
-      :hover {
-        color: var(--AnLHClr);
-      }
-    }
-  }
-  &.success {
-    background-color: var(--AsBgClr);
-    border-color: var(--AsBClr);
-    color: var(--AsTClr);
-    a, a:visited {
-      color: var(--AsLClr);
-      :hover {
-        color: var(--AsLHClr);
-      }
-    }
-  }
-  &.warning {
-    background-color: var(--AwBgClr);
-    border-color: var(--AwBClr);
-    color: var(--AwTClr);
-    a, a:visited {
-      color: var(--AwLClr);
-      :hover {
-        color: var(--AwLHClr);
-      }
-    }
-  }
-  &.caution {
-    background-color: var(--AcBgClr);
-    border-color: var(--AcBClr);
-    color: var(--AcTClr);
-    a, a:visited {
-      color: var(--AcLClr);
-      :hover {
-        color: var(--AcLHClr);
-      }
-    }
-  }
-  &.danger {
-    background-color: var(--AdBgClr);
-    border-color: var(--AdBClr);
-    color: var(--AdTClr);
-    a, a:visited {
-      color: var(--AdLClr);
-      :hover {
-        color: var(--AdLHClr);
-      }
-    }
-  }
-  &.error {
-    background-color: var(--AeBgClr);
-    border-color: var(--AeBClr);
-    color: var(--AeTClr);
-    a, a:visited {
-      color: var(--AeLClr);
-      :hover {
-        color: var(--AeLHClr);
-      }
-    }
-  }
-}

ui/src/vuepress/styles/nprogress.less

@@ -1,58 +0,0 @@
-#nprogress {
-  pointer-events: none;
-  .bar {
-    background: var(--AClr);
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 0.5em;
-  }
-  .peg {
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 10ex;
-    height: 100%;
-    box-shadow: 0 0 1em var(--AClr), 0 0 0.5em var(--AClr);
-    opacity: 1.0;
-    transform: rotate(3deg) translate(0, -0.4em);
-  }
-  .spinner {
-    display: block;
-    position: fixed;
-    z-index: 1031;
-    top: 1.1em;
-    right: 1.1em;
-  }
-  .spinner-icon {
-    width: 1.5ex;
-    height: 1.5em;
-    box-sizing: border-box;
-    border: solid 0.2em transparent;
-    border-top-color: var(--AClr);
-    border-left-color: var(--AClr);
-    border-radius: 50%;
-    animation: nprogress-spinner 400ms linear infinite;
-  }
-}
-
-.nprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

ui/src/vuepress/styles/theme.less

@@ -1,996 +0,0 @@
-@import './config.less';
-@import './nprogress.less';
-@import './code.less';
-@import './custom-blocks.less';
-@import './arrow.less';
-@import './wrapper.less';
-@import './toc.less';
-
-html, body {
-  padding: 0;
-  margin: 0;
-  min-height: 100vh;
-}
-
-body {
-  font-family: Luciole;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--TClr);
-  background-color: var(--BgClr);
-  a, a:visited {
-    color: var(--LClr);
-    &:hover {
-      color: var(--LHClr);
-    }
-  }
-}
-
-#app {
-  display: flex;
-  flex-flow: column;
-  min-height: 100vh;
-
-  .navbar {
-    position: fixed;
-    z-index: 20;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--navbarHeight);
-    background-color: var(--NvBgClr);
-    box-sizing: border-box;
-    border-bottom: 0.3em solid var(--NvBClr);
-    box-shadow: 0 0.3em var(--NvBClr), 0 0 0.3em 0.4em var(--NvBgClr);
-    color: var(--NvTClr);
-    .nav-dropdown-menu {
-      vertical-align: top;
-      details {
-        padding: 0 0.5em 0 0.5em;
-        background: var(--NvBgClr);
-        border-radius: 0.5em;
-        color: var(--NvTClr);
-        ul {
-          list-style: none;
-        }
-        a, a:visited {
-          color: var(--NvLClr);
-          &:hover {
-            color: var(--NvLHClr);
-          }
-        }
-      }
-    }
-
-    a, a:visited {
-      color: var(--NvLClr);
-      &:hover {
-        color: var(--NvLHClr);
-      }
-    }
-
-  }
-  footer.footer {
-    padding: 0.3em;;
-    box-shadow: 0 -0.3em var(--FoBClr), 0 0 0.3em 0.4em var(--FoBgClr);
-    box-sizing: border-box;
-    border-top: 0.3em solid var(--FoBClr);
-    background-color: var(--FoBgClr);
-    color: var(--FoTClr);
-    margin-top: -1em;
-    z-index: 1000;
-
-    a, a:visited {
-      color: var(--FoLClr);
-      &:hover {
-        color: var(--FoLHClr);
-      }
-    }
-  }
-
-  #appflex {
-    display: flex;
-    flex-flow: row;
-    flex-grow: 1;
-    .sidebar-mask {
-      position: fixed;
-      z-index: 9;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      display: none;
-    }
-
-    .sidebar {
-      font-size: 0.95em;
-      background-color: var(--SdBgClr);
-      width: var(--sidebarWidth);
-      min-height: 100%;
-      z-index: 10;
-      margin-top: var(--navbarHeight);
-      box-sizing: border-box;
-      border-right: 0.2em solid var(--SdBClr);
-      box-shadow: 0 0 var(--SdBClr), -0.3em 0.1em 0.2em 0.3em var(--NvBgClr);
-    }
-
-    .page {
-      width: 100%;
-      ul.simple {
-        list-style: '– ';
-      }
-    }
-  }
-}
-
-.content:not(.custom) {
-  .wrapper();
-  a:hover {
-    text-decoration: underline;
-  }
-  p.demo {
-    padding: 1rem 1.5rem;
-    border: 0.3em solid var(--BClr);
-    border-radius: 0.4em;
-  }
-  img {
-    max-width: 100%;
-  }
-}
-
-.content.custom {
-  padding: 0;
-  margin: 0;
-  img {
-    max-width: 100%;
-  }
-}
-
-a, a:visited {
-  font-weight: 500;
-  color: var(--AClr);
-  text-decoration: none;
-}
-
-p a code, p a:visited code {
-  font-weight: 400;
-  color: var(--AClr);
-}
-
-kbd {
-  background: var(--BgClr);
-  border: solid 0.05rem var(--BClr);
-  border-bottom: solid 0.1rem var(--BClr);
-  border-radius: 0.15rem;
-  line-height: 1.5em;
-  padding: 0.25em;
-}
-
-blockquote {
-  font-size: 1.2rem;
-  color: var(--BqTClr);
-  border-left: .25rem solid var(--BqBClr);
-  background-color: var(--BqBgClr);
-  margin-left: 0;
-  padding-left: 1rem;
-}
-
-ul, ol {
-  padding-left: 1.2em;
-}
-
-strong {
-  font-weight: 600;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.25;
-  .content:not(.custom) > & {
-    margin-top: calc(0.5rem - var(--navbarHeight));
-    padding-top: calc(var(--navbarHeight) + 1rem);
-    margin-bottom: 0;
-    &:first-child {
-      margin-top: -1.5rem;
-      margin-bottom: 1rem;
-      + p, + pre, + .custom-block {
-        margin-top: 2rem;
-      }
-    }
-  }
-  &:hover .header-anchor {
-    opacity: 1;
-  }
-}
-
-h1 {
-  font-size: 2.2rem;
-}
-
-h2 {
-  font-size: 1.65rem;
-  padding-bottom: .3rem;
-  border-bottom: 0.3em solid var(--BClr);
-}
-
-h3 {
-  font-size: 1.35rem;
-}
-
-a.header-anchor, a:visited.header-anchor {
-  font-size: 0.85em;
-  float: left;
-  margin-left: -0.87em;
-  padding-right: 0.23em;
-  margin-top: 0.125em;
-  opacity: 0;
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-code, kbd, .line-number {
-  font-family: Hack;
-}
-
-p, ul, ol {
-  line-height: 1.7;
-}
-
-hr {
-  border: 0;
-  border-top: 0.3em solid var(--BClr);
-}
-
-table {
-  border-collapse: collapse;
-  margin: 1rem 0;
-  display: block;
-  overflow-x: auto;
-}
-
-tr {
-  border-top: 0.3em solid var(--TeBClr);
-  &:nth-child(2n) {
-    background-color: var(--ToBgClr);
-    color: var(--ToTClr);
-  }
-}
-
-th, td {
-  border: 0.3em solid var(--TeBClr);
-  padding: .6em 1em;
-}
-
-.custom-layout {
-  padding-top: var(--navbarHeight);
-}
-
-.theme-container {
-  &.sidebar-open {
-    .sidebar-mask {
-      display: block;
-    }
-  }
-  &.no-navbar {
-    .content:not(.custom) > h1, h2, h3, h4, h5, h6 {
-        margin-top: 1.5rem;
-        padding-top: 0;
-    }
-    .sidebar {
-      top: 0;
-    }
-    .custom-layout {
-      padding-top: 0;
-    }
-  }
-}
-
-
-@media (min-width: @MQMobile + 0.2ex) {
-  .theme-container.no-sidebar {
-    .sidebar {
-      display: none;
-    }
-    .page {
-      padding-left: 0;
-    }
-    img.align-right, figure.align-right {
-      float: none;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-}
-
-:focus {
-  box-shadow: 0 0 0.4em 0.3em var(--FClr) !important;
-  border-radius: 0.5em;
-}
-
-a.btn, a:visited.btn {
-  background-color: var(--BtnBgClr);
-  padding: .6em .6em;
-  font-size: .8em;
-  line-height: 0.1em;
-  color: var(--BtnTClr);
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-
-  &:hover {
-    background-color: var(--BtnBgAClr);
-  }
-}
-
-ul.social {
-  font-size: 0.9em;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-
-  > li {
-    margin: 0.5em;
-    flex-basis: min-content;
-    flex-grow: 0;
-    list-style: none;
-  }
-}
-
-svg.fasvg {
-  fill: var(--TClr);
-  max-height: 1.5em;
-  max-width: 1.5ex;
-  width: 1.5ex;
-  height: 1.5em;
-  margin: 0 0 0 0;
-  padding: 0 0 0 0;
-  vertical-algin: baseline;
-}
-
-a.fasvglink, a:visited.fasvglink {
-  display: inline-flex !important;
-  flex-flow: row nowrap;
-  height: 2em;
-  border-radius: 2em;
-  border: 0.2em solid var(--LClr);
-  text-align: center;
-  line-height: 2em;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  margin: 0.2em 0.2em 0.2em 0.2em;
-  color: var(--BtnTClr);
-
-  svg {
-    max-height: 1.2em;
-    max-width: 1.2ex;
-    height: 1.2em;
-    width: 1.2ex;
-    margin: 0.2em 0.5em 0.2em 0.2em;
-    display: inline-block;
-    vertical-algin: baseline;
-    fill: var(--BtnTClr);
-  }
-
-  &.email {
-    color: var(--SEmailClr);
-    border-color: var(--SEmailClr);
-    svg {
-      fill: var(--SEmailClr);
-    }
-  }
-
-  &.contact {
-    color: var(--SContactClr);
-    border-color: var(--SContactClr);
-    svg {
-      fill: var(--SContactClr);
-    }
-  }
-
-  &.facebook {
-    color: var(--SFacebookClr);
-    border-color: var(--SFacebookClr);
-    svg {
-      fill: var(--SFacebookClr);
-    }
-  }
-
-  &.github {
-    color: var(--SGithubClr);
-    border-color: var(--SGithubClr);
-    svg {
-      fill: var(--SGithubClr);
-    }
-  }
-
-  &.google {
-    color: var(--SGoogleClr);
-    border-color: var(--SGoogleClr);
-    svg {
-      fill: var(--SGoogleClr);
-    }
-  }
-
-  &.linkedin {
-    color: var(--SLinkedinClr);
-    border-color: var(--SLinkedinClr);
-    svg {
-      fill: var(--SLinkedinClr);
-    }
-  }
-
-  &.pinterest {
-    color: var(--SPinterestClr);
-    border-color: var(--SPinterestClr);
-    svg {
-      fill: var(--SPinterestClr);
-    }
-  }
-
-  &.reddit {
-    color: var(--SRedditClr);
-    border-color: var(--SRedditClr);
-    svg {
-      fill: var(--SRedditClr);
-    }
-  }
-
-  &.rss {
-    color: var(--SRssClr);
-    border-color: var(--SRssClr);
-    svg {
-      fill: var(--SRssClr);
-    }
-  }
-
-  &.soundcloud {
-    color: var(--SSoundcloudClr);
-    border-color: var(--SSoundcloudClr);
-    svg {
-      fill: var(--SSoundcloudClr);
-    }
-  }
-
-  &.stackOverflow {
-    color: var(--SStackOverflowClr);
-    border-color: var(--SStackOverflowClr);
-    svg {
-      fill: var(--SStackOverflowClr);
-    }
-  }
-
-  &.twitter {
-    color: var(--STwitterClr);
-    border-color: var(--STwitterClr);
-    svg {
-      fill: var(--STwitterClr);
-    }
-  }
-
-  &.mastodon {
-    color: var(--SMastodonClr);
-    border-color: var(--SMastodonClr);
-    svg {
-      fill: var(--SMastodonClr);
-    }
-  }
-
-  &.diaspora {
-    color: var(--SDiasporaClr);
-    border-color: var(--SDiasporaClr);
-    svg {
-      fill: var(--SDiasporaClr);
-    }
-  }
-
-  &.youtube {
-    color: var(--SYoutubeClr);
-    border-color: var(--SYoutubeClr);
-    svg {
-      fill: var(--SYoutubeClr);
-    }
-  }
-
-  &.email {
-    color: var(--SEmailClr);
-    border-color: var(--SEmailClr);
-    svg {
-      fill: var(--SEmailClr);
-    }
-  }
-
-  &.contact {
-    color: var(--SContactClr);
-    border-color: var(--SContactClr);
-    svg {
-      fill: var(--SContactClr);
-    }
-  }
-
-  &.facebook {
-    color: var(--SFacebookClr);
-    border-color: var(--SFacebookClr);
-    svg {
-      fill: var(--SFacebookClr);
-    }
-  }
-
-  &.github {
-    color: var(--SGithubClr);
-    border-color: var(--SGithubClr);
-    svg {
-      fill: var(--SGithubClr);
-    }
-  }
-
-  &.google {
-    color: var(--SGoogleClr);
-    border-color: var(--SGoogleClr);
-    svg {
-      fill: var(--SGoogleClr);
-    }
-  }
-
-  &.linkedin {
-    color: var(--SLinkedinClr);
-    border-color: var(--SLinkedinClr);
-    svg {
-      fill: var(--SLinkedinClr);
-    }
-  }
-
-  &.pinterest {
-    color: var(--SPinterestClr);
-    border-color: var(--SPinterestClr);
-    svg {
-      fill: var(--SPinterestClr);
-    }
-  }
-
-  &.reddit {
-    color: var(--SRedditClr);
-    border-color: var(--SRedditClr);
-    svg {
-      fill: var(--SRedditClr);
-    }
-  }
-
-  &.rss {
-    color: var(--SRssClr);
-    border-color: var(--SRssClr);
-    svg {
-      fill: var(--SRssClr);
-    }
-  }
-
-  &.soundcloud {
-    color: var(--SSoundcloudClr);
-    border-color: var(--SSoundcloudClr);
-    svg {
-      fill: var(--SSoundcloudClr);
-    }
-  }
-
-  &.stackOverflow {
-    color: var(--SStackOverflowClr);
-    border-color: var(--SStackOverflowClr);
-    svg {
-      fill: var(--SStackOverflowClr);
-    }
-  }
-
-  &.twitter {
-    color: var(--STwitterClr);
-    border-color: var(--STwitterClr);
-    svg {
-      fill: var(--STwitterClr);
-    }
-  }
-
-  &.mastodon {
-    color: var(--SMastodonClr);
-    border-color: var(--SMastodonClr);
-    svg {
-      fill: var(--SMastodonClr);
-    }
-  }
-
-  &.diaspora {
-    color: var(--SDiasporaClr);
-    border-color: var(--SDiasporaClr);
-    svg {
-      fill: var(--SDiasporaClr);
-    }
-  }
-
-  &.youtube {
-    color: var(--SYoutubeClr);
-    border-color: var(--SYoutubeClr);
-    svg {
-      fill: var(--SYoutubeClr);
-    }
-  }
-
-
-  &:hover {
-    z-index: 2;
-    -webkit-transform: scale(1.3em);
-    transform: scale(1.3em);
-    color: var(--BtnAClr) !important;
-    border-color: var(--BtnAClr) !important;
-    svg {
-      fill: var(--BtnAClr) !important;
-    }
-  }
-}
-
-form {
-  footer {
-    text-align: right;
-
-    > * {
-      text-align: left;
-    }
-  }
-  main {
-    width: 100%;
-
-    .formctl {
-      display: inline-flex;
-      flex-flow: row wrap;
-      justify-content: flex-end;
-      margin: 0.3em;
-      padding: 0.3em;
-      width: 100%;
-
-      label {
-        flex-grow: 1;
-      }
-
-      input, textarea {
-        flex-grow: 2;
-        display: inline-flex;
-        max-width: 90%;
-      }
-    }
-  }
-}
-
-button, a.btn, a:visited.btn {
-  background-color: var(--BtnBgClr);
-  color: var(--BtnTClr);
-  border: solid 0.3em var(--BtnBClr);
-  text-decoration: none;
-  display: inline-block;
-  border-radius: 2em;
-  height: 2em;
-  padding: 0.2em 0.8em 0.2em 0.8em;
-  font-size: 1.2em;
-
-  &:hover {
-    background-color: var(--BtnHClr);
-  }
-}
-
-input, textarea {
-  background-color: var(--InBgClr);
-  color: var(--InTClr);
-  border: solid 0.1em var(--InBClr);
-  text-decoration: none;
-  border-radius: 0.3em;
-  padding: 0.2em 0.8em 0.2em 0.8em;
-  margin: 0.2em;
-  font-size: 1rem;
-
-  + span.validity {
-    height: 1.5em;
-    width: 1.5ex;
-
-    &:invalid {
-      border: solid 0.12em var(--AeBClr);
-    }
-    &:focus {
-      border: solid 0.1em var(--InBClr);
-    }
-    + span.validity::after {
-      content: "✘";
-      color: var(--AeBClr);
-    }
-  }
-
-  &:valid {
-    border: solid 0.12em var(--AsBClr);
-    &:focus {
-      border: solid 0.1em var(--InBClr);
-    }
-    + span.validity::after {
-      content: "✓";
-      color: var(--AsBClr);
-    }
-  }
-}
-
-.flexgroup {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-
-  > img {
-    height: 100%;
-  }
-
-  > * {
-    border-radius: 1em;
-    box-shadow: 0 0 0.2em 0.1em var(--BClr);
-    width: 40%;
-    flex-grow: 1;
-    max-width: 80ex;
-    padding: 1em;
-    margin: 1em 0.5em 1em 0.5em;
-
-    &a, &a:visited {
-      box-shadow: 0 0 0.2em 0.1em var(--LClr);
-
-      &:hover {
-        box-shadow: 0 0 0.2em 0.1em var(--LHClr);
-      }
-    }
-  }
-}
-
-#mainlogo {
-  text-align: center;
-  width: 100%;
-
-  img {
-    text-align: center;
-    border-radius: 50%;
-    width: 90%;
-    max-width: 15ex;
-  }
-}
-
-.content:not(.custom) {
-  max-width: 90%;
-}
-
-
-/* THE SECTION BELOW DEFINES THE APPEARANCE OF AUTODOC-GENERATED DOCS */
-
-.sig-name.descname {
-  font-size: 1.2em;
-  font-weight: bold;
-  padding: 0 0 0.2em;
-}
-
-.sig-param {
-  font-family: 'Hack', monospace;
-  margin-left: 0.3em;
-}
-
-.sig-paren {
-  margin-left: 0.3em;
-}
-
-dt {
-  line-height: 1.5em;
-  margin-bottom: 1em;
-}
-
-dt.field-odd, dt.field-even, p.rubric {
-    font-size: 1.2em;
-    font-weight: bold;
-    color: var(--TrClr);
-}
-
-dd {
-  margin-inline-start: 0.8em;
-}
-
-dd.field-odd p strong {
-  margin-left: 1em;
-}
-
-dl.method, dl.function {
-  margin-top: 2em;
-  margin-bottom: 3em;
-}
-
-dl.navdl {
-  margin-top: 0.2em;
-  margin-bottom: 0.3em;
-}
-
-dl.navdl dt {
-  margin-top: 0em;
-  margin-bottom: 0em;
-  padding: 0rem 1rem 0rem 1.45rem !important;
-  line-height: 1.1em;
-  font-weight: bold;
-  font-style: italic;
-}
-
-dl.navdl dd {
-  margin-top: 0em;
-  margin-bottom: 0em;
-  line-height: 1.1em;
-  padding: 0.1rem 1rem 0.1rem 2.25rem !important;
-}
-
-.viewcode-link {
-  margin-left: 1em;
-  color: var(--LClr);
-}
-
-/* THE SECTION BELOW DEFINES THE APPEARANCE OF TABLE-OF-CONTENTS */
-
-/* color fixes for table of contents */
-.toc-backref {
-  color: inherit;
-}
-
-/* Hide all TOC titles */
-.contents.topic p.topic-title {
-  display: none;
-}
-
-.contents.topic {
-  margin-bottom: 3em;
-}
-
-/* THE SECTION BELOW CHANGES CODE FONTS FOR BETTER 80-CHARS READABILITY */
-code, pre {
-  font-family: 'Hack', monospace;
-}
-
-blockquote {
-  font-size: inherit;
-}
-
-blockquote h2 {
-  margin-left: 1em;
-}
-
-/* THE SECTION BELOW FIXES A SPHINX-MERMAID OPACITY PROBLEM */
-.content .section {
-  opacity: 1.0 !important;
-}
-.section {
-  opacity: 1.0 !important;
-}
-
-/* MAKES SPHINX SYNTAX figure:: :align:center WORK AGAIN */
-.figure.align-center {
-  text-align: center;
-}
-
-.postlist-style-flex, .flexgroup {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-
-  > img {
-    height: 100%;
-  }
-
-  > * {
-    flex-basis: 20%;
-    margin: 2em;
-    border-radius: 1em;
-    box-shadow: 0 0 0.2em 0.1em var(--BClr);
-    flex-grow: 1;
-    min-width: 20ex;
-    max-width: 80ex;
-    padding: 1em;
-    margin: 1em 0.5em 1em 0.5em;
-
-    &li {
-      list-style: none;
-    }
-
-    &a, &a:visited {
-      box-shadow: 0 0 0.2em 0.1em var(--LClr);
-
-      &:hover {
-        box-shadow: 0 0 0.2em 0.1em var(--LHClr);
-      }
-    }
-  }
-}
-
-img.align-center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-img.align-right, figure.align-right {
-  display: inline-block;
-  float: right;
-  margin: 2em;
-
-  &::after {
-    clear: both;
-    display: block;
-  }
-}
-
-ul.ablog-archive {
-  list-style: none;
-  overflow: auto;
-  margin-left: 0;
-}
-
-ul.ablog-archive li {
-  float: left;
-  margin-right: 0.1em;
-  font-size: 0.9em;
-}
-
-ul.postlist a {
-  font-style: italic;
-}
-
-ul.postlist-style-disc {
-  list-style-type: disc;
-}
-
-ul.postlist-style-none {
-  list-style-type: none;
-}
-
-ul.postlist-style-circle {
-  list-style-type: circle;
-}
-
-ul.ablog-cloud {
-  list-style: none;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-}
-
-ul.ablog-cloud li {
-  float: left;
-  margin: 0 0 0 0;
-  padding: 0.005em 1em 0.005em 1em;
-
-  a {
-    padding: 0 0 0 0;
-    margin: 0 0 0 0;
-  }
-}
-
-ul.ablog-cloud a, ul.ablog-cloud a:visited {
-  text-decoration: none;
-  vertical-align: middle;
-}
-
-li.ablog-cloud-1 {
-  font-size: 0.8em !important;
-}
-
-li.ablog-cloud-2 {
-  font-size: 0.95em !important;
-}
-
-li.ablog-cloud-3 {
-  font-size: 1.1em !important;
-}
-
-li.ablog-cloud-4 {
-  font-size: 1.25em !important;
-}
-
-li.ablog-cloud-5 {
-  font-size: 1.4em !important;
-}
-
-.nav-links summary {
-  cursor: pointer;
-  width: 100%;
-}
-
-@import './mobile.less';

ui/src/vuepress/util.js

@@ -1,216 +0,0 @@
-export const hashRE = /#.*$/
-export const extRE = /\.(md|html)$/
-export const endingSlashRE = /\/$/
-export const outboundRE = /^(https?:|mailto:|tel:)/
-
-export function normalize (path) {
-  return decodeURI(path)
-    .replace(hashRE, '')
-    .replace(extRE, '')
-}
-
-export function getHash (path) {
-  const match = path.match(hashRE)
-  if (match) {
-    return match[0]
-  }
-}
-
-export function isExternal (path) {
-  return outboundRE.test(path)
-}
-
-export function isMailto (path) {
-  return /^mailto:/.test(path)
-}
-
-export function isTel (path) {
-  return /^tel:/.test(path)
-}
-
-export function ensureExt (path) {
-  if (isExternal(path)) {
-    return path
-  }
-  const hashMatch = path.match(hashRE)
-  const hash = hashMatch ? hashMatch[0] : ''
-  const normalized = normalize(path)
-
-  if (endingSlashRE.test(normalized)) {
-    return path
-  }
-  return normalized + '.html' + hash
-}
-
-export function isActive (route, path) {
-  const routeHash = route.hash
-  const linkHash = getHash(path)
-  if (linkHash && routeHash !== linkHash) {
-    return false
-  }
-  const routePath = normalize(route.path)
-  const pagePath = normalize(path)
-  return routePath === pagePath
-}
-
-export function resolvePage (pages, rawPath, base) {
-  if (base) {
-    rawPath = resolvePath(rawPath, base)
-  }
-  const path = normalize(rawPath)
-  for (let i = 0; i < pages.length; i++) {
-    if (normalize(pages[i].path) === path) {
-      return Object.assign({}, pages[i], {
-        type: 'page',
-        path: ensureExt(rawPath)
-      })
-    }
-  }
-  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
-  return {}
-}
-
-function resolvePath (relative, base, append) {
-  const firstChar = relative.charAt(0)
-  if (firstChar === '/') {
-    return relative
-  }
-
-  if (firstChar === '?' || firstChar === '#') {
-    return base + relative
-  }
-
-  const stack = base.split('/')
-
-  // remove trailing segment if:
-  // - not appending
-  // - appending to trailing slash (last segment is empty)
-  if (!append || !stack[stack.length - 1]) {
-    stack.pop()
-  }
-
-  // resolve relative path
-  const segments = relative.replace(/^\//, '').split('/')
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i]
-    if (segment === '..') {
-      stack.pop()
-    } else if (segment !== '.') {
-      stack.push(segment)
-    }
-  }
-
-  // ensure leading slash
-  if (stack[0] !== '') {
-    stack.unshift('')
-  }
-
-  return stack.join('/')
-}
-
-export function resolveSidebarItems (page, route, site, localePath) {
-  const { pages, themeConfig } = site
-
-  const localeConfig = localePath && themeConfig.locales
-    ? themeConfig.locales[localePath] || themeConfig
-    : themeConfig
-
-  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
-  if (pageSidebarConfig === 'auto') {
-    return resolveHeaders(page)
-  }
-
-  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
-  if (!sidebarConfig) {
-    return []
-  } else {
-    const { base, config } = resolveMatchingConfig(route, sidebarConfig)
-    return config
-      ? config.map(item => resolveItem(item, pages, base))
-      : []
-  }
-}
-
-function resolveHeaders (page) {
-  const headers = groupHeaders(page.headers || [])
-  return [{
-    type: 'group',
-    collapsable: false,
-    title: page.title,
-    children: headers.map(h => ({
-      type: 'auto',
-      title: h.title,
-      basePath: page.path,
-      path: page.path + '#' + h.slug,
-      children: h.children || []
-    }))
-  }]
-}
-
-export function groupHeaders (headers) {
-  // group h3s under h2
-  headers = headers.map(h => Object.assign({}, h))
-  let lastH2
-  headers.forEach(h => {
-    if (h.level === 2) {
-      lastH2 = h
-    } else if (lastH2) {
-      (lastH2.children || (lastH2.children = [])).push(h)
-    }
-  })
-  return headers.filter(h => h.level === 2)
-}
-
-export function resolveNavLinkItem (linkItem) {
-  return Object.assign(linkItem, {
-    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
-  })
-}
-
-export function resolveMatchingConfig (route, config) {
-  if (Array.isArray(config)) {
-    return {
-      base: '/',
-      config: config
-    }
-  }
-  for (const base in config) {
-    if (ensureEndingSlash(route.path).indexOf(base) === 0) {
-      return {
-        base,
-        config: config[base]
-      }
-    }
-  }
-  return {}
-}
-
-function ensureEndingSlash (path) {
-  return /(\.html|\/)$/.test(path)
-    ? path
-    : path + '/'
-}
-
-function resolveItem (item, pages, base, isNested) {
-  if (typeof item === 'string') {
-    return resolvePage(pages, item, base)
-  } else if (Array.isArray(item)) {
-    return Object.assign(resolvePage(pages, item[0], base), {
-      title: item[1]
-    })
-  } else {
-    if (isNested) {
-      console.error(
-        '[vuepress] Nested sidebar groups are not supported. ' +
-        'Consider using navbar + categories instead.'
-      )
-    }
-    const children = item.children || []
-    return {
-      type: 'group',
-      title: item.title,
-      children: children.map(child => resolveItem(child, pages, base, true)),
-      collapsable: item.collapsable !== false
-    }
-  }
-}

ui/theme-epub.less

@@ -0,0 +1,181 @@
+@import './no-weasyprint.less';
+@import './wrapper.less';
+@import './common.less';
+@import './config.less';
+
+@sidebarWidth: @basesidebarWidth;
+@contentWidth: @basecontentWidth;
+
+@lineNumbersWrapperWidth: @baselineNumbersWrapperWidth;
+
+@AClr: @baseAClr;
+@SdA2Clr: @baseSdA2Clr;
+@FClr: @baseFClr;
+@BgClr: @baseBgClr;
+@TClr: @baseTClr;
+@T2Clr: @baseT2Clr;
+@SdT2Clr: @baseSdT2Clr;
+@TrClr: @baseTrClr;
+@BClr: @baseBClr;
+@LClr: @baseLClr;
+@LHClr: @baseLHClr;
+@ArBgClr: @baseArBgClr;
+
+@NvAClr: @baseNvAClr;
+@NvBgClr: @baseNvBgClr;
+@NvBClr: @baseNvBClr;
+@NvTClr: @baseNvTClr;
+@NvLClr: @baseNvLClr;
+@NvLHClr: @baseNvLHClr;
+
+@InBgClr: @baseInBgClr;
+@InBClr: @baseInBClr;
+
+@BtnBgAClr: @baseBtnBgAClr;
+@BtnBgClr: @baseBtnBgClr;
+@BtnBClr: @baseBtnBClr;
+@BtnTClr: @baseBtnTClr;
+
+@AaBgClr: @baseAaBgClr;
+@AaBClr: @baseAaBClr;
+@AaTClr: @baseAaTClr;
+@AaLClr: @baseAaLClr;
+@AaLHClr: @baseAaLHClr;
+
+@AtBgClr: @baseAtBgClr;
+@AtBClr: @baseAtBClr;
+@AtTClr: @baseAtTClr;
+@AtLClr: @baseAtLClr;
+@AtLHClr: @baseAtLHClr;
+
+@AwBgClr: @baseAwBgClr;
+@AwBClr: @baseAwBClr;
+@AwTClr: @baseAwTClr;
+@AwLClr: @baseAwLClr;
+@AwLHClr: @baseAwLHClr;
+
+@AdBgClr: @baseAdBgClr;
+@AdBClr: @baseAdBClr;
+@AdTClr: @baseAdTClr;
+@AdLClr: @baseAdLClr;
+@AdLHClr: @baseAdLHClr;
+
+@AsBgClr: @baseAsBgClr;
+@AsBClr: @baseAsBClr;
+@AsTClr: @baseAsTClr;
+@AsLClr: @baseAsLClr;
+@AsLHClr: @baseAsLHClr;
+
+@AhBgClr: @baseAhBgClr;
+@AhBClr: @baseAhBClr;
+@AhTClr: @baseAhTClr;
+@AhLClr: @baseAhLClr;
+@AhLHClr: @baseAhLHClr;
+
+@AiBgClr: @baseAiBgClr;
+@AiBClr: @baseAiBClr;
+@AiTClr: @baseAiTClr;
+@AiLClr: @baseAiLClr;
+@AiLHClr: @baseAiLHClr;
+
+@AnBgClr: @baseAnBgClr;
+@AnBClr: @baseAnBClr;
+@AnTClr: @baseAnTClr;
+@AnLClr: @baseAnLClr;
+@AnLHClr: @baseAnLHClr;
+
+@AcBgClr: @baseAcBgClr;
+@AcBClr: @baseAcBClr;
+@AcTClr: @baseAcTClr;
+@AcLClr: @baseAcLClr;
+@AcLHClr: @baseAcLHClr;
+
+@AeBgClr: @baseAeBgClr;
+@AeBClr: @baseAeBClr;
+@AeTClr: @baseAeTClr;
+@AeLClr: @baseAeLClr;
+@AeLHClr: @baseAeLHClr;
+
+@BqAClr: @baseBqAClr;
+@BqBgClr: @baseBqBgClr;
+@BqBClr: @baseBqBClr;
+@BqTClr: @baseBqTClr;
+@BqLClr: @baseBqLClr;
+@BqLHClr: @baseBqLHClr;
+
+@CdAClr: @baseCdAClr;
+@CdBgAClr: @baseCdBgAClr;
+@CdBgClr: @baseCdBgClr;
+@CdBClr: @baseCdBClr;
+@TClr: @baseTClr;
+@T2Clr: @baseT2Clr;
+@SdT2Clr: @baseSdT2Clr;
+@CdT2Clr: @baseCdT2Clr;
+@CdTClr: @baseCdTClr;
+@CdLClr: @baseCdLClr;
+@CdLHClr: @baseCdLHClr;
+
+
+@PrAClr: @basePrAClr;
+@PrBgAClr: @basePrBgAClr;
+@PrBgClr: @basePrBgClr;
+@PrBClr: @basePrBClr;
+@PrB2Clr: @basePrB2Clr;
+@PrTClr: @basePrTClr;
+@PrLNClr: @basePrLNClr;
+@PrLClr: @basePrLClr;
+@PrLHClr: @basePrLHClr;
+
+@TeAClr: @baseTeAClr;
+@TeBgAClr: @baseTeBgAClr;
+@TeBgClr: @baseTeBgClr;
+@TeBClr: @baseTeBClr;
+@TeTClr: @baseTeTClr;
+@TeLClr: @baseTeLClr;
+@TeLHClr: @baseTeLHClr;
+
+@ToAClr: @baseToAClr;
+@ToBgAClr: @baseToBgAClr;
+@ToBgClr: @baseToBgClr;
+@ToBClr: @baseToBClr;
+@ToTClr: @baseToTClr;
+@ToLClr: @baseToLClr;
+@ToLHClr: @baseToLHClr;
+
+@SdAClr: @baseSdAClr;
+@SdBgClr: @baseSdBgClr;
+@SdBClr: @baseSdBClr;
+@SdTClr: @baseSdTClr;
+@SdLClr: @baseSdLClr;
+@SdLHClr: @baseSdLHClr;
+
+@FoAClr: @baseFoAClr;
+@FoBClr: @baseFoBClr;
+@FoBgClr: @baseFoBgClr;
+@FoTClr: @baseFoTClr;
+@FoLClr: @baseFoLClr;
+@FoLHClr: @baseFoLHClr;
+
+@InAClr: @baseInAClr;
+@InTClr: @baseInTClr;
+@InHClr: @baseInHClr;
+
+@BtnAClr: @baseBtnAClr;
+@BtnHClr: @baseBtnHClr;
+@BhBgClr: @baseBhBgClr;
+
+@SEmailClr: @baseSEmailClr;
+@SContactClr: @baseSContactClr;
+@SFacebookClr: @baseSFacebookClr;
+@SGithubClr: @baseSGithubClr;
+@SGoogleClr: @baseSGoogleClr;
+@SLinkedinClr: @baseSLinkedinClr;
+@SPinterestClr: @baseSPinterestClr;
+@SRedditClr: @baseSRedditClr;
+@SRssClr: @baseSRssClr;
+@SSoundcloudClr: @baseSSoundcloudClr;
+@SStackOverflowClr: @baseSStackOverflowClr;
+@STwitterClr: @baseSTwitterClr;
+@SMastodonClr: @baseSMastodonClr;
+@SDiasporaClr: @baseSDiasporaClr;
+@SYoutubeClr: @baseSYoutubeClr;

ui/theme-weasyprint.less

@@ -0,0 +1,181 @@
+@import './wrapper-print.less';
+@import './common.less';
+@import './print.less';
+@import './config.less';
+
+@sidebarWidth: @basesidebarWidth;
+@contentWidth: @basecontentWidth;
+
+@lineNumbersWrapperWidth: @baselineNumbersWrapperWidth;
+
+@AClr: @printBaseAClr;
+@SdA2Clr: @printBaseSdA2Clr;
+@FClr: @printBaseFClr;
+@BgClr: @printBaseBgClr;
+@TClr: @printBaseTClr;
+@T2Clr: @printBaseT2Clr;
+@SdT2Clr: @printBaseSdT2Clr;
+@TrClr: @printBaseTrClr;
+@BClr: @printBaseBClr;
+@LClr: @printBaseLClr;
+@LHClr: @printBaseLHClr;
+@ArBgClr: @printBaseArBgClr;
+
+@NvAClr: @printBaseNvAClr;
+@NvBgClr: @printBaseNvBgClr;
+@NvBClr: @printBaseNvBClr;
+@NvTClr: @printBaseNvTClr;
+@NvLClr: @printBaseNvLClr;
+@NvLHClr: @printBaseNvLHClr;
+
+@InBgClr: @printBaseInBgClr;
+@InBClr: @printBaseInBClr;
+
+@BtnBgAClr: @printBaseBtnBgAClr;
+@BtnBgClr: @printBaseBtnBgClr;
+@BtnBClr: @printBaseBtnBClr;
+@BtnTClr: @printBaseBtnTClr;
+
+@AaBgClr: @printBaseAaBgClr;
+@AaBClr: @printBaseAaBClr;
+@AaTClr: @printBaseAaTClr;
+@AaLClr: @printBaseAaLClr;
+@AaLHClr: @printBaseAaLHClr;
+
+@AtBgClr: @printBaseAtBgClr;
+@AtBClr: @printBaseAtBClr;
+@AtTClr: @printBaseAtTClr;
+@AtLClr: @printBaseAtLClr;
+@AtLHClr: @printBaseAtLHClr;
+
+@AwBgClr: @printBaseAwBgClr;
+@AwBClr: @printBaseAwBClr;
+@AwTClr: @printBaseAwTClr;
+@AwLClr: @printBaseAwLClr;
+@AwLHClr: @printBaseAwLHClr;
+
+@AdBgClr: @printBaseAdBgClr;
+@AdBClr: @printBaseAdBClr;
+@AdTClr: @printBaseAdTClr;
+@AdLClr: @printBaseAdLClr;
+@AdLHClr: @printBaseAdLHClr;
+
+@AsBgClr: @printBaseAsBgClr;
+@AsBClr: @printBaseAsBClr;
+@AsTClr: @printBaseAsTClr;
+@AsLClr: @printBaseAsLClr;
+@AsLHClr: @printBaseAsLHClr;
+
+@AhBgClr: @printBaseAhBgClr;
+@AhBClr: @printBaseAhBClr;
+@AhTClr: @printBaseAhTClr;
+@AhLClr: @printBaseAhLClr;
+@AhLHClr: @printBaseAhLHClr;
+
+@AiBgClr: @printBaseAiBgClr;
+@AiBClr: @printBaseAiBClr;
+@AiTClr: @printBaseAiTClr;
+@AiLClr: @printBaseAiLClr;
+@AiLHClr: @printBaseAiLHClr;
+
+@AnBgClr: @printBaseAnBgClr;
+@AnBClr: @printBaseAnBClr;
+@AnTClr: @printBaseAnTClr;
+@AnLClr: @printBaseAnLClr;
+@AnLHClr: @printBaseAnLHClr;
+
+@AcBgClr: @printBaseAcBgClr;
+@AcBClr: @printBaseAcBClr;
+@AcTClr: @printBaseAcTClr;
+@AcLClr: @printBaseAcLClr;
+@AcLHClr: @printBaseAcLHClr;
+
+@AeBgClr: @printBaseAeBgClr;
+@AeBClr: @printBaseAeBClr;
+@AeTClr: @printBaseAeTClr;
+@AeLClr: @printBaseAeLClr;
+@AeLHClr: @printBaseAeLHClr;
+
+@BqAClr: @printBaseBqAClr;
+@BqBgClr: @printBaseBqBgClr;
+@BqBClr: @printBaseBqBClr;
+@BqTClr: @printBaseBqTClr;
+@BqLClr: @printBaseBqLClr;
+@BqLHClr: @printBaseBqLHClr;
+
+@CdAClr: @printBaseCdAClr;
+@CdBgAClr: @printBaseCdBgAClr;
+@CdBgClr: @printBaseCdBgClr;
+@CdBClr: @printBaseCdBClr;
+@TClr: @printBaseTClr;
+@T2Clr: @printBaseT2Clr;
+@SdT2Clr: @printBaseSdT2Clr;
+@CdT2Clr: @printBaseCdT2Clr;
+@CdTClr: @printBaseCdTClr;
+@CdLClr: @printBaseCdLClr;
+@CdLHClr: @printBaseCdLHClr;
+
+
+@PrAClr: @printBasePrAClr;
+@PrBgAClr: @printBasePrBgAClr;
+@PrBgClr: @printBasePrBgClr;
+@PrBClr: @printBasePrBClr;
+@PrB2Clr: @printBasePrB2Clr;
+@PrTClr: @printBasePrTClr;
+@PrLNClr: @printBasePrLNClr;
+@PrLClr: @printBasePrLClr;
+@PrLHClr: @printBasePrLHClr;
+
+@TeAClr: @printBaseTeAClr;
+@TeBgAClr: @printBaseTeBgAClr;
+@TeBgClr: @printBaseTeBgClr;
+@TeBClr: @printBaseTeBClr;
+@TeTClr: @printBaseTeTClr;
+@TeLClr: @printBaseTeLClr;
+@TeLHClr: @printBaseTeLHClr;
+
+@ToAClr: @printBaseToAClr;
+@ToBgAClr: @printBaseToBgAClr;
+@ToBgClr: @printBaseToBgClr;
+@ToBClr: @printBaseToBClr;
+@ToTClr: @printBaseToTClr;
+@ToLClr: @printBaseToLClr;
+@ToLHClr: @printBaseToLHClr;
+
+@SdAClr: @printBaseSdAClr;
+@SdBgClr: @printBaseSdBgClr;
+@SdBClr: @printBaseSdBClr;
+@SdTClr: @printBaseSdTClr;
+@SdLClr: @printBaseSdLClr;
+@SdLHClr: @printBaseSdLHClr;
+
+@FoAClr: @printBaseFoAClr;
+@FoBClr: @printBaseFoBClr;
+@FoBgClr: @printBaseFoBgClr;
+@FoTClr: @printBaseFoTClr;
+@FoLClr: @printBaseFoLClr;
+@FoLHClr: @printBaseFoLHClr;
+
+@InAClr: @printBaseInAClr;
+@InTClr: @printBaseInTClr;
+@InHClr: @printBaseInHClr;
+
+@BtnAClr: @printBaseBtnAClr;
+@BtnHClr: @printBaseBtnHClr;
+@BhBgClr: @printBaseBhBgClr;
+
+@SEmailClr: @printBaseSEmailClr;
+@SContactClr: @printBaseSContactClr;
+@SFacebookClr: @printBaseSFacebookClr;
+@SGithubClr: @printBaseSGithubClr;
+@SGoogleClr: @printBaseSGoogleClr;
+@SLinkedinClr: @printBaseSLinkedinClr;
+@SPinterestClr: @printBaseSPinterestClr;
+@SRedditClr: @printBaseSRedditClr;
+@SRssClr: @printBaseSRssClr;
+@SSoundcloudClr: @printBaseSSoundcloudClr;
+@SStackOverflowClr: @printBaseSStackOverflowClr;
+@STwitterClr: @printBaseSTwitterClr;
+@SMastodonClr: @printBaseSMastodonClr;
+@SDiasporaClr: @printBaseSDiasporaClr;
+@SYoutubeClr: @printBaseSYoutubeClr;

ui/vue.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  runtimeCompiler: true,
-  filenameHashing: false,
-  chainWebpack: config => {
-    config.optimization.minimize(false)
-  },
-}

ui/wrapper-print.less

@@ -0,0 +1,6 @@
+.wrapper {
+  max-width: @contentWidth;
+  margin: 0 auto;
+  padding: 2rem 2.5rem;
+}
+

ui/wrapper.less

@@ -1,5 +1,5 @@
 .wrapper {
-  max-width: var(--contentWidth);
+  max-width: @contentWidth;
   margin: 0 auto;
   padding: 2rem 2.5rem;
   @media (max-width: @MQNarrow) {