OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit of rework

Browse Source
This commit is contained in:
squidfunk 2016-08-07 18:01:56 +02:00
parent 4b9c8b9a49
commit 7f2444174f
77 changed files with 2405 additions and 4491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
CHANGELOG
View File

@ -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)
* Fixed #10: Invisible header after closing search bar with ESC key

88
Gulpfile.js
View File

@ -41,14 +41,17 @@ var minimage = require('gulp-image-optimization');
var modernizr = require('gulp-modernizr');
var mqpacker = require('css-mqpacker');
var notifier = require('node-notifier');
var path = require('path');
var plumber = require('gulp-plumber');
var postcss = require('gulp-postcss');
var rev = require('gulp-rev');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var stream = require('webpack-stream');
var uglify = require('gulp-uglify');
var util = require('gulp-util');
var vinyl = require('vinyl-paths');
var webpack = require('webpack');
/* ----------------------------------------------------------------------------
* Locals
@ -72,9 +75,10 @@ gulp.src = function() {
util.log(util.colors.red(
'Error (' + error.plugin + '): ' + error.message
));
var file = error.relativePath.split('/').pop();
notifier.notify({
title: 'Error (' + error.plugin + ')',
message: error.message.split('\n')[0]
title: 'Error (' + error.plugin + '): ' + file,
message: error.messageOriginal
});
this.emit('end');
}));
@ -93,9 +97,9 @@ gulp.task('assets:stylesheets', function() {
.pipe(
sass({
includePaths: [
'bower_components/bourbon/app/assets/stylesheets/',
'bower_components/quantum-colors/',
'bower_components/quantum-shadows/'
'bower_components/modular-scale/stylesheets',
'bower_components/quantum-colors',
'bower_components/quantum-shadows'
]
}))
.pipe(
@ -105,29 +109,60 @@ gulp.task('assets:stylesheets', function() {
]))
.pipe(gulpif(args.sourcemaps, sourcemaps.write()))
.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() {
return gulp.src([
/* Bower components */
'bower_components/classlist/classList.js',
'bower_components/fastclick/lib/fastclick.js',
'bower_components/pegasus/dist/pegasus.js',
'bower_components/lunr.js/lunr.js',
/* Application javascripts */
'src/assets/javascripts/application.js',
'src/assets/javascripts/standalone.js'
]).pipe(gulpif(args.sourcemaps, sourcemaps.init()))
.pipe(concat('application.js'))
.pipe(gulpif(args.sourcemaps, sourcemaps.write()))
.pipe(gulpif(args.production, uglify()))
.pipe(gulp.dest('material/assets/javascripts/'));
return gulp.src('src/assets/javascripts/**/*.js')
.pipe(
stream({
entry: 'application.js',
output: {
filename: 'application.js'
},
module: {
loaders: [{
loader: 'babel-loader',
test: path.join(__dirname, 'src/assets/javascripts'),
query: {
presets: 'es2015'
}
}]
},
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'
], function() {
return gulp.src([
'material/assets/stylesheets/application.css',
'material/assets/javascripts/application.js'
'material/assets/stylesheets/*.css',
'material/assets/javascripts/*.js'
]).pipe(
modernizr({
options: [
@ -150,7 +185,6 @@ gulp.task('assets:modernizr', [
'testProp' /* Test for properties */
]
}))
.pipe(addsrc.append('bower_components/respond/dest/respond.src.js'))
.pipe(concat('modernizr.js'))
.pipe(gulpif(args.production, uglify()))
.pipe(gulp.dest('material/assets/javascripts'));
@ -168,7 +202,7 @@ gulp.task('assets:static', function() {
interlaced: true
})))
.pipe(addsrc.append('src/assets/{fonts,images}/*.{ico,eot,svg,ttf,woff}'))
.pipe(gulp.dest('material/assets/'));
.pipe(gulp.dest('material/assets'));
});
/*

9
bower.json
View File

@ -16,15 +16,8 @@
"node_modules"
],
"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": {
"bourbon": "^4.2.6",
"modular-scale": "^2.1.1",
"quantum-colors": "^1.0.1",
"quantum-shadows": "^1.0.0"
}

24
docs/getting-started.md
View File

@ -123,8 +123,6 @@ _deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
_blue grey_. The last three colors can only be used as a primary color.
![Material Screenshot](images/colors.png)
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
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
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
the best code highlighter, but it works without JavaScript and on the server:
``` yaml
markdown_extensions:
- codehilite(css_class=code)
- codehilite
```
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:
``` markdown
!!! warning "Don't try this at home"
If you do, you will regret it.
!!! warning
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:
!!! warning "Don't try this at home"
If you do, you will regret it.
!!! warning
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.
> 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
Below is a full example configuration for a mkdocs.yml:
Below is a full example configuration for a `mkdocs.yml`:
``` yaml
# Project information

4
docs/index.md
View File

@ -1,4 +1,4 @@
# Material for MkDocs
# Material <small>for MkDocs</small>
## 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
as all sorts of screen sizes.
![Material Screenshot](images/screen.png)
Material is very lightweight – it is built from scratch using Javascript and
CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
and Analytics). Yet, it is highly customizable and degrades gracefully in older

106
docs/specimen.md Normal file
View 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
View File

@ -0,0 +1 @@
TBD

0
material/__init__.py
View File

1
material/assets/javascripts/application-997097ee0c.js
View File

File diff suppressed because one or more lines are too long

8
material/assets/javascripts/application-a7f7c32389.js Normal file
View File

File diff suppressed because one or more lines are too long

9
material/assets/javascripts/application.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-4ab42b99fd.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-d1e05123d4.js Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/modernizr.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-20d5debb47.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-fe75383308.css Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palettes-05ab2406df.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palettes.css
View File

File diff suppressed because one or more lines are too long

159
material/base.html
View File

@ -25,156 +25,71 @@
<meta name="author" content="{{ site_author }}">
{% endif %}
{% 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>
@font-face {
font-family: 'Icon';
src: url('{{ base_url }}/assets/fonts/icon.eot?52m981');
src: url('{{ base_url }}/assets/fonts/icon.eot?#iefix52m981')
format('embedded-opentype'),
url('{{ base_url }}/assets/fonts/icon.woff?52m981')
format('woff'),
url('{{ base_url }}/assets/fonts/icon.ttf?52m981')
format('truetype'),
url('{{ base_url }}/assets/fonts/icon.svg?52m981#icon')
format('svg');
font-family: "Icon";
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
format("embedded-opentype"),
url({{ base_url }}/assets/fonts/icon.woff?52m981)
format("woff"),
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
format("truetype"),
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
format("svg");
font-weight: normal;
font-style: normal;
}
</style>
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-20d5debb47.css">
{% if config.extra.palette %}
<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 %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fe75383308.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}
<script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
{% block extrahead %}{% endblock %}
<script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script>
</head>
{% 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 %}">
{% 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">
<body>
<input class="md-toggle" type="checkbox" id="md-toggle-drawer">
<input class="md-toggle" type="checkbox" id="md-toggle-search">
<label class="md-overlay" for="md-toggle-drawer"></label>
{% include "header.html" %}
</header>
<main class="main">
<div class="md-container">
<main class="md-main">
<div class="md-grid md-main__inner">
{% set h1 = "\x3ch1 id=" in content %}
<div class="drawer">
{% include "drawer.html" %}
</div>
<article class="article">
<div class="wrapper">
{% if not h1 %}
<h1>{{ page_title | default(site_name, true)}}</h1>
{% if nav %}
{% include "nav.html" %}
{% endif %}
{% if toc %}
{% include "toc.html" %}
{% endif %}
<div class="md-content md-content--typeset">
<article class="md-content__inner">
{{ content }}
<aside class="copyright" role="note">
<hr>
<small class="md-content__copyright">
{% if copyright %}
{{ copyright }} &ndash;
{% endif %}
Documentation built with
This document was created with
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
using the
<a href="http://squidfunk.github.io/mkdocs-material/" target="_blank">
Material
</a>
and the
<a href="http://squidfunk.github.io/mkdocs-material/" target="_blank">Material</a>
theme.
</aside>
{% block footer %}
<footer class="footer">
{% include "footer.html" %}
</footer>
{% endblock %}
</div>
</small>
</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>
</main>
{% include "footer.html" %}
</div>
<script>
var base_url = '{{ base_url }}';
var repo_id = '{{ repo_id }}';
var repo_url = '{{ repo_url }}';
</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 %}
<script src="{{ path }}"></script>
{% 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>
</html>

69
material/drawer.html
View File

@ -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">&ndash;</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>

62
material/footer.html
View File

@ -1,42 +1,38 @@
{% if include_next_prev %}
<nav class="pagination" aria-label="Footer">
<div class="previous">
<footer class="md-footer">
{% if previous_page or next_page %}
<div class="md-footer-pagination">
<nav class="md-grid md-footer-nav">
{% if previous_page %}
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
<span class="direction">
{{ config.extra.get("i18n", {}).prev | default("Previous") }}
</span>
<div class="page">
<div class="button button-previous" role="button" aria-label="Previous">
<i class="icon icon-back"></i>
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
</div>
<div class="stretch">
<div class="title">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
{{ 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>
<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>
</a>
{% 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>
</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 %}
</nav>
</div>
{% endif %}
</footer>

59
material/header.html
View File

@ -1,54 +1,17 @@
<nav aria-label="Header">
<div class="bar default">
<div class="button button-menu" role="button" aria-label="Menu">
<label class="toggle-button icon icon-menu" for="toggle-drawer">
<span></span>
</label>
<header class="md-header">
<nav class="md-grid md-header-nav">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__icon" for="md-toggle-drawer"></label>
</div>
<div class="stretch">
<div class="title">
{% 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 %}
<div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
<span class="md-flex__ellipsis">
{{ page_title | default(site_name, true) }}
</span>
</div>
</div>
{% if config.extra.get("author", {}).twitter %}
{% 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 class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
</div>
</div>
</nav>
</header>

7
material/manifest.json
View File

@ -1,7 +1,6 @@
{
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
"assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-20d5debb47.css",
"assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
"assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d1e05123d4.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-fe75383308.css"
}

32
material/nav-item.html Normal file
View 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 %}

41
material/nav.html
View File

@ -1,32 +1,13 @@
{% if nav_item.children %}
<li>
<span class="section">{{ nav_item.title }}</span>
<ul>
{% for nav_item in nav_item.children %}
{% include "nav.html" %}
<div class="md-sidebar md-sidebar--primary md-js__sidebar">
<div class="md-sidebar__scrollwrap">
<nav class="md-sidebar__inner md-nav">
<h3>Navigation</h3>
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "md-toggle-nav-" + loop.index | string %}
{% include "nav-item.html" %}
{% endfor %}
</ul>
</li>
{% else %}
<li>
<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 %}
</nav>
</div>
</div>

12
material/toc-item.html Normal file
View 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
View 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
View File

@ -29,29 +29,34 @@ repo_name: GitHub
repo_url: https://github.com/squidfunk/mkdocs-material
# Copyright
copyright: Copyright (c) 2016 Martin Donath
copyright: 'Copyright &copy 2016 Martin Donath'
# Documentation and theme
theme_dir: material
theme: amelia
# Options
extra:
version: 0.2.1
version: 0.2.4
logo: images/logo.png
font:
text: Ubuntu
mono: Ubuntu Mono
author:
github: squidfunk
twitter: squidfunk
# Extensions
markdown_extensions:
- codehilite(css_class=code)
- codehilite
- admonition
- toc:
permalink: '#'
permalink: ''
# Page tree
pages:
- Material: index.md
- Getting started: getting-started.md
- Specimen: specimen.md
- Customization: customization.md
- License: license.md

8
package.json
View File

@ -16,8 +16,14 @@
"url": "https://github.com/squidfunk/mkdocs-material.git"
},
"private": true,
"dependencies": {
"fastclick": "^1.0.6",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"autoprefixer": "^6.3.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"css-mqpacker": "^4.0.0",
"del": "^2.2.0",
"gulp": "^3.9.1",
@ -40,6 +46,8 @@
"gulp-util": "^3.0.7",
"node-notifier": "^4.5.0",
"vinyl-paths": "^2.1.0",
"webpack": "^1.13.1",
"webpack-stream": "^3.2.0",
"yargs": "^3.32.0"
}
}

1
src/404.html Normal file
View File

@ -0,0 +1 @@
TBD

500
src/assets/javascripts/application.js
View File

@ -20,41 +20,18 @@
* IN THE SOFTWARE.
*/
/* Hey, there's your missing semicolon, lunr.js! */
;
/* 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) + '&hellip;';
}
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);
}
}
}
'use strict';
/* ----------------------------------------------------------------------------
* Application logic
* Imports
* ------------------------------------------------------------------------- */
import FastClick from 'fastclick';
import Sidebar from './components/sidebar';
import ScrollSpy from './components/scrollspy';
/* ----------------------------------------------------------------------------
* Application
* ------------------------------------------------------------------------- */
/* Initialize application upon DOM ready */
@ -74,457 +51,24 @@ document.addEventListener('DOMContentLoaded', function() {
/* Attack FastClick to mitigate 300ms delay on touch devices */
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');
/* ----------------------------------------------------------------------------
* Initialize drawer
* ------------------------------------------------------------------------- */
/* 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 */
var width = window.matchMedia("(min-width: 1200px)");
var handler = function() {
if (width.matches) {
sidebar.listen();
} else {
if (window.pageYOffset > pageYOffsetLast) {
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;
sidebar.unlisten();
}
}
/* Update last offset (mitigiate negative offsets in Safari) */
pageYOffsetLast = Math.max(0, window.pageYOffset);
}
var sidebar = new Sidebar('.md-sidebar--primary');
handler(); // check listen!
/* Check for media query events */
var check = function() {
var main = document.querySelector('.main');
window.removeEventListener('scroll', align);
var toc = new Sidebar('.md-sidebar--secondary');
toc.listen();
/* Reset drawer position when entering collapsed mode */
if (matchMedia("only screen and (max-width: 959px)").matches) {
drawer.style.position = null;
drawer.style.top = null;
drawer.style.bottom = null;
var spy = new ScrollSpy('.md-nav--toc .md-nav__item a');
spy.listen();
/* Check if the scroll handler needs to be registered */
} 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);
}
);
}
window.addEventListener('resize', handler);
});

