Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-23 23:21:00 +01:00
Code Issues Releases Wiki Activity

Finished full integration for CodeHilite

Browse Source
This commit is contained in:
squidfunk 2016-10-30 10:36:18 +01:00
parent 669d7cbc19
commit 8cac945757
19 changed files with 809 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

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

1
.nvmrc
View File

@ -1 +0,0 @@
6.7.0

3
.sass-lint.yml
View File

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

18
Gulpfile.babel.js
View File

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

8
docs/extensions/admonition.md
View File

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

151
docs/extensions/codehilite.md
View File

@ -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 <small>recommended</small>
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 <small>excerpt</small>
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
</main-Tag>
```
[CodeHilite]: https://pythonhosted.org/Markdown/extensions/code_hilite.html
[Pygments]: http://pygments.org
[300 languages]: http://pygments.org/languages

110
docs/extensions/footnotes.md
View File

@ -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 <small>with</small> 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:
<a href="#fn:1">Jump to footnote at the bottom of the page</a>
[^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.
<a href="#fn:2">Jump to footnote at the bottom of the page</a>
[Footnotes]: https://pythonhosted.org/Markdown/extensions/footnotes.html
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions

14
docs/specimen.md
View File

@ -184,3 +184,17 @@ Code can also be written within `fenced inline code blocks`, however syntax
highlighting will only work on code listings.
## 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 | - | - | - |

7
lib/tasks/assets/javascripts/build/application.js
View File

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

406
material/assets/stylesheets/application.css
View File

@ -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 > code {
font-size: inherit; }
.md-typeset > div > pre::-webkit-scrollbar,
.md-typeset > pre > code::-webkit-scrollbar {
.md-typeset pre::-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); }
.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 {
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; }
@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{
position: static !important; }
.md-toggle {
display: initial !important; }
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; } }

2
material/partials/search.html
View File

@ -9,7 +9,7 @@
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
Type to search...
Indexing
</div>
<ol class="md-search-result__list"></ol>
</div>

2
mkdocs.yml
View File

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

2
package.json
View File

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

55
src/assets/stylesheets/_shame.scss
View File

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

42
src/assets/stylesheets/base/_typeset.scss
View File

@ -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,11 +224,25 @@ 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
kbd {
display: inline-block;

4
src/assets/stylesheets/extensions/_admonition.scss
View File

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

245
src/assets/stylesheets/extensions/_codehilite.scss
View File

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

19
src/assets/stylesheets/layout/_search.scss
View File

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

2
src/partials/search.html
View File

@ -34,7 +34,7 @@
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
Type to search...
Indexing
</div>
<ol class="md-search-result__list"></ol>
</div>