mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-30 18:24:35 +01:00
Initial commit of rework
This commit is contained in:
squidfunk
parent
4b9c8b9a49
commit
7f2444174f
20
CHANGELOG
20
CHANGELOG
@ -1,3 +1,23 @@
|
|||||||
|
mkdocs-material-0.2.4 (2016-06-26)
|
||||||
|
|
||||||
|
* Fixed improperly set default favicon
|
||||||
|
* Fixed #33: Protocol relative URL for web fonts doesn't work with file://
|
||||||
|
* Fixed #34: IE11 on Windows 7 doesn't honor max-width on main tag
|
||||||
|
* Fixed #35: Add styling for blockquotes
|
||||||
|
|
||||||
|
mkdocs-material-0.2.3 (2016-05-16)
|
||||||
|
|
||||||
|
* Fixed #25: Highlight inline fenced blocks
|
||||||
|
* Fixed #26: Better highlighting for keystrokes
|
||||||
|
* Fixed #30: Suboptimal syntax highlighting for PHP
|
||||||
|
|
||||||
|
mkdocs-material-0.2.2 (2016-03-20)
|
||||||
|
|
||||||
|
* Fixed #15: Document pygments dependency for codehilite
|
||||||
|
* Fixed #16: Favicon could not be set through mkdocs.yml
|
||||||
|
* Fixed #17: Put version into own container for styling
|
||||||
|
* Fixed #20: Fix rounded borders for tables
|
||||||
|
|
||||||
mkdocs-material-0.2.1 (2016-03-12)
|
mkdocs-material-0.2.1 (2016-03-12)
|
||||||
|
|
||||||
* Fixed #10: Invisible header after closing search bar with ESC key
|
* Fixed #10: Invisible header after closing search bar with ESC key
|
||||||
|
|||||||
88
Gulpfile.js
88
Gulpfile.js
@ -41,14 +41,17 @@ var minimage = require('gulp-image-optimization');
|
|||||||
var modernizr = require('gulp-modernizr');
|
var modernizr = require('gulp-modernizr');
|
||||||
var mqpacker = require('css-mqpacker');
|
var mqpacker = require('css-mqpacker');
|
||||||
var notifier = require('node-notifier');
|
var notifier = require('node-notifier');
|
||||||
|
var path = require('path');
|
||||||
var plumber = require('gulp-plumber');
|
var plumber = require('gulp-plumber');
|
||||||
var postcss = require('gulp-postcss');
|
var postcss = require('gulp-postcss');
|
||||||
var rev = require('gulp-rev');
|
var rev = require('gulp-rev');
|
||||||
var sass = require('gulp-sass');
|
var sass = require('gulp-sass');
|
||||||
var sourcemaps = require('gulp-sourcemaps');
|
var sourcemaps = require('gulp-sourcemaps');
|
||||||
|
var stream = require('webpack-stream');
|
||||||
var uglify = require('gulp-uglify');
|
var uglify = require('gulp-uglify');
|
||||||
var util = require('gulp-util');
|
var util = require('gulp-util');
|
||||||
var vinyl = require('vinyl-paths');
|
var vinyl = require('vinyl-paths');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Locals
|
* Locals
|
||||||
@ -72,9 +75,10 @@ gulp.src = function() {
|
|||||||
util.log(util.colors.red(
|
util.log(util.colors.red(
|
||||||
'Error (' + error.plugin + '): ' + error.message
|
'Error (' + error.plugin + '): ' + error.message
|
||||||
));
|
));
|
||||||
|
var file = error.relativePath.split('/').pop();
|
||||||
notifier.notify({
|
notifier.notify({
|
||||||
title: 'Error (' + error.plugin + ')',
|
title: 'Error (' + error.plugin + '): ' + file,
|
||||||
message: error.message.split('\n')[0]
|
message: error.messageOriginal
|
||||||
});
|
});
|
||||||
this.emit('end');
|
this.emit('end');
|
||||||
}));
|
}));
|
||||||
@ -93,9 +97,9 @@ gulp.task('assets:stylesheets', function() {
|
|||||||
.pipe(
|
.pipe(
|
||||||
sass({
|
sass({
|
||||||
includePaths: [
|
includePaths: [
|
||||||
'bower_components/bourbon/app/assets/stylesheets/',
|
'bower_components/modular-scale/stylesheets',
|
||||||
'bower_components/quantum-colors/',
|
'bower_components/quantum-colors',
|
||||||
'bower_components/quantum-shadows/'
|
'bower_components/quantum-shadows'
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
.pipe(
|
.pipe(
|
||||||
@ -105,29 +109,60 @@ gulp.task('assets:stylesheets', function() {
|
|||||||
]))
|
]))
|
||||||
.pipe(gulpif(args.sourcemaps, sourcemaps.write()))
|
.pipe(gulpif(args.sourcemaps, sourcemaps.write()))
|
||||||
.pipe(gulpif(args.production, mincss()))
|
.pipe(gulpif(args.production, mincss()))
|
||||||
.pipe(gulp.dest('material/assets/stylesheets/'));
|
.pipe(gulp.dest('material/assets/stylesheets'));
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Build javascripts from Bower components and source.
|
* Build javascripts by transpiling ES6 with babel.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:javascripts', function() {
|
gulp.task('assets:javascripts', function() {
|
||||||
return gulp.src([
|
return gulp.src('src/assets/javascripts/**/*.js')
|
||||||
|
.pipe(
|
||||||
/* Bower components */
|
stream({
|
||||||
'bower_components/classlist/classList.js',
|
entry: 'application.js',
|
||||||
'bower_components/fastclick/lib/fastclick.js',
|
output: {
|
||||||
'bower_components/pegasus/dist/pegasus.js',
|
filename: 'application.js'
|
||||||
'bower_components/lunr.js/lunr.js',
|
},
|
||||||
|
module: {
|
||||||
/* Application javascripts */
|
loaders: [{
|
||||||
'src/assets/javascripts/application.js',
|
loader: 'babel-loader',
|
||||||
'src/assets/javascripts/standalone.js'
|
test: path.join(__dirname, 'src/assets/javascripts'),
|
||||||
]).pipe(gulpif(args.sourcemaps, sourcemaps.init()))
|
query: {
|
||||||
.pipe(concat('application.js'))
|
presets: 'es2015'
|
||||||
.pipe(gulpif(args.sourcemaps, sourcemaps.write()))
|
}
|
||||||
.pipe(gulpif(args.production, uglify()))
|
}]
|
||||||
.pipe(gulp.dest('material/assets/javascripts/'));
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.NoErrorsPlugin(),
|
||||||
|
new webpack.ResolverPlugin(
|
||||||
|
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
|
||||||
|
'.bower.json', ['main']
|
||||||
|
)
|
||||||
|
)
|
||||||
|
].concat(
|
||||||
|
args.production ? [
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
compress: {
|
||||||
|
warnings: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
] : []),
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
modulesDirectories: [
|
||||||
|
'src/assets/javascripts',
|
||||||
|
'node_modules',
|
||||||
|
'bower_components'
|
||||||
|
],
|
||||||
|
extensions: [
|
||||||
|
'', '.js'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
devtool: args.sourcemaps ? 'source-map' : ''
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest('material/assets/javascripts'));
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -138,8 +173,8 @@ gulp.task('assets:modernizr', [
|
|||||||
'assets:javascripts'
|
'assets:javascripts'
|
||||||
], function() {
|
], function() {
|
||||||
return gulp.src([
|
return gulp.src([
|
||||||
'material/assets/stylesheets/application.css',
|
'material/assets/stylesheets/*.css',
|
||||||
'material/assets/javascripts/application.js'
|
'material/assets/javascripts/*.js'
|
||||||
]).pipe(
|
]).pipe(
|
||||||
modernizr({
|
modernizr({
|
||||||
options: [
|
options: [
|
||||||
@ -150,7 +185,6 @@ gulp.task('assets:modernizr', [
|
|||||||
'testProp' /* Test for properties */
|
'testProp' /* Test for properties */
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
.pipe(addsrc.append('bower_components/respond/dest/respond.src.js'))
|
|
||||||
.pipe(concat('modernizr.js'))
|
.pipe(concat('modernizr.js'))
|
||||||
.pipe(gulpif(args.production, uglify()))
|
.pipe(gulpif(args.production, uglify()))
|
||||||
.pipe(gulp.dest('material/assets/javascripts'));
|
.pipe(gulp.dest('material/assets/javascripts'));
|
||||||
@ -168,7 +202,7 @@ gulp.task('assets:static', function() {
|
|||||||
interlaced: true
|
interlaced: true
|
||||||
})))
|
})))
|
||||||
.pipe(addsrc.append('src/assets/{fonts,images}/*.{ico,eot,svg,ttf,woff}'))
|
.pipe(addsrc.append('src/assets/{fonts,images}/*.{ico,eot,svg,ttf,woff}'))
|
||||||
.pipe(gulp.dest('material/assets/'));
|
.pipe(gulp.dest('material/assets'));
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
@ -16,15 +16,8 @@
|
|||||||
"node_modules"
|
"node_modules"
|
||||||
],
|
],
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
|
||||||
"classlist": "^2014.12.13",
|
|
||||||
"fastclick": "^1.0.6",
|
|
||||||
"lunr.js": "^0.6.0",
|
|
||||||
"pegasus": "^0.3.2",
|
|
||||||
"respond": "^1.4.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"bourbon": "^4.2.6",
|
"modular-scale": "^2.1.1",
|
||||||
"quantum-colors": "^1.0.1",
|
"quantum-colors": "^1.0.1",
|
||||||
"quantum-shadows": "^1.0.0"
|
"quantum-shadows": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -123,8 +123,6 @@ _deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
|
|||||||
green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
|
green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
|
||||||
_blue grey_. The last three colors can only be used as a primary color.
|
_blue grey_. The last three colors can only be used as a primary color.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
If the color is set via this configuration, an additional CSS file called
|
If the color is set via this configuration, an additional CSS file called
|
||||||
`palettes.css` is included that defines the color palettes. If you want to
|
`palettes.css` is included that defines the color palettes. If you want to
|
||||||
keep things lean, clone the repository and recompile the theme with your
|
keep things lean, clone the repository and recompile the theme with your
|
||||||
@ -203,14 +201,14 @@ MkDocs supports several [Markdown extensions][]. The following extensions are
|
|||||||
not enabled by default (see the link for which are enabled by default), so you
|
not enabled by default (see the link for which are enabled by default), so you
|
||||||
have to switch them on explicitly.
|
have to switch them on explicitly.
|
||||||
|
|
||||||
### CodeHilite (recommended)
|
### CodeHilite <small>recommended</small>
|
||||||
|
|
||||||
This extensions adds code highlighting to fenced code blocks. It might not be
|
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:
|
the best code highlighter, but it works without JavaScript and on the server:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- codehilite(css_class=code)
|
- codehilite
|
||||||
```
|
```
|
||||||
|
|
||||||
If you want more extensive highlighting, you can use a JavaScript library like
|
If you want more extensive highlighting, you can use a JavaScript library like
|
||||||
@ -257,20 +255,28 @@ The Material template adds a neutral color for the `note` class and a red color
|
|||||||
for the `warning` class. You can also add a custom title:
|
for the `warning` class. You can also add a custom title:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
!!! warning "Don't try this at home"
|
!!! warning
|
||||||
If you do, you will regret it.
|
MkDocs supports several [Markdown extensions][]. The following extensions are
|
||||||
|
not enabled by default (see the link for which are enabled by default), so you
|
||||||
|
have to switch them on explicitly.
|
||||||
```
|
```
|
||||||
|
|
||||||
This will print:
|
This will print:
|
||||||
|
|
||||||
!!! warning "Don't try this at home"
|
!!! warning
|
||||||
If you do, you will regret it.
|
MkDocs supports several [Markdown extensions][]. The following extensions are
|
||||||
|
not enabled by default (see the link for which are enabled by default), so you
|
||||||
|
have to switch them on explicitly.
|
||||||
|
|
||||||
More colors can be freely defined.
|
More colors can be freely defined.
|
||||||
|
|
||||||
|
> MkDocs supports several [Markdown extensions][]. The following extensions are
|
||||||
|
> not enabled by default (see the link for which are enabled by default), so you
|
||||||
|
> have to switch them on explicitly.
|
||||||
|
|
||||||
## Full example
|
## Full example
|
||||||
|
|
||||||
Below is a full example configuration for a mkdocs.yml:
|
Below is a full example configuration for a `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
# Project information
|
# Project information
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
# Material for MkDocs
|
# Material <small>for MkDocs</small>
|
||||||
|
|
||||||
## Beautiful documentation
|
## Beautiful documentation
|
||||||
|
|
||||||
@ -7,8 +7,6 @@ towards project documentation. It is built using Google's [material design][]
|
|||||||
guidelines, full responsive, optimized for touch and pointer devices as well
|
guidelines, full responsive, optimized for touch and pointer devices as well
|
||||||
as all sorts of screen sizes.
|
as all sorts of screen sizes.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Material is very lightweight – it is built from scratch using Javascript and
|
Material is very lightweight – it is built from scratch using Javascript and
|
||||||
CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
|
CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
|
||||||
and Analytics). Yet, it is highly customizable and degrades gracefully in older
|
and Analytics). Yet, it is highly customizable and degrades gracefully in older
|
||||||
|
|||||||
106
docs/specimen.md
Normal file
106
docs/specimen.md
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
# Specimen
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
### Body copy
|
||||||
|
|
||||||
|
Material's typographical system follows the idea of __vertical rhythm__, which
|
||||||
|
means it tries to establish a _consistent visual rhythm_ to the content of the
|
||||||
|
page to make reading pleasant and easy on the eyes. It's a simple concept but
|
||||||
|
rather hard to implement correctly. Luckily, the Material theme has already
|
||||||
|
done this for you, so sit back, relax, and start writing your documentation.
|
||||||
|
|
||||||
|
Naturally, the Material theme defines __bold__ and _italic_ styles, makes it
|
||||||
|
easy to write `fenced inline code blocks`, [links](#) and <kbd>Keyboard</kbd>
|
||||||
|
<kbd>+</kbd> <kbd>Commands</kbd>.
|
||||||
|
|
||||||
|
### Headings <small>w/ or w/o secondary text</small>
|
||||||
|
|
||||||
|
Besides the default HTML headings `<h2>` to `<h6>`, the representational
|
||||||
|
classes `.h2` to `.h6` are defined to allow easy inline styling. The `<h1>`
|
||||||
|
should be only defined once and is integrated into the collapsing header.
|
||||||
|
|
||||||
|
Secondary text can be introduced to all headings (including `<h1>`) by using
|
||||||
|
the `<small>` tag directly inside Markdown.
|
||||||
|
|
||||||
|
## Blockquotes
|
||||||
|
|
||||||
|
> Text can also be written in blockquotes, for example to paraphrase
|
||||||
|
> something or someone.
|
||||||
|
>
|
||||||
|
> > And blockquotes can be nested?
|
||||||
|
>
|
||||||
|
> This is correct. Furthermore, they can contain __bold__ and _italic_ text,
|
||||||
|
> `fenced inline code blocks`, [links](#), headings and all kind of stuff.
|
||||||
|
|
||||||
|
## Lists
|
||||||
|
|
||||||
|
### Ordered lists
|
||||||
|
|
||||||
|
### Unordered lists
|
||||||
|
|
||||||
|
## Code
|
||||||
|
|
||||||
|
### Listing
|
||||||
|
|
||||||
|
Pre-formatted code blocks can host code examples and use the pygments extension
|
||||||
|
(if installed and enabled in `mkdocs.yml`) for syntax highlighting:
|
||||||
|
|
||||||
|
``` c
|
||||||
|
/*!
|
||||||
|
* Scan a buffer for a valid variable-sized integer.
|
||||||
|
*
|
||||||
|
* This function checks if an underrun might happen reading a variable-sized
|
||||||
|
* integer from a buffer. Only underruns can be checked using this method,
|
||||||
|
* overflows may still happen, but are properly reported by the unpack
|
||||||
|
* functions. SSE2 intrinsics are used if the compiler supports it.
|
||||||
|
*
|
||||||
|
* \param[in] data[] Source buffer
|
||||||
|
* \param[in] left Remaining bytes
|
||||||
|
* \return Bytes read
|
||||||
|
*/
|
||||||
|
extern size_t
|
||||||
|
pb_varint_scan(const uint8_t data[], size_t left) {
|
||||||
|
assert(data && left);
|
||||||
|
left = left > 10 ? 10 : left;
|
||||||
|
|
||||||
|
#ifdef __SSE2__
|
||||||
|
|
||||||
|
/* Mapping: remaining bytes ==> bitmask */
|
||||||
|
static const int mask_map[] = {
|
||||||
|
0x0000, 0x0001, 0x0003, 0x0007,
|
||||||
|
0x000F, 0x001F, 0x003F, 0x007F,
|
||||||
|
0x00FF, 0x01FF, 0x03FF
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Load buffer into 128-bit integer and create high-bit mask */
|
||||||
|
__m128i temp = _mm_loadu_si128((const __m128i *)data);
|
||||||
|
__m128i high = _mm_set1_epi8(0x80);
|
||||||
|
|
||||||
|
/* Intersect and extract mask with high-bits set */
|
||||||
|
int mask = _mm_movemask_epi8(_mm_and_si128(temp, high));
|
||||||
|
mask = (mask & mask_map[left]) ^ mask_map[left];
|
||||||
|
|
||||||
|
/* Count trailing zeroes */
|
||||||
|
return mask ? __builtin_ctz(mask) + 1 : 0;
|
||||||
|
|
||||||
|
#else
|
||||||
|
|
||||||
|
/* Linear scan */
|
||||||
|
size_t size = 0;
|
||||||
|
while (data[size++] & 0x80)
|
||||||
|
if (!--left)
|
||||||
|
return 0;
|
||||||
|
return size;
|
||||||
|
|
||||||
|
#endif /* __SSE2__ */
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Inline
|
||||||
|
|
||||||
|
Code can also be written within `fenced inline code blocks`, however syntax
|
||||||
|
highlighting will only work on code listings.
|
||||||
|
|
||||||
|
## Tables
|
||||||
1
material/404.html
Normal file
1
material/404.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
TBD
|
||||||
File diff suppressed because one or more lines are too long
8
material/assets/javascripts/application-a7f7c32389.js
Normal file
8
material/assets/javascripts/application-a7f7c32389.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/modernizr-d1e05123d4.js
Normal file
1
material/assets/javascripts/modernizr-d1e05123d4.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-fe75383308.css
Normal file
1
material/assets/stylesheets/application-fe75383308.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -25,156 +25,71 @@
|
|||||||
<meta name="author" content="{{ site_author }}">
|
<meta name="author" content="{{ site_author }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<meta property="og:url" content="{{ canonical_url }}">
|
|
||||||
<meta property="og:title" content="{{ site_name }}">
|
|
||||||
<meta property="og:image" content="{{ canonical_url }}/{{ base_url }}/{{ config.extra.logo }}">
|
|
||||||
<meta name="apple-mobile-web-app-title" content="{{ site_name }}">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
||||||
{% if config.extra.logo %}
|
|
||||||
<link rel="apple-touch-icon" href="{{ base_url }}/{{ config.extra.logo }}">
|
|
||||||
{% endif %}
|
|
||||||
{% set icon = icon | default("assets/images/favicon-e565ddfa3b.ico") %}
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
|
|
||||||
<link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
|
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Icon';
|
font-family: "Icon";
|
||||||
src: url('{{ base_url }}/assets/fonts/icon.eot?52m981');
|
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
|
||||||
src: url('{{ base_url }}/assets/fonts/icon.eot?#iefix52m981')
|
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
|
||||||
format('embedded-opentype'),
|
format("embedded-opentype"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.woff?52m981')
|
url({{ base_url }}/assets/fonts/icon.woff?52m981)
|
||||||
format('woff'),
|
format("woff"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.ttf?52m981')
|
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
|
||||||
format('truetype'),
|
format("truetype"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.svg?52m981#icon')
|
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
|
||||||
format('svg');
|
format("svg");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-20d5debb47.css">
|
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fe75383308.css">
|
||||||
{% if config.extra.palette %}
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
|
||||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes-05ab2406df.css">
|
|
||||||
{% endif %}
|
|
||||||
{% if config.extra.font != "none" %}
|
|
||||||
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
|
|
||||||
{% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
|
|
||||||
{% set font = text + ':400,700|' + code | replace(' ', '+') %}
|
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}">
|
|
||||||
<style>
|
|
||||||
body, input {
|
|
||||||
font-family: '{{ text }}', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
pre, code {
|
|
||||||
font-family: '{{ code }}', 'Courier New', 'Courier', monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endif %}
|
|
||||||
{% for path in extra_css %}
|
{% for path in extra_css %}
|
||||||
<link rel="stylesheet" href="{{ path }}">
|
<link rel="stylesheet" href="{{ path }}">
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script>
|
||||||
{% block extrahead %}{% endblock %}
|
|
||||||
</head>
|
</head>
|
||||||
{% set palette = config.extra.get("palette", {}) %}
|
<body>
|
||||||
{% set primary = palette.primary | replace(' ', '-') | lower %}
|
<input class="md-toggle" type="checkbox" id="md-toggle-drawer">
|
||||||
{% set accent = palette.accent | replace(' ', '-') | lower %}
|
<input class="md-toggle" type="checkbox" id="md-toggle-search">
|
||||||
<body class="{% if primary %}palette-primary-{{ primary }}{% endif %} {% if accent %}palette-accent-{{ accent }}{% endif %}">
|
<label class="md-overlay" for="md-toggle-drawer"></label>
|
||||||
{% if repo_name == "GitHub" and repo_url %}
|
|
||||||
{% set repo_id = repo_url | replace("https://github.com/", "") %}
|
|
||||||
{% if repo_id[-1:] == "/" %}
|
|
||||||
{% set repo_id = repo_id[:-1] %}
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
<div class="backdrop">
|
|
||||||
<div class="backdrop-paper"></div>
|
|
||||||
</div>
|
|
||||||
<input class="toggle" type="checkbox" id="toggle-drawer">
|
|
||||||
<input class="toggle" type="checkbox" id="toggle-search">
|
|
||||||
<label class="toggle-button overlay" for="toggle-drawer"></label>
|
|
||||||
<header class="header">
|
|
||||||
{% include "header.html" %}
|
{% include "header.html" %}
|
||||||
</header>
|
<div class="md-container">
|
||||||
<main class="main">
|
<main class="md-main">
|
||||||
|
<div class="md-grid md-main__inner">
|
||||||
{% set h1 = "\x3ch1 id=" in content %}
|
{% set h1 = "\x3ch1 id=" in content %}
|
||||||
<div class="drawer">
|
{% if nav %}
|
||||||
{% include "drawer.html" %}
|
{% include "nav.html" %}
|
||||||
</div>
|
|
||||||
<article class="article">
|
|
||||||
<div class="wrapper">
|
|
||||||
{% if not h1 %}
|
|
||||||
<h1>{{ page_title | default(site_name, true)}}</h1>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if toc %}
|
||||||
|
{% include "toc.html" %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="md-content md-content--typeset">
|
||||||
|
<article class="md-content__inner">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
<aside class="copyright" role="note">
|
<hr>
|
||||||
|
<small class="md-content__copyright">
|
||||||
{% if copyright %}
|
{% if copyright %}
|
||||||
{{ copyright }} –
|
{{ copyright }} –
|
||||||
{% endif %}
|
{% endif %}
|
||||||
Documentation built with
|
This document was created with
|
||||||
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
|
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
|
||||||
using the
|
and the
|
||||||
<a href="http://squidfunk.github.io/mkdocs-material/" target="_blank">
|
<a href="http://squidfunk.github.io/mkdocs-material/" target="_blank">Material</a>
|
||||||
Material
|
|
||||||
</a>
|
|
||||||
theme.
|
theme.
|
||||||
</aside>
|
</small>
|
||||||
{% block footer %}
|
|
||||||
<footer class="footer">
|
|
||||||
{% include "footer.html" %}
|
|
||||||
</footer>
|
|
||||||
{% endblock %}
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
<div class="results" role="status" aria-live="polite">
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="meta"></div>
|
|
||||||
<div class="list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
{% include "footer.html" %}
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var base_url = '{{ base_url }}';
|
var base_url = '{{ base_url }}';
|
||||||
var repo_id = '{{ repo_id }}';
|
var repo_url = '{{ repo_url }}';
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ base_url }}/assets/javascripts/application-997097ee0c.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/application-a7f7c32389.js"></script>
|
||||||
{% for path in extra_javascript %}
|
{% for path in extra_javascript %}
|
||||||
<script src="{{ path }}"></script>
|
<script src="{{ path }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if google_analytics %}
|
|
||||||
<script>
|
|
||||||
(function(i,s,o,g,r,a,m){
|
|
||||||
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
|
|
||||||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
|
|
||||||
m.parentNode.insertBefore(a,m)
|
|
||||||
})(window, document,
|
|
||||||
'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
||||||
/* General initialization */
|
|
||||||
ga('create', '{{ google_analytics[0] }}', '{{ google_analytics[1] }}');
|
|
||||||
ga('set', 'anonymizeIp', true);
|
|
||||||
ga('send', 'pageview');
|
|
||||||
/* Track outbound links */
|
|
||||||
var buttons = document.querySelectorAll('a');
|
|
||||||
Array.prototype.map.call(buttons, function(item) {
|
|
||||||
if (item.host != document.location.host) {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
var action = item.getAttribute('data-action') || 'follow';
|
|
||||||
ga('send', 'event', 'outbound', action, item.href);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
/* Register handler to log search on blur */
|
|
||||||
var query = document.querySelector('.query');
|
|
||||||
query.addEventListener('blur', function() {
|
|
||||||
if (this.value) {
|
|
||||||
var path = document.location.pathname;
|
|
||||||
ga('send', 'pageview', path + '?q=' + this.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<nav aria-label="Navigation">
|
|
||||||
{% set home = repo_url | default("/", true) %}
|
|
||||||
<a href="{{ home }}" class="project">
|
|
||||||
<div class="banner">
|
|
||||||
{% if config.extra.logo %}
|
|
||||||
<div class="logo">
|
|
||||||
<img src="{{ base_url }}/{{ config.extra.logo }}">
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="name">
|
|
||||||
<strong>{{ site_name }} {{ config.extra.version }}</strong>
|
|
||||||
{% if repo_id %}
|
|
||||||
<br>
|
|
||||||
{{ repo_id }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="wrapper">
|
|
||||||
{% if repo_name == "GitHub" and repo_url %}
|
|
||||||
<ul class="repo">
|
|
||||||
<li class="repo-download">
|
|
||||||
{% set version = config.extra.version | default("master") %}
|
|
||||||
<a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank" title="Download" data-action="download">
|
|
||||||
<i class="icon icon-download"></i> Download
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="repo-stars">
|
|
||||||
<a href="{{ repo_url }}/stargazers" target="_blank" title="Stargazers" data-action="star">
|
|
||||||
<i class="icon icon-star"></i> Stars
|
|
||||||
<span class="count">–</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr>
|
|
||||||
{% endif %}
|
|
||||||
<div class="toc">
|
|
||||||
<ul>
|
|
||||||
{% for nav_item in nav %}
|
|
||||||
{% include "nav.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% if config.extra.author %}
|
|
||||||
<hr>
|
|
||||||
<span class="section">The author</span>
|
|
||||||
<ul>
|
|
||||||
{% if config.extra.author.twitter %}
|
|
||||||
{% set author = config.extra.author.twitter %}
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/{{ author }}" target="_blank" title="@{{ author }} on Twitter">
|
|
||||||
@{{ author }} on Twitter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% if config.extra.author.github %}
|
|
||||||
{% set author = config.extra.author.github %}
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/{{ author }}" target="_blank" title="@{{ author }} on GitHub">
|
|
||||||
@{{ author }} on GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@ -1,42 +1,38 @@
|
|||||||
{% if include_next_prev %}
|
<footer class="md-footer">
|
||||||
<nav class="pagination" aria-label="Footer">
|
{% if previous_page or next_page %}
|
||||||
<div class="previous">
|
<div class="md-footer-pagination">
|
||||||
|
<nav class="md-grid md-footer-nav">
|
||||||
{% if previous_page %}
|
{% if previous_page %}
|
||||||
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
|
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||||
<span class="direction">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
{{ config.extra.get("i18n", {}).prev | default("Previous") }}
|
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
|
||||||
</span>
|
|
||||||
<div class="page">
|
|
||||||
<div class="button button-previous" role="button" aria-label="Previous">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stretch">
|
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
||||||
<div class="title">
|
<span class="md-flex__ellipsis">
|
||||||
|
<span class="md-footer-nav__direction">
|
||||||
|
Previous
|
||||||
|
</span>
|
||||||
{{ previous_page.title }}
|
{{ previous_page.title }}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="next">
|
|
||||||
{% if next_page %}
|
|
||||||
<a href="{{ next_page.url }}" title="{{ next_page.title }}">
|
|
||||||
<span class="direction">
|
|
||||||
{{ config.extra.get("i18n", {}).next | default("Next") }}
|
|
||||||
</span>
|
</span>
|
||||||
<div class="page">
|
|
||||||
<div class="stretch">
|
|
||||||
<div class="title">
|
|
||||||
{{ next_page.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="button button-next" role="button" aria-label="Next">
|
|
||||||
<i class="icon icon-forward"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if next_page %}
|
||||||
|
<a href="{{ next_page.url }}" title="{{ next_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||||
|
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
||||||
|
<span class="md-flex__ellipsis">
|
||||||
|
<span class="md-footer-nav__direction">
|
||||||
|
Next
|
||||||
|
</span>
|
||||||
|
{{ next_page.title }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<i class="md-icon md-icon--forward md-footer-nav__icon"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</footer>
|
||||||
@ -1,54 +1,17 @@
|
|||||||
<nav aria-label="Header">
|
<header class="md-header">
|
||||||
<div class="bar default">
|
<nav class="md-grid md-header-nav">
|
||||||
<div class="button button-menu" role="button" aria-label="Menu">
|
<div class="md-flex">
|
||||||
<label class="toggle-button icon icon-menu" for="toggle-drawer">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<span></span>
|
<label class="md-icon md-icon--menu md-header-nav__icon" for="md-toggle-drawer"></label>
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stretch">
|
<div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
|
||||||
<div class="title">
|
<span class="md-flex__ellipsis">
|
||||||
{% if current_page %}
|
|
||||||
<span class="path">
|
|
||||||
{% for doc in current_page.ancestors %}
|
|
||||||
{% if doc.link %}
|
|
||||||
<a href="{{ doc.link | e }}">{{ doc.title }}</a>
|
|
||||||
<i class="icon icon-link"></i>
|
|
||||||
{% else %}
|
|
||||||
{{ doc.title }} <i class="icon icon-link"></i>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
{{ page_title | default(site_name, true) }}
|
{{ page_title | default(site_name, true) }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
{% if config.extra.get("author", {}).twitter %}
|
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
|
||||||
{% set author = config.extra.author.twitter %}
|
|
||||||
<div class="button button-twitter" role="button" aria-label="Twitter">
|
|
||||||
<a href="https://twitter.com/{{ author }}" title="@{{ author }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if config.extra.get("author", {}).github %}
|
|
||||||
{% set author = config.extra.author.github %}
|
|
||||||
<div class="button button-github" role="button" aria-label="GitHub">
|
|
||||||
<a href="https://github.com/{{ author }}" title="@{{ author }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="button button-search" role="button" aria-label="Search">
|
|
||||||
<label class="toggle-button icon icon-search" title="Search" for="toggle-search"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bar search">
|
|
||||||
<div class="button button-close" role="button" aria-label="Close">
|
|
||||||
<label class="toggle-button icon icon-back" for="toggle-search"></label>
|
|
||||||
</div>
|
|
||||||
<div class="stretch">
|
|
||||||
<div class="field">
|
|
||||||
<input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="button button-reset" role="button" aria-label="Search">
|
|
||||||
<button class="toggle-button icon icon-close" id="reset-search"></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
@ -1,7 +1,6 @@
|
|||||||
{
|
{
|
||||||
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
|
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
|
||||||
"assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
|
"assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js",
|
||||||
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
|
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d1e05123d4.js",
|
||||||
"assets/stylesheets/application.css": "assets/stylesheets/application-20d5debb47.css",
|
"assets/stylesheets/application.css": "assets/stylesheets/application-fe75383308.css"
|
||||||
"assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
|
|
||||||
}
|
}
|
||||||
32
material/nav-item.html
Normal file
32
material/nav-item.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
{% if nav_item.children %}
|
||||||
|
<li class="md-nav__item">
|
||||||
|
{% if nav_item.active %}
|
||||||
|
<input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}" checked>
|
||||||
|
{% else %}
|
||||||
|
<input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}">
|
||||||
|
{% endif %}
|
||||||
|
<label class="md-nav__link" for="{{ path }}">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
</label>
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
{% for nav_item in nav_item.children %}
|
||||||
|
{% set temp = path %}
|
||||||
|
{% set path = path + "-" + loop.index | string %}
|
||||||
|
{% include "nav-item.html" %}
|
||||||
|
{% set path = temp %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="md-nav__item">
|
||||||
|
{% if nav_item.active %}
|
||||||
|
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
@ -1,32 +1,13 @@
|
|||||||
{% if nav_item.children %}
|
<div class="md-sidebar md-sidebar--primary md-js__sidebar">
|
||||||
<li>
|
<div class="md-sidebar__scrollwrap">
|
||||||
<span class="section">{{ nav_item.title }}</span>
|
<nav class="md-sidebar__inner md-nav">
|
||||||
<ul>
|
<h3>Navigation</h3>
|
||||||
{% for nav_item in nav_item.children %}
|
<ul class="md-nav__list">
|
||||||
{% include "nav.html" %}
|
{% for nav_item in nav %}
|
||||||
|
{% set path = "md-toggle-nav-" + loop.index | string %}
|
||||||
|
{% include "nav-item.html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</nav>
|
||||||
{% else %}
|
</div>
|
||||||
<li>
|
</div>
|
||||||
<a class="{% if nav_item.active %}current{% endif %}" title="{{ nav_item.title }}" href="{{ nav_item.url }}">
|
|
||||||
{{ nav_item.title }}
|
|
||||||
</a>
|
|
||||||
{% if nav_item == current_page %}
|
|
||||||
{% if h1 %}
|
|
||||||
{% set toc = (toc | first).children %}
|
|
||||||
{% endif %}
|
|
||||||
{% if toc and (toc | first) %}
|
|
||||||
<ul>
|
|
||||||
{% for toc_item in toc %}
|
|
||||||
<li class="anchor">
|
|
||||||
<a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
|
|
||||||
{{ toc_item.title }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
12
material/toc-item.html
Normal file
12
material/toc-item.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<li class="md-nav__item">
|
||||||
|
<a href="{{ toc_item.url }}" title="{{ toc_item.title }}" class="md-nav__link">
|
||||||
|
{{ toc_item.title }}
|
||||||
|
</a>
|
||||||
|
{% if toc_item.children %}
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
{% for toc_item in toc_item.children %}
|
||||||
|
{% include "toc-item.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
17
material/toc.html
Normal file
17
material/toc.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<div class="md-sidebar md-sidebar--secondary md-js__sidebar">
|
||||||
|
<div class="md-sidebar__scrollwrap">
|
||||||
|
<nav class="md-sidebar__inner md-nav md-nav--toc">
|
||||||
|
{% if h1 %}
|
||||||
|
{% set toc = (toc | first).children %}
|
||||||
|
{% endif %}
|
||||||
|
{% if toc and (toc | first) %}
|
||||||
|
<h3>Table of contents</h3>
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
{% for toc_item in toc %}
|
||||||
|
{% include "toc-item.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
13
mkdocs.yml
13
mkdocs.yml
@ -29,29 +29,34 @@ repo_name: GitHub
|
|||||||
repo_url: https://github.com/squidfunk/mkdocs-material
|
repo_url: https://github.com/squidfunk/mkdocs-material
|
||||||
|
|
||||||
# Copyright
|
# Copyright
|
||||||
copyright: Copyright (c) 2016 Martin Donath
|
copyright: 'Copyright © 2016 Martin Donath'
|
||||||
|
|
||||||
# Documentation and theme
|
# Documentation and theme
|
||||||
theme_dir: material
|
theme_dir: material
|
||||||
|
theme: amelia
|
||||||
|
|
||||||
# Options
|
# Options
|
||||||
extra:
|
extra:
|
||||||
version: 0.2.1
|
version: 0.2.4
|
||||||
logo: images/logo.png
|
logo: images/logo.png
|
||||||
|
font:
|
||||||
|
text: Ubuntu
|
||||||
|
mono: Ubuntu Mono
|
||||||
author:
|
author:
|
||||||
github: squidfunk
|
github: squidfunk
|
||||||
twitter: squidfunk
|
twitter: squidfunk
|
||||||
|
|
||||||
# Extensions
|
# Extensions
|
||||||
markdown_extensions:
|
markdown_extensions:
|
||||||
- codehilite(css_class=code)
|
- codehilite
|
||||||
- admonition
|
- admonition
|
||||||
- toc:
|
- toc:
|
||||||
permalink: '#'
|
permalink: '¶'
|
||||||
|
|
||||||
# Page tree
|
# Page tree
|
||||||
pages:
|
pages:
|
||||||
- Material: index.md
|
- Material: index.md
|
||||||
- Getting started: getting-started.md
|
- Getting started: getting-started.md
|
||||||
|
- Specimen: specimen.md
|
||||||
- Customization: customization.md
|
- Customization: customization.md
|
||||||
- License: license.md
|
- License: license.md
|
||||||
@ -16,8 +16,14 @@
|
|||||||
"url": "https://github.com/squidfunk/mkdocs-material.git"
|
"url": "https://github.com/squidfunk/mkdocs-material.git"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"fastclick": "^1.0.6",
|
||||||
|
"whatwg-fetch": "^1.0.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.3.2",
|
"autoprefixer": "^6.3.2",
|
||||||
|
"babel-loader": "^6.2.4",
|
||||||
|
"babel-preset-es2015": "^6.13.2",
|
||||||
"css-mqpacker": "^4.0.0",
|
"css-mqpacker": "^4.0.0",
|
||||||
"del": "^2.2.0",
|
"del": "^2.2.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
@ -40,6 +46,8 @@
|
|||||||
"gulp-util": "^3.0.7",
|
"gulp-util": "^3.0.7",
|
||||||
"node-notifier": "^4.5.0",
|
"node-notifier": "^4.5.0",
|
||||||
"vinyl-paths": "^2.1.0",
|
"vinyl-paths": "^2.1.0",
|
||||||
|
"webpack": "^1.13.1",
|
||||||
|
"webpack-stream": "^3.2.0",
|
||||||
"yargs": "^3.32.0"
|
"yargs": "^3.32.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/404.html
Normal file
1
src/404.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
TBD
|
||||||
@ -20,41 +20,18 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Hey, there's your missing semicolon, lunr.js! */
|
'use strict';
|
||||||
;
|
|
||||||
|
|
||||||
/* Truncate a string after the given number of characters */
|
|
||||||
String.prototype.truncate = function(n) {
|
|
||||||
if (this.length > n) {
|
|
||||||
while (this[n] != ' ' && --n > 0);
|
|
||||||
return this.substring(0, n) + '…';
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wrap an HTMLElement around each element in an HTMLElement array */
|
|
||||||
HTMLElement.prototype.wrap = function (elms) {
|
|
||||||
if (!elms.length) elms = [elms];
|
|
||||||
for (var i = elms.length - 1; i >= 0; i--) {
|
|
||||||
var child = (i > 0) ? this.cloneNode(true) : this;
|
|
||||||
var el = elms[i];
|
|
||||||
|
|
||||||
/* Cache current parent and sibling */
|
|
||||||
var parent = el.parentNode,
|
|
||||||
sibling = el.nextSibling;
|
|
||||||
|
|
||||||
/* Wrap the element and remove it from its current parent */
|
|
||||||
child.appendChild(el);
|
|
||||||
if (sibling) {
|
|
||||||
parent.insertBefore(child, sibling);
|
|
||||||
} else {
|
|
||||||
parent.appendChild(child);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Application logic
|
* Imports
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
import FastClick from 'fastclick';
|
||||||
|
import Sidebar from './components/sidebar';
|
||||||
|
import ScrollSpy from './components/scrollspy';
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Application
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* Initialize application upon DOM ready */
|
/* Initialize application upon DOM ready */
|
||||||
@ -74,457 +51,24 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
/* Attack FastClick to mitigate 300ms delay on touch devices */
|
/* Attack FastClick to mitigate 300ms delay on touch devices */
|
||||||
FastClick.attach(document.body);
|
FastClick.attach(document.body);
|
||||||
|
|
||||||
/* Grab relevant elements from the DOM */
|
|
||||||
var toggle = document.getElementById('toggle-search'),
|
|
||||||
reset = document.getElementById('reset-search'),
|
|
||||||
drawer = document.querySelector('.drawer'),
|
|
||||||
anchors = document.querySelectorAll('.anchor'),
|
|
||||||
search = document.querySelector('.search .field'),
|
|
||||||
query = document.querySelector('.query'),
|
|
||||||
meta = document.querySelector('.results .meta');
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
var width = window.matchMedia("(min-width: 1200px)");
|
||||||
* Initialize drawer
|
var handler = function() {
|
||||||
* ------------------------------------------------------------------------- */
|
if (width.matches) {
|
||||||
|
sidebar.listen();
|
||||||
/* Automatically close drawer when anchors are clicked */
|
|
||||||
Array.prototype.forEach.call(anchors, function(item) {
|
|
||||||
item.querySelector('a').addEventListener('click', function() {
|
|
||||||
document.getElementById('toggle-drawer').checked = false;
|
|
||||||
document.body.classList.remove('toggle-drawer');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Align drawer to window offset */
|
|
||||||
var pageYOffsetLast = window.pageYOffset;
|
|
||||||
var align = function() {
|
|
||||||
var boundary = window.pageYOffset + window.innerHeight;
|
|
||||||
var clipping = Math.max(0, window.innerHeight - drawer.offsetHeight);
|
|
||||||
|
|
||||||
/* Ensure alignment with footer if at end of document */
|
|
||||||
if (boundary > document.body.clientHeight - (96 - clipping)) {
|
|
||||||
if (drawer.style.position != 'absolute') {
|
|
||||||
drawer.style.position = 'absolute';
|
|
||||||
drawer.style.top = null;
|
|
||||||
drawer.style.bottom = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pin drawer to top, if window is higher than drawer */
|
|
||||||
} else if (drawer.offsetHeight < window.innerHeight) {
|
|
||||||
if (drawer.style.position != 'fixed') {
|
|
||||||
drawer.style.position = 'fixed';
|
|
||||||
drawer.style.top = 0;
|
|
||||||
drawer.style.bottom = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If the drawer is not pinned, check if we need to pin it */
|
|
||||||
} else if (drawer.style.position != 'fixed') {
|
|
||||||
|
|
||||||
/* Pin drawer to bottom of window */
|
|
||||||
if (boundary > drawer.offsetTop + drawer.offsetHeight) {
|
|
||||||
drawer.style.position = 'fixed';
|
|
||||||
drawer.style.top = null;
|
|
||||||
drawer.style.bottom = -96 + 'px';
|
|
||||||
|
|
||||||
/* Pin drawer to top of window */
|
|
||||||
} else if (window.pageYOffset < drawer.offsetTop) {
|
|
||||||
drawer.style.position = 'fixed';
|
|
||||||
drawer.style.top = 0;
|
|
||||||
drawer.style.bottom = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If the drawer is pinned, check if we have to unpin it */
|
|
||||||
} else {
|
} else {
|
||||||
if (window.pageYOffset > pageYOffsetLast) {
|
sidebar.unlisten();
|
||||||
if (drawer.style.top) {
|
|
||||||
drawer.style.position = 'absolute';
|
|
||||||
drawer.style.top = Math.max(0, pageYOffsetLast) + 'px';
|
|
||||||
drawer.style.bottom = null;
|
|
||||||
}
|
|
||||||
} else if (drawer.style.bottom) {
|
|
||||||
drawer.style.position = 'absolute';
|
|
||||||
drawer.style.top = (boundary - drawer.offsetHeight) + 'px';
|
|
||||||
drawer.style.bottom = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Update last offset (mitigiate negative offsets in Safari) */
|
var sidebar = new Sidebar('.md-sidebar--primary');
|
||||||
pageYOffsetLast = Math.max(0, window.pageYOffset);
|
handler(); // check listen!
|
||||||
}
|
|
||||||
|
|
||||||
/* Check for media query events */
|
var toc = new Sidebar('.md-sidebar--secondary');
|
||||||
var check = function() {
|
toc.listen();
|
||||||
var main = document.querySelector('.main');
|
|
||||||
window.removeEventListener('scroll', align);
|
|
||||||
|
|
||||||
/* Reset drawer position when entering collapsed mode */
|
var spy = new ScrollSpy('.md-nav--toc .md-nav__item a');
|
||||||
if (matchMedia("only screen and (max-width: 959px)").matches) {
|
spy.listen();
|
||||||
drawer.style.position = null;
|
|
||||||
drawer.style.top = null;
|
|
||||||
drawer.style.bottom = null;
|
|
||||||
|
|
||||||
/* Check if the scroll handler needs to be registered */
|
window.addEventListener('resize', handler);
|
||||||
} else if (drawer.offsetHeight + 96 < main.offsetHeight) {
|
|
||||||
window.addEventListener('scroll', align);
|
|
||||||
align();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Register resize handler and fire once */
|
|
||||||
if (!Modernizr.ios) {
|
|
||||||
window.addEventListener('resize', check);
|
|
||||||
check();
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Initialize search index
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Initialize index */
|
|
||||||
var initialize = function() {
|
|
||||||
pegasus(base_url + '/mkdocs/search_index.json').then(
|
|
||||||
|
|
||||||
/* Request successful, we got the index */
|
|
||||||
function(data, xhr) {
|
|
||||||
|
|
||||||
/* Create index */
|
|
||||||
var index = lunr(function() {
|
|
||||||
this.field('title', { boost: 10 });
|
|
||||||
this.field('text');
|
|
||||||
this.ref('location');
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Index articles */
|
|
||||||
var articles = {};
|
|
||||||
data.docs.map(function(article) {
|
|
||||||
article.location = base_url + article.location;
|
|
||||||
articles[article.location] = article;
|
|
||||||
index.add(article);
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Register keyhandler to execute search on key up */
|
|
||||||
query.addEventListener('keyup', function() {
|
|
||||||
var container = document.querySelector('.results .list');
|
|
||||||
while (container.firstChild)
|
|
||||||
container.removeChild(container.firstChild);
|
|
||||||
|
|
||||||
/* Abort, if the query is empty */
|
|
||||||
var bar = document.querySelector('.bar.search');
|
|
||||||
if (!query.value.length) {
|
|
||||||
while (meta.firstChild)
|
|
||||||
meta.removeChild(meta.firstChild);
|
|
||||||
|
|
||||||
/* Restore state */
|
|
||||||
bar.classList.remove('non-empty');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show reset button */
|
|
||||||
bar.classList.add('non-empty');
|
|
||||||
|
|
||||||
/* Execute search */
|
|
||||||
var results = index.search(query.value);
|
|
||||||
results.map(function(result) {
|
|
||||||
var article = articles[result.ref];
|
|
||||||
|
|
||||||
/* Create article container */
|
|
||||||
var teaser = document.createElement('article');
|
|
||||||
teaser.classList.add('result');
|
|
||||||
|
|
||||||
/* Create title element */
|
|
||||||
var title = document.createElement('h1');
|
|
||||||
title.innerHTML = article.title;
|
|
||||||
teaser.appendChild(title);
|
|
||||||
|
|
||||||
// /* Create text element */
|
|
||||||
// var text = document.createElement('p');
|
|
||||||
// text.innerHTML = article.text.truncate(140);
|
|
||||||
// teaser.appendChild(text);
|
|
||||||
|
|
||||||
/* Create a link referring to the article */
|
|
||||||
var link = document.createElement('a');
|
|
||||||
link.href = article.location;
|
|
||||||
link.appendChild(teaser);
|
|
||||||
|
|
||||||
/* Create url element */
|
|
||||||
var url = document.createElement('span');
|
|
||||||
url.innerHTML = link.href.split('#')[0];
|
|
||||||
teaser.appendChild(url);
|
|
||||||
|
|
||||||
/* Close search and jump to anchor when on same page */
|
|
||||||
var parts = link.href.split('#');
|
|
||||||
if (parts[0] == document.location.href.split('#')[0]) {
|
|
||||||
link.addEventListener('click', function(e) {
|
|
||||||
document.body.classList.remove('toggle-search');
|
|
||||||
document.body.classList.remove('locked');
|
|
||||||
toggle.checked = false;
|
|
||||||
|
|
||||||
/* Don't catch anchors if the search doesn't cover the page */
|
|
||||||
if (matchMedia('only screen and (min-width: 960px)').matches)
|
|
||||||
return;
|
|
||||||
|
|
||||||
/* Prevent default to intercept scroll-to behaviour and
|
|
||||||
stop propagation, as this interferes with the link-lock in
|
|
||||||
the web application context, which opens all internal links
|
|
||||||
inside the same context */
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
/* Scroll to chapter, if given */
|
|
||||||
if (parts.length != 1) {
|
|
||||||
var chapter = document.getElementById(parts[1]);
|
|
||||||
if (chapter) {
|
|
||||||
|
|
||||||
/* Scroll to chapter, but wait for 100ms to prevent flashes
|
|
||||||
on iOS. A short timeout seems to do the trick */
|
|
||||||
setTimeout(function() {
|
|
||||||
chapter.scrollIntoView && chapter.scrollIntoView() ||
|
|
||||||
window.scrollTo(0, chapter.offsetTop);
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add article to search results */
|
|
||||||
container.appendChild(link);
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Show number of search results */
|
|
||||||
var number = document.createElement('strong');
|
|
||||||
number.innerHTML = results.length + ' search result'
|
|
||||||
+ (results.length != 1 ? 's' : '');
|
|
||||||
|
|
||||||
/* Update number */
|
|
||||||
while (meta.firstChild)
|
|
||||||
meta.removeChild(meta.firstChild);
|
|
||||||
meta.appendChild(number);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Handle error */
|
|
||||||
function(data, xhr) {
|
|
||||||
console.error(data, xhr.status);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/* Remove listener, as we only have to initialize once */
|
|
||||||
toggle.removeEventListener('click', initialize);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* Initialize on first click */
|
|
||||||
toggle.addEventListener('click', initialize);
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Initialize search modal
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Intercept click on search mode toggle */
|
|
||||||
var offset = 0;
|
|
||||||
toggle.addEventListener('click', function(e) {
|
|
||||||
var list = document.body.classList;
|
|
||||||
var lock = !matchMedia('only screen and (min-width: 960px)').matches;
|
|
||||||
|
|
||||||
/* Exiting search mode */
|
|
||||||
if (list.contains('locked')) {
|
|
||||||
list.remove('locked');
|
|
||||||
|
|
||||||
/* Scroll to former position, but wait for 100ms to prevent flashes
|
|
||||||
on iOS. A short timeout seems to do the trick */
|
|
||||||
if (lock)
|
|
||||||
setTimeout(function() {
|
|
||||||
window.scrollTo(0, offset);
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
/* Entering search mode */
|
|
||||||
} else {
|
|
||||||
offset = window.scrollY;
|
|
||||||
|
|
||||||
/* First timeout: scroll to top after transition, to omit flickering */
|
|
||||||
if (lock)
|
|
||||||
setTimeout(function(){
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
}, 400);
|
|
||||||
|
|
||||||
/* Second timeout: Lock body after finishing transition and scrolling to
|
|
||||||
top and focus input field. Sadly, the focus event is not dispatched
|
|
||||||
on iOS Safari and there's nothing we can do about it. */
|
|
||||||
setTimeout(function() {
|
|
||||||
|
|
||||||
/* This additional check is necessary to handle fast subsequent clicks
|
|
||||||
on the toggle and the timeout to lock the body must be cancelled */
|
|
||||||
if (this.checked) {
|
|
||||||
if (lock)
|
|
||||||
list.add('locked');
|
|
||||||
setTimeout(function() {
|
|
||||||
query.focus();
|
|
||||||
}, 200);
|
|
||||||
}
|
|
||||||
}.bind(this), 450);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Dispatch input focus on touch of search section */
|
|
||||||
search.addEventListener('touchstart', function() {
|
|
||||||
query.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Exit search mode when pressing ESC */
|
|
||||||
window.addEventListener('keyup', function(e) {
|
|
||||||
var code = e.keyCode || e.which;
|
|
||||||
if (code == 27) {
|
|
||||||
query.blur();
|
|
||||||
|
|
||||||
/* Exit locked state */
|
|
||||||
document.body.classList.remove('toggle-search');
|
|
||||||
document.body.classList.remove('locked');
|
|
||||||
toggle.checked = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Delete search results upon click on "x" */
|
|
||||||
var empty = document.getElementById('reset-search');
|
|
||||||
empty.addEventListener('click', function() {
|
|
||||||
var container = document.querySelector('.results .list');
|
|
||||||
while (container.firstChild)
|
|
||||||
container.removeChild(container.firstChild);
|
|
||||||
|
|
||||||
/* Hide search button */
|
|
||||||
var bar = document.querySelector('.bar.search');
|
|
||||||
bar.classList.remove('non-empty');
|
|
||||||
|
|
||||||
/* Reset number of search results */
|
|
||||||
meta.innerHTML = '';
|
|
||||||
|
|
||||||
/* Empty search input */
|
|
||||||
query.value = '';
|
|
||||||
query.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Initialize scroll spy
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Retrieve vertical offset of article chapters */
|
|
||||||
var chapters = document.querySelectorAll('h2');
|
|
||||||
chapters = Array.prototype.map.call(chapters, function(item) {
|
|
||||||
return item.offsetTop;
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Update currently active chapter, if the new chapter is two thirds
|
|
||||||
into the viewport - account for iOS web application context */
|
|
||||||
var visible = null;
|
|
||||||
document.addEventListener('scroll', function() {
|
|
||||||
var offset = window.scrollY + (window.innerHeight / 3),
|
|
||||||
active = chapters.length - 1;
|
|
||||||
for (var c = 0; c < active; c++)
|
|
||||||
if (offset < chapters[c + 1])
|
|
||||||
active = c;
|
|
||||||
|
|
||||||
/* Update anchors, if a new chapter became visible */
|
|
||||||
if (active != visible) {
|
|
||||||
visible = active;
|
|
||||||
Array.prototype.forEach.call(anchors, function(item, index) {
|
|
||||||
var link = item.querySelector('a');
|
|
||||||
if (index != visible || link.classList.add('current'))
|
|
||||||
link.classList.remove('current');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Fix syntax highlighting
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Fix highlighting for function calls */
|
|
||||||
var functions = document.querySelectorAll('.n + .p');
|
|
||||||
Array.prototype.forEach.call(functions, function(item) {
|
|
||||||
var text = item.innerText || item.textContent;
|
|
||||||
if (text && text[0] == '(')
|
|
||||||
item.previousSibling.classList.add('f');
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Progressive structure enhancement
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Wrap all data tables */
|
|
||||||
var tables = document.querySelectorAll('table');
|
|
||||||
Array.prototype.forEach.call(tables, function(item) {
|
|
||||||
var wrapper = document.createElement('div');
|
|
||||||
wrapper.classList.add('data');
|
|
||||||
wrapper.wrap(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Fix overflow scrolling on iOS
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Force 1px scroll offset to trigger overflow scrolling */
|
|
||||||
if (Modernizr.ios) {
|
|
||||||
var scrollable = document.querySelectorAll(
|
|
||||||
'.scrollable, .standalone .article');
|
|
||||||
Array.prototype.forEach.call(scrollable, function(item) {
|
|
||||||
item.addEventListener('touchstart', function() {
|
|
||||||
var top = this.scrollTop;
|
|
||||||
|
|
||||||
/* We're at the top of the container */
|
|
||||||
if (top == 0) {
|
|
||||||
this.scrollTop = 1;
|
|
||||||
|
|
||||||
/* We're at the bottom of the container */
|
|
||||||
} else if (top + this.offsetHeight == this.scrollHeight) {
|
|
||||||
this.scrollTop = top - 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent scrolling on project, overlay and header */
|
|
||||||
var prevented = document.querySelectorAll('.project, .overlay, .header');
|
|
||||||
Array.prototype.forEach.call(prevented, function(item) {
|
|
||||||
item.addEventListener('touchmove', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Fallback for browsers that don't support :checked
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Set representative class on body for active toggle */
|
|
||||||
var toggles = document.querySelectorAll('.toggle');
|
|
||||||
Array.prototype.forEach.call(toggles, function(item) {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
document.body.classList.toggle(this.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Initialize GitHub star button
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Get Stars for current repository */
|
|
||||||
if (repo_id) {
|
|
||||||
pegasus('https://api.github.com/repos/' + repo_id).then(
|
|
||||||
|
|
||||||
/* Request successful, we got the stars */
|
|
||||||
function(data, xhr) {
|
|
||||||
var count = data.stargazers_count;
|
|
||||||
if (count > 10000)
|
|
||||||
count = (count / 1000).toFixed(0) + 'k';
|
|
||||||
else if (count > 1000)
|
|
||||||
count = (count / 1000).toFixed(1) + 'k';
|
|
||||||
|
|
||||||
/* Set number of stars */
|
|
||||||
var stars = document.querySelector('.repo-stars .count');
|
|
||||||
stars.innerHTML = count;
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Handle error */
|
|
||||||
function(data, xhr) {
|
|
||||||
console.error(data, xhr.status);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
127
src/assets/javascripts/components/scrollspy.js
Normal file
127
src/assets/javascripts/components/scrollspy.js
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Sidebar scroll-spy
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
class ScrollSpy {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {(string|HTMLCollection)} el - Selector or HTML elements
|
||||||
|
*/
|
||||||
|
constructor(el) {
|
||||||
|
this.el_ = (typeof el === 'string') ? document.querySelectorAll(el) : el;
|
||||||
|
|
||||||
|
/* Initialize index for currently active element */
|
||||||
|
this.index_ = 0;
|
||||||
|
this.offset_ = window.pageYOffset;
|
||||||
|
|
||||||
|
/* Event listener */
|
||||||
|
this.handler_ = (ev) => {
|
||||||
|
this.update(ev);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update state of sidebar and hash
|
||||||
|
*
|
||||||
|
* @param {Event} ev - Event
|
||||||
|
*/
|
||||||
|
update(ev) {
|
||||||
|
let index = this.index_;
|
||||||
|
|
||||||
|
/* Scroll direction is down */
|
||||||
|
if (this.offset_ <= window.pageYOffset) {
|
||||||
|
for (let i = this.index_; i < this.el_.length; i++) {
|
||||||
|
let anchor = document.querySelector(this.el_[i].hash);
|
||||||
|
if (anchor.offsetTop <= window.pageYOffset) {
|
||||||
|
if (i > 0)
|
||||||
|
this.el_[i - 1].classList.add('md-nav__link--marked');
|
||||||
|
this.index_ = i;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll direction is up */
|
||||||
|
} else {
|
||||||
|
for (let i = this.index_; i >= 0; i--) {
|
||||||
|
let anchor = document.querySelector(this.el_[i].hash);
|
||||||
|
if (anchor.offsetTop > window.pageYOffset) {
|
||||||
|
if (i > 0)
|
||||||
|
this.el_[i - 1].classList.remove('md-nav__link--marked');
|
||||||
|
} else {
|
||||||
|
this.index_ = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remember current offset for next cycle */
|
||||||
|
this.offset_ = window.pageYOffset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset state of sidebar
|
||||||
|
*/
|
||||||
|
reset() {
|
||||||
|
[].forEach.call(this.el_, (el) => {
|
||||||
|
el.classList.remove('md-nav__link--marked');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register listener for all relevant events
|
||||||
|
*/
|
||||||
|
listen() {
|
||||||
|
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||||
|
window.addEventListener(name, this.handler_, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Initial update */
|
||||||
|
this.update();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unregister listener for all relevant events
|
||||||
|
*/
|
||||||
|
unlisten() {
|
||||||
|
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||||
|
window.removeEventListener(name, this.handler_, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Perform reset */
|
||||||
|
this.reset();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Exports
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export default ScrollSpy;
|
||||||
131
src/assets/javascripts/components/sidebar.js
Normal file
131
src/assets/javascripts/components/sidebar.js
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Sidebar sticky-scroll handler
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
class Sidebar {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||||
|
*/
|
||||||
|
constructor(el) {
|
||||||
|
this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
|
||||||
|
|
||||||
|
/* Initialize parameters */
|
||||||
|
this.height_ = 0;
|
||||||
|
this.locked_ = false;
|
||||||
|
|
||||||
|
/* Event listener */
|
||||||
|
this.handler_ = (ev) => {
|
||||||
|
this.update(ev);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update state and height of sidebar
|
||||||
|
*
|
||||||
|
* @param {Event} ev - Event
|
||||||
|
*/
|
||||||
|
update(ev) {
|
||||||
|
let container = this.el_.parentNode;
|
||||||
|
let bounds = container.getBoundingClientRect();
|
||||||
|
|
||||||
|
/* Determine top and bottom offsets */
|
||||||
|
let top = bounds.top + window.pageYOffset,
|
||||||
|
bottom = bounds.bottom + window.pageYOffset;
|
||||||
|
|
||||||
|
/* Determine current y-offset at top and bottom of window */
|
||||||
|
let upper = window.pageYOffset,
|
||||||
|
lower = window.pageYOffset + window.innerHeight;
|
||||||
|
|
||||||
|
/* Calculate new bounds */
|
||||||
|
let offset = top - upper;
|
||||||
|
let height = window.innerHeight - Math.max(lower - bottom, 0)
|
||||||
|
- Math.max(offset, container.parentNode.offsetTop);
|
||||||
|
|
||||||
|
/* If height changed, update element */
|
||||||
|
if (height != this.height_)
|
||||||
|
this.el_.style.height = (this.height_ = height) + 'px';
|
||||||
|
|
||||||
|
/* Sidebar should be locked, as we're below parent offset */
|
||||||
|
if (offset < container.parentNode.offsetTop) {
|
||||||
|
if (!this.locked_) {
|
||||||
|
this.el_.classList.add('md-js__sidebar--locked');
|
||||||
|
this.locked_ = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar should be unlocked, if locked */
|
||||||
|
} else if (this.locked_) {
|
||||||
|
this.el_.classList.remove('md-js__sidebar--locked');
|
||||||
|
this.locked_ = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset state and height of sidebar
|
||||||
|
*/
|
||||||
|
reset() {
|
||||||
|
this.el_.classList.remove('md-js__sidebar--locked');
|
||||||
|
this.el_.style.height_ = '';
|
||||||
|
|
||||||
|
/* Reset parameters */
|
||||||
|
this.height_ = 0;
|
||||||
|
this.locked_ = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register listener for all relevant events
|
||||||
|
*/
|
||||||
|
listen() {
|
||||||
|
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||||
|
window.addEventListener(name, this.handler_, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Initial update */
|
||||||
|
this.update();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unregister listener for all relevant events
|
||||||
|
*/
|
||||||
|
unlisten() {
|
||||||
|
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||||
|
window.removeEventListener(name, this.handler_, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Perform reset */
|
||||||
|
this.reset();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Exports
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
@ -1,49 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Taken and adapted from https://gist.github.com/kylebarrow/1042026
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* Detect standalone mode */
|
|
||||||
if (('standalone' in window.navigator) && window.navigator.standalone) {
|
|
||||||
|
|
||||||
/* If you want to prevent remote links in standalone web apps opening
|
|
||||||
Mobile Safari, change 'remotes' to true */
|
|
||||||
var node, remotes = false;
|
|
||||||
|
|
||||||
/* Bind to document */
|
|
||||||
document.addEventListener('click', function(event) {
|
|
||||||
node = event.target;
|
|
||||||
|
|
||||||
/* Bubble up until we hit link or top HTML element. Warning: BODY element
|
|
||||||
is not compulsory so better to stop on HTML */
|
|
||||||
while (node.nodeName !== 'A' && node.nodeName !== 'HTML') {
|
|
||||||
node = node.parentNode;
|
|
||||||
}
|
|
||||||
if ('href' in node && node.href.indexOf('http') !== -1 && (
|
|
||||||
node.href.indexOf(document.location.host) !== -1 || remotes)) {
|
|
||||||
event.preventDefault();
|
|
||||||
document.location.href = node.href;
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
}
|
|
||||||
82
src/assets/stylesheets/_config.scss
Normal file
82
src/assets/stylesheets/_config.scss
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Typography
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Modular typographic scale
|
||||||
|
*/
|
||||||
|
$ms-base: 1.6rem;
|
||||||
|
$ms-ratio: $major-third;
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Breakpoints
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Device-specific breakpoints
|
||||||
|
*/
|
||||||
|
$break-devices: (
|
||||||
|
mobile: (
|
||||||
|
portrait: px2em(220px) px2em(479px),
|
||||||
|
landscape: px2em(480px) px2em(719px)
|
||||||
|
),
|
||||||
|
tablet: (
|
||||||
|
portrait: px2em(720px) px2em(959px),
|
||||||
|
landscape: px2em(960px) px2em(1199px)
|
||||||
|
),
|
||||||
|
screen: (
|
||||||
|
small: px2em(1200px) px2em(1599px),
|
||||||
|
medium: px2em(1600px) px2em(1999px),
|
||||||
|
large: px2em(2000px)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Colors
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Primary and accent colors
|
||||||
|
*/
|
||||||
|
$md-color-primary: $indigo-500;
|
||||||
|
$md-color-primary--light: $indigo-100;
|
||||||
|
$md-color-primary--dark: $indigo-700;
|
||||||
|
$md-color-accent: $indigo-a200;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Shades of black
|
||||||
|
*/
|
||||||
|
$md-color-black: rgba(black, 0.87);
|
||||||
|
$md-color-black--light: rgba(black, 0.54);
|
||||||
|
$md-color-black--lighter: rgba(black, 0.26);
|
||||||
|
$md-color-black--lightest: rgba(black, 0.07);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Shades of white
|
||||||
|
*/
|
||||||
|
$md-color-white: rgba(white, 1.00);
|
||||||
|
$md-color-white--light: rgba(white, 0.70);
|
||||||
|
$md-color-white--lighter: rgba(white, 0.30);
|
||||||
|
$md-color-white--lightest: rgba(white, 0.12);
|
||||||
@ -1,74 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Code highlighter
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Code block
|
|
||||||
*/
|
|
||||||
pre {
|
|
||||||
background: rgba($black, 0.05);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Ensure correct color
|
|
||||||
*/
|
|
||||||
&, code {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Operators and comments
|
|
||||||
*/
|
|
||||||
.o, .c, .c1, .cm {
|
|
||||||
color: $black-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Keywords
|
|
||||||
*/
|
|
||||||
.k, .kn {
|
|
||||||
color: #A71D5D;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Types and functions
|
|
||||||
*/
|
|
||||||
.kt, .kd, .n.f {
|
|
||||||
color: #0086B3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Strings
|
|
||||||
*/
|
|
||||||
.s, .s1 {
|
|
||||||
color: #183691;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Constants and numbers
|
|
||||||
*/
|
|
||||||
.mi, .bp {
|
|
||||||
color: #9575CD;
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Palette
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Primary and accent color
|
|
||||||
*/
|
|
||||||
$primary: $red-400 !default;
|
|
||||||
$accent: $teal-a700 !default;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Black opacities
|
|
||||||
*/
|
|
||||||
$black: rgba(black, 0.87);
|
|
||||||
$black-light: rgba(black, 0.54);
|
|
||||||
$black-lighter: rgba(black, 0.26);
|
|
||||||
$black-lightest: rgba(black, 0.12);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* White opacities
|
|
||||||
*/
|
|
||||||
$white: rgba(white, 1.00);
|
|
||||||
$white-light: rgba(white, 0.70);
|
|
||||||
$white-lighter: rgba(white, 0.30);
|
|
||||||
$white-lightest: rgba(white, 0.12);
|
|
||||||
@ -24,7 +24,7 @@
|
|||||||
* Dependencies
|
* Dependencies
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
@import "bourbon";
|
@import "modular-scale";
|
||||||
@import "quantum-colors";
|
@import "quantum-colors";
|
||||||
@import "quantum-shadows";
|
@import "quantum-shadows";
|
||||||
|
|
||||||
@ -32,18 +32,24 @@
|
|||||||
* Application
|
* Application
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
@import "reset";
|
@import "helpers/break";
|
||||||
@import "palette";
|
@import "helpers/px2em";
|
||||||
@import "highlight";
|
|
||||||
|
|
||||||
@import "fonts/icon";
|
@import "config";
|
||||||
|
|
||||||
@import "mixins/break";
|
@import "base/icons";
|
||||||
|
@import "base/reset";
|
||||||
|
@import "base/typeset";
|
||||||
|
|
||||||
@import "modules/base";
|
@import "layout/base";
|
||||||
@import "modules/drawer";
|
@import "layout/content";
|
||||||
@import "modules/article";
|
@import "layout/header";
|
||||||
@import "modules/search";
|
@import "layout/footer";
|
||||||
|
@import "layout/nav";
|
||||||
|
@import "layout/sidebar";
|
||||||
|
|
||||||
|
@import "extensions/admonition";
|
||||||
|
@import "extensions/codehilite";
|
||||||
|
@import "extensions/permalinks";
|
||||||
|
|
||||||
@import "print";
|
|
||||||
@import "shame";
|
@import "shame";
|
||||||
@ -21,25 +21,44 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Article animation
|
* Icon set
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Fade color after highlighting
|
* Base icon class
|
||||||
*/
|
*/
|
||||||
pre span {
|
.md-icon {
|
||||||
transition: color .25s;
|
font-family: "Icon";
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Copyright and theme information
|
* Build icon set
|
||||||
*/
|
*/
|
||||||
.copyright {
|
@each $name, $code in (
|
||||||
|
"search": "e600",
|
||||||
/*
|
"back": "e601",
|
||||||
* Animate color on hover
|
"link": "e602",
|
||||||
*/
|
"close": "e603",
|
||||||
a {
|
"menu": "e604",
|
||||||
transition: color .25s;
|
"forward": "e605",
|
||||||
|
"twitter": "e606",
|
||||||
|
"github": "e607",
|
||||||
|
"download": "e608",
|
||||||
|
"star": "e609",
|
||||||
|
"warning": "e610",
|
||||||
|
"note": "e611"
|
||||||
|
) {
|
||||||
|
.md-icon--#{$name}:before {
|
||||||
|
content: unquote("\"\\#{$code}\"");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -44,7 +44,8 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* 16px --> 10px, browser default
|
* Prevent adjustments of font size after orientation changes in IE and iOS
|
||||||
|
* and set base font-size to 10px for simple rem calculations.
|
||||||
*/
|
*/
|
||||||
html {
|
html {
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
@ -54,31 +55,18 @@ html {
|
|||||||
/*
|
/*
|
||||||
* Reset spacing and borders for all tags
|
* Reset spacing and borders for all tags
|
||||||
*/
|
*/
|
||||||
html, body, div, span, applet, object, iframe,
|
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
|
||||||
a, abbr, acronym, address, big, cite, code,
|
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol,
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
|
||||||
small, strike, strong, sub, sup, tt, var,
|
th, td, article, aside, canvas, details, embed, figure, figcaption, footer,
|
||||||
b, u, i, center,
|
header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark,
|
||||||
dl, dt, dd, ol, ul, li,
|
audio, video {
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup, main,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Reset list styles
|
|
||||||
*/
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Reset table styles
|
* Reset table styles
|
||||||
*/
|
*/
|
||||||
@ -90,22 +78,20 @@ table {
|
|||||||
/*
|
/*
|
||||||
* Reset table cell styles
|
* Reset table cell styles
|
||||||
*/
|
*/
|
||||||
td {
|
td, th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
vertical-align: middle;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Reset (native) button styles
|
* Reset (native) button styles
|
||||||
*/
|
*/
|
||||||
button {
|
button {
|
||||||
outline: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
outline: 0;
|
||||||
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
|
||||||
|
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,10 +99,9 @@ button {
|
|||||||
* Reset (native) input styles
|
* Reset (native) input styles
|
||||||
*/
|
*/
|
||||||
input {
|
input {
|
||||||
@include appearance(none);
|
appearance: none;
|
||||||
|
outline: 0;
|
||||||
outline: none;
|
border: 0;
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -134,10 +119,3 @@ a, button, label, input {
|
|||||||
-webkit-tap-highlight-color: rgba(white, 0);
|
-webkit-tap-highlight-color: rgba(white, 0);
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Reset headlines
|
|
||||||
*/
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
334
src/assets/stylesheets/base/_typeset.scss
Normal file
334
src/assets/stylesheets/base/_typeset.scss
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Font definitions
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Default fonts
|
||||||
|
*/
|
||||||
|
body, kbd {
|
||||||
|
font-family: "Roboto", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-feature-settings: "kern", "onum", "liga";
|
||||||
|
|
||||||
|
/* Enable font-smoothing in Webkit and FF */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Use system fonts, if browser doesn't support webfonts
|
||||||
|
*/
|
||||||
|
.no-fontface & {
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Proportionally spaced fonts
|
||||||
|
*/
|
||||||
|
pre, code {
|
||||||
|
font-family: "Roboto Mono", "Courier New", Courier, monospace;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Use system fonts, if browser doesn't support webfonts
|
||||||
|
*/
|
||||||
|
.no-fontface & {
|
||||||
|
font-family: "Courier New", Courier, monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Typeset
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Content that is typeset
|
||||||
|
*/
|
||||||
|
.md-content--typeset {
|
||||||
|
font-size: ms(0);
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Body copy
|
||||||
|
*/
|
||||||
|
p {
|
||||||
|
margin: 2.0rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1st level headline
|
||||||
|
*/
|
||||||
|
h1 {
|
||||||
|
font-size: ms(3);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
color: $md-color-black--light;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Correct anchor offset
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
padding-top: (5.6rem + 2.4rem + 3.0rem);
|
||||||
|
margin-top: -(5.6rem + 2.4rem + 3.0rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 2nd level headline
|
||||||
|
*/
|
||||||
|
h2 {
|
||||||
|
font-size: ms(2);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-top: 4.0rem;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Correct anchor offset
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
padding-top: (5.6rem + 2.4rem + 0.2rem);
|
||||||
|
margin-top: -(5.6rem + 2.4rem + 0.2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 3rd level headline
|
||||||
|
*/
|
||||||
|
h3 {
|
||||||
|
font-size: ms(1);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Correct anchor offset
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
padding-top: (5.6rem + 2.4rem + 0.4rem);
|
||||||
|
margin-top: -(5.6rem + 2.4rem + 0.4rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 2nd + 3rd level headline
|
||||||
|
*/
|
||||||
|
h2 + h3 {
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 4th, 5th and 6th level headline
|
||||||
|
*/
|
||||||
|
h4 {
|
||||||
|
font-size: ms(0);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Correct anchor offset
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
position: relative;
|
||||||
|
z-index: -4;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
padding-top: (5.6rem + 2.4rem + 0.8rem);
|
||||||
|
margin-top: -(5.6rem + 2.4rem + 0.8rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 5th and 6th level headline
|
||||||
|
*/
|
||||||
|
h5, h6 {
|
||||||
|
font-size: ms(-1);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
color: $md-color-black--light;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Correct anchor offset
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
position: relative;
|
||||||
|
z-index: -5;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
padding-top: (5.6rem + 2.4rem + 1.0rem);
|
||||||
|
margin-top: -(5.6rem + 2.4rem + 1.0rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Overrides for 5th level headline
|
||||||
|
*/
|
||||||
|
h5 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Links
|
||||||
|
*/
|
||||||
|
a {
|
||||||
|
color: $md-color-primary;
|
||||||
|
transition: color .125s;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Active links
|
||||||
|
*/
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: $md-color-accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Inline code blocks
|
||||||
|
*/
|
||||||
|
code {
|
||||||
|
font-size: 85%;
|
||||||
|
font-weight: 400;
|
||||||
|
word-break: break-word;
|
||||||
|
padding: 0.1rem 0.4rem;
|
||||||
|
background: #f7f7f7;
|
||||||
|
color: #37474f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Formatted code blocks
|
||||||
|
*/
|
||||||
|
pre {
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: 1.0rem 1.2rem;
|
||||||
|
overflow-x: scroll;
|
||||||
|
background: #f7f7f7;
|
||||||
|
color: #37474f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Keyboard tags
|
||||||
|
*/
|
||||||
|
kbd {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.0rem;
|
||||||
|
word-break: break-word;
|
||||||
|
padding: 0.4rem 0.5rem 0.5rem;
|
||||||
|
vertical-align: 0.1rem;
|
||||||
|
color: #555;
|
||||||
|
background-color: #FCFCFC;
|
||||||
|
border: px2rem(1px) solid #CCCCCC;
|
||||||
|
border-bottom-color: #BBBBBB;
|
||||||
|
border-radius: px2rem(3px);
|
||||||
|
box-shadow: 0 #{-(px2rem(1px))} 0 #BBBBBB inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Smaller text
|
||||||
|
*/
|
||||||
|
small {
|
||||||
|
color: $md-color-black--light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Horizontal separators
|
||||||
|
*/
|
||||||
|
hr {
|
||||||
|
margin: 2.4rem 0;
|
||||||
|
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Blockquotes, possibly nested
|
||||||
|
*/
|
||||||
|
blockquote {
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||||
|
color: $md-color-black--light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Unordered lists
|
||||||
|
*/
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Ordered lists
|
||||||
|
*/
|
||||||
|
ol ol {
|
||||||
|
list-style-type: lower-alpha;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Triply nested ordered list
|
||||||
|
*/
|
||||||
|
ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Unordered and ordered lists
|
||||||
|
*/
|
||||||
|
ul, ol {
|
||||||
|
margin-left: 1.0rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* List elements
|
||||||
|
*/
|
||||||
|
li {
|
||||||
|
margin-bottom: 1.0rem;
|
||||||
|
margin-left: 2.0rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Remove margin on last element
|
||||||
|
*/
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Nested lists
|
||||||
|
*/
|
||||||
|
ul, ol {
|
||||||
|
padding-top: 1.0rem;
|
||||||
|
margin-bottom: 1.0rem;
|
||||||
|
margin-left: 1.0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -20,7 +20,6 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "article/animation";
|
/* ----------------------------------------------------------------------------
|
||||||
@import "article/appearance";
|
* Admonition extension
|
||||||
@import "article/layout";
|
* ------------------------------------------------------------------------- */
|
||||||
@import "article/typography";
|
|
||||||
133
src/assets/stylesheets/extensions/_codehilite.scss
Normal file
133
src/assets/stylesheets/extensions/_codehilite.scss
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Codehilite extension
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Github-style syntax highlighting
|
||||||
|
*/
|
||||||
|
.codehilite,
|
||||||
|
.code {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Errors
|
||||||
|
*/
|
||||||
|
.err { color: #a61717; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Operators
|
||||||
|
*/
|
||||||
|
.o { color: inherit; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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 */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Keywords
|
||||||
|
*/
|
||||||
|
.k { color: #a71d5d; } /* Keyword */
|
||||||
|
.kc { color: #a71d5d; } /* Keyword.Constant */
|
||||||
|
.kd { color: #a71d5d; } /* Keyword.Declaration */
|
||||||
|
.kn { color: #a71d5d; } /* Keyword.Namespace */
|
||||||
|
.kp { color: #a71d5d; } /* Keyword.Pseudo */
|
||||||
|
.kr { color: #0086b3; } /* Keyword.Reserved */
|
||||||
|
.kt { color: #0086b3; } /* Keyword.Type */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Comments
|
||||||
|
*/
|
||||||
|
.c { color: #969896; } /* Comment */
|
||||||
|
.cm { color: #969896; } /* Comment.Multiline */
|
||||||
|
.cp { color: #666666; } /* Comment.Preproc */
|
||||||
|
.c1 { color: #969896; } /* Comment.Single */
|
||||||
|
.cs { color: #969896; } /* Comment.Special */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Names
|
||||||
|
*/
|
||||||
|
.na { color: #795da3; } /* Name.Attribute */
|
||||||
|
.na { color: #795da3; } /* Name.Attribute */
|
||||||
|
.nb { color: #795da3; } /* Name.Builtin */
|
||||||
|
.bp { color: #795da3; } /* Name.Builtin.Pseudo */
|
||||||
|
.nc { color: #795da3; } /* Name.Class */
|
||||||
|
.no { color: #795da3; } /* Name.Constant */
|
||||||
|
.nd { color: #795da3; } /* Name.Decorator */
|
||||||
|
.ni { color: #795da3; } /* Name.Entity */
|
||||||
|
.ne { color: #795da3; } /* Name.Exception */
|
||||||
|
.nf { color: #795da3; } /* Name.Function */
|
||||||
|
.nl { color: #795da3; } /* Name.Label */
|
||||||
|
.nn { color: #795da3; } /* Name.Namespace */
|
||||||
|
.nt { color: #795da3; } /* Name.Tag */
|
||||||
|
.nv { color: #795da3; } /* Name.Variable */
|
||||||
|
.vc { color: #795da3; } /* Name.Variable.Class */
|
||||||
|
.vg { color: #795da3; } /* Name.Variable.Global */
|
||||||
|
.vi { color: #795da3; } /* Name.Variable.Instance */
|
||||||
|
.ow { color: inherit; } /* Operator.Word */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Numbers
|
||||||
|
*/
|
||||||
|
.m { color: #0086b3; } /* Literal.Number */
|
||||||
|
.mf { color: #0086b3; } /* Literal.Number.Float */
|
||||||
|
.mh { color: #0086b3; } /* Literal.Number.Hex */
|
||||||
|
.mi { color: #0086b3; } /* Literal.Number.Integer */
|
||||||
|
.mo { color: #0086b3; } /* Literal.Number.Oct */
|
||||||
|
.il { color: #0086b3; } /* Literal.Number.Integer.Long */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Strings
|
||||||
|
*/
|
||||||
|
.s { color: #183691; } /* Literal.String */
|
||||||
|
.sb { color: #183691; } /* Literal.String.Backtick */
|
||||||
|
.sc { color: #183691; } /* Literal.String.Char */
|
||||||
|
.sd { color: #183691; } /* Literal.String.Doc */
|
||||||
|
.s2 { color: #183691; } /* 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 */
|
||||||
|
.s1 { color: #d01040; } /* Literal.String.Single */
|
||||||
|
.ss { color: #990073; } /* Literal.String.Symbol */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Diffs
|
||||||
|
*/
|
||||||
|
.gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
|
||||||
|
.gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Miscellaneous
|
||||||
|
*/
|
||||||
|
.w { color: transparent; } /* Text.Whitespace */
|
||||||
|
}
|
||||||
@ -21,56 +21,42 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Print overrides
|
* Permalinks extension
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Print styles
|
* Scope in content for greater specificity
|
||||||
*/
|
*/
|
||||||
@media print {
|
.md-content {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Hide non-relevant elements
|
* Permalink
|
||||||
*/
|
*/
|
||||||
.header, .drawer, .headerlink, .footer {
|
.headerlink {
|
||||||
display: none;
|
display: inline-block;
|
||||||
|
margin-left: 1.0rem;
|
||||||
|
opacity: 0;
|
||||||
|
color: $md-color-black--lighter;
|
||||||
|
transform: translate3d(0, 0.5rem, 0);
|
||||||
|
transition: opacity .125s .25s,
|
||||||
|
transform .25s .25s,
|
||||||
|
color .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Article
|
* Only show permalinks in hover state
|
||||||
*/
|
*/
|
||||||
.article {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
&:hover .headerlink {
|
||||||
|
margin-left: 1.0rem;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Remove top spacing
|
* Active link
|
||||||
*/
|
*/
|
||||||
.wrapper {
|
&:hover {
|
||||||
padding-top: 0;
|
color: $md-color-accent;
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove color in all code blocks
|
|
||||||
*/
|
|
||||||
pre, pre * {
|
|
||||||
color: $black !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
border: 1px solid $black-lightest;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Border-radius makes this table entirely black on paper, so scrap it
|
|
||||||
*/
|
|
||||||
table {
|
|
||||||
border-radius: none;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Color header
|
|
||||||
*/
|
|
||||||
th {
|
|
||||||
color: $primary;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,144 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Font faces - defined in base.html for correct path resolution
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
// /*
|
|
||||||
// * Icon font
|
|
||||||
// */
|
|
||||||
// @font-face {
|
|
||||||
// font-family: 'Icon';
|
|
||||||
// src: url('/assets/fonts/icon.eot?52m981');
|
|
||||||
// src: url('/assets/fonts/icon.eot?#iefix52m981') format('embedded-opentype'),
|
|
||||||
// url('/assets/fonts/icon.woff?52m981') format('woff'),
|
|
||||||
// url('/assets/fonts/icon.ttf?52m981') format('truetype'),
|
|
||||||
// url('/assets/fonts/icon.svg?52m981#icon') format('svg');
|
|
||||||
// font-weight: normal;
|
|
||||||
// font-style: normal;
|
|
||||||
// }
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Representational classes
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Base icon class
|
|
||||||
*/
|
|
||||||
.icon {
|
|
||||||
font-family: 'Icon';
|
|
||||||
speak: none;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
/* Better Font Rendering */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Magnifying glass
|
|
||||||
*/
|
|
||||||
.icon-search:before {
|
|
||||||
content: "\e600";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Back arrow
|
|
||||||
*/
|
|
||||||
.icon-back:before {
|
|
||||||
content: "\e601";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Link indicator
|
|
||||||
*/
|
|
||||||
.icon-link:before {
|
|
||||||
content: "\e602";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Close button
|
|
||||||
*/
|
|
||||||
.icon-close:before {
|
|
||||||
content: "\e603";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hamburger icon
|
|
||||||
*/
|
|
||||||
.icon-menu:before {
|
|
||||||
content: "\e604";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Forward arrow
|
|
||||||
*/
|
|
||||||
.icon-forward:before {
|
|
||||||
content: "\e605";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Twitter icon
|
|
||||||
*/
|
|
||||||
.icon-twitter:before {
|
|
||||||
content: "\e606";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* GitHub icon
|
|
||||||
*/
|
|
||||||
.icon-github:before {
|
|
||||||
content: "\e607";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Download icon
|
|
||||||
*/
|
|
||||||
.icon-download:before {
|
|
||||||
content: "\e608";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Star icon
|
|
||||||
*/
|
|
||||||
.icon-star:before {
|
|
||||||
content: "\e609";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Warning icon
|
|
||||||
*/
|
|
||||||
.icon-warning:before {
|
|
||||||
content: "\e610";
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Star icon
|
|
||||||
*/
|
|
||||||
.icon-note:before {
|
|
||||||
content: "\e611";
|
|
||||||
}
|
|
||||||
@ -21,29 +21,25 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Defaults
|
* Variables
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
$break: (
|
|
||||||
devices: (
|
|
||||||
mobile: (
|
|
||||||
portrait: 220px 479px,
|
|
||||||
landscape: 480px 719px
|
|
||||||
),
|
|
||||||
tablet: (
|
|
||||||
portrait: 720px 959px,
|
|
||||||
landscape: 960px 1199px
|
|
||||||
),
|
|
||||||
screen: 1200px
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Helper functions
|
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Choose minimum and maximum device widths.
|
* Device-specific breakpoints
|
||||||
|
*
|
||||||
|
* @type Map
|
||||||
|
*/
|
||||||
|
$break-devices: () !default;
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Breakpoint helpers
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Choose minimum and maximum device widths
|
||||||
|
*
|
||||||
|
* @param {Map} $devices Map of devices
|
||||||
|
* @return {List} Minimum and maximum width
|
||||||
*/
|
*/
|
||||||
@function break-select-min-max($devices) {
|
@function break-select-min-max($devices) {
|
||||||
$min: 1000000; $max: 0;
|
$min: 1000000; $max: 0;
|
||||||
@ -59,44 +55,49 @@ $break: (
|
|||||||
$max: max($number, $max);
|
$max: max($number, $max);
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid number: #{$number}";
|
@error "Invalid number: #{$number}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @elseif type-of($value) == number {
|
} @elseif type-of($value) == number {
|
||||||
$min: min($value, $min);
|
$min: min($value, $min);
|
||||||
$max: null;
|
$max: null;
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid tuple: #{$value}";
|
@error "Invalid value: #{$value}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@return $min, $max;
|
@return $min, $max;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Select minimum and maximum widths for a device breakpoint.
|
* Select minimum and maximum widths for a device breakpoint
|
||||||
|
*
|
||||||
|
* @param {String} $device Device
|
||||||
|
* @return {List} Minimum and maximum width
|
||||||
*/
|
*/
|
||||||
@function break-select-device($device) {
|
@function break-select-device($device) {
|
||||||
$devices: map-get($break, devices);
|
$current: $break-devices;
|
||||||
@for $n from 1 through length($device) {
|
@for $n from 1 through length($device) {
|
||||||
@if type-of($devices) == map {
|
@if type-of($current) == map {
|
||||||
$devices: map-get($devices, nth($device, $n));
|
$current: map-get($current, nth($device, $n));
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid device map: #{$devices}";
|
@error "Invalid device map: #{$devices}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@if type-of($devices) == list or
|
@if type-of($current) == list or
|
||||||
type-of($devices) == number {
|
type-of($current) == number {
|
||||||
$devices: (default: $devices);
|
$current: (default: $current);
|
||||||
}
|
}
|
||||||
@return break-select-min-max($devices);
|
@return break-select-min-max($current);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Mixins for numeric breakpoints
|
* Breakpoint mixins
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A minimum-maximum media query breakpoint.
|
* A minimum-maximum media query breakpoint
|
||||||
|
*
|
||||||
|
* @param {Number|List} $breakpoint Number or number pair
|
||||||
*/
|
*/
|
||||||
@mixin break-at($breakpoint) {
|
@mixin break-at($breakpoint) {
|
||||||
@if type-of($breakpoint) == number {
|
@if type-of($breakpoint) == number {
|
||||||
@ -110,15 +111,17 @@ $break: (
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid breakpoint: #{$breakpoint}";
|
@error "Invalid breakpoint: #{$breakpoint}";
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid breakpoint: #{$breakpoint}";
|
@error "Invalid breakpoint: #{$breakpoint}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* An orientation media query breakpoint.
|
* An orientation media query breakpoint
|
||||||
|
*
|
||||||
|
* @param {String} $breakpoint Orientation
|
||||||
*/
|
*/
|
||||||
@mixin break-at-orientation($breakpoint) {
|
@mixin break-at-orientation($breakpoint) {
|
||||||
@if type-of($breakpoint) == string {
|
@if type-of($breakpoint) == string {
|
||||||
@ -126,12 +129,14 @@ $break: (
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid breakpoint: #{$breakpoint}";
|
@error "Invalid breakpoint: #{$breakpoint}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A maximum-aspect-ratio media query breakpoint.
|
* A maximum-aspect-ratio media query breakpoint
|
||||||
|
*
|
||||||
|
* @param {Number} $breakpoint Ratio
|
||||||
*/
|
*/
|
||||||
@mixin break-at-ratio($breakpoint) {
|
@mixin break-at-ratio($breakpoint) {
|
||||||
@if type-of($breakpoint) == number {
|
@if type-of($breakpoint) == number {
|
||||||
@ -139,16 +144,14 @@ $break: (
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid breakpoint: #{$breakpoint}";
|
@error "Invalid breakpoint: #{$breakpoint}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Mixins for device breakpoints
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A minimum-maximum media query device breakpoint.
|
* A minimum-maximum media query device breakpoint
|
||||||
|
*
|
||||||
|
* @param {String|List} $breakpoint Device
|
||||||
*/
|
*/
|
||||||
@mixin break-at-device($device) {
|
@mixin break-at-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
@ -162,15 +165,17 @@ $break: (
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid device: #{$device}";
|
@error "Invalid device: #{$device}";
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid device: #{$device}";
|
@error "Invalid device: #{$device}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A minimum media query device breakpoint.
|
* A minimum media query device breakpoint
|
||||||
|
*
|
||||||
|
* @param {String|List} $breakpoint Device
|
||||||
*/
|
*/
|
||||||
@mixin break-from-device($device) {
|
@mixin break-from-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
@ -183,12 +188,14 @@ $break: (
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid device: #{$device}";
|
@error "Invalid device: #{$device}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* A maximum media query device breakpoint.
|
* A maximum media query device breakpoint
|
||||||
|
*
|
||||||
|
* @param {String|List} $breakpoint Device
|
||||||
*/
|
*/
|
||||||
@mixin break-to-device($device) {
|
@mixin break-to-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
@ -196,11 +203,11 @@ $break: (
|
|||||||
}
|
}
|
||||||
@if type-of($device) == list {
|
@if type-of($device) == list {
|
||||||
$breakpoint: break-select-device($device);
|
$breakpoint: break-select-device($device);
|
||||||
$max: nth($breakpoint, 1) - 1;
|
$max: nth($breakpoint, 2);
|
||||||
@media only screen and (max-width: $max) {
|
@media only screen and (max-width: $max) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
@warn "Invalid device: #{$device}";
|
@error "Invalid device: #{$device}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -21,38 +21,34 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Article typography
|
* Pixel conversion helpers
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Article
|
* Convert font size in px to em.
|
||||||
|
*
|
||||||
|
* @param {Number} $size Font size in px
|
||||||
|
* @param {Number} $base Base font size
|
||||||
|
* @return {Number} Font size in em
|
||||||
*/
|
*/
|
||||||
.article {
|
@function px2em($size, $base: 16px) {
|
||||||
|
@if unit($size) == px {
|
||||||
/*
|
@return ($size / $base) * 1em;
|
||||||
* Third-level headlines should be bold
|
} @else {
|
||||||
*/
|
@error "Invalid unit: #{$size} - must be px";
|
||||||
h3 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Fourth-level headlines should be italic
|
|
||||||
*/
|
|
||||||
h4 {
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Permalink support
|
* Convert font size in px to rem.
|
||||||
|
*
|
||||||
|
* @param {Number} $size Font size in px
|
||||||
|
* @return {Number} Font size in rem
|
||||||
*/
|
*/
|
||||||
.article {
|
@function px2rem($size, $base: 10px) {
|
||||||
h2, h3, h4, h5, h6 {
|
@if unit($size) == px {
|
||||||
a {
|
@return ($size / $base) * 1rem;
|
||||||
font-weight: 400;
|
} @else {
|
||||||
font-style: normal;
|
@error "Invalid unit: #{$size} - must be px";
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
171
src/assets/stylesheets/layout/_base.scss
Normal file
171
src/assets/stylesheets/layout/_base.scss
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Grid
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Stretch container to viewport
|
||||||
|
*/
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Stretch body to container and leave room for footer.
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Horizontal separators
|
||||||
|
*/
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Template-wide grid
|
||||||
|
*/
|
||||||
|
.md-grid {
|
||||||
|
max-width: 120rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prevent collapse of margin when setting margin on child element
|
||||||
|
*/
|
||||||
|
.md-container,
|
||||||
|
.md-main {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add top spacing to acount for header
|
||||||
|
*/
|
||||||
|
.md-main {
|
||||||
|
margin-top: 5.6rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* bottom spacing to account for footer
|
||||||
|
*/
|
||||||
|
&__inner {
|
||||||
|
margin-top: 3.0rem;
|
||||||
|
margin-bottom: 9.2rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Navigational elements
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Toggle checkbox (should never be visibile)
|
||||||
|
*/
|
||||||
|
.md-toggle {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Overlay below expanded drawer
|
||||||
|
*/
|
||||||
|
.md-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0;
|
||||||
|
background: $md-color-black--light;
|
||||||
|
transition: opacity .25s,
|
||||||
|
width .0s .25s,
|
||||||
|
height .0s .25s;
|
||||||
|
|
||||||
|
/* [tablet landscape -]: Trigger overlay */
|
||||||
|
@include break-to-device(tablet landscape) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Expanded drawer
|
||||||
|
*/
|
||||||
|
#md-toggle-drawer:checked ~ & {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .25s,
|
||||||
|
width .0s,
|
||||||
|
height .0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Flexible elements, implemented with table layout
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Flexible layout container
|
||||||
|
*/
|
||||||
|
.md-flex {
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Flexible layout container cell/element
|
||||||
|
*/
|
||||||
|
&__cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Shrink to minimum width
|
||||||
|
*/
|
||||||
|
&--shrink {
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Stretch to maximum width
|
||||||
|
*/
|
||||||
|
&--stretch {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Apply ellipsis in case of overflowing text
|
||||||
|
*/
|
||||||
|
&__ellipsis {
|
||||||
|
display: table-cell;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -21,48 +21,40 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Drawer typography
|
* Main content
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Drawer container
|
* Content container
|
||||||
*/
|
*/
|
||||||
.drawer {
|
.md-content {
|
||||||
|
|
||||||
/*
|
/* [tablet landscape +]: Add space for table of contents */
|
||||||
* Links to articles
|
@include break-from-device(tablet landscape) {
|
||||||
*/
|
margin-right: 24.2rem;
|
||||||
.toc li a {
|
}
|
||||||
font-weight: 700;
|
|
||||||
|
/* [screen small +]: Add space for table of contents */
|
||||||
|
@include break-from-device(screen small) {
|
||||||
|
margin-left: 24.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Links to chapters inside the current article
|
* Define padding
|
||||||
*/
|
*/
|
||||||
.toc li.anchor a {
|
&__inner {
|
||||||
font-weight: 400;
|
margin: 2.4rem 1.6rem;
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/* [screen small +]: Add space for table of contents */
|
||||||
* Main sections
|
@include break-from-device(screen small) {
|
||||||
*/
|
margin: 2.4rem 2.4rem;
|
||||||
.section {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Repository buttons
|
* Copyright and theme information
|
||||||
*/
|
*/
|
||||||
.repo a {
|
&__copyright {
|
||||||
text-transform: uppercase;
|
display: block;
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stars
|
|
||||||
*/
|
|
||||||
.count {
|
|
||||||
text-transform: none;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
134
src/assets/stylesheets/layout/_footer.scss
Normal file
134
src/assets/stylesheets/layout/_footer.scss
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Footer
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Application footer
|
||||||
|
*/
|
||||||
|
.md-footer {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Pagination container
|
||||||
|
*/
|
||||||
|
&-pagination {
|
||||||
|
background: $md-color-black;
|
||||||
|
color: $md-color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Link to previous and next page
|
||||||
|
*/
|
||||||
|
&-nav {
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0.4rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Links to previous and next page
|
||||||
|
*/
|
||||||
|
&__link {
|
||||||
|
padding-top: 2.8rem;
|
||||||
|
padding-bottom: 0.8rem;
|
||||||
|
|
||||||
|
/* [mobile landscape +]: Set proportional width */
|
||||||
|
@include break-from-device(mobile landscape) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Link to previous page
|
||||||
|
*/
|
||||||
|
&--prev {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Title
|
||||||
|
*/
|
||||||
|
.md-footer-nav__title {
|
||||||
|
|
||||||
|
/* [mobile portrait -]: Hide title for previous page */
|
||||||
|
@include break-to-device(mobile portrait) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Link to next page
|
||||||
|
*/
|
||||||
|
&--next {
|
||||||
|
float: right;
|
||||||
|
width: 75%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Icon
|
||||||
|
*/
|
||||||
|
&__icon {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
padding: 0.8rem;
|
||||||
|
margin: 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: background .25s;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Pushed/clicked icon
|
||||||
|
*/
|
||||||
|
&:active {
|
||||||
|
background: $md-color-white--lightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Title
|
||||||
|
*/
|
||||||
|
&__title {
|
||||||
|
position: relative;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 4.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Direction
|
||||||
|
*/
|
||||||
|
&__direction {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
margin-top: -2.0rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: $md-color-white--light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -21,53 +21,57 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Base animation
|
* Header
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Animate color on hover
|
* Application header (stays always on top)
|
||||||
*/
|
*/
|
||||||
a {
|
.md-header {
|
||||||
transition: color .25s;
|
@include drop-shadow(1);
|
||||||
}
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 5.6rem;
|
||||||
|
z-index: 1;
|
||||||
|
background: $md-color-primary;
|
||||||
|
color: $md-color-white;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Overlay
|
* Navigation within header
|
||||||
*/
|
*/
|
||||||
.overlay {
|
&-nav {
|
||||||
transition: opacity .25s,
|
padding: 0.4rem;
|
||||||
width .0s .25s,
|
|
||||||
height .0s .25s;
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Expanded drawer
|
* Icon
|
||||||
*/
|
*/
|
||||||
#toggle-drawer:checked ~ &,
|
&__icon {
|
||||||
.toggle-drawer & {
|
display: inline-block;
|
||||||
transition: opacity .25s,
|
font-size: 2.4rem;
|
||||||
width .0s,
|
padding: 0.8rem;
|
||||||
height .0s;
|
margin: 0.4rem;
|
||||||
}
|
cursor: pointer;
|
||||||
}
|
border-radius: 100%;
|
||||||
|
|
||||||
/*
|
|
||||||
* Application header - check for javascript to omit flashing
|
|
||||||
*/
|
|
||||||
.js .header {
|
|
||||||
transition: background .6s,
|
|
||||||
color .6s;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Status bar
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
transition: background .6s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Extended visible touch area on icon
|
|
||||||
*/
|
|
||||||
.button .icon {
|
|
||||||
transition: background .25s;
|
transition: background .25s;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Pushed/clicked icon
|
||||||
|
*/
|
||||||
|
&:active {
|
||||||
|
background: $md-color-white--lightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Title
|
||||||
|
*/
|
||||||
|
&__title {
|
||||||
|
padding: 0 2.0rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 4.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -21,61 +21,89 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Drawer animation
|
* Navigation
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Drawer container
|
* Nested navigation
|
||||||
*/
|
*/
|
||||||
.drawer {
|
.md-nav {
|
||||||
|
|
||||||
/* [tablet landscape-]: Hide menu */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
transform: translate3d(-262px, 0, 0);
|
|
||||||
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Just hide drawer, if browser doesn't support 3D transforms
|
* Set font sizes
|
||||||
*/
|
*/
|
||||||
.no-csstransforms3d & {
|
&, h3 {
|
||||||
display: none;
|
font-size: ms(-1);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Table of contents
|
||||||
|
*/
|
||||||
|
&--toc {
|
||||||
|
border-left: px2rem(4px) solid $md-color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* List of items
|
||||||
|
*/
|
||||||
|
&__list {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 2nd+ level list
|
||||||
|
*/
|
||||||
|
& & {
|
||||||
|
margin-left: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Hide list by default
|
||||||
|
*/
|
||||||
|
.md-nav__toggle ~ & {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Expand list, if toggle is checked
|
||||||
|
*/
|
||||||
|
.md-nav__toggle:checked ~ & {
|
||||||
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Expanded drawer
|
* List item
|
||||||
*/
|
*/
|
||||||
#toggle-drawer:checked ~ .main &,
|
&__item {
|
||||||
.toggle-drawer & {
|
margin: 0.8rem 0 0;
|
||||||
transform: translate3d(0, 0, 0);
|
line-height: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Just show drawer, if browser doesn't support 3D transforms
|
* Link inside item
|
||||||
*/
|
*/
|
||||||
.no-csstransforms3d & {
|
&__link {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
overflow: hidden;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
|
transition: color .125s;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Marked item
|
||||||
|
*/
|
||||||
|
&--marked {
|
||||||
|
color: $md-color-black--light;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* No color transition for project link
|
* Current or hovered item
|
||||||
*/
|
*/
|
||||||
.project {
|
&:hover,
|
||||||
transition: none;
|
&:active,
|
||||||
|
&--active {
|
||||||
|
color: $md-color-accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Project logo image
|
|
||||||
*/
|
|
||||||
.project .logo img {
|
|
||||||
transition: box-shadow .4s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Repository buttons
|
|
||||||
*/
|
|
||||||
.repo a {
|
|
||||||
transition: box-shadow .4s,
|
|
||||||
opacity .4s;
|
|
||||||
}
|
}
|
||||||
166
src/assets/stylesheets/layout/_sidebar.scss
Normal file
166
src/assets/stylesheets/layout/_sidebar.scss
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Sidebar
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sidebar content
|
||||||
|
*/
|
||||||
|
.md-sidebar {
|
||||||
|
position: relative;
|
||||||
|
width: 24.2rem;
|
||||||
|
float: left;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Lock sidebar to container height (account for fixed header)
|
||||||
|
*/
|
||||||
|
&.md-js__sidebar--locked {
|
||||||
|
position: fixed;
|
||||||
|
top: 5.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [tablet landscape -]: Convert navigation to drawer */
|
||||||
|
@include break-to-device(tablet landscape) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Render primary sidebar as a slideout container
|
||||||
|
*/
|
||||||
|
&--primary {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 24.2em;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
background: $md-color-white;
|
||||||
|
transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
|
||||||
|
transform: translate3d(-24.2em, 0, 0);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Just hide drawer, if browser doesn't support 3D transforms
|
||||||
|
*/
|
||||||
|
.no-csstransforms3d & {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Expanded drawer
|
||||||
|
*/
|
||||||
|
#md-toggle-drawer:checked ~ .md-container & {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Just show drawer, if browser doesn't support 3D transforms
|
||||||
|
*/
|
||||||
|
.no-csstransforms3d & {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Secondary sidebar with table of contents
|
||||||
|
*/
|
||||||
|
&--secondary {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
/* [tablet landscape +]: Show table of contents next to body copy */
|
||||||
|
@include break-from-device(tablet landscape) {
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Hack to align right in case of locked sidebar
|
||||||
|
*/
|
||||||
|
&.md-js__sidebar--locked {
|
||||||
|
margin-left: 100%;
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
|
||||||
|
/* [screen small +]: Limit to grid */
|
||||||
|
@include break-from-device(screen small) {
|
||||||
|
margin-left: 120rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Wrapper for scrolling on overflow
|
||||||
|
*/
|
||||||
|
&__scrollwrap {
|
||||||
|
margin: 2.4rem 0.4rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
/* [tablet landscape +]: Adjust margins */
|
||||||
|
@include break-to-device(tablet landscape) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Adjust margins for primary scrollbar
|
||||||
|
*/
|
||||||
|
.md-sidebar--primary & {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Limit height to window, if JavaScript is available
|
||||||
|
*/
|
||||||
|
.js & {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Override native scrollbar styles
|
||||||
|
*/
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Style scrollbar thumb
|
||||||
|
*/
|
||||||
|
&-thumb {
|
||||||
|
background: $md-color-black--lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Actual sidebar content
|
||||||
|
*/
|
||||||
|
&__inner {
|
||||||
|
padding: 1.2rem;
|
||||||
|
|
||||||
|
/* [screen small +]: Add line for reference */
|
||||||
|
@include break-from-device(screen small) {
|
||||||
|
border-right: px2rem(1px) solid $md-color-black--lightest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "base/animation";
|
|
||||||
@import "base/appearance";
|
|
||||||
@import "base/layout";
|
|
||||||
@import "base/typography";
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "drawer/animation";
|
|
||||||
@import "drawer/appearance";
|
|
||||||
@import "drawer/layout";
|
|
||||||
@import "drawer/typography";
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "search/animation";
|
|
||||||
@import "search/appearance";
|
|
||||||
@import "search/layout";
|
|
||||||
@import "search/typography";
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Article appearance
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article
|
|
||||||
*/
|
|
||||||
.article {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Differing top and bottom rubberband backgrounds in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom, $white 50%, $primary 50%);
|
|
||||||
|
|
||||||
/* Hack [iOS]: Mitigate black bounding box with linear gradient */
|
|
||||||
.wrapper {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom, $white 50%, $white 50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Headlines, chapters, links and inline code
|
|
||||||
*/
|
|
||||||
h1, h2, a, code {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Lower border for main headline
|
|
||||||
*/
|
|
||||||
h1 {
|
|
||||||
border-bottom: 1px solid $black-lightest;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Underline links
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hovered and focused links
|
|
||||||
*/
|
|
||||||
a:hover, a:focus {
|
|
||||||
color: $accent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Light permalinks
|
|
||||||
*/
|
|
||||||
.headerlink {
|
|
||||||
color: $black-lighter;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data tables
|
|
||||||
*/
|
|
||||||
table {
|
|
||||||
@include drop-shadow(1);
|
|
||||||
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Table heading
|
|
||||||
*/
|
|
||||||
th {
|
|
||||||
background: mix($primary, $white, 75%);
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Round upper left border
|
|
||||||
*/
|
|
||||||
&:first-child {
|
|
||||||
border-top-left-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Round upper right border
|
|
||||||
*/
|
|
||||||
&:last-child {
|
|
||||||
border-top-right-radius: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Table cell
|
|
||||||
*/
|
|
||||||
td {
|
|
||||||
border-top: 1px solid rgba($black, 0.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article footer
|
|
||||||
*/
|
|
||||||
.footer {
|
|
||||||
background: $primary;
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove bottom border on links
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Copyright and theme information
|
|
||||||
*/
|
|
||||||
.copyright {
|
|
||||||
color: $black-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Pagination
|
|
||||||
*/
|
|
||||||
.pagination {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Inherit color for links
|
|
||||||
*/
|
|
||||||
a .title, a .button {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Smaller font size for direction
|
|
||||||
*/
|
|
||||||
.direction {
|
|
||||||
color: $white-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Admonition support
|
|
||||||
*/
|
|
||||||
.admonition {
|
|
||||||
background: $light-blue-400;
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Embedded code blocks
|
|
||||||
*/
|
|
||||||
pre {
|
|
||||||
background: $white-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* A warning hint
|
|
||||||
*/
|
|
||||||
&.warning {
|
|
||||||
background: $red-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Headlines, chapters, links and inline code
|
|
||||||
*/
|
|
||||||
a, a:hover {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,567 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Article layout
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article
|
|
||||||
*/
|
|
||||||
.article {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.7em;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Indent to account for drawer */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
margin-left: 262px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Clearfix
|
|
||||||
*/
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article wrapper
|
|
||||||
*/
|
|
||||||
.wrapper {
|
|
||||||
padding: 116px 16px 92px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase top spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
padding: 128px 24px 96px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Enable overflow scrolling in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
@include position(absolute, 56px 0 0 0);
|
|
||||||
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
/* [orientation: portrait]: Account for status bar in portrait mode */
|
|
||||||
@include break-at-orientation(portrait) {
|
|
||||||
@include position(absolute, (56px + 20px) 0 0 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article wrapper
|
|
||||||
*/
|
|
||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
padding-top: 60px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article headline
|
|
||||||
*/
|
|
||||||
h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 1.333334em;
|
|
||||||
padding: 20px 0 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article chapters
|
|
||||||
*/
|
|
||||||
h2 {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.4em;
|
|
||||||
padding-top: (36px + 56px);
|
|
||||||
margin-top: (0px - 56px);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* No offset correction in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
padding-top: 36px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sub headlines
|
|
||||||
*/
|
|
||||||
h3, h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
padding-top: (20px + 56px);
|
|
||||||
margin-top: (0 - 56px);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* No offset correction in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
padding-top: 20px;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Align permalinks on the right
|
|
||||||
*/
|
|
||||||
.headerlink {
|
|
||||||
float: right;
|
|
||||||
margin-left: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide permalink to main headline
|
|
||||||
*/
|
|
||||||
h1 & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Paragraphs and section titles
|
|
||||||
*/
|
|
||||||
p, ul, ol {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Smaler top spacing for nested lists
|
|
||||||
*/
|
|
||||||
li ul, li ol {
|
|
||||||
margin-top: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* List elements
|
|
||||||
*/
|
|
||||||
li {
|
|
||||||
margin-top: 0.75em;
|
|
||||||
margin-left: 18px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Inline paragraphs in list elements
|
|
||||||
*/
|
|
||||||
p {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add icon for elements of an unordered list
|
|
||||||
*/
|
|
||||||
ul > li:before {
|
|
||||||
content: "\e602";
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-family: 'Icon';
|
|
||||||
font-size: 16px;
|
|
||||||
width: 1.2em;
|
|
||||||
margin-left: -1.2em;
|
|
||||||
vertical-align: -0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Inline code snippets must not wrap
|
|
||||||
*/
|
|
||||||
p > code {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add spacing at top of separator
|
|
||||||
*/
|
|
||||||
hr {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Limit images to article container
|
|
||||||
*/
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Code listing container
|
|
||||||
*/
|
|
||||||
pre {
|
|
||||||
padding: 16px;
|
|
||||||
margin: 1.5em -16px 0;
|
|
||||||
line-height: 1.5em;
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data tables
|
|
||||||
*/
|
|
||||||
table {
|
|
||||||
margin: 3.0em 0 1.5em;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* The semi-cool solution, in case javascript is not available
|
|
||||||
*/
|
|
||||||
.no-js & {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Table heading
|
|
||||||
*/
|
|
||||||
th {
|
|
||||||
min-width: 100px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Table cell
|
|
||||||
*/
|
|
||||||
td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data table wrapper, in case javascript is available
|
|
||||||
*/
|
|
||||||
.data {
|
|
||||||
margin: 1.5em -16px;
|
|
||||||
padding: 1.5em 0;
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data table
|
|
||||||
*/
|
|
||||||
table {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 16px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
margin: 1.5em -24px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data table
|
|
||||||
*/
|
|
||||||
table {
|
|
||||||
margin: 0 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Account for larged header bar and anchors
|
|
||||||
*/
|
|
||||||
h2 {
|
|
||||||
padding-top: (28px + 72px);
|
|
||||||
margin-top: (8px - 72px);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* No offset correction in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
padding-top: 28px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Sub headlines
|
|
||||||
*/
|
|
||||||
h3, h4 {
|
|
||||||
padding-top: (20px + 64px);
|
|
||||||
margin-top: (0 - 64px);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* No offset correction in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
padding-top: 20px;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Increase spacing for code blocks
|
|
||||||
*/
|
|
||||||
pre {
|
|
||||||
padding: 1.5em 24px;
|
|
||||||
margin: 1.5em -24px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article footer
|
|
||||||
*/
|
|
||||||
.footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 0 4px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Larger spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Stretch footer to viewport */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Copyright and theme information
|
|
||||||
*/
|
|
||||||
.copyright {
|
|
||||||
margin: 1.5em 0;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Add bottom spacing */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
margin-bottom: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Pagination
|
|
||||||
*/
|
|
||||||
.pagination {
|
|
||||||
max-width: 1184px;
|
|
||||||
height: 92px;
|
|
||||||
padding: 4px 0;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Larger pagination and spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
height: 96px;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links should span icons entirely
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Previous and next page
|
|
||||||
*/
|
|
||||||
.previous,
|
|
||||||
.next {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Previous page
|
|
||||||
*/
|
|
||||||
.previous {
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide direction
|
|
||||||
*/
|
|
||||||
.direction {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide title
|
|
||||||
*/
|
|
||||||
.stretch {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Next page
|
|
||||||
*/
|
|
||||||
.next {
|
|
||||||
width: 75%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Link to page
|
|
||||||
*/
|
|
||||||
.page {
|
|
||||||
display: table;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Put direction over page title
|
|
||||||
*/
|
|
||||||
.direction {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 40px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
padding: 0 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Decrease indent for stretching content
|
|
||||||
*/
|
|
||||||
.stretch {
|
|
||||||
padding: 0 4px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Correct vertical spacing
|
|
||||||
*/
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 11px 0 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [mobile landscape+]: Proportional width for pagination */
|
|
||||||
@include break-from-device(mobile landscape) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Previous and next page
|
|
||||||
*/
|
|
||||||
.previous,
|
|
||||||
.next {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Previous page
|
|
||||||
*/
|
|
||||||
.previous {
|
|
||||||
width: 50%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show direction
|
|
||||||
*/
|
|
||||||
.direction {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show title
|
|
||||||
*/
|
|
||||||
.stretch {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portrait+]: Increase vertical spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Increase vertical spacing
|
|
||||||
*/
|
|
||||||
.direction {
|
|
||||||
padding: 0 56px;
|
|
||||||
bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Increase vertical spacing
|
|
||||||
*/
|
|
||||||
.stretch {
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Admonition support
|
|
||||||
*/
|
|
||||||
.admonition {
|
|
||||||
margin: 20px -16px 0;
|
|
||||||
padding: 20px 16px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove redundant margin of first child
|
|
||||||
*/
|
|
||||||
> :first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase horizontal spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
margin: 20px -24px 0;
|
|
||||||
padding: 20px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Admonition title, if given
|
|
||||||
*/
|
|
||||||
.admonition-title {
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Default icon
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
content: "\e611";
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-family: 'Icon';
|
|
||||||
font-size: 24px;
|
|
||||||
vertical-align: -0.1em;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Warning icon
|
|
||||||
*/
|
|
||||||
&.warning .admonition-title:before {
|
|
||||||
content: "\e610";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Base appearance
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Device specific background hacks related to rubberband
|
|
||||||
*/
|
|
||||||
body {
|
|
||||||
color: $black;
|
|
||||||
|
|
||||||
/* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
|
|
||||||
@supports (-webkit-appearance: none) {
|
|
||||||
background: $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Don't tint menu bar on iOS
|
|
||||||
*/
|
|
||||||
.ios & {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Horizontal separators
|
|
||||||
*/
|
|
||||||
hr {
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid $black-lightest;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Toggle button
|
|
||||||
*/
|
|
||||||
.toggle-button {
|
|
||||||
cursor: pointer;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Backdrop
|
|
||||||
*/
|
|
||||||
.backdrop {
|
|
||||||
background: $white;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Introduce paper with shadow */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
background: darken($white, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Backdrop paper with shadow
|
|
||||||
*/
|
|
||||||
.backdrop-paper:after {
|
|
||||||
background: $white;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Add drop shadow */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
@include drop-shadow(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Overlay
|
|
||||||
*/
|
|
||||||
.overlay {
|
|
||||||
background: $black-light;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Expanded drawer
|
|
||||||
*/
|
|
||||||
#toggle-drawer:checked ~ &,
|
|
||||||
.toggle-drawer & {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Application header
|
|
||||||
*/
|
|
||||||
.header {
|
|
||||||
@include drop-shadow(1);
|
|
||||||
|
|
||||||
background: $primary;
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add status bar overlay for iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone &:before {
|
|
||||||
background: $black-lightest;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Navigation path within header bar
|
|
||||||
*/
|
|
||||||
.bar .path {
|
|
||||||
color: $white-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Draw round area around icon on touch
|
|
||||||
*/
|
|
||||||
.button .icon {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Pushed/clicked icon
|
|
||||||
*/
|
|
||||||
.button .icon:active {
|
|
||||||
background: $white-lightest;
|
|
||||||
}
|
|
||||||
@ -1,363 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Base layout
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stretch container to viewport
|
|
||||||
*/
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stretch body to container and leave room for sticky footer.
|
|
||||||
*/
|
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Horizontal separators
|
|
||||||
*/
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Lock body (e.g. in search mode)
|
|
||||||
*/
|
|
||||||
.locked {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Scrollable container
|
|
||||||
*/
|
|
||||||
.scrollable {
|
|
||||||
@include position(absolute, 0 0 0 0);
|
|
||||||
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Content wrapper
|
|
||||||
*/
|
|
||||||
.wrapper {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
/* Hack [iOS]: Force overflow scrolling */
|
|
||||||
.ios & {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Toggle states and button
|
|
||||||
*/
|
|
||||||
.toggle {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Toggle button
|
|
||||||
*/
|
|
||||||
&-button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Backdrop
|
|
||||||
*/
|
|
||||||
.backdrop {
|
|
||||||
@include position(absolute, 0 0 0 0);
|
|
||||||
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Backdrop paper container
|
|
||||||
*/
|
|
||||||
.backdrop-paper {
|
|
||||||
max-width: 1200px;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Actual paper
|
|
||||||
*/
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: 262px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Overlay
|
|
||||||
*/
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
z-index: 4;
|
|
||||||
|
|
||||||
/* [tablet landscape-]: Trigger overlay */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Expanded drawer
|
|
||||||
*/
|
|
||||||
#toggle-drawer:checked ~ &,
|
|
||||||
.toggle-drawer & {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Application header stays always on top
|
|
||||||
*/
|
|
||||||
.header {
|
|
||||||
@include user-select(none);
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 3;
|
|
||||||
height: 56px;
|
|
||||||
padding: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Larger header bar */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
height: 64px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [screen+]: Stretch to screen */
|
|
||||||
@include break-from-device(screen) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Absolute positioning in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
/* [orientation: portrait]: Account for status bar in portrait mode */
|
|
||||||
@include break-at-orientation(portrait) {
|
|
||||||
height: (56px + 20px);
|
|
||||||
padding-top: (4px + 20px);
|
|
||||||
|
|
||||||
/* [tablet portait+]: Larger header bar */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
height: (64px + 20px);
|
|
||||||
padding-top: (8px + 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add status bar overlay
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 4;
|
|
||||||
width: 100%;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Header bar
|
|
||||||
*/
|
|
||||||
.bar {
|
|
||||||
display: table;
|
|
||||||
max-width: 1184px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links should span icons entirely
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide search button, in case javascript is not available.
|
|
||||||
*/
|
|
||||||
.no-js & .button-search {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Navigation path
|
|
||||||
*/
|
|
||||||
.path {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Correct icon alignment
|
|
||||||
*/
|
|
||||||
.icon:before {
|
|
||||||
vertical-align: -1.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portait-]: Hide path */
|
|
||||||
@include break-to-device(tablet portrait) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Buttons
|
|
||||||
*/
|
|
||||||
.button {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 1%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove native spacing on button
|
|
||||||
*/
|
|
||||||
button {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
/* Hack [IE]: Remove button offset in active state */
|
|
||||||
&:active:before {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Button icons
|
|
||||||
*/
|
|
||||||
.icon {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 24px;
|
|
||||||
padding: 8px;
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide source and twitter button
|
|
||||||
*/
|
|
||||||
.button-github,
|
|
||||||
.button-twitter {
|
|
||||||
|
|
||||||
/* [mobile landscape-]: Hide button */
|
|
||||||
@include break-to-device(mobile landscape) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide menu button
|
|
||||||
*/
|
|
||||||
.button-menu {
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Hide button */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stretch content to remaining space
|
|
||||||
*/
|
|
||||||
.stretch {
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Set vertical spacing for header
|
|
||||||
*/
|
|
||||||
.header & {
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
/* [tablet portait]: Increase vertical spacing */
|
|
||||||
@include break-at-device(tablet portrait) {
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet portait+]: Account for missing menu icon */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
padding: 0 (24px - 8px) 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Title with ellipsis on overflow
|
|
||||||
*/
|
|
||||||
.title {
|
|
||||||
display: table-cell;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Increase header font size
|
|
||||||
*/
|
|
||||||
.header & {
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 13px 0;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Slightly larger typography in header */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Main content
|
|
||||||
*/
|
|
||||||
.main {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Base typography
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Default font styles
|
|
||||||
*/
|
|
||||||
body, input {
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
/* Enable font-smoothing in Webkit and FF */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Use system fonts, if browser doesn't support webfonts
|
|
||||||
*/
|
|
||||||
.no-fontface & {
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Proportional fonts
|
|
||||||
*/
|
|
||||||
pre, code {
|
|
||||||
font-family: 'Courier New', 'Courier', monospace;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Use system fonts, if browser doesn't support webfonts
|
|
||||||
*/
|
|
||||||
.no-fontface & {
|
|
||||||
font-family: 'Courier New', 'Courier', monospace;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Drawer appearance
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Drawer container
|
|
||||||
*/
|
|
||||||
.drawer {
|
|
||||||
|
|
||||||
/* [tablet landscape-]: Light gray background */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Color links
|
|
||||||
*/
|
|
||||||
.toc a {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Current active element
|
|
||||||
*/
|
|
||||||
&.current {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hovered link
|
|
||||||
*/
|
|
||||||
&:hover, &:focus {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Color anchors menu
|
|
||||||
*/
|
|
||||||
.anchor a {
|
|
||||||
border-left: 2px solid $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Main sections
|
|
||||||
*/
|
|
||||||
.section {
|
|
||||||
color: $black-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project information
|
|
||||||
*/
|
|
||||||
.project {
|
|
||||||
|
|
||||||
/* [tablet landscape-]: Add drop shadow */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
@include drop-shadow(1);
|
|
||||||
|
|
||||||
background: $primary;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add status bar overlay for iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone &:before {
|
|
||||||
background: $black-lightest;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project logo
|
|
||||||
*/
|
|
||||||
.logo img {
|
|
||||||
background: $white;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Scale logo on hover
|
|
||||||
*/
|
|
||||||
&:hover .logo img,
|
|
||||||
&:focus .logo img {
|
|
||||||
@include drop-shadow(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Repository buttons
|
|
||||||
*/
|
|
||||||
.repo a {
|
|
||||||
background: $accent;
|
|
||||||
color: $white;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hovered button
|
|
||||||
*/
|
|
||||||
&:hover, &:focus {
|
|
||||||
@include drop-shadow(2);
|
|
||||||
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stars
|
|
||||||
*/
|
|
||||||
.count {
|
|
||||||
background: $black-lighter;
|
|
||||||
color: $white;
|
|
||||||
border-radius: 0px 3px 3px 0px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Star bubble
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
border-width: 15px 5px 15px 0;
|
|
||||||
border-color: transparent $black-lighter;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,305 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Drawer layout
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Drawer container
|
|
||||||
*/
|
|
||||||
.drawer {
|
|
||||||
width: 262px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.0em;
|
|
||||||
|
|
||||||
/* [tablet landscape-]: Fixed positioning */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 5;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Inline with content */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
position: static;
|
|
||||||
float: left;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 96px;
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hack [iOS]: Mitigate scrolling of parent container on boundaries */
|
|
||||||
.ios & {
|
|
||||||
overflow: scroll;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links to articles
|
|
||||||
*/
|
|
||||||
.toc li a {
|
|
||||||
display: block;
|
|
||||||
padding: 14.5px 24px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links to anchors
|
|
||||||
*/
|
|
||||||
.toc li.anchor a {
|
|
||||||
margin-left: 12px;
|
|
||||||
padding: 10px 24px 10px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Nested links and anchors
|
|
||||||
*/
|
|
||||||
.toc li ul {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Nested anchors
|
|
||||||
*/
|
|
||||||
.current + ul {
|
|
||||||
margin-bottom: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Main sections
|
|
||||||
*/
|
|
||||||
.section {
|
|
||||||
display: block;
|
|
||||||
padding: 14.5px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Scrollable container
|
|
||||||
*/
|
|
||||||
.scrollable {
|
|
||||||
top: 104px;
|
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Revert fixed positioning */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Leave room for status bar in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
|
|
||||||
/* [orientation: portrait]: Account for status bar in portrait mode */
|
|
||||||
@include break-at-orientation(portrait) {
|
|
||||||
top: (104px + 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Content wrapper
|
|
||||||
*/
|
|
||||||
.wrapper {
|
|
||||||
height: auto;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add spacing at top and bottom of separator
|
|
||||||
*/
|
|
||||||
hr {
|
|
||||||
margin: 12px 0;
|
|
||||||
|
|
||||||
/* [screen+]: Shorten separator */
|
|
||||||
@include break-from-device(screen) {
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hack [IE]: Left-align horizontal rule */
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add spacing at top and bottom of top level navigation
|
|
||||||
*/
|
|
||||||
.toc {
|
|
||||||
margin: 12px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project information
|
|
||||||
*/
|
|
||||||
.project {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Leave room for status bar in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
|
|
||||||
/* [orientation: portrait]: Account for status bar in portrait mode */
|
|
||||||
@include break-at-orientation(portrait) {
|
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add status bar overlay
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 4;
|
|
||||||
width: 100%;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project banner
|
|
||||||
*/
|
|
||||||
.banner {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
height: 104px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project logo
|
|
||||||
*/
|
|
||||||
.logo {
|
|
||||||
display: table-cell;
|
|
||||||
width: 64px;
|
|
||||||
padding-right: 12px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project logo image
|
|
||||||
*/
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project name
|
|
||||||
*/
|
|
||||||
.name {
|
|
||||||
display: table-cell;
|
|
||||||
padding-left: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.25em;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Slightly larger project name */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
margin: 26px 0 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Shrink font, if a logo is given.
|
|
||||||
*/
|
|
||||||
.logo + .name {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Repository
|
|
||||||
*/
|
|
||||||
.repo {
|
|
||||||
margin: 24px 0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Inline buttons
|
|
||||||
*/
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
padding-right: 12px;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* No padding on last button
|
|
||||||
*/
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Buttons
|
|
||||||
*/
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 10px 0px 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Slightly larger icons
|
|
||||||
*/
|
|
||||||
.icon {
|
|
||||||
font-size: 18px;
|
|
||||||
vertical-align: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Stars
|
|
||||||
*/
|
|
||||||
.count {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
padding: 0px 8px 0 4px;
|
|
||||||
margin: 0 -10px 0 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Star bubble
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide count, in case javascript is not available.
|
|
||||||
*/
|
|
||||||
.no-js & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Search animation
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Animate header bar in offset and opacity
|
|
||||||
*/
|
|
||||||
.bar {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
transition: opacity .2s cubic-bezier(.75, 0, .25, 1),
|
|
||||||
transform .4s cubic-bezier(.75, 0, .25, 1);
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .header &,
|
|
||||||
.toggle-search & {
|
|
||||||
transform: translate3d(0, -56px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search animations
|
|
||||||
*/
|
|
||||||
&.search {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide reset button by default
|
|
||||||
*/
|
|
||||||
.button-reset {
|
|
||||||
transform: scale(0.5, 0.5);
|
|
||||||
transition: opacity .4s cubic-bezier(.1, .7, .1, 1),
|
|
||||||
transform .4s cubic-bezier(.1, .7, .1, 1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show reset button if search is not empty
|
|
||||||
*/
|
|
||||||
&.non-empty .button-reset {
|
|
||||||
transform: scale(1.0, 1.0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search results
|
|
||||||
*/
|
|
||||||
.results {
|
|
||||||
transition: opacity .3s .1s,
|
|
||||||
width .0s .4s,
|
|
||||||
height .0s .4s;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .main &,
|
|
||||||
.toggle-search & {
|
|
||||||
transition: opacity .4s,
|
|
||||||
width .0s,
|
|
||||||
height .0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search result item link
|
|
||||||
*/
|
|
||||||
.list a {
|
|
||||||
transition: background .25s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Just hide and show bars, if browser doesn't support 3D transforms
|
|
||||||
*/
|
|
||||||
.no-csstransforms3d {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show default bar
|
|
||||||
*/
|
|
||||||
.bar.default {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide search bar
|
|
||||||
*/
|
|
||||||
.bar.search {
|
|
||||||
display: none;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .header,
|
|
||||||
.toggle-search {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide default bar
|
|
||||||
*/
|
|
||||||
.bar.default {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show search bar
|
|
||||||
*/
|
|
||||||
.bar.search {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Search appearance
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search bar
|
|
||||||
*/
|
|
||||||
.bar.search {
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search input
|
|
||||||
*/
|
|
||||||
.query {
|
|
||||||
background: transparent;
|
|
||||||
color: $black;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search input placeholder
|
|
||||||
*/
|
|
||||||
@include placeholder {
|
|
||||||
color: $black-lighter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Pushed/clicked icon
|
|
||||||
*/
|
|
||||||
.button .icon:active {
|
|
||||||
background: $black-lightest;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search results
|
|
||||||
*/
|
|
||||||
.results {
|
|
||||||
@include drop-shadow(2);
|
|
||||||
|
|
||||||
background: $white;
|
|
||||||
color: $black;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .main &,
|
|
||||||
.toggle-search & {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search meta data
|
|
||||||
*/
|
|
||||||
.meta {
|
|
||||||
background: $primary;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search result item link
|
|
||||||
*/
|
|
||||||
.list a {
|
|
||||||
border-bottom: 1px solid $black-lightest;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove border on last element
|
|
||||||
*/
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active item link
|
|
||||||
*/
|
|
||||||
&:active {
|
|
||||||
background: $black-lightest;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article link
|
|
||||||
*/
|
|
||||||
.result span {
|
|
||||||
color: $black-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search bar
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .header,
|
|
||||||
.toggle-search .header {
|
|
||||||
background: $white;
|
|
||||||
color: $black-light;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add darker status bar overlay in search mode
|
|
||||||
*/
|
|
||||||
&:before {
|
|
||||||
background: $black-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Fade out default header bar
|
|
||||||
*/
|
|
||||||
.bar.default {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Fade in search header bar
|
|
||||||
*/
|
|
||||||
.bar.search {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Search layout
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search bar
|
|
||||||
*/
|
|
||||||
.bar.search {
|
|
||||||
margin-top: 8px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search input
|
|
||||||
*/
|
|
||||||
.query {
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 13px 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Slightly larger typo */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hack [IE]: Hide redundant clear button */
|
|
||||||
&::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search results
|
|
||||||
*/
|
|
||||||
.results {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 2;
|
|
||||||
overflow-y: scroll;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Limit results to five entries */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
height: auto;
|
|
||||||
top: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Scrollable container
|
|
||||||
*/
|
|
||||||
.scrollable {
|
|
||||||
top: 56px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase vertical spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
top: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* [tablet landscape+]: Limit results to five entries */
|
|
||||||
@include break-from-device(tablet landscape) {
|
|
||||||
position: static;
|
|
||||||
max-height: 413px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Leave room for status bar in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
|
|
||||||
/* [orientation: portrait]: Account for status bar in portrait mode */
|
|
||||||
@include break-at-orientation(portrait) {
|
|
||||||
top: (56px + 20px);
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase vertical spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
top: (64px + 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .main &,
|
|
||||||
.toggle-search & {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Hack [Firefox]: div doesn't collapse, unless this is applied */
|
|
||||||
overflow-y: visible;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Stretch to viewport */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search meta data
|
|
||||||
*/
|
|
||||||
.meta {
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Number of results
|
|
||||||
*/
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
font-size: 11px;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase vertical spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
padding: 16px 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search result item link
|
|
||||||
*/
|
|
||||||
.list a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search result item
|
|
||||||
*/
|
|
||||||
.result {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding: 12px 16px 16px;
|
|
||||||
|
|
||||||
/* [tablet portait+]: Increase vertical spacing */
|
|
||||||
@include break-from-device(tablet portrait) {
|
|
||||||
padding: 16px 24px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article title
|
|
||||||
*/
|
|
||||||
h1 {
|
|
||||||
line-height: 24px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article link
|
|
||||||
*/
|
|
||||||
span {
|
|
||||||
font-size: 12px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Switch visibility, if browser doesn't support 3D transforms
|
|
||||||
*/
|
|
||||||
.no-csstransforms3d {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide search results
|
|
||||||
*/
|
|
||||||
.results {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Active search mode
|
|
||||||
*/
|
|
||||||
#toggle-search:checked ~ .main,
|
|
||||||
.toggle-search {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show search results
|
|
||||||
*/
|
|
||||||
.results {
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search meta data
|
|
||||||
*/
|
|
||||||
.meta {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
@ -1,221 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
||||||
*
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
* of this software and associated documentation files (the "Software"), to
|
|
||||||
* deal in the Software without restriction, including without limitation the
|
|
||||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
|
||||||
* sell copies of the Software, and to permit persons to whom the Software is
|
|
||||||
* furnished to do so, subject to the following conditions:
|
|
||||||
*
|
|
||||||
* The above copyright notice and this permission notice shall be included in
|
|
||||||
* all copies or substantial portions of the Software.
|
|
||||||
*
|
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
|
||||||
* IN THE SOFTWARE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Dependencies
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@import "bourbon";
|
|
||||||
@import "quantum-colors";
|
|
||||||
@import "quantum-shadows";
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Application
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
@import "palette";
|
|
||||||
|
|
||||||
@import "mixins/break";
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
|
||||||
* Palette
|
|
||||||
* ------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Build primary palette
|
|
||||||
*/
|
|
||||||
@each $name, $color in (
|
|
||||||
'red': $red-400,
|
|
||||||
'pink': $pink-500,
|
|
||||||
'purple': $purple-400,
|
|
||||||
'deep-purple': $deep-purple-400,
|
|
||||||
'indigo': $indigo-500,
|
|
||||||
'blue': $blue-500,
|
|
||||||
'light-blue': $light-blue-500,
|
|
||||||
'cyan': $cyan-500,
|
|
||||||
'teal': $teal-500,
|
|
||||||
'green': $green-500,
|
|
||||||
'light-green': $light-green-600,
|
|
||||||
'lime': $lime-600,
|
|
||||||
'yellow': $yellow-800,
|
|
||||||
'amber': $amber-600,
|
|
||||||
'orange': $orange-600,
|
|
||||||
'deep-orange': $deep-orange-400,
|
|
||||||
'brown': $brown-500,
|
|
||||||
'grey': $grey-600,
|
|
||||||
'blue-grey': $blue-grey-600
|
|
||||||
) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Device specific background hacks related to rubberband
|
|
||||||
*/
|
|
||||||
.palette-primary-#{$name} {
|
|
||||||
|
|
||||||
/* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
|
|
||||||
@supports (-webkit-appearance: none) {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Application header and footer
|
|
||||||
*/
|
|
||||||
.header, .footer {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Drawer container
|
|
||||||
*/
|
|
||||||
.drawer {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Color links
|
|
||||||
*/
|
|
||||||
.toc a {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Current active element
|
|
||||||
*/
|
|
||||||
&.current {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hovered link
|
|
||||||
*/
|
|
||||||
&:hover, &:focus {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Color anchors menu
|
|
||||||
*/
|
|
||||||
.anchor a {
|
|
||||||
border-left: 2px solid $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Project information
|
|
||||||
*/
|
|
||||||
.project {
|
|
||||||
|
|
||||||
/* [tablet landscape-]: Set background color */
|
|
||||||
@include break-to-device(tablet landscape) {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article
|
|
||||||
*/
|
|
||||||
.article {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Differing top and bottom rubberband backgrounds in iOS web application
|
|
||||||
*/
|
|
||||||
.ios.standalone & {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom, $white 50%, $color 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Headlines, chapters, links and inline code
|
|
||||||
*/
|
|
||||||
h1, h2, a, code {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Light permalinks
|
|
||||||
*/
|
|
||||||
.headerlink {
|
|
||||||
color: $black-lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Data table headings
|
|
||||||
*/
|
|
||||||
table th {
|
|
||||||
background: mix($color, $white, 75%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Search meta data
|
|
||||||
*/
|
|
||||||
.results .meta {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Build accent palette
|
|
||||||
*/
|
|
||||||
@each $name, $color in (
|
|
||||||
'red': $red-a400,
|
|
||||||
'pink': $pink-a400,
|
|
||||||
'purple': $purple-a200,
|
|
||||||
'deep-purple': $deep-purple-a200,
|
|
||||||
'indigo': $indigo-a200,
|
|
||||||
'blue': $blue-a200,
|
|
||||||
'light-blue': $light-blue-a700,
|
|
||||||
'cyan': $cyan-a700,
|
|
||||||
'teal': $teal-a700,
|
|
||||||
'green': $green-a700,
|
|
||||||
'light-green': $light-green-a700,
|
|
||||||
'lime': $lime-a700,
|
|
||||||
'yellow': $yellow-a700,
|
|
||||||
'amber': $amber-a700,
|
|
||||||
'orange': $orange-a400,
|
|
||||||
'deep-orange': $deep-orange-a200
|
|
||||||
) {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Device specific background hacks related to rubberband
|
|
||||||
*/
|
|
||||||
.palette-accent-#{$name} {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Article
|
|
||||||
*/
|
|
||||||
.article {
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hovered and focused links
|
|
||||||
*/
|
|
||||||
a:hover,
|
|
||||||
a:focus {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Repository buttons
|
|
||||||
*/
|
|
||||||
.repo a {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
235
src/base.html
235
src/base.html
@ -1,3 +1,25 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
|
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
|
||||||
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
|
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
|
||||||
@ -39,44 +61,19 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<!-- Open graph tags -->
|
|
||||||
<meta property="og:url" content="{{ canonical_url }}" />
|
|
||||||
<meta property="og:title" content="{{ site_name }}"/>
|
|
||||||
<meta property="og:image"
|
|
||||||
content="{{ canonical_url }}/{{ base_url }}/{{ config.extra.logo }}" />
|
|
||||||
|
|
||||||
<!-- Web application capability on iOS -->
|
|
||||||
<meta name="apple-mobile-web-app-title" content="{{ site_name }}" />
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style"
|
|
||||||
content="black-translucent" />
|
|
||||||
|
|
||||||
<!-- Web application icon on iOS -->
|
|
||||||
{% if config.extra.logo %}
|
|
||||||
<link rel="apple-touch-icon"
|
|
||||||
href="{{ base_url }}/{{ config.extra.logo }}">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Favicon -->
|
|
||||||
{% set icon = icon | default("assets/images/favicon.ico") %}
|
|
||||||
<link rel="shortcut icon" type="image/x-icon"
|
|
||||||
href="{{ base_url }}/{{ icon }}" />
|
|
||||||
<link rel="icon" type="image/x-icon"
|
|
||||||
href="{{ base_url }}/{{ icon }}" />
|
|
||||||
|
|
||||||
<!-- Configure icons (placed here to omit issues with subdirectories) -->
|
<!-- Configure icons (placed here to omit issues with subdirectories) -->
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Icon';
|
font-family: "Icon";
|
||||||
src: url('{{ base_url }}/assets/fonts/icon.eot?52m981');
|
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
|
||||||
src: url('{{ base_url }}/assets/fonts/icon.eot?#iefix52m981')
|
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
|
||||||
format('embedded-opentype'),
|
format("embedded-opentype"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.woff?52m981')
|
url({{ base_url }}/assets/fonts/icon.woff?52m981)
|
||||||
format('woff'),
|
format("woff"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.ttf?52m981')
|
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
|
||||||
format('truetype'),
|
format("truetype"),
|
||||||
url('{{ base_url }}/assets/fonts/icon.svg?52m981#icon')
|
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
|
||||||
format('svg');
|
format("svg");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@ -86,28 +83,9 @@
|
|||||||
<link rel="stylesheet" type="text/css"
|
<link rel="stylesheet" type="text/css"
|
||||||
href="{{ base_url }}/assets/stylesheets/application.css" />
|
href="{{ base_url }}/assets/stylesheets/application.css" />
|
||||||
|
|
||||||
<!-- Extra palettes -->
|
<!-- Web fonts -->
|
||||||
{% if config.extra.palette %}
|
|
||||||
<link rel="stylesheet" type="text/css"
|
<link rel="stylesheet" type="text/css"
|
||||||
href="{{ base_url }}/assets/stylesheets/palettes.css" />
|
href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono" />
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Configure webfonts -->
|
|
||||||
{% if config.extra.font != "none" %}
|
|
||||||
{% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
|
|
||||||
{% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
|
|
||||||
{% set font = text + ':400,700|' + code | replace(' ', '+') %}
|
|
||||||
<link rel="stylesheet" type="text/css"
|
|
||||||
href="//fonts.googleapis.com/css?family={{ font }}" />
|
|
||||||
<style>
|
|
||||||
body, input {
|
|
||||||
font-family: '{{ text }}', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
pre, code {
|
|
||||||
font-family: '{{ code }}', 'Courier New', 'Courier', monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Custom stylesheets -->
|
<!-- Custom stylesheets -->
|
||||||
{% for path in extra_css %}
|
{% for path in extra_css %}
|
||||||
@ -116,51 +94,25 @@
|
|||||||
|
|
||||||
<!-- Modernizr -->
|
<!-- Modernizr -->
|
||||||
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
|
||||||
|
|
||||||
<!-- Custom header -->
|
|
||||||
{% block extrahead %}{% endblock %}
|
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
<!-- Define palette -->
|
|
||||||
{% set palette = config.extra.get("palette", {}) %}
|
|
||||||
{% set primary = palette.primary | replace(' ', '-') | lower %}
|
|
||||||
{% set accent = palette.accent | replace(' ', '-') | lower %}
|
|
||||||
<body class="
|
|
||||||
{% if primary %}palette-primary-{{ primary }}{% endif %}
|
|
||||||
{% if accent %}palette-accent-{{ accent }}{% endif %}
|
|
||||||
">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Sadly the jinja template engine is not very flexible - it doesn't support
|
|
||||||
regular expressions out-of-the-box. Since there might be a slash at the
|
|
||||||
end of the repository name, we just do a string comparison and kill it.
|
|
||||||
-->
|
|
||||||
{% if repo_name == "GitHub" and repo_url %}
|
|
||||||
{% set repo_id = repo_url | replace("https://github.com/", "") %}
|
|
||||||
{% if repo_id[-1:] == "/" %}
|
|
||||||
{% set repo_id = repo_id[:-1] %}
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Backdrop -->
|
|
||||||
<div class="backdrop">
|
|
||||||
<div class="backdrop-paper"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- State toggles -->
|
<!-- State toggles -->
|
||||||
<input class="toggle" type="checkbox" id="toggle-drawer" />
|
<input class="md-toggle" type="checkbox" id="md-toggle-drawer" />
|
||||||
<input class="toggle" type="checkbox" id="toggle-search" />
|
<input class="md-toggle" type="checkbox" id="md-toggle-search" />
|
||||||
|
|
||||||
<!-- Overlay for expanded drawer -->
|
<!-- Overlay for expanded drawer -->
|
||||||
<label class="toggle-button overlay" for="toggle-drawer"></label>
|
<label class="md-overlay" for="md-toggle-drawer"></label>
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Application header -->
|
||||||
<header class="header">
|
|
||||||
{% include "header.html" %}
|
{% include "header.html" %}
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Main content -->
|
<!-- Container, necessary for web-application context -->
|
||||||
<main class="main">
|
<div class="md-container">
|
||||||
|
|
||||||
|
<!-- Main container -->
|
||||||
|
<main class="md-main">
|
||||||
|
<div class="md-grid md-main__inner">
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
This is a nasty hack that checks whether the content contains a
|
This is a nasty hack that checks whether the content contains a
|
||||||
@ -170,104 +122,51 @@
|
|||||||
-->
|
-->
|
||||||
{% set h1 = "\x3ch1 id=" in content %}
|
{% set h1 = "\x3ch1 id=" in content %}
|
||||||
|
|
||||||
<!-- Drawer with navigation -->
|
<!-- Main navigation -->
|
||||||
<div class="drawer">
|
{% if nav %}
|
||||||
{% include "drawer.html" %}
|
{% include "nav.html" %}
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Article -->
|
|
||||||
<article class="article">
|
|
||||||
<div class="wrapper">
|
|
||||||
|
|
||||||
<!-- Headline -->
|
|
||||||
{% if not h1 %}
|
|
||||||
<h1>{{ page_title | default(site_name, true)}}</h1>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- Article content -->
|
<!-- Table of contents -->
|
||||||
|
{% if toc %}
|
||||||
|
{% include "toc.html" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Article -->
|
||||||
|
<div class="md-content md-content--typeset">
|
||||||
|
<article class="md-content__inner">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
<!-- Copyright and theme information -->
|
<!-- Copyright and theme information -->
|
||||||
<aside class="copyright" role="note">
|
<hr />
|
||||||
|
<small class="md-content__copyright">
|
||||||
{% if copyright %}
|
{% if copyright %}
|
||||||
{{ copyright }} –
|
{{ copyright }} –
|
||||||
{% endif %}
|
{% endif %}
|
||||||
Documentation built with
|
This document was created with
|
||||||
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
|
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
|
||||||
using the
|
and the
|
||||||
<a href="http://squidfunk.github.io/mkdocs-material/"
|
<a href="http://squidfunk.github.io/mkdocs-material/"
|
||||||
target="_blank">
|
target="_blank">Material</a>
|
||||||
Material
|
|
||||||
</a>
|
|
||||||
theme.
|
theme.
|
||||||
</aside>
|
</small>
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
{% block footer %}
|
|
||||||
<footer class="footer">
|
|
||||||
{% include "footer.html" %}
|
|
||||||
</footer>
|
|
||||||
{% endblock %}
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Search results -->
|
|
||||||
<div class="results" role="status" aria-live="polite">
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="meta"></div>
|
|
||||||
<div class="list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Application footer -->
|
||||||
|
{% include "footer.html" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Theme-related and custom javascripts -->
|
<!-- Theme-related and custom javascripts -->
|
||||||
<script>
|
<script>
|
||||||
var base_url = '{{ base_url }}';
|
var base_url = '{{ base_url }}';
|
||||||
var repo_id = '{{ repo_id }}';
|
var repo_url = '{{ repo_url }}';
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
||||||
{% for path in extra_javascript %}
|
{% for path in extra_javascript %}
|
||||||
<script src="{{ path }}"></script>
|
<script src="{{ path }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<!-- Google Analytics -->
|
|
||||||
{% if google_analytics %}
|
|
||||||
<script>
|
|
||||||
(function(i,s,o,g,r,a,m){
|
|
||||||
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
|
|
||||||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
|
|
||||||
m.parentNode.insertBefore(a,m)
|
|
||||||
})(window, document,
|
|
||||||
'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
||||||
|
|
||||||
/* General initialization */
|
|
||||||
ga('create', '{{ google_analytics[0] }}', '{{ google_analytics[1] }}');
|
|
||||||
ga('set', 'anonymizeIp', true);
|
|
||||||
ga('send', 'pageview');
|
|
||||||
|
|
||||||
/* Track outbound links */
|
|
||||||
var buttons = document.querySelectorAll('a');
|
|
||||||
Array.prototype.map.call(buttons, function(item) {
|
|
||||||
if (item.host != document.location.host) {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
var action = item.getAttribute('data-action') || 'follow';
|
|
||||||
ga('send', 'event', 'outbound', action, item.href);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Register handler to log search on blur */
|
|
||||||
var query = document.querySelector('.query');
|
|
||||||
query.addEventListener('blur', function() {
|
|
||||||
if (this.value) {
|
|
||||||
var path = document.location.pathname;
|
|
||||||
ga('send', 'pageview', path + '?q=' + this.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,96 +0,0 @@
|
|||||||
<!-- Navigation -->
|
|
||||||
<nav aria-label="Navigation">
|
|
||||||
{% set home = repo_url | default("/", true) %}
|
|
||||||
|
|
||||||
<!-- Project information -->
|
|
||||||
<a href="{{ home }}" class="project">
|
|
||||||
|
|
||||||
<!-- Name and logo -->
|
|
||||||
<div class="banner">
|
|
||||||
|
|
||||||
<!-- Version -->
|
|
||||||
{% if config.extra.logo %}
|
|
||||||
<div class="logo">
|
|
||||||
<img src="{{ base_url }}/{{ config.extra.logo }}" />
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Project name and verison -->
|
|
||||||
<div class="name">
|
|
||||||
<strong>{{ site_name }} {{ config.extra.version }}</strong>
|
|
||||||
|
|
||||||
<!-- Project repository name -->
|
|
||||||
{% if repo_id %}
|
|
||||||
<br />
|
|
||||||
{{ repo_id }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Repository and table of contents -->
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="wrapper">
|
|
||||||
|
|
||||||
<!-- Repository -->
|
|
||||||
{% if repo_name == "GitHub" and repo_url %}
|
|
||||||
<ul class="repo">
|
|
||||||
<li class="repo-download">
|
|
||||||
{% set version = config.extra.version | default("master") %}
|
|
||||||
<a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank"
|
|
||||||
title="Download" data-action="download">
|
|
||||||
<i class="icon icon-download"></i> Download
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="repo-stars">
|
|
||||||
<a href="{{ repo_url }}/stargazers" target="_blank"
|
|
||||||
title="Stargazers" data-action="star">
|
|
||||||
<i class="icon icon-star"></i> Stars
|
|
||||||
<span class="count">–</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr />
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Table of contents -->
|
|
||||||
<div class="toc">
|
|
||||||
<ul>
|
|
||||||
{% for nav_item in nav %}
|
|
||||||
{% include "nav.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Author-related links -->
|
|
||||||
{% if config.extra.author %}
|
|
||||||
<hr />
|
|
||||||
<span class="section">The author</span>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<!-- Twitter -->
|
|
||||||
{% if config.extra.author.twitter %}
|
|
||||||
{% set author = config.extra.author.twitter %}
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/{{ author }}" target="_blank"
|
|
||||||
title="@{{ author }} on Twitter">
|
|
||||||
@{{ author }} on Twitter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- GitHub -->
|
|
||||||
{% if config.extra.author.github %}
|
|
||||||
{% set author = config.extra.author.github %}
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/{{ author }}" target="_blank"
|
|
||||||
title="@{{ author }} on GitHub">
|
|
||||||
@{{ author }} on GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
101
src/footer.html
101
src/footer.html
@ -1,48 +1,73 @@
|
|||||||
<!-- Previous and next page -->
|
<!--
|
||||||
{% if include_next_prev %}
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
<nav class="pagination" aria-label="Footer">
|
|
||||||
|
|
||||||
<!-- Previous page -->
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
<div class="previous">
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Application footer -->
|
||||||
|
<footer class="md-footer">
|
||||||
|
|
||||||
|
<!-- Link to previous and/or next page -->
|
||||||
|
{% if previous_page or next_page %}
|
||||||
|
<div class="md-footer-pagination">
|
||||||
|
<nav class="md-grid md-footer-nav">
|
||||||
|
|
||||||
|
<!-- Link to previous page -->
|
||||||
{% if previous_page %}
|
{% if previous_page %}
|
||||||
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
|
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}"
|
||||||
<span class="direction">
|
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
|
||||||
{{ config.extra.get("i18n", {}).prev | default("Previous") }}
|
rel="prev">
|
||||||
</span>
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<div class="page">
|
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
|
||||||
<div class="button button-previous"
|
|
||||||
role="button" aria-label="Previous">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stretch">
|
<div class="md-flex__cell md-flex__cell--stretch
|
||||||
<div class="title">
|
md-footer-nav__title">
|
||||||
|
<span class="md-flex__ellipsis">
|
||||||
|
<span class="md-footer-nav__direction">
|
||||||
|
Previous
|
||||||
|
</span>
|
||||||
{{ previous_page.title }}
|
{{ previous_page.title }}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Next page -->
|
|
||||||
<div class="next">
|
|
||||||
{% if next_page %}
|
|
||||||
<a href="{{ next_page.url }}" title="{{ next_page.title }}">
|
|
||||||
<span class="direction">
|
|
||||||
{{ config.extra.get("i18n", {}).next | default("Next") }}
|
|
||||||
</span>
|
</span>
|
||||||
<div class="page">
|
|
||||||
<div class="stretch">
|
|
||||||
<div class="title">
|
|
||||||
{{ next_page.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="button button-next" role="button" aria-label="Next">
|
|
||||||
<i class="icon icon-forward"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Link to next page -->
|
||||||
|
{% if next_page %}
|
||||||
|
<a href="{{ next_page.url }}" title="{{ next_page.title }}"
|
||||||
|
class="md-flex md-footer-nav__link md-footer-nav__link--next"
|
||||||
|
rel="next">
|
||||||
|
<div class="md-flex__cell md-flex__cell--stretch
|
||||||
|
md-footer-nav__title">
|
||||||
|
<span class="md-flex__ellipsis">
|
||||||
|
<span class="md-footer-nav__direction">
|
||||||
|
Next
|
||||||
|
</span>
|
||||||
|
{{ next_page.title }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<i class="md-icon md-icon--forward md-footer-nav__icon"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</footer>
|
||||||
122
src/header.html
122
src/header.html
@ -1,84 +1,60 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Application header -->
|
||||||
|
<header class="md-header">
|
||||||
|
|
||||||
<!-- Top-level navigation -->
|
<!-- Top-level navigation -->
|
||||||
<nav aria-label="Header">
|
<nav class="md-grid md-header-nav">
|
||||||
|
<div class="md-flex">
|
||||||
|
|
||||||
<!-- Default bar -->
|
<!-- Button to toggle drawer -->
|
||||||
<div class="bar default">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<label class="md-icon md-icon--menu md-header-nav__icon"
|
||||||
<!-- Toggle drawer -->
|
for="md-toggle-drawer"></label>
|
||||||
<div class="button button-menu" role="button" aria-label="Menu">
|
|
||||||
<label class="toggle-button icon icon-menu" for="toggle-drawer">
|
|
||||||
<span></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Page title -->
|
<!-- Header title -->
|
||||||
<div class="stretch">
|
<div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
|
||||||
<div class="title">
|
<span class="md-flex__ellipsis">
|
||||||
{% if current_page %}
|
|
||||||
<span class="path">
|
|
||||||
{% for doc in current_page.ancestors %}
|
|
||||||
{% if doc.link %}
|
|
||||||
<a href="{{ doc.link | e }}">{{ doc.title }}</a>
|
|
||||||
<i class="icon icon-link"></i>
|
|
||||||
{% else %}
|
|
||||||
{{ doc.title }} <i class="icon icon-link"></i>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
{{ page_title | default(site_name, true) }}
|
{{ page_title | default(site_name, true) }}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Button to open search -->
|
||||||
{% if config.extra.get("author", {}).twitter %}
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
{% set author = config.extra.author.twitter %}
|
<label class="md-icon md-icon--search md-header-nav__icon"
|
||||||
<div class="button button-twitter" role="button" aria-label="Twitter">
|
for="md-toggle-search"></label>
|
||||||
<a href="https://twitter.com/{{ author }}"
|
|
||||||
title="@{{ author }} on Twitter" target="_blank"
|
|
||||||
class="toggle-button icon icon-twitter"></a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- GitHub -->
|
|
||||||
{% if config.extra.get("author", {}).github %}
|
|
||||||
{% set author = config.extra.author.github %}
|
|
||||||
<div class="button button-github" role="button" aria-label="GitHub">
|
|
||||||
<a href="https://github.com/{{ author }}"
|
|
||||||
title="@{{ author }} on GitHub" target="_blank"
|
|
||||||
class="toggle-button icon icon-github"></a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Open search -->
|
|
||||||
<div class="button button-search" role="button" aria-label="Search">
|
|
||||||
<label class="toggle-button icon icon-search" title="Search"
|
|
||||||
for="toggle-search"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Search bar -->
|
<!-- Link to GitHub profile -->
|
||||||
<div class="bar search">
|
<!-- <div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<a href="{{ repo_url }}" title="GitHub" class="md-header-nav__source">
|
||||||
<!-- Close search -->
|
<i class="md-icon md-icon--github md-header-nav__icon"></i>
|
||||||
<div class="button button-close" role="button" aria-label="Close">
|
<span class="md-header-nav__icon-title">
|
||||||
<label class="toggle-button icon icon-back"
|
GitHub <small>135 Stars</small>
|
||||||
for="toggle-search"></label>
|
</span>
|
||||||
</div>
|
</a>
|
||||||
|
</div> -->
|
||||||
<!-- Search form -->
|
|
||||||
<div class="stretch">
|
|
||||||
<div class="field">
|
|
||||||
<input class="query" type="text" placeholder="Search"
|
|
||||||
autocapitalize="off" autocorrect="off" autocomplete="off"
|
|
||||||
spellcheck="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Empty search -->
|
|
||||||
<div class="button button-reset" role="button" aria-label="Search">
|
|
||||||
<button class="toggle-button icon icon-close"
|
|
||||||
id="reset-search"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
68
src/nav-item.html
Normal file
68
src/nav-item.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Main navigation item with nested items -->
|
||||||
|
{% if nav_item.children %}
|
||||||
|
<li class="md-nav__item">
|
||||||
|
|
||||||
|
<!-- Active checkbox expands items contained within section -->
|
||||||
|
{% if nav_item.active %}
|
||||||
|
<input class="md-toggle md-nav__toggle" type="checkbox"
|
||||||
|
id="{{ path }}" checked />
|
||||||
|
{% else %}
|
||||||
|
<input class="md-toggle md-nav__toggle" type="checkbox"
|
||||||
|
id="{{ path }}" />
|
||||||
|
{% endif %}
|
||||||
|
<label class="md-nav__link" for="{{ path }}">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
<!--
|
||||||
|
<i class="md-icon md-icon--link md-nav__icon"></i>
|
||||||
|
-->
|
||||||
|
</label>
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
|
||||||
|
<!-- Render nested item list -->
|
||||||
|
{% for nav_item in nav_item.children %}
|
||||||
|
{% set temp = path %}
|
||||||
|
{% set path = path + "-" + loop.index | string %}
|
||||||
|
{% include "nav-item.html" %}
|
||||||
|
{% set path = temp %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Main navigation item -->
|
||||||
|
{% else %}
|
||||||
|
<li class="md-nav__item">
|
||||||
|
{% if nav_item.active %}
|
||||||
|
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
|
||||||
|
class="md-nav__link md-nav__link--active">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
|
||||||
|
class="md-nav__link">
|
||||||
|
{{ nav_item.title }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
77
src/nav.html
77
src/nav.html
@ -1,51 +1,36 @@
|
|||||||
<!-- Render sections -->
|
|
||||||
{% if nav_item.children %}
|
|
||||||
<li>
|
|
||||||
<span class="section">{{ nav_item.title }}</span>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<!-- Render pages of section -->
|
|
||||||
{% for nav_item in nav_item.children %}
|
|
||||||
{% include "nav.html" %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- Render page link -->
|
|
||||||
{% else %}
|
|
||||||
<li>
|
|
||||||
<a class="{% if nav_item.active %}current{% endif %}"
|
|
||||||
title="{{ nav_item.title }}" href="{{ nav_item.url }}" >
|
|
||||||
{{ nav_item.title }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Expand active pages -->
|
|
||||||
{% if nav_item == current_page %}
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
The top-level anchor must be skipped if the article contains a h1
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
headline, since it would be redundant to the link to the current page
|
|
||||||
that is located just above the anchor. Therefore we directly continue
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
with the children of the anchor.
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
-->
|
-->
|
||||||
{% if h1 %}
|
|
||||||
{% set toc = (toc | first).children %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Render anchors of active page -->
|
<!-- Main navigation -->
|
||||||
{% if toc and (toc | first) %}
|
<div class="md-sidebar md-sidebar--primary md-js__sidebar">
|
||||||
<ul>
|
<div class="md-sidebar__scrollwrap">
|
||||||
{% for toc_item in toc %}
|
<nav class="md-sidebar__inner md-nav">
|
||||||
|
<h3>Navigation</h3>
|
||||||
<!-- Render anchor -->
|
<ul class="md-nav__list">
|
||||||
<li class="anchor">
|
{% for nav_item in nav %}
|
||||||
<a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
|
{% set path = "md-toggle-nav-" + loop.index | string %}
|
||||||
{{ toc_item.title }}
|
{% include "nav-item.html" %}
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
</nav>
|
||||||
{% endif %}
|
</div>
|
||||||
</li>
|
</div>
|
||||||
{% endif %}
|
|
||||||
38
src/toc-item.html
Normal file
38
src/toc-item.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Table of contents item -->
|
||||||
|
<li class="md-nav__item">
|
||||||
|
<a href="{{ toc_item.url }}" title="{{ toc_item.title }}"
|
||||||
|
class="md-nav__link">
|
||||||
|
{{ toc_item.title }}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Render nested item list -->
|
||||||
|
{% if toc_item.children %}
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
{% for toc_item in toc_item.children %}
|
||||||
|
{% include "toc-item.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
49
src/toc.html
Normal file
49
src/toc.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to
|
||||||
|
deal in the Software without restriction, including without limitation the
|
||||||
|
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
IN THE SOFTWARE.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Table of contents -->
|
||||||
|
<div class="md-sidebar md-sidebar--secondary md-js__sidebar">
|
||||||
|
<div class="md-sidebar__scrollwrap">
|
||||||
|
<nav class="md-sidebar__inner md-nav md-nav--toc">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The top-level anchor must be skipped if the article contains a h1
|
||||||
|
headline, since it would be redundant to the link to the current page
|
||||||
|
that is located just above the anchor. Therefore we directly continue
|
||||||
|
with the children of the anchor.
|
||||||
|
-->
|
||||||
|
{% if h1 %}
|
||||||
|
{% set toc = (toc | first).children %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Render item list -->
|
||||||
|
{% if toc and (toc | first) %}
|
||||||
|
<h3>Table of contents</h3>
|
||||||
|
<ul class="md-nav__list">
|
||||||
|
{% for toc_item in toc %}
|
||||||
|
{% include "toc-item.html" %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user