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

Introduced SassLint for code style checks

Browse Source
This commit is contained in:
squidfunk 2016-09-04 17:11:58 +02:00
parent 72c7841808
commit 5e838ecf4f
33 changed files with 1863 additions and 3127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
.sass-lint.yml Normal file
View File

@ -0,0 +1,119 @@
# 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.
options:
merge-default-rules: true
formatter: stylish
rules:
attribute-quotes: 2
bem-depth: 2
border-zero: 2
brace-style: 2
class-name-format:
- 2
- convention: hyphenatedbem
clean-import-paths: 2
empty-args: 2
empty-line-between-blocks: 2
extends-before-declarations: 2
extends-before-mixins: 2
final-newline: 2
function-name-format:
- 2
- allow-leading-underscore: false
force-attribute-nesting: 0
force-element-nesting: 0
force-pseudo-nesting: 0
hex-length:
- 2
- style: long
hex-notation:
- 2
- style: uppercase
id-name-format:
- 2
indentation: 0
leading-zero:
- 2
- include: true
mixin-name-format:
- 2
- convention: hyphenatedbem
- allow-leading-underscore: false
mixins-before-declarations:
- 2
- exclude:
- break-at
- break-at-orientation
- break-at-ratio
- break-at-device
- break-from-device
- break-to-device
nesting-depth: 0
no-color-keywords: 2
no-color-literals: 2
no-css-comments: 2
no-debug: 2
no-duplicate-properties: 0
no-empty-rulesets: 2
no-important: 2
no-invalid-hex: 2
no-mergeable-selectors: 0
no-misspelled-properties: 0
no-qualifying-elements:
- 2
- allow-element-with-attribute: true
no-trailing-zero: 0
no-transition-all: 2
no-url-protocols: 2
no-vendor-prefixes: 0
one-declaration-per-line: 2
placeholder-name-format:
- 2
- convention: hyphenatedbem
property-sort-order:
- 2
- order: smacss
property-units:
- 2
- global: [rem, em, s]
pseudo-element: 2
quotes:
- 2
- style: double
shorthand-values: 2
single-line-per-selector: 0
space-after-bang: 2
space-after-colon: 2
space-after-comma: 2
space-around-operator: 2
space-before-bang: 2
space-before-brace: 2
space-before-colon: 2
space-between-parens: 2
trailing-semicolon: 2
url-quotes: 2
variable-for-property: 2
variable-name-format:
- 2
- convention: hyphenatedbem
- allow-leading-underscore: false
zero-unit: 2

4
CHANGELOG
View File

@ -10,7 +10,7 @@ mkdocs-material-1.0.0-rc.1 (2016-XX-XX)
* Introduced Webpack for more sophisticated JavaScript bundling
* Introduced ESLint and SassLint for code style checks
* Introduced more accurate Material Design colors and shadows
* Introduced a Modular Scale for harmonic font sizing
* Introduced Modular Scales for harmonic font sizing
* Rewrite of CSS using the BEM methodology
* Rewrite of JavaScript using ES6 and Babel as a transpiler
* Rewrite of Admonition, Permalinks and Codehilite integration
@ -18,8 +18,8 @@ mkdocs-material-1.0.0-rc.1 (2016-XX-XX)
* Removed Bower as a dependency in favor of npm
* Removed custom icon build in favor of the Material Design iconset
* Removed _blank targets on links due to vulnerability: http://bit.ly/1Mk2Rtw
* Added support for Metadata and Footnotes Markdown extensions
* Added build and watch scripts in package.json
* Added support for Metadata and Footnotes Markdown extensions
* Added support for collapsible sections in navigation
* Added support for separate table of contents
* Added support for better accessibility through REM-based layout

705
docs/extensions/codehilite.md
View File