127
src/assets/javascripts/components/scrollspy.js Normal file
View 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
View 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;

49
src/assets/javascripts/standalone.js
View File

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

74
src/assets/stylesheets/_highlight.scss
View File

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

47
src/assets/stylesheets/_palette.scss
View File

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

28
src/assets/stylesheets/application.scss
View File

@ -24,7 +24,7 @@
* Dependencies
* ------------------------------------------------------------------------- */
@import "bourbon";
@import "modular-scale";
@import "quantum-colors";
@import "quantum-shadows";
@ -32,18 +32,24 @@
* Application
* ------------------------------------------------------------------------- */
@import "reset";
@import "palette";
@import "highlight";
@import "helpers/break";
@import "helpers/px2em";
@import "fonts/icon";
@import "config";
@import "mixins/break";
@import "base/icons";
@import "base/reset";
@import "base/typeset";
@import "modules/base";
@import "modules/drawer";
@import "modules/article";
@import "modules/search";
@import "layout/base";
@import "layout/content";
@import "layout/header";
@import "layout/footer";
@import "layout/nav";
@import "layout/sidebar";
@import "extensions/admonition";
@import "extensions/codehilite";
@import "extensions/permalinks";
@import "print";
@import "shame";

43
src/assets/stylesheets/modules/article/_animation.scss → src/assets/stylesheets/base/_icons.scss
View File

