Refactoring CSS/JS

This commit is contained in:
Kujiu 2020-06-19 23:39:59 +02:00
parent b302b93289
commit 49effa1b06
Signed by: kujiu
GPG key ID: ABBB2CAC6855599F
77 changed files with 4786 additions and 21174 deletions

3
.gitignore vendored
View file

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

View file

@ -2,6 +2,15 @@
Changes 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*) 1.0.8 (*2020-06-10*)
==================== ====================

View file

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

View file

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

View file

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

534
package-lock.json generated Normal file
View file

@ -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"
}
}
}
}

25
package.json Normal file
View file

@ -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"
}
}

View file

@ -22,12 +22,13 @@ class TranslateCommand(distutils.cmd.Command):
for cmd_name in self.get_sub_commands(): for cmd_name in self.get_sub_commands():
self.run_command(cmd_name) self.run_command(cmd_name)
with open("README.rst", "r") as fh: with open("README.rst", "r") as fh:
long_description = fh.read() long_description = fh.read()
setup( setup(
name="sphinx_nervproject_theme", name="sphinx_nervproject_theme",
version="1.0.8", version="1.1.0",
url="https://procrastinator.nerv-project.eu/nerv-project/communication/sphinx_nervproject_theme", url="https://procrastinator.nerv-project.eu/nerv-project/communication/sphinx_nervproject_theme",
license="EUPL 1.2", license="EUPL 1.2",
author="Kujiu", author="Kujiu",

View file

@ -1,11 +1,15 @@
from os import path from os import path
import sys
from docutils import nodes from docutils import nodes
from sphinx.environment.collectors import EnvironmentCollector from sphinx.environment.collectors import EnvironmentCollector
from sphinx import addnodes from sphinx import addnodes
from sphinx.util.osutil import relative_uri from sphinx.util.osutil import relative_uri
__version__ = (1, 0, 8) __version__ = (1, 1, 0)
sys.setrecursionlimit(15000)
class SimpleTocTreeCollector(EnvironmentCollector): class SimpleTocTreeCollector(EnvironmentCollector):
@ -35,12 +39,8 @@ class SimpleTocTreeCollector(EnvironmentCollector):
for docname in docnames: for docname in docnames:
env.toc_dict[docname] = other.toc_dict[docname] env.toc_dict[docname] = other.toc_dict[docname]
def process_doc(self, app, doctree): 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)] section_nodes = [s for s in doctree if isinstance(s, nodes.section)]
# if first level is a single section, # if first level is a single section,
# ignore it and use second level of sections # ignore it and use second level of sections
@ -63,7 +63,6 @@ class SimpleTocTreeCollector(EnvironmentCollector):
} }
def add_toctree_data(app, pagename, templatename, context, doctree): def add_toctree_data(app, pagename, templatename, context, doctree):
"""Create toctree_data, used to build sidebar navigation """Create toctree_data, used to build sidebar navigation
@ -157,10 +156,22 @@ def add_toctree_data(app, pagename, templatename, context, doctree):
context['toctree_data'] = res 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): def setup(app):
app.add_env_collector(SimpleTocTreeCollector) app.add_env_collector(SimpleTocTreeCollector)
app.connect('html-page-context', add_toctree_data) 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__))) app.add_html_theme('nervproject', path.abspath(path.dirname(__file__)))
locale_path = path.join(path.abspath(path.dirname(__file__)), 'locale') locale_path = path.join(path.abspath(path.dirname(__file__)), 'locale')

View file

