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

Added helper function for rem calculation and set base font size to 20px

Browse Source
This commit is contained in:
squidfunk 2019-02-12 19:13:08 +01:00
parent 1b45a24113
commit 2007484306
30 changed files with 355 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/application.6460bce7.js → material/assets/javascripts/application.daa9a053.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-palette.224b79ff.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-palette.22915126.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application.0279f501.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application.572ca0f0.css
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -53,9 +53,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.572ca0f0.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/application.0279f501.css' | url }}">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.22915126.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.224b79ff.css' | url }}">
{% endif %} {% endif %}
{% if palette.primary %} {% if palette.primary %}
{% import "partials/palette.html" as map %} {% import "partials/palette.html" as map %}
@ -190,7 +190,7 @@
{% endblock %} {% endblock %}
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/application.6460bce7.js' | url }}"></script> <script src="{{ 'assets/javascripts/application.daa9a053.js' | url }}"></script>
{% if lang.t("search.language") != "en" %} {% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %} {% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %} {% if languages | length and languages[0] != "" %}

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

@ -25,7 +25,7 @@
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Modular typographic scale // Modular typographic scale
$ms-base: 1.6rem; $ms-base: px2rem(16px);
$ms-ratio: $major-third; $ms-ratio: $major-third;
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------

16
src/assets/stylesheets/application-palette.scss
View File

@ -44,13 +44,13 @@
// Color tile for presentation in theme documentation // Color tile for presentation in theme documentation
button[data-md-color-primary], button[data-md-color-primary],
button[data-md-color-accent] { button[data-md-color-accent] {
width: 13rem; width: px2rem(130px);
margin-bottom: 0.4rem; margin-bottom: px2rem(4px);
padding: 2.4rem 0.8rem 0.4rem; padding: px2rem(24px) px2rem(8px) px2rem(4px);
transition: transition:
background-color 0.25s, background-color 0.25s,
opacity 0.25s; opacity 0.25s;
border-radius: 0.2rem; border-radius: px2rem(2px);
color: $md-color-white; color: $md-color-white;
font-size: ms(-1); font-size: ms(-1);
text-align: left; text-align: left;
@ -152,7 +152,7 @@ button[data-md-color-accent] {
button[data-md-color-primary="white"] { button[data-md-color-primary="white"] {
background-color: $md-color-white; background-color: $md-color-white;
color: $md-color-black; color: $md-color-black;
box-shadow: 0 0 0.1rem $md-color-black--light inset; box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
} }
// Overrides for white color // Overrides for white color
@ -171,7 +171,7 @@ button[data-md-color-primary="white"] {
// Add a border if there are no tabs // Add a border if there are no tabs
&--expand { &--expand {
border-bottom: 0.1rem solid $md-color-black--lightest; border-bottom: px2rem(1px) solid $md-color-black--lightest;
} }
} }
@ -210,7 +210,7 @@ button[data-md-color-primary="white"] {
// Hero teaser // Hero teaser
.md-hero { .md-hero {
border-bottom: 0.1rem solid $md-color-black--lightest; border-bottom: px2rem(1px) solid $md-color-black--lightest;
} }
} }
@ -219,7 +219,7 @@ button[data-md-color-primary="white"] {
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
border-bottom: 0.1rem solid $md-color-black--lightest; border-bottom: px2rem(1px) solid $md-color-black--lightest;
background-color: $md-color-white; background-color: $md-color-white;
color: $md-color-black; color: $md-color-black;
} }

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

