starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-04 19:45:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Material icon integration - bye bye webfonts

Browse Source
This commit is contained in:
squidfunk
2020-02-24 18:07:50 +01:00
parent b345a0b650
commit 11d1b839a1
61 changed files with 675 additions and 921 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/MaterialIcons-Regular.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/MaterialIcons-Regular.woff
View File

Binary file not shown.

BIN
src/assets/fonts/MaterialIcons-Regular.woff2
View File

Binary file not shown.

9
src/assets/javascripts/templates/clipboard/index.tsx
View File

@@ -46,12 +46,17 @@ const css = {
*/
export function renderClipboard(
id: string
): HTMLElement {
) {
const path = require("material-design-icons-svg/paths/content-copy.json")
return (
<button
class={css.container}
title={translate("clipboard.copy")}
data-clipboard-target={`#${id} code`}
>&#xE14D;</button>
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d={path}></path>
</svg>
</button>
)
}

14
src/assets/javascripts/templates/search/index.tsx
View File

@@ -52,12 +52,24 @@ const css = {
*/
export function renderSearchResult(
{ article, sections }: SearchResult
): HTMLElement {
) {
// create page with icon
const path = require("material-design-icons-svg/paths/file-search-outline.json")
const children = [article, ...sections].map(document => {
const { location, title, text } = document
return (
<a href={location} class={css.link} tabIndex={-1}>
<article class={"parent" in document ? css.section : css.article}>
{!("parent" in document)
? <div class="md-search-result__icon md-icon__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d={path}></path>
</svg>
</div>
: null
}
<h1 class={css.title}>{title}</h1>
{text.length
? <p class={css.teaser}>{truncate(text, 320)}</p>

2
src/assets/javascripts/templates/source/index.tsx
View File

@@ -48,7 +48,7 @@ const css = {
*/
export function renderSource(
facts: SourceFacts
): HTMLElement {
) {
const children = facts.map(fact => (
<li class={css.fact}>{fact}</li>
))

2
src/assets/javascripts/templates/table/index.tsx
View File

@@ -47,7 +47,7 @@ const css = {
*/
export function renderTable(
table: HTMLTableElement
): HTMLElement {
) {
return (
<div class={css.wrapper}>
<div class={css.table}>

76
src/assets/javascripts/utilities/jsx/index.ts
View File

@@ -20,6 +20,8 @@
* IN THE SOFTWARE.
*/
// tslint:disable no-null-keyword
import { JSX as JSXInternal } from "preact"
import { keys } from "ramda"
@@ -28,7 +30,7 @@ import { keys } from "ramda"
* ------------------------------------------------------------------------- */
/**
* HTML attributes
* HTML and SVG attributes
*/
type Attributes =
& JSXInternal.HTMLAttributes
@@ -40,6 +42,7 @@ type Attributes =
*/
type Child =
| HTMLElement
| SVGElement
| Text
| string
| number
@@ -48,13 +51,69 @@ type Child =
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Create an element
*
* @param tag - HTML or SVG tag
*
* @return Element
*/
function createElement(tag: string): HTMLElement | SVGElement {
switch (tag) {
/* SVG elements */
case "svg":
case "path":
return document.createElementNS("http://www.w3.org/2000/svg", tag)
/* HTML elements */
default:
return document.createElement(tag)
}
}
/**
* Set an attribute
*
* @param el - Element
* @param name - Attribute name
* @param value - Attribute value
*/
function setAttribute(
el: HTMLElement | SVGElement, name: string, value: string) {
switch (name) {
/* Attributes to be ignored */
case "xmlns":
break
/* Attributes of SVG elements */
case "viewBox":
case "d":
if (typeof value !== "boolean")
el.setAttributeNS(null, name, value)
else if (value)
el.setAttributeNS(null, name, "")
break
/* Attributes of HTML elements */
default:
if (typeof value !== "boolean")
el.setAttribute(name, value)
else if (value)
el.setAttribute(name, "")
}
}
/**
* Append a child node to an element
*
* @param el - Element
* @param child - Child node(s)
*/
function appendChild(el: HTMLElement, child: Child | Child[]): void {
function appendChild(
el: HTMLElement | SVGElement, child: Child | Child[]
): void {
/* Handle primitive types (including raw HTML) */
if (typeof child === "string" || typeof child === "number") {
@@ -78,7 +137,7 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
/**
* JSX factory
*
* @param tag - HTML tag
* @param tag - HTML or SVG tag
* @param attributes - HTML attributes
* @param children - Child elements
*
@@ -86,16 +145,13 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
*/
export function h(
tag: string, attributes: Attributes | null, ...children: Child[]
): HTMLElement {
const el = document.createElement(tag)
): HTMLElement | SVGElement {
const el = createElement(tag)
/* Set attributes, if any */
if (attributes)
for (const attr of keys(attributes))
if (typeof attributes[attr] !== "boolean")
el.setAttribute(attr, attributes[attr])
else if (attributes[attr])
el.setAttribute(attr, "")
setAttribute(el, attr, attributes[attr])
/* Append child nodes */
for (const child of children)
@@ -111,7 +167,7 @@ export function h(
export declare namespace h {
namespace JSX {
type Element = HTMLElement
type Element = HTMLElement | SVGElement
type IntrinsicElements = JSXInternal.IntrinsicElements
}
}

6
src/assets/stylesheets/app-palette.scss
View File

@@ -136,7 +136,7 @@ button[data-md-color-accent] {
@include break-to-device(tablet) {
// Site title in main navigation
html & .md-nav--primary .md-nav__title--site {
html & .md-nav--primary .md-nav__title[for="drawer"] {
background-color: $color;
}
}
@@ -211,7 +211,7 @@ button[data-md-color-primary="white"] {
@include break-to-device(tablet) {
// Site title in main navigation
html & .md-nav--primary .md-nav__title--site {
html & .md-nav--primary .md-nav__title[for="drawer"] {
background-color: $md-color-white;
color: $md-color-black;
}
@@ -278,7 +278,7 @@ button[data-md-color-primary="black"] {
@include break-to-device(tablet) {
// Site title in main navigation
html & .md-nav--primary .md-nav__title--site {
html & .md-nav--primary .md-nav__title[for="drawer"] {
background-color: $clr-black;
}
}

7
src/assets/stylesheets/base/.stylelintrc
View File

@@ -1,7 +0,0 @@
{
"extends": "../../../../.stylelintrc",
"rules": {
"font-weight-notation": null,
"property-no-vendor-prefix": null
}
}

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

@@ -20,78 +20,27 @@
/// DEALINGS
////
// stylelint-disable font-family-no-missing-generic-family-keyword
// ----------------------------------------------------------------------------
// Font faces
// ----------------------------------------------------------------------------
// Icon font
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: local("Material Icons"),
local("MaterialIcons-Regular"),
url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
url("../fonts/MaterialIcons-Regular.woff") format("woff"),
url("../fonts/MaterialIcons-Regular.ttf") format("truetype")
}
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Icon placeholders
%md-icon {
font-family: "Material Icons";
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
// Icon
.md-icon {
// Icon rendered as button
// Icon with button spacing
&__button {
display: inline-block;
width: #{$md-icon-size + 2 * $md-icon-padding};
margin: $md-icon-margin;
padding: $md-icon-padding;
font-size: $md-icon-size;
margin: px2rem(4px);
padding: px2rem(8px);
cursor: pointer;
}
}
// Representational classes
.md-icon {
@extend %md-icon;
// Build representational classes
@each $ligature, $name in (
"\E5C4": "arrow-back", // arrow_back
"\E5C8": "arrow-forward", // arrow_forward
"\E5D2": "menu", // menu
"\E8B6": "search" // search
) {
&--#{$name}::before {
content: $ligature;
}
}
// Adjust for RTL languages
[dir="rtl"] & {
// Flip ligatures for arrows
@each $ligature, $name in (
"\E5C8": "arrow-back", // arrow_forward
"\E5C4": "arrow-forward" // arrow_back
) {
&--#{$name}::before {
content: $ligature;
}
}
// Inherit current color
svg {
display: block;
width: px2rem(24px);
height: px2rem(24px);
margin: 0 auto;
fill: currentColor;
}
}

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

@@ -56,7 +56,7 @@ hr {
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
a {
-webkit-text-decoration-skip: objects;
-webkit-text-decoration-skip: objects; // stylelint-disable-line
}
// Reset tap outlines on iOS and Android
@@ -111,7 +111,7 @@ table {
// Reset table cell styles
td,
th {
font-weight: normal;
font-weight: normal; // stylelint-disable-line
vertical-align: top;
}

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

@@ -60,7 +60,7 @@ kbd {
line-height: 1.6;
// Colors should be kept when printing
-webkit-print-color-adjust: exact;
-webkit-print-color-adjust: exact; // stylelint-disable-line
// Default spacing
p,
@@ -143,9 +143,9 @@ kbd {
transition: color 125ms;
}
// Hovered and active links
&:hover,
&:active {
// Focused or hover links
&:focus,
&:hover {
color: $md-color-accent;
}
@@ -242,7 +242,7 @@ kbd {
height: px2rem(4px);
}
// Style scrollbar thumb
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter;
@@ -314,7 +314,7 @@ kbd {
sub {
margin-left: 0.0625em * 1 / 0.8;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 0.0625em * 1 / 0.8;
margin-left: initial;
@@ -327,7 +327,7 @@ kbd {
border-left: px2rem(4px) solid $md-color-black--lighter;
color: $md-color-black--light;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: initial;
@@ -347,7 +347,7 @@ kbd {
margin-left: 0.625em;
padding: 0;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 0.625em;
margin-left: initial;
@@ -368,7 +368,7 @@ kbd {
margin-bottom: 0.5em;
margin-left: 1.25em;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 1.25em;
margin-left: initial;
@@ -390,7 +390,7 @@ kbd {
ol {
margin: 0.5em 0 0.5em 0.625em;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 0.625em;
margin-left: initial;
@@ -403,7 +403,7 @@ kbd {
dd {
margin: 1em 0 1em 1.875em;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 1.875em;
margin-left: initial;
@@ -439,7 +439,7 @@ kbd {
td:not([align]) {
text-align: left;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
text-align: right;
}

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

@@ -31,16 +31,21 @@
.admonition {
margin: 1.5625em 0;
padding: 0 px2rem(12px);
border-left: px2rem(4px) solid $clr-blue-a200;
border-left: px2rem(3px) solid $clr-blue-a200;
border-radius: px2rem(2px);
font-size: ms(-1);
box-shadow: inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85);
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset 1px 0 $clr-blue-a200;
overflow: auto;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
border-right: px2rem(4px) solid $clr-blue-a200;
border-right: px2rem(3px) solid $clr-blue-a200;
border-left: none;
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset -1px 0 $clr-blue-a200;
}
// Adjust spacing on last element
@@ -60,7 +65,7 @@
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
}
@@ -72,8 +77,6 @@
// Icon
&::before {
@extend %md-icon;
position: absolute;
width: px2rem(20px);
height: px2rem(20px);
@@ -82,7 +85,7 @@
mask-image: url("{{ pencil }}");
content: "";
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-28px);
margin-left: initial;
@@ -111,11 +114,16 @@
&%#{nth($names, 1)},
&.#{nth($names, 1)} {
border-left-color: $tint;
box-shadow: inset 0 0 0 px2rem(1px) transparentize($tint, 0.85);
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset 1px 0 $tint;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
border-right-color: $tint;
box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset -1px 0 $tint;
}
// Title

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

@@ -268,6 +268,7 @@ $codehilite-whitespace: transparent;
}
}
// TODO: refactor
[data-linenos] {
&::before {
display: inline-block;

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

@@ -115,8 +115,6 @@
// Footnote back reference
.footnote-backref {
@extend %md-icon;
display: inline-block;
transform: translateX(px2rem(5px));
transition:
@@ -129,7 +127,7 @@
opacity: 0;
vertical-align: text-bottom;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(px2rem(-5px));
}
@@ -137,10 +135,13 @@
// Back reference icon
&::before {
display: inline-block;
font-size: px2rem(16px);
content: "\E31B"; // keyboard_return
width: px2rem(16px);
height: px2rem(16px);
background-color: currentColor;
mask-image: url("{{ anchor }}");
content: "";
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: scaleX(-1)
}

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

@@ -35,12 +35,12 @@
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms,
visibility 0ms 500ms;
opacity 125ms 250ms;
// visibility 0ms 500ms;
opacity: 0;
// Hack: If we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
visibility: hidden;
// visibility: hidden;
// Adjust for RTL languages
[dir="rtl"] & {
@@ -92,10 +92,10 @@
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms,
visibility 0ms;
opacity 125ms 250ms;
// visibility 0ms;
opacity: 1;
visibility: visible;
// visibility: visible;
}
// Active or targeted permalink

22
src/assets/stylesheets/extensions/pymdown/_critic.scss
View File

@@ -39,7 +39,7 @@
// Deletion
del.critic {
background-color: $codehilite-diff-deleted; // TODO: dependent on order of inclusion
background-color: $codehilite-diff-deleted;
box-shadow:
+0.25em 0 0 $codehilite-diff-deleted,
-0.25em 0 0 $codehilite-diff-deleted;
@@ -47,7 +47,7 @@
// Addition
ins.critic {
background-color: $codehilite-diff-inserted; // TODO: dependent on order of inclusion
background-color: $codehilite-diff-inserted;
box-shadow:
+0.25em 0 0 $codehilite-diff-inserted,
-0.25em 0 0 $codehilite-diff-inserted;
@@ -55,20 +55,16 @@
// Comment
.critic.comment {
background-color: $md-code-background; // TODO: rename, centralize somehow
color: $md-code-color;
box-shadow:
+0.25em 0 0 $md-code-background,
-0.25em 0 0 $md-code-background;
color: $codehilite-comment;
// Icon
// Comment opening mark
&::before {
@extend %md-icon;
content: "/* ";
}
padding-right: 0.125em;
color: $md-color-black--lighter;
content: "\E0B7"; // chat
vertical-align: -0.125em;
// Comment closing mark
&::after {
content: " */";
}
}

29
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@@ -54,25 +54,11 @@
position: relative;
padding-right: px2rem(40px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-left: px2rem(40px);
}
}
// Manually hide and show, if browser doesn't support details
.no-details &:not([open]) {
// Hide all nested tags ...
> * {
display: none;
}
// ... but show title
summary {
display: block;
}
}
}
// Title
@@ -91,16 +77,15 @@
// Icon
&::after {
@extend %md-icon;
position: absolute;
top: px2rem(8px);
right: px2rem(12px);
color: $md-color-black--lighter;
font-size: px2rem(20px);
content: "\E313"; // keyboard_arrow_down
width: px2rem(20px);
height: px2rem(20px);
background-color: $md-color-black--lighter;
mask-image: url("{{ chevron-down }}");
content: "";
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);

22
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@@ -39,7 +39,7 @@
top: 0.45em;
left: -2em;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: -2em;
left: initial;
@@ -52,26 +52,26 @@
// Checkbox icon in unchecked state
.task-list-indicator::before {
@extend %md-icon;
position: absolute;
top: 0.15em;
left: -1.25em;
color: $md-color-black--lighter;
font-size: 1.25em;
content: "\E835"; // check_box_outline_blank
vertical-align: -0.25em;
left: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: $md-color-black--lightest;
mask-image: url("{{ checkbox-blank-circle }}");
content: "";
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: -1.25em;
right: px2em(-24px);
left: initial;
}
}
// Checkbox icon in checked state
[type="checkbox"]:checked + .task-list-indicator::before {
content: "\E834"; // check_box
background-color: $clr-green-a400;
mask-image: url("{{ check-circle }}");
}
// Hide original checkbox behind icon

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

@@ -119,6 +119,14 @@ hr {
}
}
// Apply ellipsis in case of overflowing text
.md-ellipsis {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// ----------------------------------------------------------------------------
// Rules: navigational elements
// ----------------------------------------------------------------------------
@@ -158,37 +166,6 @@ hr {
}
}
// ----------------------------------------------------------------------------
// Rules: flexible elements
// ----------------------------------------------------------------------------
// Flexible layout container
.md-flex {
display: flex;
// Flexible layout container cell/element
&__cell {
position: relative;
// Shrink to minimum width
&--shrink {
flex-grow: 0;
}
// Stretch to maximum width
&--stretch {
flex-grow: 1;
}
}
// Apply ellipsis in case of overflowing text
&__ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
// ----------------------------------------------------------------------------
// Rules: skip link
// ----------------------------------------------------------------------------

15
src/assets/stylesheets/layout/_clipboard.scss
View File

@@ -27,14 +27,13 @@
// Copy to clipboard
.md-clipboard {
position: absolute;
top: px2rem(6px);
right: px2rem(6px);
width: px2rem(28px);
height: px2rem(28px);
top: px2rem(8px);
right: px2rem(8px);
width: px2rem(24px);
height: px2rem(24px);
transition: color 250ms;
border-radius: px2rem(2px);
color: $md-color-black--lightest;
font-size: px2rem(16px);
cursor: pointer;
z-index: 1;
// Hack: put everything on the GPU to omit flickering
@@ -45,6 +44,12 @@
display: none;
}
// Slightly smaller icon
svg {
width: px2rem(18px);
height: px2rem(18px);
}
// Show on container hover
pre:hover &,
.codehilite:hover & {

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

@@ -31,7 +31,7 @@
@include break-from-device(tablet landscape) {
margin-right: px2rem(242px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: initial;
margin-left: px2rem(242px);
@@ -42,7 +42,7 @@
@include break-from-device(screen) {
margin-left: px2rem(242px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(242px);
}
@@ -73,20 +73,36 @@
}
}
// Icons
&__icon {
@extend %md-icon__button;
position: relative;
// Button next to the title
&__button {
margin: px2rem(8px) 0;
margin-left: px2rem(8px);
padding: 0;
float: right;
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(8px);
margin-left: initial;
float: left;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// Override default link color for icons
.md-typeset & {
color: $md-color-black--lighter;
}
// Align text with icon
svg {
display: inline;
vertical-align: top;
}
// Hide for print
@media print {
display: none;

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

@@ -38,12 +38,6 @@
background-color: $md-color-black;
color: $md-color-white;
// Icons
svg {
display: block;
fill: currentColor;
}
// Set spacing
&__inner {
padding: px2rem(4px);
@@ -52,6 +46,7 @@
// Links to previous and next page
&__link {
display: flex;
padding-top: px2rem(28px);
padding-bottom: px2rem(8px);
transition: opacity 250ms;
@@ -61,7 +56,8 @@
width: 50%;
}
// Hovered link
// Focused or hovered links
&:focus,
&:hover {
opacity: 0.7;
}
@@ -71,9 +67,14 @@
width: 25%;
float: left;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: right;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// Title
@@ -92,24 +93,24 @@
float: right;
text-align: right;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
text-align: left;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
}
}
// Icon buttons
&__button {
@extend %md-icon__button;
transition: background 250ms;
}
// Link title - set line height to match icon for correct alignment
&__title {
position: relative;
flex-grow: 1;
max-width: calc(100% - #{px2rem(48px)});
padding: 0 px2rem(20px);
font-size: px2rem(18px);
line-height: px2rem(48px);
@@ -161,7 +162,7 @@
max-width: 75%;
float: left;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: right;
}
@@ -183,7 +184,7 @@
padding: px2rem(12px) 0;
float: right;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
}
@@ -194,7 +195,7 @@
display: inline-block;
width: px2rem(32px);
height: px2rem(32px);
font-size: px2rem(16px);
transition: color 250ms;
text-align: center;
// Adjust line-height to match height for correct alignment
@@ -205,15 +206,8 @@
// Social icon
svg {
width: px2rem(16px);
transition: fill 250ms;
vertical-align: -25%;
fill: $md-color-white--light;
}
// Focused or hovered link
&:focus svg,
&:hover svg {
fill: $md-color-white;
fill: currentColor;
}
}
}

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

@@ -41,12 +41,6 @@
// Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden;
// Icons
svg {
display: block;
fill: currentColor;
}
// Always hide shadow, in case JavaScript is not available
.no-js & {
transition: none;
@@ -72,28 +66,50 @@
// Navigation within header
.md-header-nav {
display: flex;
padding: 0 px2rem(4px);
// Icon buttons
&__button {
@extend %md-icon__button;
position: relative;
transition: opacity 250ms;
z-index: 1;
// Hovered icon
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// Focused or hovered icon
&:focus,
&:hover {
opacity: 0.7;
}
// Set correct display on image or icon
&.md-logo * {
display: block;
// Logo
&.md-logo {
margin: px2rem(4px);
padding: px2rem(8px);
// Set correct display on image or icon
* {
display: block;
}
// Inherit current color
svg {
width: px2rem(24px);
height: px2rem(24px);
fill: currentColor;
}
}
// Hide search icon, if JavaScript is not available.
.no-js &.md-icon--search {
.no-js &[for="search"] {
display: none;
}
@@ -129,7 +145,8 @@
&__topic {
display: block;
position: absolute;
width: calc(100% - #{px2rem(20px)});
width: calc(100% - #{px2rem(40px)});
padding: 0 px2rem(20px);
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
@@ -147,7 +164,7 @@
z-index: -1;
pointer-events: none;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(px2rem(-25px));
}
@@ -166,7 +183,7 @@
// Header title - set line height to match icon for correct alignment
&__title {
padding: 0 px2rem(20px);
flex-grow: 1;
font-size: px2rem(18px);
line-height: px2rem(48px);
@@ -180,7 +197,7 @@
z-index: -1;
pointer-events: none;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(px2rem(25px));
}
@@ -196,6 +213,13 @@
pointer-events: initial;
}
}
// Patch ellipsis
> .md-header-nav__ellipsis {
position: relative;
width: 100%;
height: 100%;
}
}
// Repository containing source
@@ -209,7 +233,7 @@
max-width: px2rem(234px);
margin-left: px2rem(20px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(20px);
margin-left: initial;
@@ -220,7 +244,7 @@
@include break-from-device(screen) {
margin-left: px2rem(28px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(28px);
}

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

@@ -37,22 +37,20 @@
text-overflow: ellipsis;
overflow: hidden;
// Icon, hidden by default
&::before {
@extend %md-icon, %md-icon__button;
display: none;
content: "\E5C4"; // arrow_back
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E5C8"; // arrow_forward
}
}
// Hide button by default
// Hide buttons by default
.md-nav__button {
display: none;
// Stretch images
img {
width: 100%;
height: auto;
}
// Logo
&.md-logo svg {
fill: currentColor;
}
}
}
@@ -76,7 +74,7 @@
& & {
padding-right: 0;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: 0;
@@ -89,17 +87,6 @@
}
}
// Button with logo
&__button {
@extend %md-icon, %md-icon__button;
// Stretch image
img {
width: 100%;
height: auto;
}
}
// Link inside item
&__link {
display: block;
@@ -110,16 +97,6 @@
overflow: hidden;
scroll-snap-align: start;
// Icon
&::after {
@extend %md-icon;
// Item contains a nested list
.md-nav__item--nested > & {
content: "\E313"; // keyboard_arrow_down
}
}
// Hide link to table of contents by default - this will only match the
// table of contents inside the drawer below and including tablet portrait
html &[for="__toc"] {
@@ -129,11 +106,6 @@
& ~ .md-nav {
display: none;
}
// Hide icon for current item
+ .md-nav__link::after {
display: none;
}
}
// Blurred link
@@ -142,8 +114,7 @@
}
// Active link
&:active,
&--active {
.md-nav__item &--active {
color: $md-color-primary;
}
@@ -191,9 +162,8 @@
line-height: 1.5;
}
// List title - higher specificity is necessary to ensure that the title
// inside the drawer is always styled accordingly
html & .md-nav__title {
// List title
.md-nav__title {
position: relative;
height: px2rem(112px);
padding: px2rem(60px) px2rem(16px) px2rem(4px);
@@ -205,14 +175,20 @@
cursor: pointer;
// Icon
&::before {
.md-nav__icon {
display: block;
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
width: px2rem(40px);
height: px2rem(40px);
color: $md-color-black--light;
top: px2rem(8px);
left: px2rem(8px);
width: px2rem(24px);
height: px2rem(24px);
margin: px2rem(4px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(8px);
left: initial;
}
}
// Main lists
@@ -229,7 +205,7 @@
}
// Site title in main navigation
&--site {
&[for="__drawer"] {
position: relative;
background-color: $md-color-primary;
color: $md-color-white;
@@ -242,27 +218,18 @@
left: px2rem(4px);
width: px2rem(64px);
height: px2rem(64px);
margin: px2rem(4px);
padding: px2rem(8px);
font-size: px2rem(48px);
}
// Hide back arrow icon
&::before {
display: none;
}
}
}
// Adjust for RTL languages
// Adjust for right-to-left languages
html [dir="rtl"] & .md-nav__title {
// Icon
&::before {
right: px2rem(4px);
left: initial;
}
// Site title in main navigation
&--site .md-nav__button {
&[for="__drawer"] .md-nav__button {
right: px2rem(4px);
left: initial;
}
@@ -278,7 +245,7 @@
padding: 0;
border-top: px2rem(1px) solid $md-color-black--lightest;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: 0;
}
@@ -287,21 +254,11 @@
&--nested > .md-nav__link {
padding-right: px2rem(48px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(16px);
padding-left: px2rem(48px);
}
// Replace icon with right arrow
&::after {
content: "\E315"; // keyboard_arrow_right
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E314"; // keyboard_arrow_left
}
}
}
}
@@ -311,8 +268,8 @@
margin-top: 0;
padding: px2rem(12px) px2rem(16px);
// Rotate icon
&::after {
// Icon
.md-nav__icon {
position: absolute;
top: 50%;
right: px2rem(12px);
@@ -320,7 +277,7 @@
color: inherit;
font-size: px2rem(24px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);
@@ -328,6 +285,19 @@
}
}
// Icon
.md-nav__icon {
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scale(-1);
}
}
}
// Table of contents inside navigation
.md-nav--secondary {
@@ -345,7 +315,7 @@
.md-nav__link {
padding-left: px2rem(28px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(28px);
padding-left: initial;
@@ -356,7 +326,7 @@
.md-nav .md-nav__link {
padding-left: px2rem(40px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(40px);
padding-left: initial;
@@ -367,7 +337,7 @@
.md-nav .md-nav .md-nav__link {
padding-left: px2rem(52px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(52px);
padding-left: initial;
@@ -378,7 +348,7 @@
.md-nav .md-nav .md-nav .md-nav__link {
padding-left: px2rem(64px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(64px);
padding-left: initial;
@@ -397,15 +367,10 @@
opacity 125ms 50ms;
opacity: 0;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(-100%);
}
// Just hide navigation, if browser doesn't supports 3D transforms
.no-csstransforms3d & {
display: none;
}
}
// Expand nested navigation, if toggle is checked
@@ -415,11 +380,6 @@
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 125ms 125ms;
opacity: 1;
// Just show navigation, if browser doesn't supports 3D transforms
.no-csstransforms3d & {
display: flex;
}
}
}
@@ -432,12 +392,6 @@
display: block;
padding-right: px2rem(48px);
// Unrotate icon for table of contents
&::after {
color: inherit;
content: "\E8DE"; // toc
}
// Hide link to current item
+ .md-nav__link {
display: none;
@@ -449,7 +403,7 @@
}
}
// Adjust for RTL languages
// Adjust for right-to-left languages
html [dir="rtl"] &__link {
padding-right: px2rem(16px);
padding-left: px2rem(48px);
@@ -471,10 +425,19 @@
// property must be calculated before transitioning
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
// Snap to site and table of contents title
.md-nav__title[for="__drawer"],
.md-nav__title[for="__toc"] {
scroll-snap-align: start;
// List title
.md-nav__title {
// Snap to site and table of contents title
&[for="__drawer"],
&[for="__toc"] {
scroll-snap-align: start;
}
// Hide icons
.md-nav__icon {
display: none;
}
}
// Hide nested navigation by default
@@ -492,27 +455,23 @@
display: none;
}
// Link inside item - ideally the link display method would be set to
// inline on screen, but this doesn't work with text ellipsis
&__link {
// Icon
&__icon {
height: px2rem(18px);
float: right;
transition: transform 250ms;
// Item contains a nested list
.md-nav__item--nested > &::after {
// Inline icon and adjust to match font size
svg {
display: inline-block;
transform-origin: 0.45em 0.45em;
transform-style: preserve-3d;
vertical-align: -0.125em;
// Only animate icon when JavaScript is available, as the height can
// not be animated anyway, and better no fun than half the fun
.js & {
transition: transform 400ms;
}
width: px2rem(18px);
height: px2rem(18px);
vertical-align: px2rem(-2px);
}
// Rotate icon for expanded lists
.md-nav__item--nested .md-nav__toggle:checked ~ &::after {
transform: rotateX(180deg);
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
transform: rotateZ(90deg);
}
}
}

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

@@ -34,6 +34,7 @@ $md-toggle__search--checked:
// Search container
.md-search {
position: relative;
// Hide search, if JavaScript is not available.
.no-js & {
@@ -42,7 +43,6 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
margin-left: px2rem(4px);
padding: px2rem(4px) 0;
}
@@ -55,9 +55,9 @@ $md-toggle__search--checked:
@include break-to-device(tablet portrait) {
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
width: px2rem(36px);
height: px2rem(36px);
left: px2rem(-44px);
width: px2rem(40px);
height: px2rem(40px);
transform-origin: center;
transition:
transform 300ms 100ms,
@@ -67,9 +67,9 @@ $md-toggle__search--checked:
overflow: hidden;
pointer-events: none;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(4px);
right: px2rem(-44px);
left: initial;
}
@@ -115,7 +115,7 @@ $md-toggle__search--checked:
background-color: $md-color-black--light;
cursor: pointer;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
@@ -164,14 +164,14 @@ $md-toggle__search--checked:
opacity 150ms 150ms;
opacity: 1;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
}
}
// Adjust for RTL languages
// Adjust for right-to-left languages
html [dir="rtl"] & {
right: 100%;
left: initial;
@@ -187,7 +187,7 @@ $md-toggle__search--checked:
float: right;
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
}
@@ -225,7 +225,7 @@ $md-toggle__search--checked:
text-overflow: ellipsis;
z-index: 2;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: 0 px2rem(72px) 0 px2rem(44px);
}
@@ -239,10 +239,6 @@ $md-toggle__search--checked:
~ .md-search__icon,
&::placeholder {
color: $md-color-black--light;
svg {
fill: $md-color-black--light; // TODO: currentColor?
}
}
// Remove the "x" rendered by Internet Explorer
@@ -270,14 +266,14 @@ $md-toggle__search--checked:
color: inherit;
font-size: ms(0);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
}
// Icon color
+ .md-search__icon {
fill: inherit;
color: $md-color-white;
}
// Placeholder color
@@ -306,7 +302,7 @@ $md-toggle__search--checked:
}
}
// Icons
// Icon
&__icon {
position: absolute;
width: px2rem(24px);
@@ -328,33 +324,41 @@ $md-toggle__search--checked:
top: px2rem(6px);
left: px2rem(10px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(10px);
left: initial;
}
// // Set search icon on pseudo class, so it can be overridden for mobile
// // and tablet when the search is rendered in an overlay
// &::before {
// content: "\E8B6"; // search
// }
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: px2rem(12px);
left: px2rem(16px);
// // Show back arrow instead of search icon
// &[for="__search"]::before {
// content: "\E5C4"; // arrow_back
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(16px);
left: initial;
}
// // Adjust for RTL languages
// [dir="rtl"] & {
// content: "\E5C8"; // arrow_forward
// }
// }
// TODO: directly include it template, then switch
// Hide the magnifying glass (1st icon)
svg:first-child {
display: none;
}
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
// Hide the arrow (2nd icon)
svg:last-child {
display: none;
}
}
}
@@ -368,7 +372,7 @@ $md-toggle__search--checked:
opacity 150ms;
opacity: 0;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(10px);
@@ -378,6 +382,12 @@ $md-toggle__search--checked:
@include break-to-device(tablet portrait) {
top: px2rem(12px);
right: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(16px);
}
}
// Show reset button if search is active and input non-empty
@@ -461,7 +471,7 @@ $md-toggle__search--checked:
height: px2rem(4px);
}
// Style scrollbar thumb
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter;
@@ -492,7 +502,7 @@ $md-toggle__search--checked:
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: initial;
@@ -548,7 +558,7 @@ $md-toggle__search--checked:
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: px2rem(16px);
@@ -558,29 +568,6 @@ $md-toggle__search--checked:
// Document
&--document {
// Icon
&::before {
@extend %md-icon, %md-icon__button;
position: absolute;
left: 0;
margin: px2rem(2px);
transition: opacity 250ms;
color: $md-color-black--light;
content: "\E880"; // find_in_page
// Adjust for RTL languages
[dir="rtl"] & {
right: 0;
left: initial;
}
// [tablet portrait -]: Hide page icon
@include break-to-device(tablet portrait) {
display: none;
}
}
// Title
.md-search-result__title {
margin: px2rem(11px) 0;
@@ -591,6 +578,26 @@ $md-toggle__search--checked:
}
}
// Icon
&__icon {
position: absolute;
left: 0;
margin: px2rem(2px);
transition: opacity 250ms;
color: $md-color-black--light;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
}
// [tablet portrait -]: Hide page icon
@include break-to-device(tablet portrait) {
display: none;
}
}
// Title
&__title {
margin: 0.5em 0;

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

@@ -67,32 +67,22 @@ $md-toggle__drawer--checked:
background-color: $md-color-white;
z-index: 3;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(-242px);
left: initial;
}
// Just hide drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: none;
}
// Expanded drawer
#{$md-toggle__drawer--checked} & {
@include z-depth(8);
transform: translateX(px2rem(242px));
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(px2rem(-242px));
}
// Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: block;
}
}
// Hide overflow for nested navigation
@@ -111,7 +101,7 @@ $md-toggle__drawer--checked:
display: block;
margin-left: calc(100% - #{px2rem(242px)});
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: calc(100% - #{px2rem(242px)});
margin-left: initial;
@@ -127,7 +117,7 @@ $md-toggle__drawer--checked:
@include break-from-device(screen) {
margin-left: px2rem((1220 - 242) * 1px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem((1220 - 242) * 1px);
margin-left: initial;
@@ -166,7 +156,7 @@ $md-toggle__drawer--checked:
height: px2rem(4px);
}
// Style scrollbar thumb
// Scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter;

71
src/assets/stylesheets/layout/_source.scss
View File

@@ -65,7 +65,7 @@
line-height: 1.2;
white-space: nowrap;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: initial;
padding-left: px2rem(12px);
@@ -91,16 +91,12 @@
height: px2rem(48px);
vertical-align: middle;
// Align SVG, do not scale, as this will incur strange formatting bugs
// in Internet Explorer and Edge
// Align with margin only (as opposed to normal button alignment)
svg {
width: px2rem(24px);
height: px2rem(24px);
margin-top: px2rem(12px);
margin-left: px2rem(12px);
fill: $md-color-white;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(12px);
margin-left: initial;
@@ -112,7 +108,7 @@
margin-left: px2rem(-40px);
padding-left: px2rem(40px);
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-40px);
margin-left: initial;
@@ -153,7 +149,7 @@
&__fact {
float: left;
// Adjust for RTL languages
// Adjust for right-to-left languages
[dir="rtl"] & {
float: right;
}
@@ -175,60 +171,3 @@
}
}
}
// Source file
.md-source-file {
display: inline-block;
margin: 1em 0.5em 1em 0;
padding-right: px2rem(5px);
border-radius: px2rem(2px);
background-color: $md-color-black--lightest;
font-size: ms(-1);
list-style-type: none;
cursor: pointer;
overflow: hidden;
// Icon
&::before {
@extend %md-icon;
display: inline-block;
margin-right: px2rem(5px);
padding: px2rem(5px);
background-color: $md-color-black--lighter;
color: $md-color-white;
font-size: ms(0);
content: "\E86F"; // code
vertical-align: middle;
}
// Some properties need to be set with higher specificity due to the default
// styling of text links inside typesetted content
html & {
transition:
background 400ms,
color 400ms,
box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
// Icon
&::before {
transition: inherit;
}
}
// Color needs even higher specifity because custom color palettes are set
// using the body and override text links inside typesetted content
html body .md-typeset & {
color: $md-color-black--light;
}
// Hovered source file
&:hover {
@include z-depth-focus;
// Icon
&::before {
background-color: $md-color-accent;
}
}
}

2
src/assets/stylesheets/layout/_tabs.scss
View File

@@ -126,7 +126,7 @@
}
// Hide site title
.md-nav__title--site {
.md-nav__title[for="__drawer"] {
display: none;
}

38
src/assets/stylesheets/utilities/_break.scss
View File

@@ -44,10 +44,6 @@
/// )
/// );
///
/// @group helpers
/// @access private
/// @type Map
///
$break-devices: () !default;
// ----------------------------------------------------------------------------
@@ -57,11 +53,6 @@ $break-devices: () !default;
///
/// 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;
@@ -93,11 +84,6 @@ $break-devices: () !default;
///
/// 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) {
@@ -120,10 +106,6 @@ $break-devices: () !default;
///
/// 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) {
@@ -147,10 +129,6 @@ $break-devices: () !default;
///
/// 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) {
@@ -164,10 +142,6 @@ $break-devices: () !default;
///
/// 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) {
@@ -181,10 +155,6 @@ $break-devices: () !default;
///
/// 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,;
@@ -208,10 +178,6 @@ $break-devices: () !default;
///
/// 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,;
@@ -230,10 +196,6 @@ $break-devices: () !default;
///
/// 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,;

16
src/assets/stylesheets/utilities/_px2em.scss
View File

@@ -27,13 +27,7 @@
// ----------------------------------------------------------------------------
///
/// 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
/// Convert font size in px to em
///
@function px2em($size, $base: 16px) {
@if unit($size) == px {
@@ -48,13 +42,7 @@
}
///
/// 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
/// Convert font size in px to rem
///
@function px2rem($size, $base: 20px) {
@if unit($size) == px {

51
src/base.html
View File

@@ -291,15 +291,40 @@
<!-- Content -->
{% block content %}
<!-- Edit button, if URL was defined -->
<!-- Edit button -->
{% if page.edit_url %}
<a
href="{{ page.edit_url }}"
title="{{ lang.t('edit.link.title') }}"
class="md-icon md-content__icon"
>&#xE3C9;<!-- edit --></a>
class="md-content__button md-icon"
>
{% include ".icons/material/pencil.svg" %}
</a>
{% endif %}
<!-- Link to source file -->
{% block source %}
{% if page and page.meta and page.meta.source %}
{% set repo = config.repo_url %}
{% if repo | last == "/" %}
{% set repo = repo[:-1] %}
{% endif %}
{% set path = page.meta.path | default([""]) %}
{% set file = page.meta.source %}
{% set repo_icon = config.extra.repo_icon | default(
"fontawesome/brands/git-alt"
) %}
<a
href="{{ [repo, path, page.meta.source] | join('/') }}"
title="{{ file }}"
class="md-content__button md-icon"
>
{{ lang.t("meta.source") }}
{% include ".icons/" ~ repo_icon ~ ".svg" %}
</a>
{% endif %}
{% endblock %}
<!--
Hack: check whether the content contains a h1 headline. If it
doesn't, the page title (or respectively site name) is used
@@ -312,26 +337,6 @@
<!-- Content -->
{{ page.content }}
<!-- Source files -->
{% block source %}
{% if page and page.meta and page.meta.source %}
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
{% set repo = config.repo_url %}
{% if repo | last == "/" %}
{% set repo = repo[:-1] %}
{% endif %}
{% set path = page.meta.path | default([""]) %}
{% set file = page.meta.source %}
<a
href="{{ [repo, path, file] | join('/') }}"
title="{{ file }}"
class="md-source-file"
>
{{ file }}
</a>
{% endif %}
{% endblock %}
<!-- Support for mkdocs-git-revision-date-localized-plugin -->
{% if page and page.meta and (
page.meta.git_revision_date_localized or

32
src/partials/footer.html
View File

@@ -35,23 +35,19 @@
<a
href="{{ page.previous_page.url | url }}"
title="{{ page.previous_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
class="md-footer-nav__link md-footer-nav__link--prev"
rel="prev"
>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-footer-nav__button">
{% include ".icons/material/arrow-left.svg" %}
</div>
<div class="md-icon md-icon__button">
{% include ".icons/material/arrow-left.svg" %}
</div>
<div
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
>
<span class="md-flex__ellipsis">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
</span>
{{ page.previous_page.title }}
</span>
</div>
</div>
</a>
{% endif %}
@@ -61,24 +57,20 @@
<a
href="{{ page.next_page.url | url }}"
title="{{ page.next_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--next"
class="md-footer-nav__link md-footer-nav__link--next"
rel="next"
>
<div
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
>
<span class="md-flex__ellipsis">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
</span>
{{ page.next_page.title }}
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-footer-nav__button">
{% include ".icons/material/arrow-right.svg" %}
</div>
</div>
<div class="md-icon md-icon__button">
{% include ".icons/material/arrow-right.svg" %}
</div>
</a>
{% endif %}
</nav>

123
src/partials/header.html
View File

@@ -25,75 +25,70 @@
<!-- Top-level navigation -->
<nav class="md-header-nav md-grid">
<div class="md-flex">
<!-- Link to home -->
<div class="md-flex__cell md-flex__cell--shrink">
<a
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
aria-label="{{ config.site_name }}"
class="md-header-nav__button md-logo"
>
{% if config.theme.logo.icon %}
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
{% else %}
<img
src="{{ config.theme.logo | url }}"
width="24"
height="24"
alt="logo"
/>
{% endif %}
</a>
<label class="md-header-nav__button" for="__drawer">
{% include ".icons/material/menu.svg" %}
</label>
</div>
<!-- Link to home -->
<a
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
aria-label="{{ config.site_name }}"
class="md-header-nav__button md-logo"
>
{% if config.theme.logo.icon %}
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
{% else %}
<img
src="{{ config.theme.logo | url }}"
width="24"
height="24"
alt="logo"
/>
{% endif %}
</a>
<label
class="md-header-nav__button md-icon md-icon__button"
for="__drawer"
>
{% include ".icons/material/menu.svg" %}
</label>
<!-- Header title -->
<div class="md-flex__cell md-flex__cell--stretch">
<div
class="md-flex__ellipsis md-header-nav__title"
data-md-component="header-title"
>
{% if config.site_name == page.title %}
<!-- Header title -->
<div class="md-header-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis md-ellipsis">
{% if config.site_name == page.title %}
{{ config.site_name }}
{% else %}
<span class="md-header-nav__topic">
{{ config.site_name }}
{% else %}
<span class="md-header-nav__topic">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
{{ page.title }}
{% endif %}
</span>
{% endif %}
</div>
</div>
<!-- Button to open search dialogue -->
<div class="md-flex__cell md-flex__cell--shrink">
{% if "search" in config["plugins"] %}
<label class="md-header-nav__button" for="__search">
{% include ".icons/material/magnify.svg" %}
</label>
<!-- Search interface -->
{% include "partials/search.html" %}
</span>
<span class="md-header-nav__topic">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
{{ page.title }}
{% endif %}
</span>
{% endif %}
</div>
<!-- Repository containing source -->
{% if config.repo_url %}
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
{% include "partials/source.html" %}
</div>
</div>
{% endif %}
</div>
<!-- Button to open search dialogue -->
{% if "search" in config["plugins"] %}
<label
class="md-header-nav__button md-icon md-icon__button"
for="__search"
>
{% include ".icons/material/magnify.svg" %}
</label>
<!-- Search interface -->
{% include "partials/search.html" %}
{% endif %}
<!-- Repository containing source -->
{% if config.repo_url %}
<div class="md-header-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
</nav>
</header>

15
src/partials/nav-item.html
View File

@@ -33,7 +33,7 @@
<!-- Active checkbox expands items contained within nested section -->
{% if nav_item.active %}
<input
class="md-toggle md-nav__toggle"
class="md-nav__toggle md-toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
@@ -41,7 +41,7 @@
/>
{% else %}
<input
class="md-toggle md-nav__toggle"
class="md-nav__toggle md-toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
@@ -51,9 +51,15 @@
<!-- Expand active pages -->
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
<span class="md-nav__icon md-icon">
{% include ".icons/material/chevron-right.svg" %}
</span>
</label>
<nav class="md-nav" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}">
<span class="md-nav__icon md-icon">
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ nav_item.title }}
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -76,7 +82,7 @@
<!-- Active checkbox expands items contained within nested section -->
<input
class="md-toggle md-nav__toggle"
class="md-nav__toggle md-toggle"
data-md-toggle="toc"
type="checkbox"
id="__toc"
@@ -91,6 +97,9 @@
{% if toc_ | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }}
<span class="md-nav__icon md-icon">
{% include ".icons/material/table-of-contents.svg" %}
</span>
</label>
{% endif %}
<a

5
src/partials/nav.html
View File

@@ -24,14 +24,15 @@
<nav class="md-nav md-nav--primary" data-md-level="0">
<!-- Site title -->
<label class="md-nav__title md-nav__title--site" for="__drawer">
<label class="md-nav__title" for="__drawer">
<a
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
aria-label="{{ config.site_name }}"
class="md-nav__button md-logo"
>
{% if config.theme.logo.icon %}
<i class="md-icon">{{ config.theme.logo.icon }}</i>
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
{% else %}
<img
src="{{ config.theme.logo | url }}"

5
src/partials/search.html
View File

@@ -41,12 +41,13 @@
data-md-state="active"
required
/>
<label class="md-search__icon" for="__search">
<label class="md-search__icon md-icon" for="__search">
{% include ".icons/material/magnify.svg" %}
{% include ".icons/material/arrow-left.svg" %}
</label>
<button
type="reset"
class="md-search__icon"
class="md-search__icon md-icon"
data-md-component="search-reset"
tabindex="-1"
>

2
src/partials/source.html
View File

@@ -28,7 +28,7 @@
title="{{ lang.t('source.link.title') }}"
class="md-source"
>
<div class="md-source__icon">
<div class="md-source__icon md-icon">
{% set repo_icon = config.extra.repo_icon | default(
"fontawesome/brands/git-alt"
) %}

31
src/partials/toc.html
View File

@@ -38,35 +38,16 @@
<!-- Render item list -->
{% if toc_ | first is defined %}
<label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon">
{% include ".icons/material/arrow-left.svg" %}
</span>
{{ lang.t("toc.title") }}
</label>
<ul class="md-nav__list" data-md-scrollfix>
{% for toc_item in toc_ %}
{% include "partials/toc-item.html" %}
{% endfor %}
<!-- Source files -->
{% if page.meta.source and page.meta.source | length > 0 %}
<li class="md-nav__item">
<a href="#__source" class="md-nav__link md-nav__link--active">
{{ lang.t("meta.source") }}
</a>
</li>
{% endif %}
<!-- Set from config but allow override -->
{% set disqus = config.extra.disqus %}
{% if page and page.meta and page.meta.disqus is string %}
{% set disqus = page.meta.disqus %}
{% endif %}
<!-- Disqus integration -->
{% if not page.is_homepage and disqus %}
<li class="md-nav__item">
<a href="#__comments" class="md-nav__link md-nav__link--active">
{{ lang.t("meta.comments") }}
</a>
</li>
{% endif %}
</ul>
{% endif %}
</nav>