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

Fixed unnecessary nesting in SCSS, reducing final CSS by 20kb

Browse Source
This commit is contained in:
squidfunk 2020-02-24 21:48:30 +01:00
parent 11d1b839a1
commit b65bda08a7
15 changed files with 171 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/javascripts/bundle.262abba4.min.js.map
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/bundle.262abba4.min.js → material/assets/javascripts/bundle.a9b5ac61.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.a9b5ac61.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

8
material/assets/manifest.json
View File

@ -1,8 +1,8 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.262abba4.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.262abba4.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.a9b5ac61.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a9b5ac61.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.865ff948.min.css",
"assets/stylesheets/app.scss": "assets/stylesheets/app.bdffa146.min.css"
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.c0cd5d4d.min.css",
"assets/stylesheets/app.scss": "assets/stylesheets/app.55d3176a.min.css"
}

1
material/assets/stylesheets/app-palette.865ff948.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app-palette.c0cd5d4d.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.55d3176a.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.bdffa146.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -43,9 +43,9 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.bdffa146.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.55d3176a.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.865ff948.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.c0cd5d4d.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}
@ -195,7 +195,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.262abba4.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.a9b5ac61.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

1
src/assets/stylesheets/app.scss
View File

@ -64,6 +64,7 @@
@import "extensions/pymdown/critic";
@import "extensions/pymdown/details";
@import "extensions/pymdown/emoji";
@import "extensions/pymdown/highlight";
@import "extensions/pymdown/inlinehilite";
@import "extensions/pymdown/tabbed";
@import "extensions/pymdown/tasklist";

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

@ -27,7 +27,7 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Admonition extension
// Admonition
.admonition {
margin: 1.5625em 0;
padding: 0 px2rem(12px);
@ -58,41 +58,6 @@
margin: 1em 0;
}
// Title
> .admonition-title {
margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
}
// Reset spacing, if title is the only element
&:last-child {
margin-bottom: 0;
}
// Icon
&::before {
position: absolute;
width: px2rem(20px);
height: px2rem(20px);
margin-left: px2rem(-28px);
background-color: $clr-blue-a200;
mask-image: url("{{ pencil }}");
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-28px);
margin-left: initial;
}
}
}
// Build representational classes
@each $names, $appearance in (
abstract summary tldr: $clr-light-blue-a400 "text-subject",
@ -127,7 +92,7 @@
}
// Title
> .admonition-title {
> :first-child {
background-color: transparentize($tint, 0.9);
// Icon
@ -148,4 +113,39 @@
}
}
}
// Admonition title
.admonition-title {
margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
}
// Reset spacing, if title is the only element
&:last-child {
margin-bottom: 0;
}
// Icon
&::before {
position: absolute;
width: px2rem(20px);
height: px2rem(20px);
margin-left: px2rem(-28px);
background-color: $clr-blue-a200;
mask-image: url("{{ pencil }}");
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-28px);
margin-left: initial;
}
}
}
}

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

@ -210,62 +210,58 @@ $codehilite-whitespace: transparent;
// Rules: layout
// ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Block with line numbers
.codehilitetable {
display: block;
overflow: hidden;
// Block with line numbers
.codehilitetable {
// Set table elements to block layout, because otherwise the whole flexbox
// hacking won't work correctly
tbody,
td {
display: block;
padding: 0;
}
// We need to use flexbox layout, because otherwise it's not possible to
// make the code container scroll while keeping the line numbers static
tr {
display: flex;
}
// The pre tags are nested inside a table, so we need to remove the
// margin because it collapses below all the overflows
pre,
.linenodiv {
margin: 0;
border-radius: 0;
}
// Add spacing to line number container
.linenodiv {
padding: px2rem(10.5px) px2rem(12px);
}
// Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
color: $md-color-black--lighter;
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
user-select: none;
// Reset spacings
pre {
background-color: transparent;
color: inherit;
text-align: right;
}
}
// The table cell containing the code container wrapper and code should
// stretch horizontally to the remaining space
.code {
flex: 1;
overflow: hidden;
// Set table elements to block layout, because otherwise the whole flexbox
// hacking won't work correctly
tbody,
td {
display: block;
padding: 0;
}
// We need to use flexbox layout, because otherwise it's not possible to
// make the code container scroll while keeping the line numbers static
tr {
display: flex;
}
// The pre tags are nested inside a table, so we need to remove the
// margin because it collapses below all the overflows
pre,
.linenodiv {
margin: 0;
border-radius: 0;
}
// Add spacing to line number container
.linenodiv {
padding: px2rem(10.5px) px2rem(12px);
}
// Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
color: $md-color-black--lighter;
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
user-select: none;
// Reset spacings
pre {
background-color: transparent;
color: inherit;
text-align: right;
}
}
// The table cell containing the code container wrapper and code should
// stretch horizontally to the remaining space
.code {
flex: 1;
overflow: hidden;
}
}
// TODO: refactor
@ -290,6 +286,10 @@ $codehilite-whitespace: transparent;
}
}
}
}
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Block with line numbers
> .codehilitetable {
@ -321,16 +321,4 @@ $codehilite-whitespace: transparent;
}
}
}
// When pymdownx.superfences is enabled but codehilite is disabled,
// pymdownx.highlight will be used. When this happens, the outer
// container and tables get this class names by default
.highlight {
@extend .codehilite;
}
// Same as above, but for code blocks with line numbers enabled
.highlighttable {
@extend .codehilitetable;
}
}

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

@ -59,16 +59,34 @@
}
}
// Make permalink visible on hover
:hover .headerlink,
:target .headerlink,
.headerlink:focus {
transform: translate(0, 0);
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms;
// visibility 0ms;
opacity: 1;
// visibility: visible;
}
// Active or targeted permalink
.headerlink:focus,
.headerlink:hover,
:target .headerlink {
color: $md-color-accent;
}
// Correct anchor offset for link blurring
@each $level, $delta in (
h1: 8px,
h2: 8px,
h3: 8px,
h1 h2 h3: 8px,
h4: 9px,
h5: 11px,
h6: 11px
h5 h6: 12px,
) {
#{$level}[id] {
%#{nth($level, 1)} {
// Un-targeted anchor
&::before {
@ -83,26 +101,12 @@
margin-top: -1 * px2rem(48px + 12px + $delta);
padding-top: px2rem(48px + 12px + $delta);
}
}
// Make permalink visible on hover
&:hover .headerlink,
&:target .headerlink,
& .headerlink:focus {
transform: translate(0, 0);
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms;
// visibility 0ms;
opacity: 1;
// visibility: visible;
}
// Active or targeted permalink
&:hover .headerlink:hover,
&:target .headerlink,
& .headerlink:focus {
color: $md-color-accent;
// Define levels
@for $n from 1 through length($level) {
#{nth($level, $n)}[id] {
@extend %#{nth($level, 1)};
}
}
}

37
src/assets/stylesheets/extensions/pymdown/_highlight.scss Normal file
View File

@ -0,0 +1,37 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// When pymdownx.superfences is enabled but codehilite is disabled,
// pymdownx.highlight will be used. When this happens, the outer container
// and tables get this class names by default
.highlight {
@extend .codehilite;
}
// Same as above, but for code blocks with line numbers enabled
.highlighttable {
@extend .codehilitetable;
}

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

@ -51,16 +51,13 @@
}
// Show on container hover
pre:hover &,
.codehilite:hover & {
pre:hover & {
color: $md-color-black--light;
}
// Focused or hovered icon
pre &:focus,
pre &:hover,
.codehilite &:focus,
.codehilite &:hover {
pre &:hover {
color: $md-color-accent;
}
}