@ -72,7 +72,7 @@ kbd {
// 1st level headline // 1st level headline
h1 { h1 {
margin: 0 0 4rem; margin: 0 0 px2rem(40px);
color: $md-color-black--light; color: $md-color-black--light;
font-size: ms(3); font-size: ms(3);
font-weight: 300; font-weight: 300;
@ -82,7 +82,7 @@ kbd {
// 2nd level headline // 2nd level headline
h2 { h2 {
margin: 4rem 0 1.6rem; margin: px2rem(40px) 0 px2rem(16px);
font-size: ms(2); font-size: ms(2);
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -91,7 +91,7 @@ kbd {
// 3rd level headline // 3rd level headline
h3 { h3 {
margin: 3.2rem 0 1.6rem; margin: px2rem(32px) 0 px2rem(16px);
font-size: ms(1); font-size: ms(1);
font-weight: 400; font-weight: 400;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -100,12 +100,12 @@ kbd {
// 3rd level headline following an 2nd level headline // 3rd level headline following an 2nd level headline
h2 + h3 { h2 + h3 {
margin-top: 1.6rem; margin-top: px2rem(16px);
} }
// 4th level headline // 4th level headline
h4 { h4 {
margin: 1.6rem 0; margin: px2rem(16px) 0;
font-size: ms(0); font-size: ms(0);
font-weight: 700; font-weight: 700;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -114,7 +114,7 @@ kbd {
// 5th and 6th level headline // 5th and 6th level headline
h5, h5,
h6 { h6 {
margin: 1.6rem 0; margin: px2rem(16px) 0;
color: $md-color-black--light; color: $md-color-black--light;
font-size: ms(-1); font-size: ms(-1);
font-weight: 700; font-weight: 700;
@ -129,7 +129,7 @@ kbd {
// Horizontal separators // Horizontal separators
hr { hr {
margin: 1.5em 0; margin: 1.5em 0;
border-bottom: 0.1rem dotted $md-color-black--lighter; border-bottom: px2rem(1px) dotted $md-color-black--lighter;
} }
// Links // Links
@ -180,7 +180,7 @@ kbd {
margin: 0 0.25em * $correct; margin: 0 0.25em * $correct;
padding: 0.0625em * $correct 0; padding: 0.0625em * $correct 0;
border-radius: 0.2rem; border-radius: px2rem(2px);
box-shadow: box-shadow:
+0.25em * $correct 0 0 $md-code-background, +0.25em * $correct 0 0 $md-code-background,
-0.25em * $correct 0 0 $md-code-background; -0.25em * $correct 0 0 $md-code-background;
@ -220,13 +220,13 @@ kbd {
pre { pre {
position: relative; position: relative;
margin: 1em 0; margin: 1em 0;
border-radius: 0.2rem; border-radius: px2rem(2px);
line-height: 1.4; line-height: 1.4;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em -1.6rem; margin: 1em px2rem(-16px);
border-radius: 0; border-radius: 0;
} }
@ -234,7 +234,7 @@ kbd {
> code { > code {
display: block; display: block;
margin: 0; margin: 0;
padding: 1.05rem 1.2rem; padding: px2rem(10.5px) px2rem(12px);
background-color: transparent; background-color: transparent;
font-size: inherit; font-size: inherit;
box-shadow: none; box-shadow: none;
@ -243,13 +243,13 @@ kbd {
// [mobile -]: Increase padding to match text // [mobile -]: Increase padding to match text
@include break-to-device(mobile) { @include break-to-device(mobile) {
padding: 1.05rem 1.6rem; padding: px2rem(10.5px) px2rem(16px);
} }
// Override native scrollbar styles // Override native scrollbar styles
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.4rem; width: px2rem(4px);
height: 0.4rem; height: px2rem(4px);
} }
// Style scrollbar thumb // Style scrollbar thumb
@ -269,13 +269,13 @@ kbd {
$correct: 1 / 0.85; $correct: 1 / 0.85;
padding: 0 0.25em * $correct; padding: 0 0.25em * $correct;
border: 0.1rem solid darken($md-keyboard-background, 20%); border: px2rem(1px) solid darken($md-keyboard-background, 20%);
border-radius: 0.3rem; border-radius: px2rem(3px);
border-bottom-color: darken($md-keyboard-background, 25%); border-bottom-color: darken($md-keyboard-background, 25%);
background-color: $md-keyboard-background; background-color: $md-keyboard-background;
color: $md-keyboard-color; color: $md-keyboard-color;
font-size: 85%; font-size: 85%;
box-shadow: 0 0.1rem 0 darken($md-keyboard-background, 30%); box-shadow: 0 px2rem(1px) 0 darken($md-keyboard-background, 30%);
word-break: break-word; word-break: break-word;
} }
@ -283,7 +283,7 @@ kbd {
mark { mark {
margin: 0 0.25em; margin: 0 0.25em;
padding: 0.0625em 0; padding: 0.0625em 0;
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: transparentize($clr-yellow-500, 0.5); background-color: transparentize($clr-yellow-500, 0.5);
box-shadow: box-shadow:
+0.25em 0 0 transparentize($clr-yellow-500, 0.5), +0.25em 0 0 transparentize($clr-yellow-500, 0.5),
@ -294,7 +294,7 @@ kbd {
// Abbreviations // Abbreviations
abbr { abbr {
border-bottom: 0.1rem dotted $md-color-black--light; border-bottom: px2rem(1px) dotted $md-color-black--light;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -318,15 +318,15 @@ kbd {
// Blockquotes, possibly nested // Blockquotes, possibly nested
blockquote { blockquote {
padding-left: 1.2rem; padding-left: px2rem(12px);
border-left: 0.4rem solid $md-color-black--lighter; border-left: px2rem(4px) solid $md-color-black--lighter;
color: $md-color-black--light; color: $md-color-black--light;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 1.2rem; padding-right: px2rem(12px);
padding-left: initial; padding-left: initial;
border-right: 0.4rem solid $md-color-black--lighter; border-right: px2rem(4px) solid $md-color-black--lighter;
border-left: initial; border-left: initial;
} }
} }
@ -418,7 +418,7 @@ kbd {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
border-radius: 0.2rem; border-radius: px2rem(2px);
font-size: ms(-1); font-size: ms(-1);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -443,8 +443,8 @@ kbd {
// Table headings // Table headings
th { th {
min-width: 10rem; min-width: px2rem(100px);
padding: 1.2rem 1.6rem; padding: px2rem(12px) px2rem(16px);
background-color: $md-color-black--light; background-color: $md-color-black--light;
color: $md-color-white; color: $md-color-white;
vertical-align: top; vertical-align: top;
@ -452,8 +452,8 @@ kbd {
// Table cells // Table cells
td { td {
padding: 1.2rem 1.6rem; padding: px2rem(12px) px2rem(16px);
border-top: 0.1rem solid $md-color-black--lightest; border-top: px2rem(1px) solid $md-color-black--lightest;
vertical-align: top; vertical-align: top;
} }
@ -470,7 +470,7 @@ kbd {
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
margin: 1em -1.6rem; margin: 1em px2rem(-16px);
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -479,7 +479,7 @@ kbd {
.md-typeset__table { .md-typeset__table {
display: inline-block; display: inline-block;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding: 0 1.6rem; padding: 0 px2rem(16px);
// Data tables // Data tables
table { table {

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

@ -33,21 +33,21 @@
position: relative; position: relative;
margin: 1.5625em 0; margin: 1.5625em 0;
padding: 0 1.2rem; padding: 0 px2rem(12px);
border-left: 0.4rem solid $clr-blue-a200; border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: 0.2rem; border-radius: px2rem(2px);
font-size: ms(-1); font-size: ms(-1);
overflow: auto; overflow: auto;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
border-right: 0.4rem solid $clr-blue-a200; border-right: px2rem(4px) solid $clr-blue-a200;
border-left: none; border-left: none;
} }
// Adjust spacing on last element // Adjust spacing on last element
html & > :last-child { html & > :last-child {
margin-bottom: 1.2rem; margin-bottom: px2rem(12px);
} }
// Adjust margin for nested admonition blocks // Adjust margin for nested admonition blocks
@ -57,15 +57,15 @@
// Title // Title
> .admonition-title { > .admonition-title {
margin: 0 -1.2rem; margin: 0 px2rem(-12px);
padding: 0.8rem 1.2rem 0.8rem 4rem; padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9); border-bottom: px2rem(1px) solid transparentize($clr-blue-a200, 0.9);
background-color: transparentize($clr-blue-a200, 0.9); background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700; font-weight: 700;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding: 0.8rem 4rem 0.8rem 1.2rem; padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
} }
// Reset spacing, if title is the only element // Reset spacing, if title is the only element
@ -78,14 +78,14 @@
@extend %md-icon; @extend %md-icon;
position: absolute; position: absolute;
left: 1.2rem; left: px2rem(12px);
color: $clr-blue-a200; color: $clr-blue-a200;
font-size: 2rem; font-size: px2rem(20px);
content: "\E3C9"; // edit content: "\E3C9"; // edit
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: 1.2rem; right: px2rem(12px);
left: initial; left: initial;
} }
} }
@ -120,7 +120,7 @@
// Title // Title
> .admonition-title { > .admonition-title {
border-bottom-color: 0.1rem solid transparentize($tint, 0.9); border-bottom-color: px2rem(1px) solid transparentize($tint, 0.9);
background-color: transparentize($tint, 0.9); background-color: transparentize($tint, 0.9);
// Icon // Icon

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

@ -194,14 +194,14 @@ $codehilite-whitespace: transparent;
// Highlighted lines // Highlighted lines
.hll { .hll {
display: block; display: block;
margin: 0 -1.2rem; margin: 0 px2rem(-12px);
padding: 0 1.2rem; padding: 0 px2rem(12px);
background-color: transparentize($clr-yellow-500, 0.5); background-color: transparentize($clr-yellow-500, 0.5);
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 0 -1.6rem; margin: 0 px2rem(-16px);
padding: 0 1.6rem; padding: 0 px2rem(16px);
} }
} }
} }
@ -219,7 +219,7 @@ $codehilite-whitespace: transparent;
position: relative; position: relative;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: $md-code-background; background-color: $md-code-background;
color: $md-code-color; color: $md-code-color;
line-height: 1.4; line-height: 1.4;
@ -230,15 +230,15 @@ $codehilite-whitespace: transparent;
code { code {
display: block; display: block;
margin: 0; margin: 0;
padding: 1.05rem 1.2rem; padding: px2rem(10.5px) px2rem(12px);
background-color: transparent; background-color: transparent;
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
// Override native scrollbar styles // Override native scrollbar styles
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.4rem; width: px2rem(4px);
height: 0.4rem; height: px2rem(4px);
} }
// Style scrollbar thumb // Style scrollbar thumb
@ -260,7 +260,7 @@ $codehilite-whitespace: transparent;
// Actual container with code, overflowing // Actual container with code, overflowing
code { code {
display: block; display: block;
padding: 1.05rem 1.2rem; padding: px2rem(10.5px) px2rem(12px);
overflow: auto; overflow: auto;
} }
} }
@ -297,7 +297,7 @@ $codehilite-whitespace: transparent;
// Add spacing to line number container // Add spacing to line number container
.linenodiv { .linenodiv {
padding: 1.05rem 1.2rem; padding: px2rem(10.5px) px2rem(12px);
} }
// Disable user selection, so code can be easily copied without // Disable user selection, so code can be easily copied without
@ -330,13 +330,13 @@ $codehilite-whitespace: transparent;
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em -1.6rem; margin: 1em px2rem(-16px);
border-radius: 0; border-radius: 0;
// Actual container with code, overflowing // Actual container with code, overflowing
pre, pre,
code { code {
padding: 1.05rem 1.6rem; padding: px2rem(10.5px) px2rem(16px);
} }
} }
} }
@ -347,14 +347,14 @@ $codehilite-whitespace: transparent;
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em -1.6rem; margin: 1em px2rem(-16px);
border-radius: 0; border-radius: 0;
// Increase spacing // Increase spacing
.codehilite > pre, .codehilite > pre,
.codehilite > code, .codehilite > code,
.linenodiv { .linenodiv {
padding: 1rem 1.6rem; padding: px2rem(10px) px2rem(16px);
} }
} }
} }

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

@ -33,8 +33,8 @@
// Targeted anchor // Targeted anchor
&:target { &:target {
margin-top: -(4.8rem + 1.2rem + 1.6rem); margin-top: -1 * px2rem(48px + 12px + 16px);
padding-top: (4.8rem + 1.2rem + 1.6rem); padding-top: px2rem(48px + 12px + 16px);
pointer-events: none; pointer-events: none;
} }
} }
@ -52,8 +52,8 @@
// Targeted anchor // Targeted anchor
&:target::before { &:target::before {
display: block; display: block;
margin-top: -(4.8rem + 1.2rem + 1rem); margin-top: -1 * px2rem(48px + 12px + 10px);
padding-top: (4.8rem + 1.2rem + 1rem); padding-top: px2rem(48px + 12px + 10px);
pointer-events: none; pointer-events: none;
} }
} }
@ -106,10 +106,10 @@
&::before { &::before {
display: inline; display: inline;
margin: 0 0.2em; margin: 0 0.2em;
border-left: 0.1rem solid $md-color-black--lighter; border-left: px2rem(1px) solid $md-color-black--lighter;
font-size: 1.25em; font-size: 1.25em;
content: ""; content: "";
vertical-align: -0.5rem; vertical-align: px2rem(-5px);
} }
} }
@ -118,7 +118,7 @@
@extend %md-icon; @extend %md-icon;
display: inline-block; display: inline-block;
transform: translateX(0.5rem); transform: translateX(px2rem(5px));
transition: transition:
transform 0.25s 0.125s, transform 0.25s 0.125s,
color 0.25s, color 0.25s,
@ -131,13 +131,13 @@
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
transform: translateX(-0.5rem); transform: translateX(px2rem(-5px));
} }
// Back reference icon // Back reference icon
&::before { &::before {
display: inline-block; display: inline-block;
font-size: 1.6rem; font-size: px2rem(16px);
content: "\E31B"; // keyboard_return content: "\E31B"; // keyboard_return
// Adjust for RTL languages // Adjust for RTL languages

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

@ -30,8 +30,8 @@
// Permalinks extension // Permalinks extension
.headerlink { .headerlink {
display: inline-block; display: inline-block;
margin-left: 1rem; margin-left: px2rem(10px);
transform: translate(0, 0.5rem); transform: translate(0, px2rem(5px));
transition: transition:
transform 0.25s 0.25s, transform 0.25s 0.25s,
color 0.25s, color 0.25s,
@ -40,7 +40,7 @@
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: 1rem; margin-right: px2rem(10px);
margin-left: initial; margin-left: initial;
} }
@ -57,12 +57,12 @@
// Correct anchor offset for link blurring // Correct anchor offset for link blurring
@each $level, $delta in ( @each $level, $delta in (
h1: 0.9rem, h1: 9px,
h2: 0.8rem, h2: 8px,
h3: 0.9rem, h3: 9px,
h4: 0.9rem, h4: 9px,
h5: 1.1rem, h5: 11px,
h6: 1.1rem h6: 11px
) { ) {
#{$level}[id] { #{$level}[id] {
@ -76,8 +76,8 @@
// Targeted anchor (48px from header, 12px from sidebar offset) // Targeted anchor (48px from header, 12px from sidebar offset)
&:target::before { &:target::before {
margin-top: -(4.8rem + 1.2rem + $delta); margin-top: -1 * px2rem(48px + 12px + $delta);
padding-top: (4.8rem + 1.2rem + $delta); padding-top: px2rem(48px + 12px + $delta);
} }
// Make permalink visible on hover // Make permalink visible on hover

4
src/assets/stylesheets/extensions/pymdown/_arithmatex.scss
View File

@ -42,8 +42,8 @@
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 0.75em -1.6rem; margin: 0.75em px2rem(-16px);
padding: 0.25em 1.6rem; padding: 0.25em px2rem(16px);
} }
} }

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

@ -33,7 +33,7 @@
.critic.comment { .critic.comment {
margin: 0 0.25em; margin: 0 0.25em;
padding: 0.0625em 0; padding: 0.0625em 0;
border-radius: 0.2rem; border-radius: px2rem(2px);
box-decoration-break: clone; box-decoration-break: clone;
} }
@ -76,8 +76,8 @@
.critic.block { .critic.block {
display: block; display: block;
margin: 1em 0; margin: 1em 0;
padding-right: 1.6rem; padding-right: px2rem(16px);
padding-left: 1.6rem; padding-left: px2rem(16px);
box-shadow: none; box-shadow: none;
// Decrease spacing on first element // Decrease spacing on first element

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

@ -51,11 +51,11 @@
// Increase spacing to the right - scoped here for higher specificity // Increase spacing to the right - scoped here for higher specificity
summary { summary {
padding-right: 4rem; padding-right: px2rem(40px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-left: 4rem; padding-left: px2rem(40px);
} }
} }
@ -93,16 +93,16 @@
@extend %md-icon; @extend %md-icon;
position: absolute; position: absolute;
top: 0.8rem; top: px2rem(8px);
right: 1.2rem; right: px2rem(12px);
color: $md-color-black--lighter; color: $md-color-black--lighter;
font-size: 2rem; font-size: px2rem(20px);
content: "\E313"; // keyboard_arrow_down content: "\E313"; // keyboard_arrow_down
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: initial; right: initial;
left: 1.2rem; left: px2rem(12px);
} }
} }
} }

2
src/assets/stylesheets/extensions/pymdown/_emoji.scss
View File

@ -29,7 +29,7 @@
// Correct alignment of emojis // Correct alignment of emojis
.emojione { .emojione {
width: 2rem; width: px2rem(20px);
vertical-align: text-top; vertical-align: text-top;
} }
} }

10
src/assets/stylesheets/extensions/pymdown/_superfences.scss
View File

@ -47,7 +47,7 @@
position: relative; position: relative;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0; margin: 1em 0;
border: 0.1rem solid $md-color-black--lightest; border: px2rem(1px) solid $md-color-black--lightest;
border-radius: 0.2em; border-radius: 0.2em;
// Hide radio buttons // Hide radio buttons
@ -68,7 +68,7 @@
// Tab label // Tab label
> label { > label {
width: auto; width: auto;
padding: 1.2rem 1.2rem; padding: px2rem(12px);
transition: color 0.125s; transition: color 0.125s;
font-size: ms(-1); font-size: ms(-1);
cursor: pointer; cursor: pointer;
@ -85,15 +85,15 @@
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em -1.6rem; margin: 1em px2rem(-16px);
border: 0; border: 0;
border-top: 0.1rem solid $md-color-black--lightest; border-top: px2rem(1px) solid $md-color-black--lightest;
border-radius: 0; border-radius: 0;
// Actual container with code, overflowing // Actual container with code, overflowing
pre, pre,
code { code {
padding: 1.05rem 1.6rem; padding: px2rem(10.5px) px2rem(16px);
} }
} }
} }

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