@ -0,0 +1,705 @@
# Codehilite
## Usage
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
```
## Supported languages <small>excerpt</small>
Codehilite uses [Pygments][], a generic syntax highlighter with support for
over [300 languages][], so the following list of examples is just an excerpt.
### Bash
``` bash
#!/bin/sh
for OPT in "$@"
do
case "$OPT" in
'-f' ) canonicalize=1 ;;
'-n' ) switchlf="-n" ;;
esac
done
# readlink -f
function __readlink_f {
target="$1"
while test -n "$target"; do
filepath="$target"
cd `dirname "$filepath"`
target=`readlink "$filepath"`
done
/bin/echo $switchlf `pwd -P`/`basename "$filepath"`
}
if [ ! "$canonicalize" ]; then
readlink $switchlf "$@"
else
for file in "$@"
do
case "$file" in
-* ) ;;
* ) __readlink_f "$file" ;;
esac
done
fi
exit $?
```
### C
``` c
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__ */
}
```
### C++
``` cpp
Extension::
Extension(const Descriptor *descriptor, const Descriptor *scope) :
descriptor_(descriptor),
scope_(scope) {
/* Extract full name for signature */
variables_["signature"] = descriptor_->full_name();
/* Prepare message symbol */
variables_["message"] = StringReplace(
variables_["signature"], ".", "_", true);
LowerString(&(variables_["message"]));
/* Suffix scope to identifiers, if given */
string suffix ("");
if (scope_) {
suffix = scope_->full_name();
/* Check if the base and extension types are in the same package */
if (!scope_->file()->package().compare(descriptor_->file()->package()))
suffix = StripPrefixString(suffix,
scope_->file()->package() + ".");
/* Append to signature */
variables_["signature"] += ".[" + suffix +"]";
suffix = "_" + suffix;
}
/* Prepare extension symbol */
variables_["extension"] = StringReplace(
suffix, ".", "_", true);
LowerString(&(variables_["extension"]));
}
```
### C&#35;
``` csharp
public static void Send(
Socket socket, byte[] buffer, int offset, int size, int timeout) {
int startTickCount = Environment.TickCount;
int sent = 0;
do {
if (Environment.TickCount > startTickCount + timeout)
throw new Exception("Timeout.");
try {
sent += socket.Send(buffer, offset + sent,
size - sent, SocketFlags.None);
} catch (SocketException ex) {
if (ex.SocketErrorCode == SocketError.WouldBlock ||
ex.SocketErrorCode == SocketError.IOPending ||
ex.SocketErrorCode == SocketError.NoBufferSpaceAvailable) {
/* Socket buffer is probably full, wait and try again */
Thread.Sleep(30);
} else {
throw ex;
}
}
} while (sent < size);
}
```
### Clojure
``` clojure
(clojure-version)
(defn partition-when
[f]
(fn [rf]
(let [a (java.util.ArrayList.)
fval (volatile! false)]
(fn
([] (rf))
([result]
(let [result (if (.isEmpty a)
result
(let [v (vec (.toArray a))]
;; Clear first
(.clear a)
(unreduced (rf result v))))]
(rf result)))
([result input]
(if-not (and (f input) @fval)
(do
(vreset! fval true)
(.add a input)
result)
(let [v (vec (.toArray a))]
(.clear a)
(let [ret (rf result v)]
(when-not (reduced? ret)
(.add a input))
ret))))))))
(into [] (partition-when
#(.startsWith % ">>"))
["1d" "33" ">> 1" ">> 2" "22" ">> 3"])
```
### Diff
``` diff
Index: grunt.js
===================================================================
--- grunt.js (revision 31200)
+++ grunt.js (working copy)
@@ -12,6 +12,7 @@
module.exports = function (grunt) {
+ console.log('hello world');
// Project configuration.
grunt.initConfig({
lint: {
@@ -19,10 +20,6 @@
'packages/services.web/{!(test)/**/,}*.js',
'packages/error/**/*.js'
],
- scripts: [
- 'grunt.js',
- 'db/**/*.js'
- ],
browser: [
'packages/web/server.js',
'packages/web/server/**/*.js',
```
### Docker
``` docker
FROM ubuntu
# Install vnc, xvfb in order to create a 'fake' display and firefox
RUN apt-get update && apt-get install -y x11vnc xvfb firefox
RUN mkdir ~/.vnc
# Setup a password
RUN x11vnc -storepasswd 1234 ~/.vnc/passwd
# Autostart firefox (might not be the best way, but it does the trick)
RUN bash -c 'echo "firefox" >> /.bashrc'
EXPOSE 5900
CMD ["x11vnc", "-forever", "-usepw", "-create"]
```
### Elixir
``` elixir
require Logger
def accept(port) do
{:ok, socket} = :gen_tcp.listen(port,
[:binary, packet: :line, active: false, reuseaddr: true])
Logger.info "Accepting connections on port #{port}"
loop_acceptor(socket)
end
defp loop_acceptor(socket) do
{:ok, client} = :gen_tcp.accept(socket)
serve(client)
loop_acceptor(socket)
end
defp serve(socket) do
socket
|> read_line()
|> write_line(socket)
serve(socket)
end
defp read_line(socket) do
{:ok, data} = :gen_tcp.recv(socket, 0)
data
end
defp write_line(line, socket) do
:gen_tcp.send(socket, line)
end
```
### Erlang
``` erlang
circular(Defs) ->
[ { { Type, Base }, Fields } ||
{ { Type, Base }, Fields } <- Defs, Type == msg, circular(Base, Defs) ].
circular(Base, Defs) ->
Fields = proplists:get_value({ msg, Base }, Defs),
circular(Defs, Fields, [Base]).
circular(_Defs, [], _Path) ->
false;
circular(Defs, [Field | Fields], Path) ->
case Field#field.type of
{ msg, Type } ->
case lists:member(Type, Path) of
false ->
Children = proplists:get_value({ msg, Type }, Defs),
case circular(Defs, Children, [Type | Path]) of
false -> circular(Defs, Fields, Path);
true -> true
end;
true ->
Type == lists:last(Path) andalso
(length(Path) == 1 orelse not is_tree(Path))
end;
_ ->
circular(Defs, Fields, Path)
end.
```
### F&#35;
``` fsharp
/// Asynchronously download retangles from the server
/// and decode the JSON format to F# Rectangle record
let [<Js>] getRectangles () : Async<Rectangle[]> = async {
let req = XMLHttpRequest()
req.Open("POST", "/get", true)
let! resp = req.AsyncSend()
return JSON.parse(resp) }
/// Repeatedly update rectangles after 0.5 sec
let [<Js>] updateLoop () = async {
while true do
do! Async.Sleep(500)
let! rects = getRectangles()
cleanRectangles()
rects |> Array.iter createRectangle }
```
### Go
``` go
package main
import "fmt"
func counter(id int, channel chan int, closer bool) {
for i := 0; i < 10000000; i++ {
fmt.Println("process", id," send", i)
channel <- 1
}
if closer { close(channel ) }
}
func main() {
channel := make(chan int)
go counter(1, channel, false)
go counter(2, channel, true)
x := 0
// receiving data from channel
for i := range channel {
fmt.Println("receiving")
x += i
}
fmt.Println(x)
}
```
### HTML
``` html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>HTML5 Boilerplate</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
</body>
</html>
```
### Java
``` java
import java.util.LinkedList;
import java.lang.reflect.Array;
public class UnsortedHashSet<E> {
private static final double LOAD_FACTOR_LIMIT = 0.7;
private int size;
private LinkedList<E>[] con;
public UnsortedHashSet() {
con = (LinkedList<E>[])(new LinkedList[10]);
}
public boolean add(E obj) {
int oldSize = size;
int index = Math.abs(obj.hashCode()) % con.length;
if (con[index] == null)
con[index] = new LinkedList<E>();
if (!con[index].contains(obj)) {
con[index].add(obj);
size++;
}
if (1.0 * size / con.length > LOAD_FACTOR_LIMIT)
resize();
return oldSize != size;
}
private void resize() {
UnsortedHashSet<E> temp = new UnsortedHashSet<E>();
temp.con = (LinkedList<E>[])(new LinkedList[con.length * 2 + 1]);
for (int i = 0; i < con.length; i++) {
if (con[i] != null)
for (E e : con[i])
temp.add(e);
}
con = temp.con;
}
public int size() {
return size;
}
}
```
### JavaScript
``` javascript
var Math = require('lib/math');
var _extends = function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
target[key] = source[key];
}
}
return target;
};
var e = exports.e = 2.71828182846;
exports['default'] = function (x) {
return Math.exp(x);
};
module.exports = _extends(exports['default'], exports);
```
### JSON
``` json
{
"name": "mkdocs-material",
"version": "0.2.4",
"description": "A material design theme for MkDocs",
"homepage": "http://squidfunk.github.io/mkdocs-material/",
"authors": [
"squidfunk <martin.donath@squidfunk.com>"
],
"license": "MIT",
"main": "Gulpfile.js",
"scripts": {
"start": "./node_modules/.bin/gulp watch --mkdocs",
"build": "./node_modules/.bin/gulp build --production"
}
...
}
```
### Julia
``` julia
using MXNet
mlp = @mx.chain mx.Variable(:data) =>
mx.FullyConnected(name=:fc1, num_hidden=128) =>
mx.Activation(name=:relu1, act_type=:relu) =>
mx.FullyConnected(name=:fc2, num_hidden=64) =>
mx.Activation(name=:relu2, act_type=:relu) =>
mx.FullyConnected(name=:fc3, num_hidden=10) =>
mx.SoftmaxOutput(name=:softmax)
# data provider
batch_size = 100
include(Pkg.dir("MXNet", "examples", "mnist", "mnist-data.jl"))
train_provider, eval_provider = get_mnist_providers(batch_size)
# setup model
model = mx.FeedForward(mlp, context=mx.cpu())
# optimization algorithm
optimizer = mx.SGD(lr=0.1, momentum=0.9)
# fit parameters
mx.fit(model, optimizer, train_provider, n_epoch=20, eval_data=eval_provider)
```
### Lua
``` lua
local ffi = require("ffi")
ffi.cdef[[
void Sleep(int ms);
int poll(struct pollfd *fds, unsigned long nfds, int timeout);
]]
local sleep
if ffi.os == "Windows" then
function sleep(s)
ffi.C.Sleep(s*1000)
end
else
function sleep(s)
ffi.C.poll(nil, 0, s * 1000)
end
end
for i = 1,160 do
io.write("."); io.flush()
sleep(0.01)
end
io.write("\n")
```
### MySQL
``` mysql
SELECT
Employees.EmployeeID`,
Employees.Name,
Employees.Salary,
Manager.Name AS Manager
FROM
Employees
LEFT JOIN
Employees AS Manager
ON
Employees.ManagerID = Manager.EmployeeID
WHERE
Employees.EmployeeID = '087652';
```
### PHP
``` php
<?php
// src/AppBundle/Controller/LuckyController.php
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;
class LuckyController {
/**
* @Route("/lucky/number")
*/
public function numberAction() {
$number = mt_rand(0, 100);
return new Response(
'<html><body>Lucky number: '.$number.'</body></html>'
);
}
}
```
### Protocol Buffers
``` proto
syntax = "proto2";
package caffe;
// Specifies the shape (dimensions) of a Blob.
message BlobShape {
repeated int64 dim = 1 [packed = true];
}
message BlobProto {
optional BlobShape shape = 7;
repeated float data = 5 [packed = true];
repeated float diff = 6 [packed = true];
// 4D dimensions -- deprecated. Use "shape" instead.
optional int32 num = 1 [default = 0];
optional int32 channels = 2 [default = 0];
optional int32 height = 3 [default = 0];
optional int32 width = 4 [default = 0];
}
```
### Python
``` python
"""
A very simple MNIST classifier.
See extensive documentation at
http://tensorflow.org/tutorials/mnist/beginners/index.md
"""
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
# Import data
from tensorflow.examples.tutorials.mnist import input_data
import tensorflow as tf
flags = tf.app.flags
FLAGS = flags.FLAGS
flags.DEFINE_string('data_dir', '/tmp/data/', 'Directory for storing data')
mnist = input_data.read_data_sets(FLAGS.data_dir, one_hot=True)
sess = tf.InteractiveSession()
# Create the model
x = tf.placeholder(tf.float32, [None, 784])
W = tf.Variable(tf.zeros([784, 10]))
b = tf.Variable(tf.zeros([10]))
y = tf.nn.softmax(tf.matmul(x, W) + b)
```
### Ruby
``` ruby
require 'finity/event'
require 'finity/machine'
require 'finity/state'
require 'finity/transition'
require 'finity/version'
module Finity
class InvalidCallback < StandardError; end
class MissingCallback < StandardError; end
class InvalidState < StandardError; end
# Class methods to be injected into the including class upon inclusion.
module ClassMethods
# Instantiate a new state machine for the including class by accepting a
# block with state and event (and subsequent transition) definitions.
def finity options = {}, &block
@finity ||= Machine.new self, options, &block
end
# Return the names of all registered states.
def states
@finity.states.map { |name, _| name }
end
# Return the names of all registered events.
def events
@finity.events.map { |name, _| name }
end
end
# Inject methods into the including class upon inclusion.
def self.included base
base.extend ClassMethods
end
end
```
### XML
``` xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mainTag SYSTEM "some.dtd" [ENTITY % entity]>
<?oxygen RNGSchema="some.rng" type="xml"?>
<xs:main-Tag xmlns:xs="http://www.w3.org/2001/XMLSchema">
<!-- This is a sample comment -->
<childTag attribute="Quoted Value" another-attribute='Single quoted value'
a-third-attribute='123'>
<withTextContent>Some text content</withTextContent>
<withEntityContent>Some text content with &lt;entities&gt; and
mentioning uint8_t and int32_t</withEntityContent>
<otherTag attribute='Single quoted Value'/>
</childTag>
<![CDATA[ some CData ]]>
</main-Tag>
```
[Pygments]: http://pygments.org
[300 languages]: http://pygments.org/languages

1841
material/assets/javascripts/modernizr-ca288b1d5b.js
View File

File diff suppressed because it is too large Load Diff

0
material/assets/javascripts/modernizr-d41d8cd98f.js Normal file
View File

1
material/assets/stylesheets/application-28991d4685.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-67e8d741f4.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

10
material/base.html
View File

@ -25,19 +25,19 @@
<meta name="author" content="{{ site_author }}">
{% endif %}
{% endblock %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-28991d4685.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-67e8d741f4.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}
<script src="{{ base_url }}/assets/javascripts/modernizr-ca288b1d5b.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr-d41d8cd98f.js"></script>
</head>
<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>
<input class="md-toggle md-toggle--drawer" type="checkbox" id="drawer">
<input class="md-toggle md-toggle--search" type="checkbox" id="search">
<label class="md-overlay" for="drawer"></label>
{% include "header.html" %}
<div class="md-container">
<main class="md-main">

8
material/header.html
View File

@ -2,7 +2,7 @@
<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>
<label class="md-icon md-icon--menu md-header-nav__icon" for="drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
<span class="md-flex__ellipsis">
@ -10,12 +10,12 @@
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink md-search">
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
<label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
<div class="md-search__overlay"></div>
<div class="md-search__inner">
<form class="md-search__form">
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="md-search">
<label class="md-icon md-icon--search md-search__icon" for="md-search"></label>
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
<label class="md-icon md-icon--search md-search__icon" for="query"></label>
<div class="md-search__suggest">
FOO<br>
FOO<br>

4
material/manifest.json
View File

@ -1,6 +1,6 @@
{
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
"assets/javascripts/application.js": "assets/javascripts/application-e9877e2824.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-ca288b1d5b.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-28991d4685.css"
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d41d8cd98f.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-67e8d741f4.css"
}

1
package.json
View File

@ -45,6 +45,7 @@
"gulp-rev": "^7.0.0",
"gulp-rev-collector": "^1.0.2",
"gulp-sass": "^2.2.0",
"gulp-sass-lint": "^1.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.2",
"gulp-util": "^3.0.7",

96
src/assets/stylesheets/_config.scss
View File

@ -1,42 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Typography
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Typography
/// ---------------------------------------------------------------------------
/*
* Modular typographic scale
*/
/// Modular typographic scale
$ms-base: 1.6rem;
$ms-ratio: $major-third;
/* ----------------------------------------------------------------------------
* Breakpoints
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Breakpoints
/// ---------------------------------------------------------------------------
/*
* Device-specific breakpoints
*/
/// Device-specific breakpoints
$break-devices: (
mobile: (
portrait: px2em(220px) px2em(479px),
@ -53,30 +49,24 @@ $break-devices: (
)
);
/* ----------------------------------------------------------------------------
* Colors
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Colors
/// ---------------------------------------------------------------------------
/*
* Primary and accent colors
*/
/// Primary and accent colors
$md-color-primary: $clr-indigo-500;
$md-color-primary--light: $clr-indigo-100;
$md-color-primary--dark: $clr-indigo-700;
$md-color-accent: $clr-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 black
$md-color-black: hsla(0, 0%, 0%, 0.87);
$md-color-black--light: hsla(0, 0%, 0%, 0.54);
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
$md-color-black--lightest: hsla(0, 0%, 0%, 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);
/// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1.00);
$md-color-white--light: hsla(0, 0%, 100%, 0.70);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.30);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);

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

@ -1,33 +1,33 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Nothing to see here, move along
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Nothing to see here, move along
/// ---------------------------------------------------------------------------
.md-search__suggest {
background: $md-color-white;
border-radius: 0 0 px2rem(3px) px2rem(3px);
color: black;
color: #000000;
text-align: left;
border-top: px2rem(1px) solid $md-color-black--lightest;
display: none;

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

@ -1,36 +1,36 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Dependencies
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Dependencies
/// ---------------------------------------------------------------------------
@import "modular-scale";
@import "material-color";
@import "material-shadows";
/* ----------------------------------------------------------------------------
* Application
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Application
/// ---------------------------------------------------------------------------
@import "helpers/break";
@import "helpers/px2em";

67
src/assets/stylesheets/base/_icons.scss
View File

@ -1,52 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Icon set
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Icon set
/// ---------------------------------------------------------------------------
/*
* Base icon class
*/
/// Base icon class
%md-icon,
.md-icon {
font-family: "Material Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-weight: normal;
line-height: 1;
text-transform: none;
white-space: nowrap;
speak: none;
word-wrap: normal;
direction: ltr;
/* Better Font Rendering */
/// Enable font-smoothing in Webkit and FF
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
* Build representational classes
*/
/// Build representational classes
@each $ligature, $name in (
"arrow_back": "back",
"arrow_forward": "forward",
@ -54,7 +51,7 @@
"menu": "menu",
"search": "search"
) {
.md-icon--#{$name}:before {
.md-icon--#{$name}::before {
content: $ligature;
}
}

105
src/assets/stylesheets/base/_reset.scss
View File

@ -1,60 +1,52 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Resets
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Resets
/// ---------------------------------------------------------------------------
/*
* Enfore correct box model - the prefixed versions are necessary for older
* browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
*/
/// Enfore correct box model - the prefixed versions are necessary for older
/// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
html {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*
* All elements shall inherit the document default
*/
*, *:before, *:after {
/// All elements shall inherit the document default
*, *::before, *::after {
box-sizing: inherit;
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
}
/*
* Prevent adjustments of font size after orientation changes in IE and iOS
* and set base font-size to 10px for simple rem calculations.
*/
/// 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%;
text-size-adjust: none;
}
/*
* Reset spacing and borders for all tags
*/
/// Reset spacing and borders for all tags
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,
@ -67,55 +59,42 @@ audio, video {
border: 0;
}
/*
* Reset table styles
*/
/// Reset table styles
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* Reset table cell styles
*/
/// Reset table cell styles
td, th {
text-align: left;
font-weight: normal;
text-align: left;
vertical-align: top;
}
/*
* Reset (native) button styles
*/
/// Reset (native) button styles
button {
padding: 0;
outline: 0;
border: 0;
outline: 0;
background: transparent;
font-size: inherit;
}
/*
* Reset (native) input styles
*/
/// Reset (native) input styles
input {
appearance: none;
outline: 0;
border: 0;
outline: 0;
appearance: none;
}
/*
* Reset link styles
*/
/// Reset link styles
a {
text-decoration: none;
color: inherit;
text-decoration: none;
}
/*
* Reset tap outlines on iOS and Android
*/
/// Reset tap outlines on iOS and Android
a, button, label, input {
-webkit-tap-highlight-color: rgba(white, 0);
-webkit-tap-highlight-color: transparent;
}

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

@ -1,297 +1,244 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Font definitions
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Font definitions
/// ---------------------------------------------------------------------------
/*
* Default fonts
*/
/// 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 */
/// 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
*/
/// Use system fonts, if browser doesn't support webfonts
.no-fontface & {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
/*
* Proportionally spaced fonts
*/
/// Proportionally spaced fonts
pre, code {
font-family: "Roboto Mono", "Courier New", Courier, monospace;
/*
* Use system fonts, if browser doesn't support webfonts
*/
/// Use system fonts, if browser doesn't support webfonts
.no-fontface & {
font-family: "Courier New", Courier, monospace;
}
}
/* ----------------------------------------------------------------------------
* Typeset
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Typeset
/// ---------------------------------------------------------------------------
/*
* Content that is typeset
*/
/// Content that is typeset
.md-content--typeset {
font-size: ms(0);
line-height: 1.6;
/*
* Body copy
*/
/// Body copy
p {
margin: 1.25em 0;
}
/*
* 1st level headline
*/
/// 1st level headline
h1 {
color: $md-color-black--light;
font-size: ms(3);
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.3;
letter-spacing: -.01em;
color: $md-color-black--light;
}
/*
* 2nd level headline
*/
/// 2nd level headline
h2 {
margin-top: 4.0rem;
font-size: ms(2);
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.4;
letter-spacing: -.01em;
}
/*
* 3rd level headline
*/
/// 3rd level headline
h3 {
margin-top: 3.2rem;
font-size: ms(1);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.5;
letter-spacing: -.01em;
}
/*
* 2nd + 3rd level headline
*/
/// 3rd level headline following an 2nd level headline
h2 + h3 {
margin-top: 1.6rem;
}
/*
* 4th level headline
*/
/// 4th level headline
h4 {
margin-top: 1.6rem;
font-size: ms(0);
font-weight: 700;
letter-spacing: -.01em;
letter-spacing: -0.01em;
}
/*
* 5th and 6th level headline
*/
h5, h6 {
/// 5th and 6th level headline
h5,
h6 {
margin-top: 1.6rem;
color: $md-color-black--light;
font-size: ms(-1);
font-weight: 700;
letter-spacing: -.01em;
color: $md-color-black--light;
letter-spacing: -0.01em;
}
/*
* Overrides for 5th level headline
*/
/// Overrides for 5th level headline
h5 {
text-transform: uppercase;
}
/*
* Links
*/
/// Links
a {
color: $md-color-primary;
/*
* Also enable transition on pseudo elements
*/
/// Also enable transition on pseudo elements
&,
&:before {
transition: color .125s;
&::before {
transition: color 0.125s;
}
/*
* Active links
*/
/// Active links
&:hover,
&:active {
color: $md-color-accent;
}
}
/*
* Inline code blocks
*/
/// Inline code blocks
code {
padding: 0.1rem 0.4rem;
background: #F7F7F7;
color: #37474F;
font-size: 85%;
font-weight: 400;
word-break: break-word;
background: #F7F7F7;
color: #37474F;
}
/*
* Formatted code blocks
*/
/// Formatted code blocks
pre {
margin: 2.0rem 0;
padding: 1.0rem 1.2rem;
overflow-x: scroll;
background: #F7F7F7;
color: #37474F;
font-size: 85%;
line-height: 1.4;
background: #F7F7F7;
color: #37474F;
overflow-x: scroll;
/// Reset, if pre is inside code
> code {
font-size: inherit;
}
}
/*
* Keyboard tags
*/
/// Keyboard tags
kbd {
display: inline-block;
padding: 0.4rem 0.5rem 0.5rem;
vertical-align: 0.1rem;
font-size: 85%;
line-height: 1.0rem;
word-break: break-word;
border: px2rem(1px) solid #CCCCCC;
border-radius: px2rem(3px);
border-bottom-color: #BBBBBB;
background-color: #FCFCFC;
color: #555555;
border: px2rem(1px) solid #CCCCCC;
border-bottom-color: #BBBBBB;
border-radius: px2rem(3px);
font-size: 85%;
line-height: 1.0rem;
box-shadow: 0 #{-(px2rem(1px))} 0 #BBBBBB inset;
vertical-align: 0.1rem;
word-break: break-word;
}
/*
* Smaller text
*/
/// Smaller text
small {
font-size: smaller;
color: $md-color-black--light;
font-size: smaller;
}
/*
* Superscript and subscript
*/
/// Superscript and subscript
sup,
sub {
margin-left: 0.1rem;
}
/*
* Horizontal separators
*/
/// Horizontal separators
hr {
margin: 2.4rem 0;
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
}
/*
* Blockquotes, possibly nested
*/
/// Blockquotes, possibly nested
blockquote {
padding-left: 1.2rem;
border-left: px2rem(4px) solid $md-color-black--lighter;
color: $md-color-black--light;
}
/*
* Unordered lists
*/
/// Unordered lists
ul {
list-style-type: disc;
}
/*
* Ordered lists
*/
/// Ordered lists
ol ol {
list-style-type: lower-alpha;
/*
* Triply nested ordered list
*/
/// Triply nested ordered list
ol {
list-style-type: lower-roman;
}
}
/*
* Unordered and ordered lists
*/
/// Unordered and ordered lists
ul,
ol {
margin-left: 1.0rem;
/*
* List elements
*/
/// List elements
li {
margin-bottom: 1.0rem;
margin-left: 2.0rem;
/*
* Remove margin on last element
*/
/// Remove margin on last element
&:last-child {
margin-bottom: 0;
}
/*
* Nested lists
*/
/// Nested lists
ul,
ol {
padding-top: 1.0rem;
margin-bottom: 1.0rem;
margin-left: 1.0rem;
padding-top: 1.0rem;
}
}
}

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

@ -1,139 +1,116 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Admonition extension
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Admonition extension
/// ---------------------------------------------------------------------------
/*
* Admonition
*/
/// Admonition
.admonition {
position: relative;
padding: 0.8rem 1.6rem;
margin: 2.0rem 0;
background: rgba($clr-blue-a200, 0.05);
padding: 0.8rem 1.6rem;
border-left: px2rem(32px) solid $clr-blue-a200;
border-radius: px2rem(2px);
background: transparentize($clr-blue-a200, 0.95);
/*
* Icon
*/
&:before {
content: "edit";
/// Icon
&::before {
display: block;
position: absolute;
top: 0.2rem;
left: -2.6rem;
float: left;
font-family: "Material Icons";
font-weight: normal;
font-size: 2.0rem;
vertical-align: -0.1em;
color: $md-color-white;
font-family: "Material Icons";
font-size: 2.0rem;
font-weight: normal;
content: "edit";
vertical-align: -0.1em;
}
/*
* Title
*/
/// Title
&-title {
color: $clr-blue-a400;
font-size: ms(-1);
font-weight: 700;
line-height: 2.0rem;
text-transform: uppercase;
color: $clr-blue-a400;
/*
* Ensure smaller spacing to next element
*/
/// Ensure smaller spacing to next element
html & {
margin-bottom: 1.6rem;
}
/*
* Ensure smaller spacing to next element
*/
/// Ensure smaller spacing to next element
html & + * {
margin-top: 1.6rem;
}
}
/*
* Remove spacing on first element
*/
/// Remove spacing on first element
:first-child {
margin-top: 0;
}
/*
* Remove spacing on last element
*/
/// Remove spacing on last element
:last-child {
margin-bottom: 0;
}
/*
* Build representational classes
*/
/// Build representational classes
@each $names, $appearance in (
tip idea: $clr-teal-a700 "whatshot",
success check: $clr-green-a400 "done",
success check done: $clr-green-a400 "done",
warning warn: $clr-orange-a400 "warning",
failure fail: $clr-red-a200 "clear",
failure fail missing: $clr-red-a200 "clear",
danger fatal: $clr-red-a400 "flash_on",
bug error: $clr-pink-a400 "bug_report"
error bug: $clr-pink-a400 "bug_report"
) {
$tint: nth($appearance, 1);
$icon: nth($appearance, 2);
/*
* Define base class
*/
/// Define base class
&%#{nth($names, 1)},
&.#{nth($names, 1)} {
background: rgba($tint, 0.05);
border-color: $tint;
background: transparentize($tint, 0.95);
/*
* Icon
*/
&:before {
/// Icon
&::before {
content: $icon;
}
/*
* Set color for title
*/
/// Set color for title
.admonition-title {
color: $tint;
}
}
/*
* Define synonyms for base class
*/
/// Define synonyms for base class
@if length($names) > 1 {
@for $n from 2 through length($names) {
&.#{nth($names, $n)} {
@extend .admonition.#{nth($names, 1)};
@extend .admonition%#{nth($names, 1)};
}
}
}

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

@ -1,133 +1,117 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Codehilite extension
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Codehilite extension
/// ---------------------------------------------------------------------------
/*
* Github-style syntax highlighting
*/
/// Github-style syntax highlighting
.codehilite,
.code {
/*
* Errors
*/
/// Errors
.err { color: #A61717; }
/*
* Operators
*/
/// 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 */
/// Generics
/*
* 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 */
.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
/*
* 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 */
/// Keywords
/*
* 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 */
.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
/*
* 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 */
/// Comments
/*
* 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 */
.c { color: #969896; } /// Comment
.cm { color: #969896; } /// Comment.Multiline
.cp { color: #666666; } /// Comment.Preproc
.c1 { color: #969896; } /// Comment.Single
.cs { color: #969896; } /// Comment.Special
/*
* Diffs
*/
.gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
.gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
/// Names
/*
* Miscellaneous
*/
.w { color: transparent; } /* Text.Whitespace */
.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 { background-color: #ffdddd; } /// Generic.Deleted
.gi { background-color: #ddffdd; } /// Generic.Inserted
/// Miscellaneous
.w { color: transparent; } /// Text.Whitespace
}

121
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -1,71 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Footnotes extension
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Footnotes extension
/// ---------------------------------------------------------------------------
/*
* Scoped in typesetted content for greater specificity
*/
/// Scoped in typesetted content for greater specificity
.md-content--typeset {
/*
* Footnote
*/
/// Footnote
.footnote {
@extend small;
color: $md-color-black--light;
font-size: smaller;
/*
* Remove additional spacing on footnotes
*/
/// Remove additional spacing on footnotes
> ol {
margin-left: 0;
/*
* Single footnote
*/
/// Single footnote
> li {
// TODO: this doesn't work entirely
// &:before {
// &::before {
// display: block;
// content: " ";
// padding-top: (5.6rem + 2.4rem + 0.4rem);
// margin-top: -(5.6rem + 2.4rem + 0.4rem);
// }
/*
* Make permalink visible on hover
*/
/// Make back references visible on hover
&:hover .footnote-backref,
&:target .footnote-backref {
opacity: 1;
transform: translate3d(0, 0, 0);
opacity: 1;
}
/*
* Active or targeted permalink
*/
/// Active or targeted back reference
&:hover .footnote-backref:hover,
&:target .footnote-backref {
color: $md-color-accent;
@ -73,44 +62,36 @@
}
}
/*
* Correct anchor offset;
*/
&-ref:before {
/// Correct anchor offset
&-ref::before {
position: absolute;
margin-top: -(5.6rem + 2.4rem + 0.4rem);
padding-top: (5.6rem + 2.4rem + 0.4rem);
content: " ";
pointer-events: none;
padding-top: (5.6rem + 2.4rem + 0.4rem);
margin-top: -(5.6rem + 2.4rem + 0.4rem);
}
/*
* Make backref transparent for custom icon
*/
/// Make back reference text transparent for icon
&-backref {
@extend .md-icon;
@extend %md-icon;
position: absolute;
font-size: 2.0rem;
vertical-align: middle;
opacity: 0;
color: $md-color-black--lighter;
transform: translate3d(0.5rem, 0, 0);
transition: opacity .125s .125s,
transform .25s .125s,
color .25s;
transition: transform 0.25s 0.125s,
color 0.25s,
opacity 0.125s 0.125s;
color: $md-color-black--lighter;
font-size: 2.0rem;
opacity: 0;
vertical-align: middle;
/*
* Hack: remove Unicode arrow for icon
*/
&:first-letter {
/// Hack: remove Unicode arrow for icon
&::first-letter {
font-size: 0;
}
/*
* Icon
*/
&:after {
/// Back reference icon
&::after {
content: "keyboard_return";
}
}

90
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -1,74 +1,62 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Permalinks extension
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Permalinks extension
/// ---------------------------------------------------------------------------
/*
* Scoped in typesetted content for greater specificity
*/
/// Scoped in typesetted content for greater specificity
.md-content--typeset {
/*
* Permalink
*/
/// Permalink
.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;
transition: transform 0.25s 0.25s,
color 0.25s,
opacity 0.125s 0.25s;
color: $md-color-black--lighter;
opacity: 0;
}
/*
* All headers with permalinks have ids
*/
/// All headers with permalinks have ids
[id] {
/*
* Make permalink visible on hover
*/
/// Make permalink visible on hover
&:hover .headerlink,
&:target .headerlink {
opacity: 1;
transform: translate3d(0, 0, 0);
opacity: 1;
}
/*
* Active or targeted permalink
*/
/// Active or targeted permalink
&:hover .headerlink:hover,
&:target .headerlink {
color: $md-color-accent;
}
}
/*
* Correct anchor offset of headlines
*/
/// Correct anchor offset of headlines
@each $level, $delta in (
h1: 3.0rem,
h2: 0.2rem,
@ -77,11 +65,11 @@
h5: 1.0rem,
h6: 1.0rem
) {
#{$level}[id]:before {
content: " ";
#{$level}[id]::before {
display: block;
padding-top: (5.6rem + 2.4rem + $delta);
margin-top: -(5.6rem + 2.4rem + $delta);
padding-top: (5.6rem + 2.4rem + $delta);
content: " ";
}
}
}

198
src/assets/stylesheets/helpers/_break.scss
View File

@ -1,48 +1,70 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Variables
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Variables
/// ---------------------------------------------------------------------------
/*
* Device-specific breakpoints
*
* @type Map
*/
////
/// Device-specific breakpoints
///
/// @example
/// $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)
/// )
/// );
///
/// @group helpers
/// @access private
/// @type Map
////
$break-devices: () !default;
/* ----------------------------------------------------------------------------
* Breakpoint helpers
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Breakpoint helpers
/// ---------------------------------------------------------------------------
/*
* Choose minimum and maximum device widths
*
* @param {Map} $devices Map of devices
* @return {List} Minimum and maximum width
*/
////
/// Choose minimum and maximum device widths
///
/// @group helpers
/// @access private
/// @param {Map} $devices Map of devices
/// @return {List} Minimum and maximum width
////
@function break-select-min-max($devices) {
$min: 1000000; $max: 0;
$min: 1000000;
$max: 0;
@each $key, $value in $devices {
@while type-of($value) == map {
$value: break-select-min-max($value);
@ -68,12 +90,14 @@ $break-devices: () !default;
@return $min, $max;
}
/*
* Select minimum and maximum widths for a device breakpoint
*
* @param {String} $device Device
* @return {List} Minimum and maximum width
*/
////
/// Select minimum and maximum widths for a device breakpoint
///
/// @group helpers
/// @access private
/// @param {String} $device Device
/// @return {List} Minimum and maximum width
////
@function break-select-device($device) {
$current: $break-devices;
@for $n from 1 through length($device) {
@ -90,22 +114,25 @@ $break-devices: () !default;
@return break-select-min-max($current);
}
/* ----------------------------------------------------------------------------
* Breakpoint mixins
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Breakpoint mixins
/// ---------------------------------------------------------------------------
/*
* A minimum-maximum media query breakpoint
*
* @param {Number|List} $breakpoint Number or number pair
*/
////
/// A minimum-maximum media query breakpoint
///
/// @group helpers
/// @access public
/// @param {Number|List} $breakpoint Number or number pair
////
@mixin break-at($breakpoint) {
@if type-of($breakpoint) == number {
@media only screen and (min-width: $breakpoint) {
@content;
}
} @elseif type-of($breakpoint) == list {
$min: nth($breakpoint, 1); $max: nth($breakpoint, 2);
$min: nth($breakpoint, 1);
$max: nth($breakpoint, 2);
@if type-of($min) == number and type-of($max) == number {
@media only screen and (min-width: $min) and (max-width: $max) {
@content;
@ -118,11 +145,13 @@ $break-devices: () !default;
}
}
/*
* An orientation media query breakpoint
*
* @param {String} $breakpoint Orientation
*/
////
/// An orientation media query breakpoint
///
/// @group helpers
/// @access public
/// @param {String} $breakpoint Orientation
////
@mixin break-at-orientation($breakpoint) {
@if type-of($breakpoint) == string {
@media only screen and (orientation: $breakpoint) {
@ -133,11 +162,13 @@ $break-devices: () !default;
}
}
/*
* A maximum-aspect-ratio media query breakpoint
*
* @param {Number} $breakpoint Ratio
*/
////
/// A maximum-aspect-ratio media query breakpoint
///
/// @group helpers
/// @access public
/// @param {Number} $breakpoint Ratio
////
@mixin break-at-ratio($breakpoint) {
@if type-of($breakpoint) == number {
@media only screen and (max-aspect-ratio: $breakpoint) {
@ -148,11 +179,13 @@ $break-devices: () !default;
}
}
/*
* A minimum-maximum media query device breakpoint
*
* @param {String|List} $breakpoint Device
*/
////
/// A minimum-maximum media query device breakpoint
///
/// @group helpers
/// @access public
/// @param {String|List} $breakpoint Device
////
@mixin break-at-device($device) {
@if type-of($device) == string {
$device: $device,;
@ -160,7 +193,8 @@ $break-devices: () !default;
@if type-of($device) == list {
$breakpoint: break-select-device($device);
@if nth($breakpoint, 2) != null {
$min: nth($breakpoint, 1); $max: nth($breakpoint, 2);
$min: nth($breakpoint, 1);
$max: nth($breakpoint, 2);
@media only screen and (min-width: $min) and (max-width: $max) {
@content;
}
@ -172,11 +206,13 @@ $break-devices: () !default;
}
}
/*
* A minimum media query device breakpoint
*
* @param {String|List} $breakpoint Device
*/
////
/// A minimum media query device breakpoint
///
/// @group helpers
/// @access public
/// @param {String|List} $breakpoint Device
////
@mixin break-from-device($device) {
@if type-of($device) == string {
$device: $device,;
@ -192,11 +228,13 @@ $break-devices: () !default;
}
}
/*
* A maximum media query device breakpoint
*
* @param {String|List} $breakpoint Device
*/
////
/// A maximum media query device breakpoint
///
/// @group helpers
/// @access public
/// @param {String|List} $breakpoint Device
////
@mixin break-to-device($device) {
@if type-of($device) == string {
$device: $device,;

79
src/assets/stylesheets/helpers/_px2em.scss
View File

@ -1,36 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Pixel conversion helpers
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Pixel conversion helpers
/// ---------------------------------------------------------------------------
/*
* 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
*/
////
/// Convert font size in px to em.
///
/// @group helpers
/// @access public
/// @param {Number} $size Font size in px
/// @param {Number} $base Base font size
/// @return {Number} Font size in em
////
@function px2em($size, $base: 16px) {
@if unit($size) == px {
@return ($size / $base) * 1.0em;
@ -39,12 +41,15 @@
}
}
/*
* Convert font size in px to rem.
*
* @param {Number} $size Font size in px
* @return {Number} Font size in rem
*/
////
/// Convert font size in px to rem.
///
/// @group helpers
/// @access public
/// @param {Number} $size Font size in px
/// @param {Number} $base Base font size
/// @return {Number} Font size in rem
////
@function px2rem($size, $base: 10px) {
@if unit($size) == px {
@return ($size / $base) * 1.0rem;

166
src/assets/stylesheets/layout/_base.scss
View File

@ -1,88 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Grid
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Grid
/// ---------------------------------------------------------------------------
/*
* Stretch container to viewport
*/
/// Stretch container to viewport
html {
height: 100%;
/// [screen medium +] Set base font-size to 11px
@include break-from-device(screen medium) {
font-size: 68.75%;
}
/*
* Stretch body to container and leave room for footer.
*/
/// [screen large +] Set base font-size to 12px
@include break-from-device(screen large) {
font-size: 75.00%;
}
}
/// Stretch body to container and leave room for footer.
body {
position: relative;
min-height: 100%;
/*
* Lock body to viewport height (e.g. in search mode)
*/
/// Lock body to viewport height (e.g. in search mode)
&.md-js__body--locked {
height: 100%;
overflow: hidden;
}
}
/*
* Horizontal separators
*/
/// Horizontal separators
hr {
display: block;
height: 1px;
height: px2rem(1px);
padding: 0;
border: 0;
}
/*
* Template-wide grid
*/
/// Template-wide grid
.md-grid {
max-width: 120.0rem;
margin-left: auto;
margin-right: auto;
margin-left: auto;
}
/*
* Prevent collapse of margin when setting margin on child element
*/
/// Prevent collapse of margin when setting margin on child element
.md-container,
.md-main {
overflow: auto;
}
/*
* Add top spacing to acount for header
*/
/// Add top spacing to acount for header
.md-main {
margin-top: 5.6rem;
/*
* Bottom spacing to account for footer
*/
/// Bottom spacing to account for footer
&__inner {
margin-top: 3.0rem;
margin-bottom: 9.2rem;
@ -90,90 +84,74 @@ hr {
}
}
/* ----------------------------------------------------------------------------
* Navigational elements
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Navigational elements
/// ---------------------------------------------------------------------------
/*
* Toggle checkbox (should never be visible)
*/
/// Toggle checkbox
.md-toggle {
display: none !important;
display: none;
}
/*
* Overlay below expanded drawer
*/
/// Overlay below expanded drawer
.md-overlay {
position: fixed;
top: 0;
width: 0;
height: 0;
z-index: 2;
opacity: 0;
transition: width 0.0s 0.25s,
height 0.0s 0.25s,
opacity 0.25s;
background: $md-color-black--light;
transition: opacity .25s,
width .0s .25s,
height .0s .25s;
opacity: 0;
z-index: 2;
/* [tablet landscape -]: Trigger overlay */
/// [tablet landscape -]: Trigger overlay
@include break-to-device(tablet landscape) {
/*
* Expanded drawer
*/
#md-toggle-drawer:checked ~ & {
/// Expanded drawer
.md-toggle--drawer:checked ~ & {
width: 100%;
height: 100%;
transition: width 0.0s,
height 0.0s,
opacity 0.25s;
opacity: 1;
transition: opacity .25s,
width .0s,
height .0s;
}
}
}
/* ----------------------------------------------------------------------------
* Flexible elements, implemented with table layout
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Flexible elements, implemented with table layout
/// ---------------------------------------------------------------------------
/*
* Flexible layout container
*/
/// Flexible layout container
.md-flex {
display: table;
/*
* Flexible layout container cell/element
*/
/// Flexible layout container cell/element
&__cell {
display: table-cell;
vertical-align: top;
/*
* Shrink to minimum width
*/
/// Shrink to minimum width
&--shrink {
width: 1%;
}
/*
* Stretch to maximum width
*/
/// Stretch to maximum width
&--stretch {
display: table;
table-layout: fixed;
width: 100%;
table-layout: fixed;
}
}
/*
* Apply ellipsis in case of overflowing text
*/
/// Apply ellipsis in case of overflowing text
&__ellipsis {
display: table-cell;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}

68
src/assets/stylesheets/layout/_content.scss
View File

@ -1,59 +1,53 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Main content
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Main content
/// ---------------------------------------------------------------------------
/*
* Content container
*/
/// Content container
.md-content {
/* [tablet landscape +]: Add space for table of contents */
/// [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 */
/// [screen small +]: Add space for table of contents
@include break-from-device(screen small) {
margin-left: 24.2rem;
}
/*
* Define padding
*/
/// Define padding
&__inner {
margin: 2.4rem 1.6rem;
/* [screen small +]: Add space for table of contents */
/// [screen small +]: Add space for table of contents
@include break-from-device(screen small) {
margin: 2.4rem 2.4rem;
margin: 2.4rem;
}
}
/*
* Copyright and theme information
*/
/// Copyright and theme information
&__copyright {
display: block;
}

118
src/assets/stylesheets/layout/_footer.scss
View File

@ -1,116 +1,96 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Footer
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Footer
/// ---------------------------------------------------------------------------
/*
* Application footer
*/
/// Application footer
.md-footer {
position: absolute;
width: 100%;
bottom: 0;
width: 100%;
/*
* Pagination container
*/
/// Pagination container
&-pagination {
background: $md-color-black;
color: $md-color-white;
}
/*
* Link to previous and next page
*/
/// Footer navigation
&-nav {
overflow: auto;
padding: 0.4rem;
overflow: auto;
/*
* Links to previous and next page
*/
/// Links to previous and next page
&__link {
padding-top: 2.8rem;
padding-bottom: 0.8rem;
/* [mobile landscape +]: Set proportional width */
/// [mobile landscape +]: Set proportional width
@include break-from-device(mobile landscape) {
width: 50%;
}
/*
* Link to previous page
*/
/// Link to previous page
&--prev {
float: left;
width: 25%;
float: left;
/*
* Title
*/
/// Title
.md-footer-nav__title {
/* [mobile portrait -]: Hide title for previous page */
/// [mobile portrait -]: Hide title for previous page
@include break-to-device(mobile portrait) {
display: none;
}
}
}
/*
* Link to next page
*/
/// Link to next page
&--next {
float: right;
width: 75%;
float: right;
text-align: right;
}
}
/*
* Icon
*/
/// Link icon
&__icon {
display: inline-block;
font-size: 2.4rem;
padding: 0.8rem;
margin: 0.4rem;
cursor: pointer;
padding: 0.8rem;
transition: background 0.25s;
border-radius: 100%;
transition: background .25s;
font-size: 2.4rem;
cursor: pointer;
/*
* Pushed/clicked icon
*/
/// Pushed/clicked icon
&:active {
background: $md-color-white--lightest;
}
}
/*
* Title
*/
/// Link title
&__title {
position: relative;
padding: 0 0.4rem;
@ -118,17 +98,15 @@
line-height: 4.8rem;
}
/*
* Direction
*/
/// Link direction
&__direction {
position: absolute;
left: 0;
right: 0;
padding: 0 0.4rem;
left: 0;
margin-top: -2.0rem;
font-size: 1.5rem;
padding: 0 0.4rem;
color: $md-color-white--light;
font-size: 1.5rem;
}
}
}

88
src/assets/stylesheets/layout/_header.scss
View File

@ -1,86 +1,74 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Header
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Header
/// ---------------------------------------------------------------------------
/*
* Application header (stays always on top)
*/
/// Application header (stays always on top)
.md-header {
@include z-depth(2);
position: fixed;
top: 0;
left: 0;
right: 0;
left: 0;
height: 5.6rem;
z-index: 1;
background: $md-color-primary;
color: $md-color-white;
z-index: 1;
/*
* Navigation within header
*/
/// Navigation within header
&-nav {
padding: 0.4rem;
/*
* Icon
*/
/// Header icon
&__icon {
display: inline-block;
position: relative;
z-index: 1;
font-size: 2.4rem;
padding: 0.8rem;
margin: 0.4rem;
cursor: pointer;
padding: 0.8rem;
transition: background 0.25s;
border-radius: 100%;
transition: background .25s;
font-size: 2.4rem;
cursor: pointer;
z-index: 1;
/*
* Pushed/clicked icon
*/
/// Pushed/clicked icon
&:active {
background: $md-color-white--lightest;
}
/* [tablet +]: Hide the search icon */
/// [tablet +]: Hide the search icon from tablet
@include break-from-device(tablet) {
/*
* Search icon
*/
/// Search icon
&.md-icon--search {
display: none;
}
}
}
/*
* Title
*/
/// Header title
&__title {
padding: 0 2.0rem;
font-size: 1.8rem;

99
src/assets/stylesheets/layout/_nav.scss
View File

@ -1,105 +1,84 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Navigation
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Navigation
/// ---------------------------------------------------------------------------
/*
* Nested navigation
*/
/// Nested navigation
.md-nav {
/*
* Set font sizes
*/
&, h3 {
/// Set font sizes
&,
h3 {
font-size: ms(-1);
line-height: 1.2;
}
/*
* Table of contents
*/
/// Table of contents
&--toc {
border-left: px2rem(4px) solid $md-color-primary;
}
/*
* List of items
*/
/// List of items
&__list {
list-style: none;
/*
* 2nd+ level list
*/
/// 2nd+ level list
& & {
margin-left: 1.2rem;
}
/*
* Hide list by default
*/
/// Hide list by default
.md-nav__toggle ~ & {
max-height: 0;
overflow: hidden;
}
/*
* Expand list, if toggle is checked
*/
/// Expand list, if toggle is checked
.md-nav__toggle:checked ~ & {
max-height: 100%;
}
}
/*
* List item
*/
/// List item
&__item {
margin: 0.8rem 0 0;
line-height: 1.6rem;
}
/*
* Link inside item
*/
/// Link inside item
&__link {
display: block;
overflow: hidden;
transition: color 0.125s;
text-overflow: ellipsis;
transition: color .125s;
overflow: hidden;
/*
* Marked item
*/
/// Marked item
&--marked {
color: $md-color-black--light;
}
/*
* Current or hovered item
*/
/// Current or hovered item
&:hover,
&:active,
&--active {

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

@ -1,42 +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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Search
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Search
/// ---------------------------------------------------------------------------
/*
* Application search
*/
/// Application search
.md-search {
position: relative;
/*
* Search overlay
*/
/// Search overlay
&__overlay {
display: none;
/* [mobile -]: Only show overlay on mobile */
/// [mobile -]: Only show overlay on mobile
@include break-to-device(mobile) {
display: block;
position: absolute;
@ -44,131 +40,112 @@
left: 0.4rem;
width: 4.0rem;
height: 4.0rem;
transform-origin: center;
transition: transform 0.3s 0.1s,
opacity 0.2s 0.2s;
border-radius: 100%;
background: #EEEEEE;
opacity: 0;
overflow: hidden;
z-index: 0;
opacity: 0;
background: #EEEEEE;
border-radius: 100%;
transform-orgin: center;
transition: opacity .2s .2s,
transform .3s .1s;
/*
* Expanded overlay
*/
#md-toggle-search:checked ~ .md-header & {
z-index: 1;
opacity: 1;
/// Expanded overlay
.md-toggle--search:checked ~ .md-header & {
transform: scale(40);
transition: opacity .1s,
transform .4s;
transition: transform 0.4s,
opacity 0.1s;
opacity: 1;
z-index: 1;
}
}
}
/*
* Inner wrapper
*/
/// Inner wrapper
&__inner {
padding: 0.8rem 0.8rem 0;
/* [tablet +]: Header-embedded search */
/// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
padding: 0.4rem;
}
}
/*
* Search form
*/
/// Search form
&__form {
position: relative;
text-align: right;
border-radius: px2rem(2px);
text-align: right;
/* [mobile -]: Add drop-shadow on mobile */
/// [mobile -]: Add drop-shadow on mobile
@include break-to-device(mobile) {
@include z-depth(2);
}
}
/*
* Icon
*/
/// Icon
&__icon {
position: absolute;
top: 0.8rem;
left: 1.2rem;
transition: color 0.25s;
font-size: 2.4rem;
transition: color .25s;
cursor: pointer;
/* [mobile -]: Use back arrow as search icon */
/// [mobile -]: Use back arrow as search icon
@include break-to-device(mobile) {
top: 1.2rem;
/* Hack: @extend doesn't work in media queries, so override manually */
&:before {
/// Hack: @extend doesn't work in media queries, so override manually
&::before {
content: "arrow_back";
}
}
}
/*
* Search field
*/
/// Search field
&__input {
padding: 0 0.8rem 0 6.4rem;
border-radius: px2rem(2px);
/*
* Placeholder and icon color in active state
*/
/// Placeholder and icon color in active state
+ .md-search__icon,
&::placeholder {
color: $md-color-black--light;
}
/* [mobile -]: Full-screen search bar */
/// [mobile -]: Full-screen search bar
@include break-to-device(mobile) {
width: 100%;
height: 4.8rem;
font-size: 1.8rem;
}
/* [tablet +]: Header-embedded search */
/// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
width: 23.0rem;
height: 4.0rem;
padding-left: 4.8rem;
font-size: ms(0);
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
background-color 0.25s,
color 0.25s;
background: $md-color-white--lightest;
color: $md-color-white;
transition: color .25s,
background-color .25s,
width .25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
font-size: ms(0);
/*
* Placeholder color
*/
/// Placeholder color
+ .md-search__icon,
&::placeholder {
transition: color 0.25s;
color: $md-color-white;
transition: color .25s;
}
/*
* Active search field
*/
/// Active search field
&:focus {
width: 40.0rem;
background: $md-color-white;
color: $md-color-black;
width: 40.0rem;
/*
* Placeholder and icon color in active state
*/
/// Placeholder and icon color in active state
+ .md-search__icon,
&::placeholder {
color: $md-color-black--light;

126
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -1,78 +1,66 @@
/*
* 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.
*/
////
/// 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
////
/* ----------------------------------------------------------------------------
* Sidebar
* ------------------------------------------------------------------------- */
/// ---------------------------------------------------------------------------
/// Sidebar
/// ---------------------------------------------------------------------------
/*
* Sidebar content
*/
/// Sidebar content
.md-sidebar {
position: relative;
width: 24.2rem;
float: left;
overflow: visible;
/*
* Lock sidebar to container height (account for fixed header)
*/
/// Lock sidebar to container height (account for fixed header)
&.md-js__sidebar--locked {
position: fixed;
top: 5.6rem;
}
/* [tablet landscape -]: Convert navigation to drawer */
/// [tablet landscape -]: Convert navigation to drawer
@include break-to-device(tablet landscape) {
/*
* Render primary sidebar as a slideout container
*/
/// 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);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
background: $md-color-white;
z-index: 3;
/*
* Just hide drawer, if browser doesn't support 3D transforms
*/
/// Just hide drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: none;
}
/*
* Expanded drawer
*/
#md-toggle-drawer:checked ~ .md-container & {
/// Expanded drawer
.md-toggle--drawer:checked ~ .md-container & {
transform: translate3d(0, 0, 0);
/*
* Just show drawer, if browser doesn't support 3D transforms
*/
/// Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: block;
}
@ -80,25 +68,21 @@
}
}
/*
* Secondary sidebar with table of contents
*/
/// Secondary sidebar with table of contents
&--secondary {
display: none;
/* [tablet landscape +]: Show table of contents next to body copy */
/// [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
*/
/// 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 */
/// [screen small +]: Limit to grid
@include break-from-device(screen small) {
margin-left: 120.0rem;
}
@ -106,59 +90,47 @@
}
}
/*
* Wrapper for scrolling on overflow
*/
/// Wrapper for scrolling on overflow
&__scrollwrap {
margin: 2.4rem 0.4rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* [tablet landscape -]: Adjust margins */
/// [tablet landscape -]: Adjust margins
@include break-to-device(tablet landscape) {
/*
* Adjust margins for primary scrollbar
*/
/// Adjust margins for primary scrollbar
.md-sidebar--primary & {
margin: 0;
}
}
/*
* Limit height to window, if JavaScript is available
*/
/// Limit height to window, if JavaScript is available
.js & {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
bottom: 0;
left: 0;
}
/*
* Override native scrollbar styles
*/
/// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
/*
* Style scrollbar thumb
*/
/// Style scrollbar thumb
&-thumb {
background: $md-color-black--lighter;
}
}
}
/*
* Actual sidebar content
*/
/// Actual sidebar content
&__inner {
padding: 1.2rem;
/* [screen small +]: Add line for reference */
/// [screen small +]: Add line for reference
@include break-from-device(screen small) {
border-right: px2rem(1px) solid $md-color-black--lightest;
}

6
src/base.html
View File

@ -84,11 +84,11 @@
<body>
<!-- State toggles -->
<input class="md-toggle" type="checkbox" id="md-toggle-drawer" />
<input class="md-toggle" type="checkbox" id="md-toggle-search" />
<input class="md-toggle md-toggle--drawer" type="checkbox" id="drawer" />
<input class="md-toggle md-toggle--search" type="checkbox" id="search" />
<!-- Overlay for expanded drawer -->
<label class="md-overlay" for="md-toggle-drawer"></label>
<label class="md-overlay" for="drawer"></label>
<!-- Application header -->
{% include "header.html" %}

8
src/header.html
View File

@ -30,7 +30,7 @@
<!-- 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>
for="drawer"></label>
</div>
<!-- Header title -->
@ -43,15 +43,15 @@
<!-- Button to open search dialogue -->
<div class="md-flex__cell md-flex__cell--shrink md-search">
<label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label>
for="search"></label>
<div class="md-search__overlay"></div>
<div class="md-search__inner">
<form class="md-search__form">
<input type="text" class="md-search__input"
placeholder="Search" autocapitalize="off" autocorrect="off"
autocomplete="off" spellcheck="false" id="md-search" />
autocomplete="off" spellcheck="false" id="query" />
<label class="md-icon md-icon--search md-search__icon"
for="md-search"></label>
for="query"></label>
<div class="md-search__suggest">
FOO<br />
FOO<br />