From 8cac945757ba377846708857e5e2927f4e960616 Mon Sep 17 00:00:00 2001 From: squidfunk Date: Sun, 30 Oct 2016 10:36:18 +0100 Subject: [PATCH] Finished full integration for CodeHilite --- .eslintrc | 2 +- .nvmrc | 1 - .sass-lint.yml | 3 +- Gulpfile.babel.js | 18 +- docs/extensions/admonition.md | 8 +- docs/extensions/codehilite.md | 151 ++++++- docs/extensions/footnotes.md | 110 +++-- docs/specimen.md | 16 +- .../assets/javascripts/build/application.js | 7 +- material/assets/stylesheets/application.css | 410 ++++++++++++------ material/partials/search.html | 2 +- mkdocs.yml | 2 +- package.json | 2 +- src/assets/stylesheets/_shame.scss | 55 ++- src/assets/stylesheets/base/_typeset.scss | 42 +- .../stylesheets/extensions/_admonition.scss | 4 +- .../stylesheets/extensions/_codehilite.scss | 245 +++++++++-- src/assets/stylesheets/layout/_search.scss | 21 +- src/partials/search.html | 2 +- 19 files changed, 809 insertions(+), 292 deletions(-) delete mode 100644 .nvmrc diff --git a/.eslintrc b/.eslintrc index 6f081f879..f7cfbd0b0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -42,7 +42,7 @@ "rules": { "array-callback-return": 2, "array-bracket-spacing": 2, - "arrow-body-style": [2, "always"], + "arrow-body-style": 2, "arrow-parens": [2, "as-needed"], "arrow-spacing": 2, "block-scoped-var": 2, diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 07a7b03c9..000000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -6.7.0 \ No newline at end of file diff --git a/.sass-lint.yml b/.sass-lint.yml index 4ae7787cd..e4d70f397 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -22,7 +22,6 @@ files: ignore: - node_modules/** - src/assets/stylesheets/_shame.scss - - src/assets/stylesheets/extensions/_codehilite.scss options: merge-default-rules: true @@ -75,7 +74,7 @@ rules: - break-to-device nesting-depth: - 2 - - max-depth: 3 + - max-depth: 4 no-color-keywords: 2 no-color-literals: 2 no-css-comments: 2 diff --git a/Gulpfile.babel.js b/Gulpfile.babel.js index 074bccfa7..cd533025c 100755 --- a/Gulpfile.babel.js +++ b/Gulpfile.babel.js @@ -60,8 +60,8 @@ const args = yargs * Override gulp.src() for nicer error handling. */ const src = gulp.src -gulp.src = (...glob) => { - return src.apply(gulp, glob) +gulp.src = (...glob) => + src.apply(gulp, glob) .pipe( plumber(function(error) { util.log(util.colors.red( @@ -86,14 +86,12 @@ gulp.src = (...glob) => { if (args._[0] !== "watch") throw error })) -} /* * Helper function to load a task */ -const load = task => { - return require(`./${config.lib}/tasks/${task}`)(gulp, config, args) -} +const load = task => + require(`./${config.lib}/tasks/${task}`)(gulp, config, args) /* ---------------------------------------------------------------------------- * Images @@ -116,12 +114,12 @@ gulp.task("assets:images:build:svg", */ gulp.task("assets:images:build", args.clean ? [ "assets:images:clean" -] : [], () => { - return gulp.start([ +] : [], () => + gulp.start([ "assets:images:build:ico", "assets:images:build:svg" ]) -}) +) /* * Clean images generated by build @@ -323,7 +321,7 @@ gulp.task("watch", [ /* Rebuild javascripts */ gulp.watch([ - `${config.assets.src}/javascripts/**/*.js` + `${config.assets.src}/javascripts/**/*.{js,jsx}` ], ["assets:javascripts:build:application"]) /* Copy images */ diff --git a/docs/extensions/admonition.md b/docs/extensions/admonition.md index 8144d5238..ccb8dc967 100644 --- a/docs/extensions/admonition.md +++ b/docs/extensions/admonition.md @@ -36,7 +36,7 @@ Result: nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa. -### Change the title +### Changing the title By default, the block title will equal the type qualifier. However, it can easily be changed by adding a quoted string after the type qualifier. @@ -57,10 +57,10 @@ Result: nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa. -### Remove the title +### Removing the title -Similar to setting a [custom title](#change-the-title), the icon and title can -be omitted by providing an empty string after the type qualifier: +Similar to setting a [custom title](#changing-the-title), the icon and title +can be omitted by providing an empty string after the type qualifier: Example: diff --git a/docs/extensions/codehilite.md b/docs/extensions/codehilite.md index 92c389f83..35a6ed0e7 100644 --- a/docs/extensions/codehilite.md +++ b/docs/extensions/codehilite.md @@ -1,18 +1,158 @@ -# Codehilite +# CodeHilite -## Usage +[CodeHilite][] is an extension that adds syntax highlighting to codeblocks and +is included in the standard Markdown library. The highlighting process is +executed during compilation of the Markdown file. -This extensions adds code highlighting to fenced code blocks. It might not be -the best code highlighter, but it works without JavaScript and on the server: +## Installation + +CodeHilite parses code blocks and wraps them in `pre` tags. If [Pygments][] is +installed, which is a generic syntax highlighter with support for over +[300 languages][], CodeHilite will also highlight the code block. Pygments can +be installed with the following command: + +``` bash +pip install pygments +``` + +To enable CodeHilite, add the following lines to your `mkdocs.yml`: ``` yaml markdown_extensions: - codehilite ``` +## Usage + +### Specifying the language + +The CodeHilite extension uses the same syntax as regular Markdown code blocks, +but needs to know the language of the code block. This can be done in three +different ways. + +#### via Markdown syntax recommended + +In Markdown, code blocks can be opened and closed by writing three backticks on +separate lines. To add code highlighting to those blocks, the easiest way is +to specify the language directly after the opening block. + +Example: + +```` markdown +``` python +import tensorflow as tf +``` +```` + +Result: + +``` python +import tensorflow as tf +``` + +#### via Shebang + +Alternatively, if the first line of a code block contains a shebang, the +language is derived from the path referenced in the shebang. This will only +work for code blocks that are indented using four spaces, not for those +encapsulated in three backticks. + +Example: + +```` markdown + #!/usr/bin/python + import tensorflow as tf +```` + +Result: + +``` python +#!/usr/bin/python +import tensorflow as tf +``` + +#### via three colons + +If the first line starts with three colons followed by a language identifier, +the first line is stripped. This will only work for code blocks that are +indented using four spaces, not for those encapsulated in three backticks. + +Example: + +``` markdown + :::python + import tensorflow as tf +``` + +Result: + + :::python + import tensorflow as tf + +### Adding line numbers + +Line numbers can be added by enabling the `linenums` flag in your `mkdocs.yml`: + +``` yaml +markdown_extensions: + - codehilite(linenums=true) +``` + +Example: + +```` markdown +``` python +""" Bubble sort """ +def bubble_sort(items): + for i in range(len(items)): + for j in range(len(items) - 1 - i): + if items[j] > items[j + 1]: + items[j], items[j + 1] = items[j + 1], items[j] +``` +```` + +Result: + + #!python + """ Bubble sort """ + def bubble_sort(items): + for i in range(len(items)): + for j in range(len(items) - 1 - i): + if items[j] > items[j + 1]: + items[j], items[j + 1] = items[j + 1], items[j] + +### Highlighting specific lines + +Specific lines can be highlighted by passing the line numbers to the `hl_lines` +argument placed right after the language identifier. Line counts start at 1. + +Example: + +```` markdown +``` python hl_lines="3 4" +""" Bubble sort """ +def bubble_sort(items): + for i in range(len(items)): + for j in range(len(items) - 1 - i): + if items[j] > items[j + 1]: + items[j], items[j + 1] = items[j + 1], items[j] +``` +```` + +Result: + + #!python hl_lines="3 4" + """ Bubble sort """ + def bubble_sort(items): + for i in range(len(items)): + for j in range(len(items) - 1 - i): + if items[j] > items[j + 1]: + items[j], items[j + 1] = items[j + 1], items[j] + + ## Supported languages excerpt -Codehilite uses [Pygments][], a generic syntax highlighter with support for +CodeHilite uses [Pygments][], a generic syntax highlighter with support for over [300 languages][], so the following list of examples is just an excerpt. ### Bash @@ -701,5 +841,6 @@ end ``` +[CodeHilite]: https://pythonhosted.org/Markdown/extensions/code_hilite.html [Pygments]: http://pygments.org [300 languages]: http://pygments.org/languages diff --git a/docs/extensions/footnotes.md b/docs/extensions/footnotes.md index 655f3a60a..806ec055c 100644 --- a/docs/extensions/footnotes.md +++ b/docs/extensions/footnotes.md @@ -1,47 +1,85 @@ # Footnotes -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac -urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam -tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor -sit amet, consectetur adipiscing elit. +[Footnotes][] is another extension included in the standard Markdown library. +As the name says, it adds the ability to add footnotes to your documentation. -## Headline on fourth level +## Installation -Footnotes[^1] have a label[^@#$%] and the footnote's content. -### Second Headline on fourth level +Add the following lines to your `mkdocs.yml`: -[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac - urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam - tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. +``` yaml +markdown_extensions: + - footnotes +``` -[^@#$%]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac - urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam - tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. -[^2]: Lorem ipsum dolor sit [amet](#), consectetur adipiscing elit. Sed at nisl ac - urna lobortis consectetur ut vitae urna. **Donec** eu viverra sapien. Nam - tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. +## Usage -Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in -sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis. -Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim. +The markup for footnotes is similar to the standard Markdown markup for links. +A reference is inserted in the text, which can then be defined at any point in +the document. -## [Some headline with a link](http://www.google.de) -### Third level -#### Fourth level +### Inserting the reference -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac -urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam -tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor -sit amet, consectetur adipiscing elit. +The footnote reference is enclosed in square brackets and starts with a caret, +followed by an arbitrary label which may contain numeric identifiers [1, 2, 3, +...] or names [Granovetter et al. 1998]. The rendered references are always +consecutive superscripted numbers. -Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in -sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis. -Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim. +Example: -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac -urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam -tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor -sit amet, consectetur adipiscing elit. +``` markdown +Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2] +``` + +Result: + +Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2] + +### Inserting the content + +The footnote content is also initiated with a label, which must match the label +used for the footnote reference. It can be inserted at an arbitrary position in +the document and is always rendered at the bottom of the page. Furthermore, a +backlink is automatically added to the footnote reference. + +#### on a single line + +Short statements can be written on the same line. + +Example: + +``` markdown +[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. +``` + +Result: + +Jump to footnote at the bottom of the page + +[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +#### on multiple lines + +Paragraphs should be written on the next line. As with all Markdown blocks, the +content must be indented by four spaces. + +Example: + +``` markdown +[^2]: + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod + nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor + massa, nec semper lorem quam in massa. +``` + +Result: + +[^2]: + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod + nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor + massa, nec semper lorem quam in massa. + +Jump to footnote at the bottom of the page + +[Footnotes]: https://pythonhosted.org/Markdown/extensions/footnotes.html +[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions diff --git a/docs/specimen.md b/docs/specimen.md index 3fa4fb522..2cd326d70 100644 --- a/docs/specimen.md +++ b/docs/specimen.md @@ -183,4 +183,18 @@ pb_varint_scan(const uint8_t data[], size_t left) { Code can also be written within `fenced inline code blocks`, however syntax highlighting will only work on code listings. -## Tables \ No newline at end of file +## Tables + +| Feature / Implementation | protobluff | protobuf-c | nanopb | lwpb | pbc | +|--------------------------|------------|------------|---------|------|-----| +| Message types | yes | yes | yes | yes | yes | +| Nested message types | yes | yes | yes | yes | yes | +| Cyclic message types | yes | yes | partial | yes | yes | +| Scalar types | yes | yes | yes | yes | yes | +| Default values | yes | yes | yes | yes | yes | +| Enumerations | yes | yes | yes | yes | yes | +| Extensions | yes | - | yes | - | yes | +| Oneofs | yes | yes | yes | - | - | +| Packages | yes | yes | yes | yes | yes | +| Packed option | yes | yes | yes | yes | yes | +| Deprecations | yes | partial | - | - | - | diff --git a/lib/tasks/assets/javascripts/build/application.js b/lib/tasks/assets/javascripts/build/application.js index b0da1e32d..58dfb6e5a 100644 --- a/lib/tasks/assets/javascripts/build/application.js +++ b/lib/tasks/assets/javascripts/build/application.js @@ -33,12 +33,15 @@ import webpack from "webpack" export default (gulp, config, args) => { return () => { - return gulp.src(`${config.assets.src}/javascripts/**/*.js`) + return gulp.src(`${config.assets.src}/javascripts/**/*.{js,jsx}`) /* Build with webpack */ .pipe( stream({ - entry: "application.js", + entry: [ + "whatwg-fetch", + "application.js", + ], output: { filename: "application.js", library: "Application" diff --git a/material/assets/stylesheets/application.css b/material/assets/stylesheets/application.css index 61347a7f3..9cc0654a0 100644 --- a/material/assets/stylesheets/application.css +++ b/material/assets/stylesheets/application.css @@ -194,13 +194,15 @@ kbd { transition: color 0.125s; } .md-typeset a:hover, .md-typeset a:active { color: #536dfe; } + .md-typeset code, + .md-typeset pre { + background: rgba(0, 0, 0, 0.035); + color: #37474F; + font-size: 85%; } .md-typeset code { margin: 0 0.4rem; padding: 0.1rem 0; border-radius: 0.2rem; - background: rgba(0, 0, 0, 0.035); - color: #37474F; - font-size: 85%; box-shadow: 0.4rem 0 0 rgba(0, 0, 0, 0.035), -0.4rem 0 0 rgba(0, 0, 0, 0.035); word-break: break-word; -webkit-box-decoration-break: clone; @@ -218,21 +220,23 @@ kbd { margin: 1.0em 0; padding: 1.0rem 1.2rem; border-radius: 0.2rem; - background: rgba(0, 0, 0, 0.035); - color: #37474F; - font-size: 85%; line-height: 1.4; overflow: auto; -webkit-overflow-scrolling: touch; } + .md-typeset pre::-webkit-scrollbar { + width: 0.4rem; + height: 0.4rem; } + .md-typeset pre::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.26); } + .md-typeset pre::-webkit-scrollbar-thumb:hover { + background-color: #536dfe; } .md-typeset pre > code { - font-size: inherit; } - .md-typeset > div > pre::-webkit-scrollbar, - .md-typeset > pre > code::-webkit-scrollbar { - width: 0.4rem; - height: 0.4rem; } - .md-typeset > div > pre::-webkit-scrollbar-thumb, - .md-typeset > pre > code::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.26); } + margin: 0; + background: none; + font-size: inherit; + box-shadow: none; + -webkit-box-decoration-break: none; + box-decoration-break: none; } .md-typeset kbd { display: inline-block; padding: 0.4rem 0.5rem 0.5rem; @@ -284,6 +288,29 @@ kbd { margin-bottom: 1.0rem; margin-left: 1.0rem; padding-top: 1.0rem; } + .md-typeset table { + margin: 1.5em 0; + font-size: 1.28rem; + overflow: hidden; } + .no-js .md-typeset table { + display: inline-block; + max-width: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; } + .md-typeset table th { + min-width: 10.0rem; + padding: 1.2rem 1.6rem; + border-bottom: 0.1rem solid rgba(0, 0, 0, 0.54); + color: rgba(0, 0, 0, 0.87); + font-weight: 700; + text-align: left; + vertical-align: top; } + .md-typeset table td { + padding: 1.2rem 1.6rem; + border-top: 0.1rem solid rgba(0, 0, 0, 0.07); + vertical-align: top; } + .md-typeset table tr:first-child td { + border-top: 0; } html { height: 100%; @@ -292,9 +319,6 @@ html { body { position: relative; min-height: 100%; } - body[data-md-locked] { - height: 100%; - overflow: hidden; } hr { display: block; @@ -350,6 +374,9 @@ hr { white-space: nowrap; overflow: hidden; } +@page { + margin: 25mm; } + .md-content__inner { margin: 2.4rem 1.6rem; } @@ -485,6 +512,9 @@ hr { .md-search__inner { width: 100%; } +.md-search__form { + position: relative; } + .md-search__input { position: relative; padding: 0 1.6rem 0 7.2rem; @@ -512,6 +542,7 @@ hr { content: "search"; } .md-search__output { + position: absolute; width: 100%; border-radius: 0 0 0.2rem 0.2rem; overflow: hidden; } @@ -624,7 +655,7 @@ hr { padding: 0.8rem 1.2rem; border-left: 0.4rem solid #448aff; border-radius: 0 0.2rem 0.2rem 0; - background: rgba(68, 138, 255, 0.05); } + background: rgba(68, 138, 255, 0.1); } .admonition-title { color: #2979ff; font-size: 1.28rem; @@ -646,49 +677,49 @@ hr { margin-bottom: 0; } .admonition.tldr, .admonition.summary { border-color: #00b0ff; - background: rgba(0, 176, 255, 0.05); } + background: rgba(0, 176, 255, 0.1); } .admonition.tldr .admonition-title, .admonition.summary .admonition-title { color: #00b0ff; } .admonition.tldr .admonition-title::before, .admonition.summary .admonition-title::before { content: "subject"; } .admonition.idea, .admonition.tip { border-color: #00bfa5; - background: rgba(0, 191, 165, 0.05); } + background: rgba(0, 191, 165, 0.1); } .admonition.idea .admonition-title, .admonition.tip .admonition-title { color: #00bfa5; } .admonition.idea .admonition-title::before, .admonition.tip .admonition-title::before { content: "whatshot"; } .admonition.check, .admonition.done, .admonition.success { border-color: #00e676; - background: rgba(0, 230, 118, 0.05); } + background: rgba(0, 230, 118, 0.1); } .admonition.check .admonition-title, .admonition.done .admonition-title, .admonition.success .admonition-title { color: #00e676; } .admonition.check .admonition-title::before, .admonition.done .admonition-title::before, .admonition.success .admonition-title::before { content: "done"; } .admonition.attention, .admonition.important, .admonition.warning { border-color: #ff9100; - background: rgba(255, 145, 0, 0.05); } + background: rgba(255, 145, 0, 0.1); } .admonition.attention .admonition-title, .admonition.important .admonition-title, .admonition.warning .admonition-title { color: #ff9100; } .admonition.attention .admonition-title::before, .admonition.important .admonition-title::before, .admonition.warning .admonition-title::before { content: "warning"; } .admonition.fail, .admonition.missing, .admonition.failure { border-color: #ff5252; - background: rgba(255, 82, 82, 0.05); } + background: rgba(255, 82, 82, 0.1); } .admonition.fail .admonition-title, .admonition.missing .admonition-title, .admonition.failure .admonition-title { color: #ff5252; } .admonition.fail .admonition-title::before, .admonition.missing .admonition-title::before, .admonition.failure .admonition-title::before { content: "clear"; } .admonition.caution, .admonition.danger { border-color: #ff1744; - background: rgba(255, 23, 68, 0.05); } + background: rgba(255, 23, 68, 0.1); } .admonition.caution .admonition-title, .admonition.danger .admonition-title { color: #ff1744; } .admonition.caution .admonition-title::before, .admonition.danger .admonition-title::before { content: "flash_on"; } .admonition.bug, .admonition.error { border-color: #f50057; - background: rgba(245, 0, 87, 0.05); } + background: rgba(245, 0, 87, 0.1); } .admonition.bug .admonition-title, .admonition.error .admonition-title { color: #f50057; } .admonition.bug .admonition-title::before, .admonition.error .admonition-title::before { @@ -938,6 +969,79 @@ hr { .code .w { color: transparent; } +.codehilite .hll, +.code .hll { + display: block; + margin: 0 -1.2rem; + padding: 0 1.2rem; + background: rgba(255, 235, 59, 0.5); } + +.md-typeset .codehilite { + margin: 1.0em 0; + padding: 1.0rem 1.2rem 0.8rem; + border-radius: 0.2rem; + background: rgba(0, 0, 0, 0.035); + color: #37474F; + line-height: 1.4; + overflow: auto; + -webkit-overflow-scrolling: touch; } + .md-typeset .codehilite::-webkit-scrollbar { + width: 0.4rem; + height: 0.4rem; } + .md-typeset .codehilite::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.26); } + .md-typeset .codehilite::-webkit-scrollbar-thumb:hover { + background-color: #536dfe; } + .md-typeset .codehilite pre { + display: inline-block; + min-width: 100%; + margin: 0; + padding: 0; + background: transparent; + overflow: visible; + vertical-align: top; } + +.md-typeset .codehilitetable { + display: block; + border-radius: 0.2em; + font-size: 1.6rem; + overflow: hidden; } + .md-typeset .codehilitetable tbody, + .md-typeset .codehilitetable td { + display: block; + padding: 0; } + .md-typeset .codehilitetable tr { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .md-typeset .codehilitetable .codehilite, + .md-typeset .codehilitetable .linenodiv { + margin: 0; + border-radius: 0; } + .md-typeset .codehilitetable .linenodiv { + padding: 1.0rem 1.2rem 0.8rem; } + .md-typeset .codehilitetable .linenodiv, + .md-typeset .codehilitetable .linenodiv > pre { + height: 100%; } + .md-typeset .codehilitetable .linenos { + background: rgba(0, 0, 0, 0.07); + color: rgba(0, 0, 0, 0.26); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .md-typeset .codehilitetable .linenos pre { + margin: 0; + padding: 0; + background: transparent; + color: inherit; + text-align: right; } + .md-typeset .codehilitetable .code { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: hidden; } + .footnote { color: rgba(0, 0, 0, 0.54); font-size: 80%; } @@ -1035,12 +1139,16 @@ hr { content: ""; } .md-search-result__meta { + background: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.54); padding-left: 4.8rem; padding-right: 1.6rem; line-height: 4.0rem; font-size: 1.28rem; } +.md-search-result__item { + box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); } + .md-search-result__list { margin: 0; padding: 0; @@ -1057,17 +1165,23 @@ hr { .md-search-result__link:hover { background: rgba(83, 109, 254, 0.1); } +.md-search-result__article { + margin: 1.0em 0; } + .md-search-result__title { color: rgba(0, 0, 0, 0.87); font-size: 1.6rem; + font-weight: 400; line-height: 1.4; - margin-top: 0.5em; } + margin-top: 0.5em; + margin-bottom: 0; } -.md-search-result__description { +.md-search-result__teaser { color: rgba(0, 0, 0, 0.54); font-size: 1.28rem; line-height: 1.4; - margin: 0.5em 0; } + margin: 0.5em 0; + word-break: break-word; } .checklist li { position: relative; @@ -1103,8 +1217,7 @@ del.critic { mark { background: #FFFF00; - box-shadow: 0.4rem 0 0 #FFFF00, -0.4rem 0 0 #FFFF00; - overflow: auto; } + box-shadow: 0.4rem 0 0 #FFFF00, -0.4rem 0 0 #FFFF00; } .critic.comment { margin: 0 0.4rem; @@ -1164,30 +1277,42 @@ mark { content: "✔"; color: #1EBB52; } -.codehilite .hll { - background: #FFFF00; - display: block; - margin: 0 -16px; - padding: 0 16px; } - -.md-typeset sup { - padding: 0 0.125em; - border-radius: 0.2em; } - .md-typeset sup[id]:target { - background: orange; } - -.md-header { - position: static !important; } - -.md-toggle { - display: initial !important; } +@media print{ + .md-typeset a::after{ + color: rgba(0, 0, 0, 0.54); + content: " [" attr(href) "]"; } + .md-typeset code{ + box-shadow: none; + -webkit-box-decoration-break: initial; + box-decoration-break: initial; } + .md-header{ + display: none; } + .md-footer{ + display: none; } + .md-sidebar{ + display: none; } + .md-typeset .headerlink{ + display: none; } } @media only screen and (max-width: 44.9375em){ - .md-typeset > div > pre, - .md-typeset > pre > code{ + .md-typeset pre{ margin: 1.0em -1.6rem; padding: 1.0rem 1.6rem; - border-radius: 0; } } + border-radius: 0; } + .codehilite .hll, + .code .hll{ + margin: 0 -1.6rem; + padding: 0 1.6rem; } + .md-typeset .codehilite{ + margin: 1.0em -1.6rem; + padding: 1.0rem 1.6rem 0.8rem; + border-radius: 0; } + .md-typeset > .codehilitetable{ + margin: 0 -1.6rem; + border-radius: 0; } + .md-typeset > .codehilitetable .codehilite, + .md-typeset > .codehilitetable .linenodiv{ + padding: 1.0rem 1.6rem; } } @media only screen and (min-width: 100em){ html{ @@ -1197,6 +1322,93 @@ mark { html{ font-size: 75%; } } +@media only screen and (max-width: 59.9375em){ + body[data-md-locked]{ + height: 100%; + overflow: hidden; } + .md-nav--secondary{ + border-left: 0; } + html .md-nav__link[for="toc"]{ + display: block; } + html .md-nav__link[for="toc"]::after{ + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: #536dfe; + content: "toc"; } + html .md-nav__link[for="toc"] + .md-nav__link{ + display: none; } + html .md-nav__link[for="toc"] ~ .md-nav{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .md-nav__source{ + display: block; + padding: 0.4rem; + background: rgba(0, 0, 0, 0.87); + color: white; } + .md-search__overlay{ + display: block; + position: absolute; + top: 0.4rem; + left: 0.4rem; + width: 4.0rem; + height: 4.0rem; + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transition: opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; + transition: opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; + transition: transform 0.3s 0.1s, opacity 0.2s 0.2s; + transition: transform 0.3s 0.1s, opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; + border-radius: 2.0rem; + background: white; + opacity: 0; + overflow: hidden; + z-index: 1; } + .md-toggle--search:checked ~ .md-header .md-search__overlay{ + -webkit-transition: opacity 0.1s, -webkit-transform 0.4s; + transition: opacity 0.1s, -webkit-transform 0.4s; + transition: transform 0.4s, opacity 0.1s; + transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s; + opacity: 1; } + .md-search__inner{ + position: fixed; + top: 0; + left: 100%; + height: 100%; + -webkit-transform: translateX(5%); + transform: translateX(5%); + -webkit-transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); + transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); + transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s; + transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0; + z-index: 2; } + .md-toggle--search:checked ~ .md-header .md-search__inner{ + left: 0; + -webkit-transform: translateX(0); + transform: translateX(0); + -webkit-transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); + transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); + transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s; + transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); + opacity: 1; } + .md-search__input{ + width: 100%; + height: 5.6rem; + font-size: 1.8rem; } + .md-search__icon{ + top: 1.6rem; + left: 1.6rem; } + .md-search__icon::before{ + content: "arrow_back"; } + .md-search__output{ + top: 5.6rem; + bottom: 0; } + .md-search-result__link{ + padding: 0 1.6rem; } + .md-search-result__meta{ + padding-left: 1.6rem; } } + @media only screen and (max-width: 74.9375em){ .md-toggle--drawer:checked ~ .md-overlay{ width: 100%; @@ -1347,15 +1559,15 @@ mark { padding: 0.4rem; padding-right: 3.2rem; } .md-search__inner{ - position: relative; } + display: table; + position: relative; + clear: both; } .md-search__form{ width: 23.0rem; float: right; -webkit-transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); border-radius: 0.2rem; } - .md-toggle--search:checked ~ .md-header .md-search__form{ - width: 66.8rem; } .md-search__input{ width: 100%; height: 4.0rem; @@ -1399,6 +1611,7 @@ mark { color: rgba(0, 0, 0, 0.54); } .md-search__output{ box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); + top: 4.0rem; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; opacity: 0; } @@ -1455,6 +1668,8 @@ mark { .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link::after{ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } + .md-toggle--search:checked ~ .md-header .md-search__form{ + width: 66.8rem; } .md-sidebar__inner{ border-right: 0.1rem solid rgba(0, 0, 0, 0.07); } } @@ -1469,91 +1684,6 @@ mark { -webkit-transform: scale(45); transform: scale(45); } } -@media only screen and (max-width: 59.9375em){ - .md-nav--secondary{ - border-left: 0; } - html .md-nav__link[for="toc"]{ - display: block; } - html .md-nav__link[for="toc"]::after{ - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - color: #536dfe; - content: "toc"; } - html .md-nav__link[for="toc"] + .md-nav__link{ - display: none; } - html .md-nav__link[for="toc"] ~ .md-nav{ - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .md-nav__source{ - display: block; - padding: 0.4rem; - background: rgba(0, 0, 0, 0.87); - color: white; } - .md-search__overlay{ - display: block; - position: absolute; - top: 0.4rem; - left: 0.4rem; - width: 4.0rem; - height: 4.0rem; - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transition: opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; - transition: opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; - transition: transform 0.3s 0.1s, opacity 0.2s 0.2s; - transition: transform 0.3s 0.1s, opacity 0.2s 0.2s, -webkit-transform 0.3s 0.1s; - border-radius: 2.0rem; - background: white; - opacity: 0; - overflow: hidden; - z-index: 1; } - .md-toggle--search:checked ~ .md-header .md-search__overlay{ - -webkit-transition: opacity 0.1s, -webkit-transform 0.4s; - transition: opacity 0.1s, -webkit-transform 0.4s; - transition: transform 0.4s, opacity 0.1s; - transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s; - opacity: 1; } - .md-search__inner{ - position: fixed; - top: 0; - left: 100%; - height: 100%; - -webkit-transform: translateX(5%); - transform: translateX(5%); - -webkit-transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); - transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); - transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s; - transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; - z-index: 2; } - .md-toggle--search:checked ~ .md-header .md-search__inner{ - left: 0; - -webkit-transform: translateX(0); - transform: translateX(0); - -webkit-transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); - transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); - transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s; - transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); - opacity: 1; } - .md-search__input{ - width: 100%; - height: 5.6rem; - font-size: 1.8rem; } - .md-search__icon{ - top: 1.6rem; - left: 1.6rem; } - .md-search__icon::before{ - content: "arrow_back"; } - .md-search__output{ - position: absolute; - top: 5.6rem; - bottom: 0; } - .md-search-result__link{ - padding: 0 1.6rem; } - .md-search-result__meta{ - padding-left: 1.6rem; } } - @media only screen and (min-width: 30em) and (max-width: 44.9375em){ .md-toggle--search:checked ~ .md-header .md-search__overlay{ -webkit-transform: scale(60); @@ -1564,6 +1694,10 @@ mark { -webkit-transform: scale(75); transform: scale(75); } } +@media only screen and (min-width: 60em) and (max-width: 74.9375em){ + .md-toggle--search:checked ~ .md-header .md-search__form{ + width: 46.8rem; } } + @media only screen and (min-width: 60em) and (min-width: 75em){ .md-sidebar--secondary[data-md-locked]{ margin-left: 120.0rem; } } diff --git a/material/partials/search.html b/material/partials/search.html index 61eec5931..279232f65 100644 --- a/material/partials/search.html +++ b/material/partials/search.html @@ -9,7 +9,7 @@
- Type to search... + Indexing
    diff --git a/mkdocs.yml b/mkdocs.yml index dfa2ac050..e94e1349f 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -48,7 +48,7 @@ extra: # Extensions markdown_extensions: - markdown.extensions.admonition - - markdown.extensions.codehilite + - markdown.extensions.codehilite(guess_lang=false) - markdown.extensions.footnotes - markdown.extensions.meta - markdown.extensions.toc: diff --git a/package.json b/package.json index 184e0de7c..9eb71987e 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "scripts": { "build": "./node_modules/.bin/gulp build --clean --optimize --revision", "clean": "./node_modules/.bin/gulp clean", - "pre-commit": "./node_modules/.bin/eslint . && ./node_modules/.bin/sass-lint -c .sass-lint.yml -vq", + "pre-commit": "./node_modules/.bin/sass-lint -c .sass-lint.yml -vq", "start": "./node_modules/.bin/gulp watch --no-lint", "test": "./node_modules/.bin/gulp test" }, diff --git a/src/assets/stylesheets/_shame.scss b/src/assets/stylesheets/_shame.scss index 4c71abd0a..c64ddce21 100644 --- a/src/assets/stylesheets/_shame.scss +++ b/src/assets/stylesheets/_shame.scss @@ -24,6 +24,15 @@ // Rules // ---------------------------------------------------------------------------- +// TODO today: +// 1. refactor search JavaScript (production-ready, namespacing not important) +// 2. include table styles +// 3. make nav bar production ready (webkit overflow scrolling) +// 4. refactor footnotes extension +// TODO: Indexing... meta search result, always show! +// TODO: offset error in table of contents on specimen on checklists stuff +// --> breaks on multiple tags + @include break-to-device(tablet portrait) { .md-search-result__link { padding: 0 1.6rem; @@ -36,6 +45,7 @@ .md-search-result { &__meta { + background: $md-color-black--lightest; color: $md-color-black--light; padding-left: 4.8rem; padding-right: 1.6rem; @@ -43,6 +53,11 @@ font-size: ms(-1); } + &__item { + + box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); + } + &__list { margin: 0; padding: 0; @@ -51,7 +66,7 @@ } &__link { - overflow: auto; + overflow: auto; // TODO: this must be here, because the inner margins may not collapse... display: block; padding-left: 4.8rem; padding-right: 1.6rem; @@ -62,18 +77,25 @@ } } + &__article { + margin: 1.0em 0; + } + &__title { color: $md-color-black; font-size: ms(0); + font-weight: 400; line-height: 1.4; margin-top: 0.5em; + margin-bottom: 0; } - &__description { + &__teaser { color: $md-color-black--light; font-size: ms(-1); line-height: 1.4; margin: 0.5em 0;; + word-break: break-word; } } @@ -223,12 +245,12 @@ del.critic { // } } -// Not critic-specific! +// Not critic-specific, also used for code hilite! mark { background: #FFFF00; box-shadow: 0.4rem 0 0 #FFFF00, -0.4rem 0 0 #FFFF00; // ligher yellow... - overflow: auto; // TODO: remove this, just needed to rebuild + // overflow: auto; // TODO: remove this, just needed to rebuild } .critic.comment { @@ -305,29 +327,4 @@ mark { color: #1EBB52; } -.codehilite .hll { - background: #FFFF00; - display: block; - margin: 0 -16px; - padding: 0 16px; -} - // TODO: integrate stylelint and property order! - - -.md-typeset { - sup { - // background: $md-color-black--lighter; - padding: 0 0.125em; - border-radius: 0.2em; - // font-weight: bold; - // color: $md-color-white; - &[id]:target { - background: orange; - } - - a { - // color: white; - } - } -} diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index e64253b0d..ca635af41 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -163,14 +163,19 @@ kbd { } } + // Code blocks + code, + pre { + background: $md-code-background; + color: $md-code-color; + font-size: 85%; + } + // Inline code blocks code { margin: 0 0.4rem; padding: 0.1rem 0; border-radius: 0.2rem; - background: $md-code-background; - color: $md-code-color; - font-size: 85%; box-shadow: 0.4rem 0 0 $md-code-background, -0.4rem 0 0 $md-code-background; @@ -196,28 +201,15 @@ kbd { box-shadow: none; } - // Formatted code blocks + // Unformatted code blocks pre { margin: 1.0em 0; padding: 1.0rem 1.2rem; border-radius: 0.2rem; - background: $md-code-background; - color: $md-code-color; - font-size: 85%; line-height: 1.4; overflow: auto; -webkit-overflow-scrolling: touch; - // Reset, if pre is inside code - > code { - font-size: inherit; - } - } - - // Full-width container - > div > pre, - > pre > code { - // [mobile -]: Stretch to whole width @include break-to-device(mobile) { margin: 1.0em -1.6rem; @@ -232,9 +224,23 @@ kbd { // Style scrollbar thumb &-thumb { - background: $md-color-black--lighter; + background-color: $md-color-black--lighter; + + // Hovered scrollbar thumb + &:hover { + background-color: $md-color-accent; + } } } + + // Reset, if code is inside pre + > code { + margin: 0; + background: none; + font-size: inherit; + box-shadow: none; + box-decoration-break: none; + } } // Keystrokes diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss index 929fa471a..7a3abb6b2 100644 --- a/src/assets/stylesheets/extensions/_admonition.scss +++ b/src/assets/stylesheets/extensions/_admonition.scss @@ -30,7 +30,7 @@ padding: 0.8rem 1.2rem; border-left: 0.4rem solid $clr-blue-a200; border-radius: 0 0.2rem 0.2rem 0; - background: transparentize($clr-blue-a200, 0.95); + background: transparentize($clr-blue-a200, 0.9); // Title &-title { @@ -88,7 +88,7 @@ &%#{nth($names, 1)}, &.#{nth($names, 1)} { border-color: $tint; - background: transparentize($tint, 0.95); + background: transparentize($tint, 0.9); // Set color for title .admonition-title { diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss index baadf50ac..3d6827393 100644 --- a/src/assets/stylesheets/extensions/_codehilite.scss +++ b/src/assets/stylesheets/extensions/_codehilite.scss @@ -24,10 +24,30 @@ // Variables // ---------------------------------------------------------------------------- +// Operators +$codehilite-operator: inherit; +$codehilite-operator-word: inherit; + +// Generics +$codehilite-generic-emph: #000000; +$codehilite-generic-error: #AA0000; +$codehilite-generic-heading: #999999; +$codehilite-generic-output: #888888; +$codehilite-generic-prompt: #555555; +$codehilite-generic-strong: inherit; +$codehilite-generic-subheading: #AAAAAA; +$codehilite-generic-traceback: #AA0000; + +// Diffs +$codehilite-diff-deleted: #FFDDDD; +$codehilite-diff-inserted: #DDFFDD; + // Keywords $codehilite-keyword: #3B78E7; +$codehilite-keyword-constant: #A71D5D; $codehilite-keyword-declaration: #3B78E7; $codehilite-keyword-namespace: #3B78E7; +$codehilite-keyword-pseudo: #A71D5D; $codehilite-keyword-reserved: #3E61A2; $codehilite-keyword-type: #3E61A2; @@ -36,6 +56,7 @@ $codehilite-comment: #999999; $codehilite-comment-multiline: #999999; $codehilite-comment-preproc: #666666; $codehilite-comment-single: #999999; +$codehilite-comment-shebang: #999999; $codehilite-comment-special: #999999; // Names @@ -57,15 +78,6 @@ $codehilite-name-variable-instance: #3E61A2; $codehilite-name-variable-global: #3E61A2; $codehilite-name-extension: #EC407A; -// Literals -$codehilite-literal-string: #0D904F; // #1eec86 for dark background -$codehilite-literal-string-backticks: #0D904F; -$codehilite-literal-string-char: #0D904F; -$codehilite-literal-string-doc: #999999; -$codehilite-literal-string-double: #0D904F; -$codehilite-literal-string-single: #0D904F; -$codehilite-literal-string-symbol: #0D904F; - // Numbers $codehilite-literal-number: #E74C3C; $codehilite-literal-number-float: #E74C3C; @@ -74,6 +86,24 @@ $codehilite-literal-number-integer: #E74C3C; $codehilite-literal-number-integer-long: #E74C3C; $codehilite-literal-number-oct: #E74C3C; +// Strings +$codehilite-literal-string: #0D904F; +$codehilite-literal-string-backticks: #0D904F; +$codehilite-literal-string-char: #0D904F; +$codehilite-literal-string-doc: #999999; +$codehilite-literal-string-double: #0D904F; +$codehilite-literal-string-escape: #183691; +$codehilite-literal-string-heredoc: #183691; +$codehilite-literal-string-interpol: #183691; +$codehilite-literal-string-other: #183691; +$codehilite-literal-string-regex: #009926; +$codehilite-literal-string-single: #0D904F; +$codehilite-literal-string-symbol: #0D904F; + +// Miscellaneous +$codehilite-error: #A61717; +$codehilite-whitespace: transparent; + // ---------------------------------------------------------------------------- // Rules // ---------------------------------------------------------------------------- @@ -82,28 +112,30 @@ $codehilite-literal-number-oct: #E74C3C; .codehilite, .code { - // Errors - .err { color: #A61717; } - // Operators - .o { color: inherit; } + .o { color: $codehilite-operator; } + .ow { color: $codehilite-operator-word; } // Generics - .ge { color: #000000; } // Generic.Emph - .gr { color: #AA0000; } // Generic.Error - .gh { color: #999999; } // Generic.Heading - .go { color: #888888; } // Generic.Output - .gp { color: #555555; } // Generic.Prompt - .gs { color: inherit; } // Generic.Strong - .gu { color: #AAAAAA; } // Generic.Subheading - .gt { color: #AA0000; } // Generic.Traceback + .ge { color: $codehilite-generic-emph; } + .gr { color: $codehilite-generic-error; } + .gh { color: $codehilite-generic-heading; } + .go { color: $codehilite-generic-output; } + .gp { color: $codehilite-generic-prompt; } + .gs { color: $codehilite-generic-strong; } + .gu { color: $codehilite-generic-subheading; } + .gt { color: $codehilite-generic-traceback; } + + // Diffs + .gd { background-color: $codehilite-diff-deleted; } + .gi { background-color: $codehilite-diff-inserted; } // Keywords .k { color: $codehilite-keyword; } - .kc { color: #A71D5D; } // Keyword.Constant + .kc { color: $codehilite-keyword-constant; } .kd { color: $codehilite-keyword-declaration; } .kn { color: $codehilite-keyword-namespace; } - .kp { color: #A71D5D; } // Keyword.Pseudo + .kp { color: $codehilite-keyword-pseudo; } .kr { color: $codehilite-keyword-reserved; } .kt { color: $codehilite-keyword-type; } @@ -112,6 +144,7 @@ $codehilite-literal-number-oct: #E74C3C; .cm { color: $codehilite-comment-multiline; } .cp { color: $codehilite-comment-preproc; } .c1 { color: $codehilite-comment-single; } + .ch { color: $codehilite-comment-shebang; } .cs { color: $codehilite-comment-special; } // Names @@ -132,7 +165,6 @@ $codehilite-literal-number-oct: #E74C3C; .vg { color: $codehilite-name-variable-global; } .vi { color: $codehilite-name-variable-instance; } .nx { color: $codehilite-name-extension; } - .ow { color: inherit; } // Numbers .m { color: $codehilite-literal-number; } @@ -148,18 +180,163 @@ $codehilite-literal-number-oct: #E74C3C; .sc { color: $codehilite-literal-string-char; } .sd { color: $codehilite-literal-string-doc; } .s2 { color: $codehilite-literal-string-double; } - .se { color: #183691; } // Literal.String.Escape - .sh { color: #183691; } // Literal.String.Heredoc - .si { color: #183691; } // Literal.String.Interpol - .sx { color: #183691; } // Literal.String.Other - .sr { color: #009926; } // Literal.String.Regex + .se { color: $codehilite-literal-string-escape; } + .sh { color: $codehilite-literal-string-heredoc; } + .si { color: $codehilite-literal-string-interpol; } + .sx { color: $codehilite-literal-string-other; } + .sr { color: $codehilite-literal-string-regex; } .s1 { color: $codehilite-literal-string-single; } .ss { color: $codehilite-literal-string-symbol; } - // Diffs - .gd { background-color: #FFDDDD; } // Generic.Deleted - .gi { background-color: #DDFFDD; } // Generic.Inserted - // Miscellaneous - .w { color: transparent; } // Text.Whitespace + .err { color: $codehilite-error; } + .w { color: $codehilite-whitespace; } + + // Highlighted lines + .hll { + display: block; + margin: 0 -1.2rem; + padding: 0 1.2rem; + background: transparentize($clr-yellow-500, 0.5); + + // [mobile -]: Stretch to whole width + @include break-to-device(mobile) { + margin: 0 -1.6rem; + padding: 0 1.6rem; + } + } +} + +// Scoped in typesetted content for greater specificity +.md-typeset { + + // If code blocks are wrapped with codehilite, the styles must be adjusted + // so the marker stretches to the whole width and the padding is respected + .codehilite { + margin: 1.0em 0; + padding: 1.0rem 1.2rem 0.8rem; + border-radius: 0.2rem; + background: $md-code-background; + color: $md-code-color; + line-height: 1.4; + overflow: auto; + -webkit-overflow-scrolling: touch; + + // [mobile -]: Stretch to whole width + @include break-to-device(mobile) { + margin: 1.0em -1.6rem; + padding: 1.0rem 1.6rem 0.8rem; + border-radius: 0; + } + + // Override native scrollbar styles + &::-webkit-scrollbar { + width: 0.4rem; + height: 0.4rem; + + // Style scrollbar thumb + &-thumb { + background-color: $md-color-black--lighter; + + // Hovered scrollbar thumb + &:hover { + background-color: $md-color-accent; + } + } + } + + // Hack: set pre-tag to inline-block, in order to stetch the content on + // overflow correctly to the whole width + pre { + display: inline-block; + min-width: 100%; + margin: 0; + padding: 0; + background: transparent; + overflow: visible; + vertical-align: top; + } + } + + // Block with line numbers + .codehilitetable { + display: block; + border-radius: 0.2em; + font-size: ms(0); + overflow: hidden; + + // Set table elements to block layout, because otherwise the whole flexbox + // hacking won't work correctly + tbody, + td { + display: block; + padding: 0; + } + + // We need to use flexbox layout, because otherwise it's not possible to + // make the code container scroll while keeping the line numbers static + tr { + display: flex; + } + + // The pre tags are nested inside a table, so we need to remove the + // margin because it collapses below all the overflows + .codehilite, + .linenodiv { + margin: 0; + border-radius: 0; + } + + // Add spacing to line number container + .linenodiv { + padding: 1.0rem 1.2rem 0.8rem; + + // Stretch the line number container vertically, so it always aligns with + // the code container, even when there's a scrollbar. + &, + & > pre { + height: 100%; + } + } + + // Disable pointer-events, so code can be easily copied without + // accidentally also copying the line numbers + .linenos { + background: $md-color-black--lightest; + color: $md-color-black--lighter; + user-select: none; + + // Reset spacings + pre { + margin: 0; + padding: 0; + background: transparent; + color: inherit; + text-align: right; + } + } + + // The table cell containing the code container wrapper and code should + // stretch horizontally to the remaining space + .code { + flex: 1; + overflow: hidden; + } + } + + // Full-width container + > .codehilitetable { + + // [mobile -]: Stretch to whole width + @include break-to-device(mobile) { + margin: 0 -1.6rem; + border-radius: 0; + + // Increase spacing + .codehilite, + .linenodiv { + padding: 1.0rem 1.6rem; + } + } + } } diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index a8195b952..13d0208c1 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -122,12 +122,15 @@ // [tablet landscape +]: Make relative for inner layout @include break-from-device(tablet landscape) { + display: table; position: relative; + clear: both; } } // Search form &__form { + position: relative; // [tablet landscape +]: Header-embedded search @include break-from-device(tablet landscape) { @@ -138,9 +141,18 @@ transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0); border-radius: 0.2rem; + } - // Enlarge search field when active - .md-toggle--search:checked ~ .md-header & { + // Set maximum width + .md-toggle--search:checked ~ .md-header & { + + // [tablet landscape]: Do not overlay title + @include break-at-device(tablet landscape) { + width: 46.8rem; + } + + // [screen +]: Match content width + @include break-from-device(screen) { width: 66.8rem; } } @@ -237,13 +249,13 @@ // Search output container &__output { + position: absolute; width: 100%; border-radius: 0 0 0.2rem 0.2rem; overflow: hidden; // [tablet portrait -]: Full-screen search bar @include break-to-device(tablet portrait) { - position: absolute; top: 5.6rem; bottom: 0; } @@ -252,6 +264,7 @@ @include break-from-device(tablet landscape) { @include z-depth(6); + top: 4.0rem; transition: opacity 0.4s; opacity: 0; @@ -278,8 +291,6 @@ $md-color-black--lighter, $md-color-black--lightest 35%, $md-color-black--transparent 60%); - - // Hack: Opera doesn't support this in the shorthand background-attachment: local, scroll; background-color: $md-color-white; background-repeat: no-repeat; diff --git a/src/partials/search.html b/src/partials/search.html index e1b54ca7f..b088a789c 100644 --- a/src/partials/search.html +++ b/src/partials/search.html @@ -34,7 +34,7 @@
    - Type to search... + Indexing