@ -1,23 +1,27 @@
<!DOCTYPE html> <!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> <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 }} {{- metatags }}
{%- block htmltitle %} {%- block htmltitle %}
<title>{{ title|striptags|e }}{{ titlesuffix }}</title> <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
{%- endblock %} {%- endblock %}
{# <meta name="description" content="{{ description }}"> #} {# <meta name="description" content="{{ description }}"/> #}
{%- block css %} {%- 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)}}"/>
{% elif builder=='epub' %}
<link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_epub.css', 1)}}"/>
{% else %}
<link rel="stylesheet" href="{{ pathto('_static/sphinx_nervproject_theme.css', 1)}}"/>
{% if theme_isso %} {% if theme_isso %}
<link rel="stylesheet" href="{{ pathto('_static/isso.css', 1)}}"> <link rel="stylesheet" href="{{ pathto('_static/isso.css', 1)}}">
<script data-isso="{{ theme_isso['prefix'] }}" <script data-isso="{{ theme_isso['prefix'] }}"
data-isso-id="{{ pagename }}" data-isso-id="{{ pagename }}"
data-isso-css="false" data-isso-css="false"
data-isso-lang="{{ theme_isso.get('lang', language) }}" data-isso-lang="{{ theme_isso['lang'] }}"
data-isso-reply-to-self="{{ theme_isso['reply_to_self'] }}" data-isso-reply-to-self="{{ theme_isso['reply_to_self'] }}"
data-isso-require-author="{{ theme_isso['require_author'] }}" data-isso-require-author="{{ theme_isso['require_author'] }}"
data-isso-require-email="{{ theme_isso['require_email'] }}" data-isso-require-email="{{ theme_isso['require_email'] }}"
@ -32,6 +36,7 @@
src="{{ theme_isso['url'] }}/js/embed.min.js"></script> src="{{ theme_isso['url'] }}/js/embed.min.js"></script>
<style id="isso-style"></style> <style id="isso-style"></style>
{% endif %} {% endif %}
{% endif %}
{%- for css in css_files %} {%- for css in css_files %}
{%- if css|attr("rel") %} {%- if css|attr("rel") %}
<link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"{% if css.title is not none %} title="{{ css.title }}"{% endif %} /> <link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"{% if css.title is not none %} title="{{ css.title }}"{% endif %} />
@ -42,6 +47,7 @@
{%- endblock %} {%- endblock %}
{%- block scripts %} {%- block scripts %}
{% if builder=='html' %}
{# FIXME: use link-preload #} {# FIXME: use link-preload #}
<script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script> <script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
{% if theme_fathom %} {% if theme_fathom %}
@ -53,9 +59,10 @@
{{ js_tag(scriptfile) }} {{ js_tag(scriptfile) }}
{%- endfor %} {%- endfor %}
{# press js #} <script src="{{ pathto('_static/sphinx_nervproject_theme.js', 1)}}" defer></script>
<script src="{{ pathto('_static/theme-vendors.js', 1)}}"></script>
<script src="{{ pathto('_static/theme.js', 1)}}" defer></script> <script src="{{ pathto('_static/sphinx_nervproject_theme.js', 1)}}" defer></script>
{% endif %}
{%- endblock %} {%- endblock %}
{%- if pageurl %} {%- if pageurl %}
<link rel="canonical" href="{{ pageurl }}" /> <link rel="canonical" href="{{ pageurl }}" />
@ -70,33 +77,31 @@
</head> </head>
<body> <body>
<div id="app" class="theme-container" :class="pageClasses"> <div id="app" class="theme-container">
{%- block container %} {%- block container %}
{%- block header %}{%- include "util/navbar.html" %}{% endblock %} {%- 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"> <div id="appflex">
{%- block sidebar %} {%- block sidebar %}
<sidebar @toggle-sidebar="toggleSidebar"> {% if builder=='html' %}
<div class="sidebar" id="sidebar">
{# sidebar navlinks displayed only on mobile #} {# sidebar navlinks displayed only on mobile #}
<navlinks> <nav class="nav-links can-hide">
{% block side_links %} {% block side_links %}
{%- include "util/navlinks.html" %} {%- include "util/navlinks.html" %}
{%- include "util/extlinks.html" %} {%- include "util/extlinks.html" %}
{% endblock %} {% endblock %}
</navlinks> </nav>
{%- if sidebars != None %} {%- if sidebars != None %}
{%- for sidebartemplate in sidebars %} {%- for sidebartemplate in sidebars %}
{%- include sidebartemplate %} {%- include sidebartemplate %}
{%- endfor %} {%- endfor %}
{%- endif %} {%- endif %}
</sidebar> </div>
{% endif %}
{%- endblock %} {%- endblock %}
<page> <div class="page">
{%- block document %} {%- block document %}
{% block body_header %} {% block body_header %}
{%- include "util/bodyheader.html" %} {%- include "util/bodyheader.html" %}
@ -105,7 +110,7 @@
{% block body %} {% endblock %} {% block body %} {% endblock %}
</main> </main>
{%- endblock %} {%- endblock %}
</page> </div>
</div> </div>
{%- block footer %} {%- block footer %}

View file

@ -2,12 +2,13 @@
{%- block extrahead %} {%- block extrahead %}
{{ super() }} {{ super() }}
{% if feed_path %} {% 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 %} {% endif %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
{{ body }} {{ body }}
{% if builder=='html' %}
<div class="section"> <div class="section">
{% if ablog and pagename in ablog %} {% if ablog and pagename in ablog %}
{% include "postnavy.html" %} {% include "postnavy.html" %}
@ -24,18 +25,6 @@
(not pagename in ablog and ablog.disqus_pages)) %} (not pagename in ablog and ablog.disqus_pages)) %}
{% include "util/disqus.html" %} {% include "util/disqus.html" %}
{% endif %} {% 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> </div>
{% endif %}
{% endblock %} {% endblock %}

View file

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

View file

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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();
}
});

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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