@ -44,3 +44,24 @@
@error "Invalid size: #{$size} - unit must be 'px'"; @error "Invalid size: #{$size} - unit must be 'px'";
} }
} }
///
/// 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: 20px) {
@if unit($size) == px {
@if unit($base) == px {
@return ($size / $base) * 1.0rem;
} @else {
@error "Invalid base: #{$base} - unit must be 'px'";
}
} @else {
@error "Invalid size: #{$size} - unit must be 'px'";
}
}

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

@ -36,7 +36,13 @@ $md-toggle__drawer--checked:
// calculations base on relative ems (rems) // calculations base on relative ems (rems)
html { html {
height: 100%; height: 100%;
font-size: 62.5%; // Hack: normally, we would set the base font-size to 62.5%, so we can base
// all calculations on 10px, but Chromium and Chrome define a minimal font
// size of 12 if the system language is set to Chinese. For this reason we
// just double the font-size, set it to 20px which seems to do the trick.
//
// See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%;
// Hack: some browsers on some operating systems don't account for scroll // Hack: some browsers on some operating systems don't account for scroll
// bars when firing media queries, so we need to do this for safety. This // bars when firing media queries, so we need to do this for safety. This
// currently impacts the table of contents component between 1220 and 1234px // currently impacts the table of contents component between 1220 and 1234px
@ -45,12 +51,12 @@ html {
// [screen medium +]: Set base font-size to 11px // [screen medium +]: Set base font-size to 11px
@include break-from-device(screen medium) { @include break-from-device(screen medium) {
font-size: 68.75%; font-size: 137.50%;
} }
// [screen large +]: Set base font-size to 12px // [screen large +]: Set base font-size to 12px
@include break-from-device(screen large) { @include break-from-device(screen large) {
font-size: 75%; font-size: 150%;
} }
} }
@ -77,7 +83,7 @@ body {
// Horizontal separators // Horizontal separators
hr { hr {
display: block; display: block;
height: 0.1rem; height: px2rem(1px);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -89,7 +95,7 @@ hr {
// Template-wide grid // Template-wide grid
.md-grid { .md-grid {
max-width: 122rem; max-width: px2rem(1220px);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -106,7 +112,7 @@ hr {
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 4.8rem; padding-top: px2rem(48px);
table-layout: fixed; table-layout: fixed;
} }
@ -118,11 +124,11 @@ hr {
// Increase top spacing of content area to give typography more room // Increase top spacing of content area to give typography more room
&__inner { &__inner {
height: 100%; height: 100%;
padding-top: 2.4rem + 0.6rem; padding-top: px2rem(24px + 6px);
// Hack: induce margin-collapse, because otherwise the sidebar height is // Hack: induce margin-collapse, because otherwise the sidebar height is
// not calculated correctly and the overflow property on this element must // not calculated correctly and the overflow property on this element must
// be left in initial state for targetted link offsets to work properly // be left in initial state for targetted link offsets to work properly
padding-bottom: 0.1rem; padding-bottom: px2rem(1px);
} }
} }
@ -208,13 +214,13 @@ hr {
// Skip link // Skip link
.md-skip { .md-skip {
position: fixed; position: fixed;
width: 0.1rem; width: px2rem(1px);
height: 0.1rem; height: px2rem(1px);
margin: 1rem; margin: px2rem(10px);
padding: 0.6rem 1rem; padding: px2rem(6px) px2rem(10px);
clip: rect(0.1rem); clip: rect(px2rem(1px));
transform: translateY(0.8rem); transform: translateY(px2rem(8px));
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: $md-color-black; background-color: $md-color-black;
color: $md-color-white; color: $md-color-white;
font-size: ms(-1); font-size: ms(-1);

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

@ -27,12 +27,12 @@
// Copy to clipboard // Copy to clipboard
.md-clipboard { .md-clipboard {
position: absolute; position: absolute;
top: 0.6rem; top: px2rem(6px);
right: 0.6rem; right: px2rem(6px);
width: 2.8rem; width: px2rem(28px);
height: 2.8rem; height: px2rem(28px);
border-radius: 0.2rem; border-radius: px2rem(2px);
font-size: 1.6rem; font-size: px2rem(16px);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
// Hack: put everything on the GPU to omit flickering // Hack: put everything on the GPU to omit flickering
@ -71,13 +71,13 @@
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 3.4rem; right: px2rem(34px);
padding: 0.6rem 1rem; padding: px2rem(6px) px2rem(10px);
transform: translateX(0.8rem); transform: translateX(px2rem(8px));
transition: transition:
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0), transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
opacity 0.175s; opacity 0.175s;
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: $md-color-black--light; background-color: $md-color-black--light;
color: $md-color-white; color: $md-color-white;
font-size: ms(-1); font-size: ms(-1);
@ -105,10 +105,10 @@
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -0.4rem; right: px2rem(-4px);
width: 0; width: 0;
margin-top: -0.4rem; margin-top: px2rem(-4px);
border-width: 0.4rem 0 0.4rem 0.4rem; border-width: px2rem(4px) 0 px2rem(4px) px2rem(4px);
border-style: solid; border-style: solid;
border-color: transparent $md-color-black--light; border-color: transparent $md-color-black--light;
content: ""; content: "";

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

@ -29,41 +29,41 @@
// [tablet landscape +]: Add space for table of contents // [tablet landscape +]: Add space for table of contents
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
margin-right: 24.2rem; margin-right: px2rem(242px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: initial; margin-right: initial;
margin-left: 24.2rem; margin-left: px2rem(242px);
} }
} }
// [screen +]: Add space for table of contents // [screen +]: Add space for table of contents
@include break-from-device(screen) { @include break-from-device(screen) {
margin-left: 24.2rem; margin-left: px2rem(242px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: 24.2rem; margin-right: px2rem(242px);
} }
} }
// Define spacing // Define spacing
&__inner { &__inner {
margin: 0 1.6rem 2.4rem; margin: 0 px2rem(16px) px2rem(24px);
padding-top: 1.2rem; padding-top: px2rem(12px);
// [screen +]: Increase horizontal spacing // [screen +]: Increase horizontal spacing
@include break-from-device(screen) { @include break-from-device(screen) {
margin-right: 2.4rem; margin-right: px2rem(24px);
margin-left: 2.4rem; margin-left: px2rem(24px);
} }
// Hack: add pseudo element for spacing, as the overflow of the content // Hack: add pseudo element for spacing, as the overflow of the content
// container may not be hidden due to an imminent offset error on targets // container may not be hidden due to an imminent offset error on targets
&::before { &::before {
display: block; display: block;
height: 0.8rem; height: px2rem(8px);
content: ""; content: "";
} }
@ -78,7 +78,7 @@
@extend %md-icon__button; @extend %md-icon__button;
position: relative; position: relative;
margin: 0.8rem 0; margin: px2rem(8px) 0;
padding: 0; padding: 0;
float: right; float: right;

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

@ -40,14 +40,14 @@
// Set spacing // Set spacing
&__inner { &__inner {
padding: 0.4rem; padding: px2rem(4px);
overflow: auto; overflow: auto;
} }
// Links to previous and next page // Links to previous and next page
&__link { &__link {
padding-top: 2.8rem; padding-top: px2rem(28px);
padding-bottom: 0.8rem; padding-bottom: px2rem(8px);
transition: opacity 0.25s; transition: opacity 0.25s;
// [tablet +]: Set proportional width // [tablet +]: Set proportional width
@ -104,9 +104,9 @@
// Link title - set line height to match icon for correct alignment // Link title - set line height to match icon for correct alignment
&__title { &__title {
position: relative; position: relative;
padding: 0 2rem; padding: 0 px2rem(20px);
font-size: 1.8rem; font-size: px2rem(18px);
line-height: 4.8rem; line-height: px2rem(48px);
} }
// Link direction // Link direction
@ -114,10 +114,10 @@
position: absolute; position: absolute;
right: 0; right: 0;
left: 0; left: 0;
margin-top: -2rem; margin-top: px2rem(-20px);
padding: 0 2rem; padding: 0 px2rem(20px);
color: $md-color-white--light; color: $md-color-white--light;
font-size: 1.5rem; font-size: px2rem(15px);
} }
} }
@ -127,7 +127,7 @@
// Set spacing // Set spacing
&__inner { &__inner {
padding: 0.4rem; padding: px2rem(4px);
overflow: auto; overflow: auto;
} }
@ -145,8 +145,8 @@
// Copyright and theme information // Copyright and theme information
.md-footer-copyright { .md-footer-copyright {
margin: 0 1.2rem; margin: 0 px2rem(12px);
padding: 0.8rem 0; padding: px2rem(8px) 0;
color: $md-color-white--lighter; color: $md-color-white--lighter;
font-size: ms(-1); font-size: ms(-1);
@ -169,12 +169,12 @@
// Social media links // Social media links
.md-footer-social { .md-footer-social {
margin: 0 0.8rem; margin: 0 px2rem(8px);
padding: 0.4rem 0 1.2rem; padding: px2rem(4px) 0 px2rem(12px);
// [tablet portrait +]: Show next to copyright information // [tablet portrait +]: Show next to copyright information
@include break-from-device(tablet portrait) { @include break-from-device(tablet portrait) {
padding: 1.2rem 0; padding: px2rem(12px) 0;
float: right; float: right;
// Adjust for RTL languages // Adjust for RTL languages
@ -186,9 +186,9 @@
// Link with icon // Link with icon
&__link { &__link {
display: inline-block; display: inline-block;
width: 3.2rem; width: px2rem(32px);
height: 3.2rem; height: px2rem(32px);
font-size: 1.6rem; font-size: px2rem(16px);
text-align: center; text-align: center;
// Adjust line-height to match height for correct alignment // Adjust line-height to match height for correct alignment

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

@ -30,7 +30,7 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
height: 4.8rem; height: px2rem(48px);
transition: transition:
background-color 0.25s, background-color 0.25s,
color 0.25s; color 0.25s;
@ -54,8 +54,8 @@
color 0.25s, color 0.25s,
box-shadow 0.25s; box-shadow 0.25s;
box-shadow: box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
} }
// Hide for print // Hide for print
@ -66,7 +66,7 @@
// Navigation within header // Navigation within header
.md-header-nav { .md-header-nav {
padding: 0 0.4rem; padding: 0 px2rem(4px);
// Icon buttons // Icon buttons
&__button { &__button {
@ -133,7 +133,7 @@
// Page title // Page title
& + & { & + & {
transform: translateX(2.5rem); transform: translateX(px2rem(25px));
transition: transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s; opacity 0.15s;
@ -143,7 +143,7 @@
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
transform: translateX(-2.5rem); transform: translateX(px2rem(-25px));
} }
} }
@ -160,13 +160,13 @@
// Header title - set line height to match icon for correct alignment // Header title - set line height to match icon for correct alignment
&__title { &__title {
padding: 0 2rem; padding: 0 px2rem(20px);
font-size: 1.8rem; font-size: px2rem(18px);
line-height: 4.8rem; line-height: px2rem(48px);
// Show page title // Show page title
&[data-md-state="active"] .md-header-nav__topic { &[data-md-state="active"] .md-header-nav__topic {
transform: translateX(-2.5rem); transform: translateX(px2rem(-25px));
transition: transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s; opacity 0.15s;
@ -176,7 +176,7 @@
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
transform: translateX(2.5rem); transform: translateX(px2rem(25px));
} }
// Page title // Page title
@ -199,17 +199,17 @@
// [tablet landscape +]: Show the reposistory from tablet // [tablet landscape +]: Show the reposistory from tablet
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
display: block; display: block;
width: 23rem; width: px2rem(230px);
max-width: 23rem; max-width: px2rem(230px);
margin-left: 2.8rem; margin-left: px2rem(28px);
padding-right: 1.2rem; padding-right: px2rem(12px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: 2.8rem; margin-right: px2rem(28px);
margin-left: initial; margin-left: initial;
padding-right: initial; padding-right: initial;
padding-left: 1.2rem; padding-left: px2rem(12px);
} }
} }
} }

12
src/assets/stylesheets/layout/_hero.scss
View File

@ -34,8 +34,8 @@
// Inner wrapper // Inner wrapper
&__inner { &__inner {
margin-top: 2rem; margin-top: px2rem(20px);
padding: 1.6rem 1.6rem 0.8rem; padding: px2rem(16px) px2rem(16px) px2rem(8px);
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 0.25s;
@ -43,14 +43,14 @@
// [tablet -]: Compensate for missing tabs // [tablet -]: Compensate for missing tabs
@include break-to-device(tablet) { @include break-to-device(tablet) {
margin-top: 4.8rem; margin-top: px2rem(48px);
margin-bottom: 2.4rem; margin-bottom: px2rem(24px);
} }
// Fade-out tabs background upon scrolling // Fade-out tabs background upon scrolling
[data-md-state="hidden"] & { [data-md-state="hidden"] & {
pointer-events: none; pointer-events: none;
transform: translateY(1.25rem); transform: translateY(px2rem(12.5px));
transition: transition:
transform 0s 0.4s, transform 0s 0.4s,
opacity 0.1s 0s; opacity 0.1s 0s;
@ -59,7 +59,7 @@
// Adjust bottom spacing if there are no tabs // Adjust bottom spacing if there are no tabs
.md-hero--expand & { .md-hero--expand & {
margin-bottom: 2.4rem; margin-bottom: px2rem(24px);
} }
} }
} }

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

@ -26,13 +26,13 @@
// Navigation container // Navigation container
.md-nav { .md-nav {
font-size: 1.4rem; font-size: px2rem(14px);
line-height: 1.3; line-height: 1.3;
// List title // List title
&__title { &__title {
display: block; display: block;
padding: 0 1.2rem; padding: 0 px2rem(12px);
font-weight: 700; font-weight: 700;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -65,11 +65,11 @@
// List item // List item
&__item { &__item {
padding: 0 1.2rem; padding: 0 px2rem(12px);
// Add bottom spacing to last item // Add bottom spacing to last item
&:last-child { &:last-child {
padding-bottom: 1.2rem; padding-bottom: px2rem(12px);
} }
// 2nd+ level items // 2nd+ level items
@ -78,7 +78,7 @@
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 1.2rem; padding-right: px2rem(12px);
padding-left: 0; padding-left: 0;
} }
@ -186,7 +186,7 @@
// List title and item // List title and item
.md-nav__title, .md-nav__title,
.md-nav__item { .md-nav__item {
font-size: 1.6rem; font-size: px2rem(16px);
line-height: 1.5; line-height: 1.5;
} }
@ -194,12 +194,12 @@
// inside the drawer is always styled accordingly // inside the drawer is always styled accordingly
html & .md-nav__title { html & .md-nav__title {
position: relative; position: relative;
height: 11.2rem; height: px2rem(112px);
padding: 6rem 1.6rem 0.4rem; padding: px2rem(60px) px2rem(16px) px2rem(4px);
background-color: $md-color-black--lightest; background-color: $md-color-black--lightest;
color: $md-color-black--light; color: $md-color-black--light;
font-weight: 400; font-weight: 400;
line-height: 4.8rem; line-height: px2rem(48px);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -207,17 +207,17 @@
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
top: 0.4rem; top: px2rem(4px);
left: 0.4rem; left: px2rem(4px);
width: 4rem; width: px2rem(40px);
height: 4rem; height: px2rem(40px);
color: $md-color-black--light; color: $md-color-black--light;
} }
// Main lists // Main lists
~ .md-nav__list { ~ .md-nav__list {
background-color: $md-color-white; background-color: $md-color-white;
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset; box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
// Remove border for first list item // Remove border for first list item
& > .md-nav__item:first-child { & > .md-nav__item:first-child {
@ -235,11 +235,11 @@
.md-nav__button { .md-nav__button {
display: block; display: block;
position: absolute; position: absolute;
top: 0.4rem; top: px2rem(4px);
left: 0.4rem; left: px2rem(4px);
width: 6.4rem; width: px2rem(64px);
height: 6.4rem; height: px2rem(64px);
font-size: 4.8rem; font-size: px2rem(48px);
} }
// Hide back arrow icon // Hide back arrow icon
@ -254,13 +254,13 @@
// Icon // Icon
&::before { &::before {
right: 0.4rem; right: px2rem(4px);
left: initial; left: initial;
} }
// Site title in main navigation // Site title in main navigation
&--site .md-nav__button { &--site .md-nav__button {
right: 0.4rem; right: px2rem(4px);
left: initial; left: initial;
} }
} }
@ -274,7 +274,7 @@
// List item // List item
.md-nav__item { .md-nav__item {
padding: 0; padding: 0;
border-top: 0.1rem solid $md-color-black--lightest; border-top: px2rem(1px) solid $md-color-black--lightest;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
@ -283,12 +283,12 @@
// Increase spacing to account for icon // Increase spacing to account for icon
&--nested > .md-nav__link { &--nested > .md-nav__link {
padding-right: 4.8rem; padding-right: px2rem(48px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 1.6rem; padding-right: px2rem(16px);
padding-left: 4.8rem; padding-left: px2rem(48px);
} }
// Replace icon with right arrow // Replace icon with right arrow
@ -307,21 +307,21 @@
.md-nav__link { .md-nav__link {
position: relative; position: relative;
margin-top: 0; margin-top: 0;
padding: 1.2rem 1.6rem; padding: px2rem(12px) px2rem(16px);
// Rotate icon // Rotate icon
&::after { &::after {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 1.2rem; right: px2rem(12px);
margin-top: -1.2rem; margin-top: px2rem(-12px);
color: inherit; color: inherit;
font-size: 2.4rem; font-size: px2rem(24px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: initial; right: initial;
left: 1.2rem; left: px2rem(12px);
} }
} }
} }
@ -341,44 +341,44 @@
// 3rd level link // 3rd level link
.md-nav__link { .md-nav__link {
padding-left: 2.8rem; padding-left: px2rem(28px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 2.8rem; padding-right: px2rem(28px);
padding-left: initial; padding-left: initial;
} }
} }
// 4th level link // 4th level link
.md-nav .md-nav__link { .md-nav .md-nav__link {
padding-left: 4rem; padding-left: px2rem(40px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 4rem; padding-right: px2rem(40px);
padding-left: initial; padding-left: initial;
} }
} }
// 5th level link // 5th level link
.md-nav .md-nav .md-nav__link { .md-nav .md-nav .md-nav__link {
padding-left: 5.2rem; padding-left: px2rem(52px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 5.2rem; padding-right: px2rem(52px);
padding-left: initial; padding-left: initial;
} }
} }
// 6th level link // 6th level link
.md-nav .md-nav .md-nav .md-nav__link { .md-nav .md-nav .md-nav .md-nav__link {
padding-left: 6.4rem; padding-left: px2rem(64px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 6.4rem; padding-right: px2rem(64px);
padding-left: initial; padding-left: initial;
} }
} }
@ -428,7 +428,7 @@
// display the table of contents inside the drawer // display the table of contents inside the drawer
html &__link[for="__toc"] { html &__link[for="__toc"] {
display: block; display: block;
padding-right: 4.8rem; padding-right: px2rem(48px);
// Unrotate icon for table of contents // Unrotate icon for table of contents
&::after { &::after {
@ -449,14 +449,14 @@
// Adjust for RTL languages // Adjust for RTL languages
html [dir="rtl"] &__link { html [dir="rtl"] &__link {
padding-right: 1.6rem; padding-right: px2rem(16px);
padding-left: 4.8rem; padding-left: px2rem(48px);
} }
// Repository containing source // Repository containing source
&__source { &__source {
display: block; display: block;
padding: 0 0.4rem; padding: 0 px2rem(4px);
background-color: mix($md-color-primary, $md-color-black, 75%); background-color: mix($md-color-primary, $md-color-black, 75%);
color: $md-color-white; color: $md-color-white;
} }

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

@ -42,7 +42,7 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding: 0.4rem; padding: px2rem(4px);
} }
// Search modal overlay // Search modal overlay
@ -53,22 +53,22 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
position: absolute; position: absolute;
top: 0.4rem; top: px2rem(4px);
left: 0.4rem; left: px2rem(4px);
width: 3.6rem; width: px2rem(36px);
height: 3.6rem; height: px2rem(36px);
transform-origin: center; transform-origin: center;
transition: transition:
transform 0.3s 0.1s, transform 0.3s 0.1s,
opacity 0.2s 0.2s; opacity 0.2s 0.2s;
border-radius: 2rem; border-radius: px2rem(20px);
background-color: $md-color-white; background-color: $md-color-white;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: 0.4rem; right: px2rem(4px);
left: initial; left: initial;
} }
@ -181,8 +181,8 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
position: relative; position: relative;
width: 23rem; width: px2rem(230px);
padding: 0.2rem 0; padding: px2rem(2px) 0;
float: right; float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
@ -197,12 +197,12 @@ $md-toggle__search--checked:
// [tablet landscape]: Do not overlay title // [tablet landscape]: Do not overlay title
@include break-at-device(tablet landscape) { @include break-at-device(tablet landscape) {
width: 46.8rem; width: px2rem(468px);
} }
// [screen +]: Match content width // [screen +]: Match content width
@include break-from-device(screen) { @include break-from-device(screen) {
width: 68.8rem; width: px2rem(688px);
} }
} }
} }
@ -213,20 +213,20 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
border-radius: 0.2rem; border-radius: px2rem(2px);
} }
} }
// Search input // Search input
&__input { &__input {
position: relative; position: relative;
padding: 0 4.4rem 0 7.2rem; padding: 0 px2rem(44px) 0 px2rem(72px);
text-overflow: ellipsis; text-overflow: ellipsis;
z-index: 2; z-index: 2;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding: 0 7.2rem 0 4.4rem; padding: 0 px2rem(72px) 0 px2rem(44px);
} }
// Transition on placeholder // Transition on placeholder
@ -248,26 +248,26 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
width: 100%; width: 100%;
height: 4.8rem; height: px2rem(48px);
font-size: 1.8rem; font-size: px2rem(18px);
} }
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
width: 100%; width: 100%;
height: 3.6rem; height: px2rem(36px);
padding-left: 4.4rem; padding-left: px2rem(44px);
transition: transition:
background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: $md-color-black--lighter; background-color: $md-color-black--lighter;
color: inherit; color: inherit;
font-size: ms(0); font-size: ms(0);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 4.4rem; padding-right: px2rem(44px);
} }
// Icon color // Icon color
@ -287,7 +287,7 @@ $md-toggle__search--checked:
// Set light background on active search field // Set light background on active search field
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
border-radius: 0.2rem 0.2rem 0 0; border-radius: px2rem(2px) px2rem(2px) 0 0;
background-color: $md-color-white; background-color: $md-color-white;
color: $md-color-black; color: $md-color-black;
text-overflow: none; text-overflow: none;
@ -318,12 +318,12 @@ $md-toggle__search--checked:
// Search icon // Search icon
&[for="__search"] { &[for="__search"] {
top: 0.6rem; top: px2rem(6px);
left: 1rem; left: px2rem(10px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: 1rem; right: px2rem(10px);
left: initial; left: initial;
} }
@ -335,8 +335,8 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 1.2rem; top: px2rem(12px);
left: 1.6rem; left: px2rem(16px);
// Show back arrow instead of search icon // Show back arrow instead of search icon
&[for="__search"]::before { &[for="__search"]::before {
@ -352,8 +352,8 @@ $md-toggle__search--checked:
// Reset button // Reset button
&[type="reset"] { &[type="reset"] {
top: 0.6rem; top: px2rem(6px);
right: 1rem; right: px2rem(10px);
transform: scale(0.125); transform: scale(0.125);
transition: transition:
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
@ -363,13 +363,13 @@ $md-toggle__search--checked:
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: initial; right: initial;
left: 1rem; left: px2rem(10px);
} }
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 1.2rem; top: px2rem(12px);
right: 1.6rem; right: px2rem(16px);
} }
// Show reset button if search is active and input non-empty // Show reset button if search is active and input non-empty
@ -389,19 +389,19 @@ $md-toggle__search--checked:
&__output { &__output {
position: absolute; position: absolute;
width: 100%; width: 100%;
border-radius: 0 0 0.2rem 0.2rem; border-radius: 0 0 px2rem(2px) px2rem(2px);
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 4.8rem; top: px2rem(48px);
bottom: 0; bottom: 0;
} }
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
top: 3.8rem; top: px2rem(38px);
transition: opacity 0.4s; transition: opacity 0.4s;
opacity: 0; opacity: 0;
@ -418,18 +418,18 @@ $md-toggle__search--checked:
&__scrollwrap { &__scrollwrap {
height: 100%; height: 100%;
background-color: $md-color-white; background-color: $md-color-white;
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset; box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// [tablet landscape]: Set absolute width to omit unnecessary reflow // [tablet landscape]: Set absolute width to omit unnecessary reflow
@include break-at-device(tablet landscape) { @include break-at-device(tablet landscape) {
width: 46.8rem; width: px2rem(468px);
} }
// [screen +]: Set absolute width to omit unnecessary reflow // [screen +]: Set absolute width to omit unnecessary reflow
@include break-from-device(screen) { @include break-from-device(screen) {
width: 68.8rem; width: px2rem(688px);
} }
// [tablet landscape +]: Limit height to viewport // [tablet landscape +]: Limit height to viewport
@ -443,8 +443,8 @@ $md-toggle__search--checked:
// Override native scrollbar styles // Override native scrollbar styles
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.4rem; width: px2rem(4px);
height: 0.4rem; height: px2rem(4px);
} }
// Style scrollbar thumb // Style scrollbar thumb
@ -467,19 +467,19 @@ $md-toggle__search--checked:
// Search metadata // Search metadata
&__meta { &__meta {
padding: 0 1.6rem; padding: 0 px2rem(16px);
background-color: $md-color-black--lightest; background-color: $md-color-black--lightest;
color: $md-color-black--light; color: $md-color-black--light;
font-size: ms(-1); font-size: ms(-1);
line-height: 3.6rem; line-height: px2rem(36px);
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.4rem; padding-left: px2rem(44px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 4.4rem; padding-right: px2rem(44px);
padding-left: initial; padding-left: initial;
} }
} }
@ -489,13 +489,13 @@ $md-toggle__search--checked:
&__list { &__list {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: 0.1rem solid $md-color-black--lightest; border-top: px2rem(1px) solid $md-color-black--lightest;
list-style: none; list-style: none;
} }
// List item // List item
&__item { &__item {
box-shadow: 0 -0.1rem 0 $md-color-black--lightest; box-shadow: 0 px2rem(-1px) 0 $md-color-black--lightest;
} }
// Link inside item // Link inside item
@ -518,24 +518,24 @@ $md-toggle__search--checked:
// Add a little spacing on the teaser of the last link // Add a little spacing on the teaser of the last link
&:last-child .md-search-result__teaser { &:last-child .md-search-result__teaser {
margin-bottom: 1.2rem; margin-bottom: px2rem(12px);
} }
} }
// Article - document or section // Article - document or section
&__article { &__article {
position: relative; position: relative;
padding: 0 1.6rem; padding: 0 px2rem(16px);
overflow: auto; overflow: auto;
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.4rem; padding-left: px2rem(44px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: 4.4rem; padding-right: px2rem(44px);
padding-left: 1.6rem; padding-left: px2rem(16px);
} }
} }
@ -548,7 +548,7 @@ $md-toggle__search--checked:
position: absolute; position: absolute;
left: 0; left: 0;
margin: 0.2rem; margin: px2rem(2px);
transition: opacity 0.25s; transition: opacity 0.25s;
color: $md-color-black--light; color: $md-color-black--light;
content: "\E880"; // find_in_page content: "\E880"; // find_in_page
@ -567,7 +567,7 @@ $md-toggle__search--checked:
// Title // Title
.md-search-result__title { .md-search-result__title {
margin: 1.1rem 0; margin: px2rem(11px) 0;
font-size: ms(0); font-size: ms(0);
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
@ -588,7 +588,7 @@ $md-toggle__search--checked:
// Teaser // Teaser
&__teaser { &__teaser {
display: -webkit-box; display: -webkit-box;
max-height: 3.3rem; max-height: px2rem(33px);
margin: 0.5em 0; margin: 0.5em 0;
color: $md-color-black--light; color: $md-color-black--light;
font-size: ms(-1); font-size: ms(-1);
@ -600,13 +600,13 @@ $md-toggle__search--checked:
// [mobile -]: Increase number of lines // [mobile -]: Increase number of lines
@include break-to-device(mobile) { @include break-to-device(mobile) {
max-height: 5rem; max-height: px2rem(50px);
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
// [tablet landscape]: Increase number of lines // [tablet landscape]: Increase number of lines
@include break-at-device(tablet landscape) { @include break-at-device(tablet landscape) {
max-height: 5rem; max-height: px2rem(50px);
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
} }

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

@ -35,8 +35,8 @@ $md-toggle__drawer--checked:
// Sidebar container // Sidebar container
.md-sidebar { .md-sidebar {
position: absolute; position: absolute;
width: 24.2rem; width: px2rem(242px);
padding: 2.4rem 0; padding: px2rem(24px) 0;
overflow: hidden; overflow: hidden;
// Hide for print // Hide for print
@ -47,7 +47,7 @@ $md-toggle__drawer--checked:
// Lock sidebar to container height (account for fixed header) // Lock sidebar to container height (account for fixed header)
&[data-md-state="lock"] { &[data-md-state="lock"] {
position: fixed; position: fixed;
top: 4.8rem; top: px2rem(48px);
} }
// [tablet -]: Convert navigation to drawer // [tablet -]: Convert navigation to drawer
@ -57,8 +57,8 @@ $md-toggle__drawer--checked:
&--primary { &--primary {
position: fixed; position: fixed;
top: 0; top: 0;
left: -24.2rem; left: px2rem(-242px);
width: 24.2rem; width: px2rem(242px);
height: 100%; height: 100%;
transform: translateX(0); transform: translateX(0);
transition: transition:
@ -69,7 +69,7 @@ $md-toggle__drawer--checked:
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
right: -24.2rem; right: px2rem(-242px);
left: initial; left: initial;
} }
@ -82,11 +82,11 @@ $md-toggle__drawer--checked:
#{$md-toggle__drawer--checked} & { #{$md-toggle__drawer--checked} & {
@include z-depth(8); @include z-depth(8);
transform: translateX(24.2rem); transform: translateX(px2rem(242px));
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
transform: translateX(-24.2rem); transform: translateX(px2rem(-242px));
} }
// Just show drawer, if browser doesn't support 3D transforms // Just show drawer, if browser doesn't support 3D transforms
@ -122,11 +122,11 @@ $md-toggle__drawer--checked:
// [screen +]: Limit to grid // [screen +]: Limit to grid
@include break-from-device(screen) { @include break-from-device(screen) {
margin-left: 122rem; margin-left: px2rem(1220px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: 122rem; margin-right: px2rem(1220px);
margin-left: initial; margin-left: initial;
} }
} }
@ -135,7 +135,7 @@ $md-toggle__drawer--checked:
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
max-height: 100%; max-height: 100%;
margin: 0 0.4rem; margin: 0 px2rem(4px);
overflow-y: auto; overflow-y: auto;
// Hack: putting the scroll wrapper on the GPU massively reduces jitter // Hack: putting the scroll wrapper on the GPU massively reduces jitter
// when locking the sidebars into place // when locking the sidebars into place
@ -157,8 +157,8 @@ $md-toggle__drawer--checked:
// Override native scrollbar styles // Override native scrollbar styles
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0.4rem; width: px2rem(4px);
height: 0.4rem; height: px2rem(4px);
} }
// Style scrollbar thumb // Style scrollbar thumb

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

@ -31,7 +31,7 @@
} }
100% { 100% {
height: 1.3rem; height: px2rem(13px);
} }
} }
@ -59,16 +59,16 @@
// Source container // Source container
.md-source { .md-source {
display: block; display: block;
padding-right: 1.2rem; padding-right: px2rem(12px);
transition: opacity 0.25s; transition: opacity 0.25s;
font-size: 1.3rem; font-size: px2rem(13px);
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: initial; padding-right: initial;
padding-left: 1.2rem; padding-left: px2rem(12px);
} }
// Hovered source container // Hovered source container
@ -79,7 +79,7 @@
// Necessary for vertical alignment // Necessary for vertical alignment
&::after { &::after {
display: inline-block; display: inline-block;
height: 4.8rem; height: px2rem(48px);
content: ""; content: "";
vertical-align: middle; vertical-align: middle;
} }
@ -87,36 +87,36 @@
// Repository platform icon // Repository platform icon
&__icon { &__icon {
display: inline-block; display: inline-block;
width: 4.8rem; width: px2rem(48px);
height: 4.8rem; height: px2rem(48px);
content: ""; content: "";
vertical-align: middle; vertical-align: middle;
// Align SVG, do not scale, as this will incur strange formatting bugs // Align SVG, do not scale, as this will incur strange formatting bugs
// in Internet Explorer and Edge // in Internet Explorer and Edge
svg { svg {
width: 2.4rem; width: px2rem(24px);
height: 2.4rem; height: px2rem(24px);
margin-top: 1.2rem; margin-top: px2rem(12px);
margin-left: 1.2rem; margin-left: px2rem(12px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: 1.2rem; margin-right: px2rem(12px);
margin-left: initial; margin-left: initial;
} }
} }
// Correct alignment, if icon is present // Correct alignment, if icon is present
+ .md-source__repository { + .md-source__repository {
margin-left: -4.4rem; margin-left: px2rem(-44px);
padding-left: 4rem; padding-left: px2rem(40px);
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
margin-right: -4.4rem; margin-right: px2rem(-44px);
margin-left: initial; margin-left: initial;
padding-right: 4rem; padding-right: px2rem(40px);
padding-left: initial; padding-left: initial;
} }
} }
@ -126,7 +126,7 @@
&__repository { &__repository {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
margin-left: 1.2rem; margin-left: px2rem(12px);
font-weight: 700; font-weight: 700;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -137,7 +137,7 @@
&__facts { &__facts {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1.1rem; font-size: px2rem(11px);
font-weight: 700; font-weight: 700;
list-style-type: none; list-style-type: none;
opacity: 0.75; opacity: 0.75;
@ -165,7 +165,7 @@
// Middle dot before fact // Middle dot before fact
&::before { &::before {
margin: 0 0.2rem; margin: 0 px2rem(2px);
content: "\00B7"; content: "\00B7";
} }
@ -180,8 +180,8 @@
.md-source-file { .md-source-file {
display: inline-block; display: inline-block;
margin: 1em 0.5em 1em 0; margin: 1em 0.5em 1em 0;
padding-right: 0.5rem; padding-right: px2rem(5px);
border-radius: 0.2rem; border-radius: px2rem(2px);
background-color: $md-color-black--lightest; background-color: $md-color-black--lightest;
font-size: ms(-1); font-size: ms(-1);
list-style-type: none; list-style-type: none;
@ -193,8 +193,8 @@
@extend %md-icon; @extend %md-icon;
display: inline-block; display: inline-block;
margin-right: 0.5rem; margin-right: px2rem(5px);
padding: 0.5rem; padding: px2rem(5px);
background-color: $md-color-black--lighter; background-color: $md-color-black--lighter;
color: $md-color-white; color: $md-color-white;
font-size: ms(0); font-size: ms(0);

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

@ -45,7 +45,7 @@
// List of items // List of items
&__list { &__list {
margin: 0; margin: 0;
margin-left: 0.4rem; margin-left: px2rem(4px);
padding: 0; padding: 0;
list-style: none; list-style: none;
white-space: nowrap; white-space: nowrap;
@ -54,20 +54,20 @@
// List item // List item
&__item { &__item {
display: inline-block; display: inline-block;
height: 4.8rem; height: px2rem(48px);
padding-right: 1.2rem; padding-right: px2rem(12px);
padding-left: 1.2rem; padding-left: px2rem(12px);
} }
// Link inside item - could be defined as block elements and aligned via // Link inside item - could be defined as block elements and aligned via
// line height, but this would imply more repaints when scrolling // line height, but this would imply more repaints when scrolling
&__link { &__link {
display: block; display: block;
margin-top: 1.6rem; margin-top: px2rem(16px);
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 0.25s;
font-size: 1.4rem; font-size: px2rem(14px);
opacity: 0.7; opacity: 0.7;
// Active or hovered link // Active or hovered link
@ -141,7 +141,7 @@
// Reset font-size for nested items and induce margin collapse // Reset font-size for nested items and induce margin collapse
&--nested { &--nested {
display: none; display: none;
font-size: 1.4rem; font-size: px2rem(14px);
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;