@ -21,25 +21,44 @@
*/
/* ----------------------------------------------------------------------------
* Article animation
* Icon set
* ------------------------------------------------------------------------- */
/*
* Fade color after highlighting
* Base icon class
*/
pre span {
transition: color .25s;
.md-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;
}
/*
* Copyright and theme information
* Build icon set
*/
.copyright {
/*
* Animate color on hover
*/
a {
transition: color .25s;
@each $name, $code in (
"search": "e600",
"back": "e601",
"link": "e602",
"close": "e603",
"menu": "e604",
"forward": "e605",
"twitter": "e606",
"github": "e607",
"download": "e608",
"star": "e609",
"warning": "e610",
"note": "e611"
) {
.md-icon--#{$name}:before {
content: unquote("\"\\#{$code}\"");
}
}

54
src/assets/stylesheets/_reset.scss → src/assets/stylesheets/base/_reset.scss
View File

@ -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 {
font-size: 62.5%;
@ -54,31 +55,18 @@ html {
/*
* Reset spacing and borders for all tags
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
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 {
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol,
ul, li, 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;
padding: 0;
border: 0;
}
/*
* Reset list styles
*/
ul {
list-style: none;
}
/*
* Reset table styles
*/
@ -90,22 +78,20 @@ table {
/*
* Reset table cell styles
*/
td {
td, th {
text-align: left;
font-weight: normal;
vertical-align: middle;
vertical-align: top;
}
/*
* Reset (native) button styles
*/
button {
outline: 0;
padding: 0;
outline: 0;
border: 0;
background: transparent;
border: none;
font-size: inherit;
}
@ -113,10 +99,9 @@ button {
* Reset (native) input styles
*/
input {
@include appearance(none);
outline: none;
border: none;
appearance: none;
outline: 0;
border: 0;
}
/*
@ -134,10 +119,3 @@ a, button, label, input {
-webkit-tap-highlight-color: rgba(white, 0);
-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
View 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;
}
}
}
}

7
src/assets/stylesheets/modules/_article.scss → src/assets/stylesheets/extensions/_admonition.scss
View File

@ -20,7 +20,6 @@
* IN THE SOFTWARE.
*/
@import "article/animation";
@import "article/appearance";
@import "article/layout";
@import "article/typography";
/* ----------------------------------------------------------------------------
* Admonition extension
* ------------------------------------------------------------------------- */

133
src/assets/stylesheets/extensions/_codehilite.scss Normal file
View 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 */
}

58
src/assets/stylesheets/_print.scss → src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -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 {
display: none;
.headerlink {
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 {
padding-top: 0;
}
/*
* 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;
&:hover {
color: $md-color-accent;
}
}
}

144
src/assets/stylesheets/fonts/_icon.scss
View File

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

109
src/assets/stylesheets/mixins/_break.scss → src/assets/stylesheets/helpers/_break.scss
View File

@ -21,29 +21,25 @@
*/
/* ----------------------------------------------------------------------------
* Defaults
* ------------------------------------------------------------------------- */
$break: (
devices: (
mobile: (
portrait: 220px 479px,
landscape: 480px 719px
),
tablet: (
portrait: 720px 959px,
landscape: 960px 1199px
),
screen: 1200px
)
) !default;
/* ----------------------------------------------------------------------------
* Helper functions
* Variables
* ------------------------------------------------------------------------- */
/*
* 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) {
$min: 1000000; $max: 0;
@ -59,44 +55,49 @@ $break: (
$max: max($number, $max);
}
} @else {
@warn "Invalid number: #{$number}";
@error "Invalid number: #{$number}";
}
}
} @elseif type-of($value) == number {
$min: min($value, $min);
$max: null;
} @else {
@warn "Invalid tuple: #{$value}";
@error "Invalid value: #{$value}";
}
}
@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) {
$devices: map-get($break, devices);
$current: $break-devices;
@for $n from 1 through length($device) {
@if type-of($devices) == map {
$devices: map-get($devices, nth($device, $n));
@if type-of($current) == map {
$current: map-get($current, nth($device, $n));
} @else {
@warn "Invalid device map: #{$devices}";
@error "Invalid device map: #{$devices}";
}
}
@if type-of($devices) == list or
type-of($devices) == number {
$devices: (default: $devices);
@if type-of($current) == list or
type-of($current) == number {
$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) {
@if type-of($breakpoint) == number {
@ -110,15 +111,17 @@ $break: (
@content;
}
} @else {
@warn "Invalid breakpoint: #{$breakpoint}";
@error "Invalid breakpoint: #{$breakpoint}";
}
} @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) {
@if type-of($breakpoint) == string {
@ -126,12 +129,14 @@ $break: (
@content;
}
} @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) {
@if type-of($breakpoint) == number {
@ -139,16 +144,14 @@ $break: (
@content;
}
} @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) {
@if type-of($device) == string {
@ -162,15 +165,17 @@ $break: (
@content;
}
} @else {
@warn "Invalid device: #{$device}";
@error "Invalid device: #{$device}";
}
} @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) {
@if type-of($device) == string {
@ -183,12 +188,14 @@ $break: (
@content;
}
} @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) {
@if type-of($device) == string {
@ -196,11 +203,11 @@ $break: (
}
@if type-of($device) == list {
$breakpoint: break-select-device($device);
$max: nth($breakpoint, 1) - 1;
$max: nth($breakpoint, 2);
@media only screen and (max-width: $max) {
@content;
}
} @else {
@warn "Invalid device: #{$device}";
@error "Invalid device: #{$device}";
}
}

44
src/assets/stylesheets/modules/article/_typography.scss → src/assets/stylesheets/helpers/_px2em.scss
View File

@ -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 {
/*
* Third-level headlines should be bold
*/
h3 {
font-weight: 700;
}
/*
* Fourth-level headlines should be italic
*/
h4 {
font-weight: 400;
font-style: italic;
@function px2em($size, $base: 16px) {
@if unit($size) == px {
@return ($size / $base) * 1em;
} @else {
@error "Invalid unit: #{$size} - must be px";
}
}
/*
* Permalink support
* Convert font size in px to rem.
*
* @param {Number} $size Font size in px
* @return {Number} Font size in rem
*/
.article {
h2, h3, h4, h5, h6 {
a {
font-weight: 400;
font-style: normal;
}
@function px2rem($size, $base: 10px) {
@if unit($size) == px {
@return ($size / $base) * 1rem;
} @else {
@error "Invalid unit: #{$size} - must be px";
}
}

171
src/assets/stylesheets/layout/_base.scss Normal file
View 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;
}
}

48
src/assets/stylesheets/modules/drawer/_typography.scss → src/assets/stylesheets/layout/_content.scss
View File

@ -21,48 +21,40 @@
*/
/* ----------------------------------------------------------------------------
* Drawer typography
* Main content
* ------------------------------------------------------------------------- */
/*
* Drawer container
* Content container
*/
.drawer {
.md-content {
/*
* Links to articles
*/
.toc li a {
font-weight: 700;
/* [tablet landscape +]: Add space for table of contents */
@include break-from-device(tablet landscape) {
margin-right: 24.2rem;
}
/* [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 {
font-weight: 400;
}
&__inner {
margin: 2.4rem 1.6rem;
/*
* Main sections
*/
.section {
font-weight: 700;
/* [screen small +]: Add space for table of contents */
@include break-from-device(screen small) {
margin: 2.4rem 2.4rem;
}
}
/*
* Repository buttons
* Copyright and theme information
*/
.repo a {
text-transform: uppercase;
font-weight: 700;
/*
* Stars
*/
.count {
text-transform: none;
font-weight: 700;
&__copyright {
display: block;
}
}

134
src/assets/stylesheets/layout/_footer.scss Normal file
View 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;
}
}
}

80
src/assets/stylesheets/modules/base/_animation.scss → src/assets/stylesheets/layout/_header.scss
View File

@ -21,53 +21,57 @@
*/
/* ----------------------------------------------------------------------------
* Base animation
* Header
* ------------------------------------------------------------------------- */
/*
* Animate color on hover
* Application header (stays always on top)
*/
a {
transition: color .25s;
}
.md-header {
@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 {
transition: opacity .25s,
width .0s .25s,
height .0s .25s;
&-nav {
padding: 0.4rem;
/*
* Expanded drawer
* Icon
*/
#toggle-drawer:checked ~ &,
.toggle-drawer & {
transition: opacity .25s,
width .0s,
height .0s;
}
}
/*
* 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 {
&__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 {
padding: 0 2.0rem;
font-size: 1.8rem;
line-height: 4.8rem;
}
}
}

98
src/assets/stylesheets/modules/drawer/_animation.scss → src/assets/stylesheets/layout/_nav.scss
View File

@ -21,61 +21,89 @@
*/
/* ----------------------------------------------------------------------------
* Drawer animation
* Navigation
* ------------------------------------------------------------------------- */
/*
* Drawer container
* Nested navigation
*/
.drawer {
/* [tablet landscape-]: Hide menu */
@include break-to-device(tablet landscape) {
transform: translate3d(-262px, 0, 0);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
.md-nav {
/*
* Just hide drawer, if browser doesn't support 3D transforms
* Set font sizes
*/
.no-csstransforms3d & {
display: none;
&, h3 {
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 &,
.toggle-drawer & {
transform: translate3d(0, 0, 0);
&__item {
margin: 0.8rem 0 0;
line-height: 1.6rem;
}
/*
* Just show drawer, if browser doesn't support 3D transforms
* Link inside item
*/
.no-csstransforms3d & {
&__link {
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 {
transition: none;
&:hover,
&: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
View 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;
}
}
}

26
src/assets/stylesheets/modules/_base.scss
View File

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

26
src/assets/stylesheets/modules/_drawer.scss
View File

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

26
src/assets/stylesheets/modules/_search.scss
View File

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

190
src/assets/stylesheets/modules/article/_appearance.scss
View File

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

567
src/assets/stylesheets/modules/article/_layout.scss
View File

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

138
src/assets/stylesheets/modules/base/_appearance.scss
View File

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

363
src/assets/stylesheets/modules/base/_layout.scss
View File

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

58
src/assets/stylesheets/modules/base/_typography.scss
View File

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

143
src/assets/stylesheets/modules/drawer/_appearance.scss
View File

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

305
src/assets/stylesheets/modules/drawer/_layout.scss
View File

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

134
src/assets/stylesheets/modules/search/_animation.scss
View File

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

139
src/assets/stylesheets/modules/search/_appearance.scss
View File

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

218
src/assets/stylesheets/modules/search/_layout.scss
View File

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

29
src/assets/stylesheets/modules/search/_typography.scss
View File

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

221
src/assets/stylesheets/palettes.scss
View File

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

@ -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>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
@ -39,44 +61,19 @@
{% endif %}
{% 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) -->
<style>
@font-face {
font-family: 'Icon';
src: url('{{ base_url }}/assets/fonts/icon.eot?52m981');
src: url('{{ base_url }}/assets/fonts/icon.eot?#iefix52m981')
format('embedded-opentype'),
url('{{ base_url }}/assets/fonts/icon.woff?52m981')
format('woff'),
url('{{ base_url }}/assets/fonts/icon.ttf?52m981')
format('truetype'),
url('{{ base_url }}/assets/fonts/icon.svg?52m981#icon')
format('svg');
font-family: "Icon";
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
format("embedded-opentype"),
url({{ base_url }}/assets/fonts/icon.woff?52m981)
format("woff"),
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
format("truetype"),
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
format("svg");
font-weight: normal;
font-style: normal;
}
@ -86,28 +83,9 @@
<link rel="stylesheet" type="text/css"
href="{{ base_url }}/assets/stylesheets/application.css" />
<!-- Extra palettes -->
{% if config.extra.palette %}
<!-- Web fonts -->
<link rel="stylesheet" type="text/css"
href="{{ base_url }}/assets/stylesheets/palettes.css" />
{% 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 %}
href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono" />
<!-- Custom stylesheets -->
{% for path in extra_css %}
@ -116,51 +94,25 @@
<!-- Modernizr -->
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
<!-- Custom header -->
{% block extrahead %}{% endblock %}
</head>
<!-- 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>
<body>
<!-- State toggles -->
<input class="toggle" type="checkbox" id="toggle-drawer" />
<input class="toggle" type="checkbox" id="toggle-search" />
<input class="md-toggle" type="checkbox" id="md-toggle-drawer" />
<input class="md-toggle" type="checkbox" id="md-toggle-search" />
<!-- Overlay for expanded drawer -->
<label class="toggle-button overlay" for="toggle-drawer"></label>
<label class="md-overlay" for="md-toggle-drawer"></label>
<!-- Header -->
<header class="header">
<!-- Application header -->
{% include "header.html" %}
</header>
<!-- Main content -->
<main class="main">
<!-- Container, necessary for web-application context -->
<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
@ -170,104 +122,51 @@
-->
{% set h1 = "\x3ch1 id=" in content %}
<!-- Drawer with navigation -->
<div class="drawer">
{% include "drawer.html" %}
</div>
<!-- Article -->
<article class="article">
<div class="wrapper">
<!-- Headline -->
{% if not h1 %}
<h1>{{ page_title | default(site_name, true)}}</h1>
<!-- Main navigation -->
{% if nav %}
{% include "nav.html" %}
{% 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 }}
<!-- Copyright and theme information -->
<aside class="copyright" role="note">
<hr />
<small class="md-content__copyright">
{% if copyright %}
{{ copyright }} &ndash;
{% endif %}
Documentation built with
This document was created with
<a href="http://www.mkdocs.org" target="_blank">MkDocs</a>
using the
and the
<a href="http://squidfunk.github.io/mkdocs-material/"
target="_blank">
Material
</a>
target="_blank">Material</a>
theme.
</aside>
<!-- Footer -->
{% block footer %}
<footer class="footer">
{% include "footer.html" %}
</footer>
{% endblock %}
</div>
</small>
</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>
</main>
<!-- Application footer -->
{% include "footer.html" %}
</div>
<!-- Theme-related and custom javascripts -->
<script>
var base_url = '{{ base_url }}';
var repo_id = '{{ repo_id }}';
var repo_url = '{{ repo_url }}';
</script>
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>
{% 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>
</html>

96
src/drawer.html
View File

@ -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">&ndash;</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
View File

@ -1,48 +1,73 @@
<!-- Previous and next page -->
{% if include_next_prev %}
<nav class="pagination" aria-label="Footer">
<!--
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
<!-- Previous page -->
<div class="previous">
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 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 %}
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
<span class="direction">
{{ config.extra.get("i18n", {}).prev | default("Previous") }}
</span>
<div class="page">
<div class="button button-previous"
role="button" aria-label="Previous">
<i class="icon icon-back"></i>
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}"
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
</div>
<div class="stretch">
<div class="title">
<div class="md-flex__cell md-flex__cell--stretch
md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
{{ 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>
<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>
</a>
{% 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>
</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 %}
</nav>
</div>
{% endif %}
</footer>

122
src/header.html
View File

@ -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 -->
<nav aria-label="Header">
<nav class="md-grid md-header-nav">
<div class="md-flex">
<!-- Default bar -->
<div class="bar default">
<!-- Toggle drawer -->
<div class="button button-menu" role="button" aria-label="Menu">
<label class="toggle-button icon icon-menu" for="toggle-drawer">
<span></span>
</label>
<!-- Button to toggle drawer -->
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__icon"
for="md-toggle-drawer"></label>
</div>
<!-- Page title -->
<div class="stretch">
<div class="title">
{% 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 %}
<!-- Header title -->
<div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
<span class="md-flex__ellipsis">
{{ page_title | default(site_name, true) }}
</div>
</span>
</div>
<!-- Twitter -->
{% if config.extra.get("author", {}).twitter %}
{% 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 %}
<!-- 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>
<!-- Button to open search -->
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label>
</div>
<!-- Search bar -->
<div class="bar search">
<!-- Close search -->
<div class="button button-close" role="button" aria-label="Close">
<label class="toggle-button icon icon-back"
for="toggle-search"></label>
</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>
<!-- Link to GitHub profile -->
<!-- <div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ repo_url }}" title="GitHub" class="md-header-nav__source">
<i class="md-icon md-icon--github md-header-nav__icon"></i>
<span class="md-header-nav__icon-title">
GitHub <small>135 Stars</small>
</span>
</a>
</div> -->
</div>
</nav>
</header>

68
src/nav-item.html Normal file
View 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
View File

@ -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
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.
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.
-->
{% if h1 %}
{% set toc = (toc | first).children %}
{% endif %}
<!-- Render anchors of active page -->
{% if toc and (toc | first) %}
<ul>
{% for toc_item in toc %}
<!-- Render anchor -->
<li class="anchor">
<a title="{{ toc_item.title }}" href="{{ toc_item.url }}">
{{ toc_item.title }}
</a>
</li>
<!-- Main navigation -->
<div class="md-sidebar md-sidebar--primary md-js__sidebar">
<div class="md-sidebar__scrollwrap">
<nav class="md-sidebar__inner md-nav">
<h3>Navigation</h3>
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "md-toggle-nav-" + loop.index | string %}
{% include "nav-item.html" %}
{% endfor %}
</ul>
{% endif %}
{% endif %}
</li>
{% endif %}
</nav>
</div>
</div>

38
src/toc-item.html Normal file
View 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
View 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>