View file

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

View file

@ -1,12 +1,28 @@
<navbar @toggle-sidebar="toggleSidebar"> <header class="navbar">
<div class="links"> <div id="header-identity" class="print-only">
<navlinks class="can-hide"> <img id="navbar_logo" src="{{ pathto('_static/' + logo, 1) }}"/>
{%- include "util/navlinks.html" %} <div id="navbar_title">{{ html_title }}</div>
{%- include "util/extlinks.html" %}
</navlinks>
</div> </div>
<router-link to="{{pathto(master_doc)}}" class="home-link"> {% 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> <span class="site-name">{{ project|e }}</span>
</router-link> </a>
</navbar>
<div class="links">
<div class="nav-links can-hide">
{%- include "util/navlinks.html" %}
{%- include "util/extlinks.html" %}
</div>
</div>
{% endif %}
</header>

View file

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

21
ui/.gitignore vendored
View file

@ -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*

View file

@ -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
```

View file

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

View file

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

View file

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

772
ui/common.less Normal file
View file

@ -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;
}
}

903
ui/config.less Normal file
View file

@ -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;

120
ui/custom-blocks.less Normal file
View file

@ -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;
}
}
}
}

37
ui/input.less Normal file
View file

@ -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;
}
}
}

View file

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

154
ui/no-weasyprint.less Normal file
View file

@ -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;
}
}

14754
ui/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
]
}

83
ui/print.less Normal file
View file

@ -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;
}
}
}

View file

@ -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>

439
ui/sidebar.less Normal file
View file

@ -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;
}
}
}

View file

@ -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 { .content .section {
margin-bottom: 0; margin-bottom: 0;
&:hover { &:hover {
@ -79,7 +72,7 @@ ul.breadcrumbs {
line-height: 1.25em; line-height: 1.25em;
font-size: 1.65rem; font-size: 1.65rem;
padding-bottom: .3rem; padding-bottom: .3rem;
border-bottom: 0.1em solid var(--BClr); border-bottom: 0.1em solid @BClr;
} }
@ -89,7 +82,6 @@ ul.breadcrumbs {
clear: both; clear: both;
min-height: 2rem; min-height: 2rem;
padding-top: 1rem; padding-top: 1rem;
overflow: auto;
color: grey; color: grey;
font-size: small; font-size: small;
line-height: 1.5rem; line-height: 1.5rem;
@ -107,7 +99,7 @@ ul.breadcrumbs {
} }
.content .highlighted { .content .highlighted {
background-color: var(--AClr); //#fbe54e; background-color: @AClr; //#fbe54e;
font-weight: bold; font-weight: bold;
padding: 0 4px; padding: 0 4px;
} }
@ -119,13 +111,13 @@ ul.breadcrumbs {
border-left-style: solid; border-left-style: solid;
margin: 1rem 0; margin: 1rem 0;
// default color // default color
background-color: var(--AaBgClr); background-color: @AaBgClr;
border-color: var(--AaBClr); border-color: @AaBClr;
color: var(--AaTClr); color: @AaTClr;
a, a:visited { a, a:visited {
color: var(--AaLClr); color: @AaLClr;
&:hover { &:hover {
color: var(--AaLHClr); color: @AaLHClr;
} }
} }
@ -134,115 +126,115 @@ ul.breadcrumbs {
margin-bottom: -0.4rem; margin-bottom: -0.4rem;
} }
&.success { &.success {
background-color: var(--AsBgClr); background-color: @AsBgClr;
border-color: var(--AsBClr); border-color: @AsBClr;
color: var(--AsTClr); color: @AsTClr;
a, a:visited { a, a:visited {
color: var(--AsLClr); color: @AsLClr;
&:hover { &:hover {
color: var(--AsLHClr); color: @AsLHClr;
} }
} }
} }
&.hint { &.hint {
background-color: var(--AhBgClr); background-color: @AhBgClr;
border-color: var(--AhBClr); border-color: @AhBClr;
color: var(--AhTClr); color: @AhTClr;
a, a:visited { a, a:visited {
color: var(--AhLClr); color: @AhLClr;
&:hover { &:hover {
color: var(--AhLHClr); color: @AhLHClr;
} }
} }
} }
&.tip { &.tip {
background-color: var(--AtBgClr); background-color: @AtBgClr;
border-color: var(--AtBClr); border-color: @AtBClr;
color: var(--AtTClr); color: @AtTClr;
a, a:visited { a, a:visited {
color: var(--AtLClr); color: @AtLClr;
&:hover { &:hover {
color: var(--AtLHClr); color: @AtLHClr;
} }
} }
} }
&.important { &.important {
background-color: var(--AiBgClr); background-color: @AiBgClr;
border-color: var(--AiBClr); border-color: @AiBClr;
color: var(--AiTClr); color: @AiTClr;
a, a:visited { a, a:visited {
color: var(--AiLClr); color: @AiLClr;
&:hover { &:hover {
color: var(--AiLHClr); color: @AiLHClr;
} }
} }
} }
&.note { &.note {
background-color: var(--AnBgClr); background-color: @AnBgClr;
border-color: var(--AnBClr); border-color: @AnBClr;
color: var(--AnTClr); color: @AnTClr;
a, a:visited { a, a:visited {
color: var(--AnLClr); color: @AnLClr;
&:hover { &:hover {
color: var(--AnLHClr); color: @AnLHClr;
} }
} }
} }
&.warning { &.warning {
background-color: var(--AwBgClr); background-color: @AwBgClr;
border-color: var(--AwBClr); border-color: @AwBClr;
color: var(--AwTClr); color: @AwTClr;
a, a:visited { a, a:visited {
color: var(--AwLClr); color: @AwLClr;
&:hover { &:hover {
color: var(--AwLHClr); color: @AwLHClr;
} }
} }
} }
&.danger { &.danger {
background-color: var(--AdBgClr); background-color: @AdBgClr;
border-color: var(--AdBClr); border-color: @AdBClr;
color: var(--AdTClr); color: @AdTClr;
a, a:visited { a, a:visited {
color: var(--AdLClr); color: @AdLClr;
&:hover { &:hover {
color: var(--AdLHClr); color: @AdLHClr;
} }
} }
} }
&.caution { &.caution {
background-color: var(--AcBgClr); background-color: @AcBgClr;
border-color: var(--AcBClr); border-color: @AcBClr;
color: var(--AcTClr); color: @AcTClr;
a, a:visited { a, a:visited {
color: var(--AcLClr); color: @AcLClr;
&:hover { &:hover {
color: var(--AcLHClr); color: @AcLHClr;
} }
} }
} }
&.danger { &.danger {
background-color: var(--AdBgClr); background-color: @AdBgClr;
border-color: var(--AdBClr); border-color: @AdBClr;
color: var(--AdTClr); color: @AdTClr;
a, a:visited { a, a:visited {
color: var(--AdLClr); color: @AdLClr;
&:hover { &:hover {
color: var(--AdLHClr); color: @AdLHClr;
} }
} }
} }
} }
blockquote { blockquote {
background-color: var(--BqBgClr); background-color: @BqBgClr;
border-color: var(--BqBClr); border-color: @BqBClr;
margin-left: -0.4rem; margin-left: -0.4rem;
color: var(--BqTClr); color: @BqTClr;
a, a:visited { a, a:visited {
color: var(--BqLClr); color: @BqLClr;
&:hover { &:hover {
color: var(--BqLHClr); color: @BqLHClr;
} }
} }
} }

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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>

View file

@ -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
},
},
})

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

Before

Width:  |  Height:  |  Size: 216 B

File diff suppressed because it is too large Load diff

View file

@ -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);
}
}
}
}

View file

@ -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);
}
}

View file

@ -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';

View file

@ -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
}
}
}

181
ui/theme-epub.less Normal file
View file

@ -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;

181
ui/theme-weasyprint.less Normal file
View file

@ -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;

1069
ui/theme.less Normal file

File diff suppressed because it is too large Load diff

View file

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

6
ui/wrapper-print.less Normal file
View file

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

View file

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