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

Replaced mask-image wherever possible to improve print styles

Browse Source
This commit is contained in:
squidfunk 2020-03-18 12:46:50 +01:00
parent 37f2208ef0
commit 1801f2f2b9
15 changed files with 72 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/images/icon.svg → material/.icons/logo.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89" style="fill:#FFFFFF">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 452 B

After

Width:  |  Height:  |  Size: 433 B

2
material/assets/javascripts/bundle.c56f44eb.min.js → material/assets/javascripts/bundle.773bc13f.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.c56f44eb.min.js.map → material/assets/javascripts/bundle.773bc13f.min.js.map
View File

File diff suppressed because one or more lines are too long

6
material/assets/manifest.json
View File

@ -1,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.c56f44eb.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c56f44eb.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.773bc13f.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.773bc13f.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.b463eb70.min.css",
"assets/stylesheets/main.css": "assets/stylesheets/main.dfb60779.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
}

1
material/assets/stylesheets/main.b463eb70.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.dfb60779.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.b463eb70.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.dfb60779.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
{% endif %}
@ -178,7 +178,7 @@
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.c56f44eb.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.773bc13f.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

2
mkdocs.yml
View File

@ -57,8 +57,8 @@ theme:
text: Roboto
code: Roboto Mono
icon:
logo: logo
favicon: assets/favicon.png
logo: assets/images/icon.svg
# Plugins
plugins:

67
package-lock.json generated
View File

@ -2805,12 +2805,6 @@
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
"dev": true
},
"deep-get-set": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/deep-get-set/-/deep-get-set-1.1.0.tgz",
"integrity": "sha1-R7uiAIo/3px1PcvmGjYkFgbZg28=",
"dev": true
},
"defaults": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@ -6645,67 +6639,6 @@
}
}
},
"postcss-replace": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/postcss-replace/-/postcss-replace-1.1.0.tgz",
"integrity": "sha512-uhfI50AsXVlrNMEAqcPX9wcmSxUCifYFGkq+kiA/dPGZrF99OuVP322L2KR8PgndpLKubvZ+7TNWxAEUwckM0Q==",
"dev": true,
"requires": {
"deep-get-set": "^1.1.0",
"kind-of": "^6.0.2",
"postcss": "^7.0.14"
},
"dependencies": {
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"dev": true
},
"postcss": {
"version": "7.0.27",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
"integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-reporter": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",

0
docs/assets/images/icon.afdesign → src/.icons/logo.afdesign
View File

6
src/.icons/logo.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

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

@ -20,24 +20,37 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
///
/// Admonition flavours
///
$admonitions: (
note: pencil $clr-blue-a200,
abstract summary tldr: text-subject $clr-light-blue-a400,
info todo: information $clr-cyan-a700,
tip hint important: fire $clr-teal-a700,
success check done: check-circle $clr-green-a700,
question help faq: help-circle $clr-light-green-a700,
warning caution attention: alert $clr-orange-a400,
failure fail missing: close-circle $clr-red-a200,
danger error: flash-circle $clr-red-a400,
bug: bug $clr-pink-a400,
example: format-list-numbered $clr-deep-purple-a400,
quote cite: format-quote-close $clr-grey
) !default;
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
// Icon definitions
:root {
--md-admonition-icon--note: url("{{ pencil }}");
--md-admonition-icon--abstract: url("{{ text-subject }}");
--md-admonition-icon--info: url("{{ information }}");
--md-admonition-icon--tip: url("{{ fire }}");
--md-admonition-icon--success: url("{{ check-circle }}");
--md-admonition-icon--question: url("{{ help-circle }}");
--md-admonition-icon--warning: url("{{ alert }}");
--md-admonition-icon--failure: url("{{ close-circle }}");
--md-admonition-icon--danger: url("{{ flash-circle }}");
--md-admonition-icon--bug: url("{{ bug }}");
--md-admonition-icon--example: url("{{ format-list-numbered }}");
--md-admonition-icon--quote: url("{{ format-quote-close }}");
@each $names, $props in $admonitions {
--md-admonition-icon--#{nth($names, 1)}: url("{{ #{$props} }}");
}
}
// ----------------------------------------------------------------------------
@ -114,8 +127,7 @@
left: px2rem(12px);
width: px2rem(20px);
height: px2rem(20px);
background-color: $clr-blue-a200;
mask-image: var(--md-admonition-icon--note);
background-image: var(--md-admonition-icon--note);
content: "";
// Adjust for right-to-left languages
@ -123,11 +135,6 @@
right: px2rem(12px);
left: initial;
}
// Hack: mask-image is not supported in PDFs
@media print {
background: var(--md-admonition-icon--note);
}
}
// Reset code inside Admonition titles
@ -143,42 +150,25 @@
}
// ----------------------------------------------------------------------------
// Rules: different flavours
// Rules: flavours
// ----------------------------------------------------------------------------
@each $names, $tint in (
abstract summary tldr: $clr-light-blue-a400,
info todo: $clr-cyan-a700,
tip hint important: $clr-teal-a700,
success check done: $clr-green-a700,
question help faq: $clr-light-green-a700,
warning caution attention: $clr-orange-a400,
failure fail missing: $clr-red-a200,
danger error: $clr-red-a400,
bug: $clr-pink-a400,
example: $clr-deep-purple-a400,
quote cite: $clr-grey
) {
$type: #{nth($names, 1)};
@each $names, $props in $admonitions {
$name: nth($names, 1);
$tint: nth($props, 2);
// Define base class
.md-typeset .admonition.#{$type} {
.md-typeset .admonition.#{$name} {
border-color: $tint;
}
// Define base class
.md-typeset .#{$type} > .admonition-title {
.md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9);
// Icon
&::before {
background-color: $tint;
mask-image: var(--md-admonition-icon--#{$type});
// Hack: mask-image is not supported in PDFs
@media print {
background: var(--md-admonition-icon--#{$type});
}
background-image: var(--md-admonition-icon--#{$name});
}
}
@ -186,7 +176,7 @@
@if length($names) > 1 {
@for $n from 2 through length($names) {
.#{nth($names, $n)} {
@extend .#{nth($names, 1)};
@extend .#{$name};
}
}
}

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

@ -63,7 +63,6 @@
summary {
@extend .admonition-title;
box-sizing: border-box;
min-height: px2rem(20px);
padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
cursor: pointer;

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

@ -27,7 +27,7 @@
// Icon definitions
:root {
--md-tasklist-icon: url("{{ checkbox-blank-circle }}");
--md-tasklist-icon--checked: url("{{ check-circle }}");
--md-tasklist-icon--checked: url("{{ check-circle #{$clr-green-a400} }}");
}
// ----------------------------------------------------------------------------
@ -65,8 +65,8 @@
left: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: var(--md-default-fg-color--lightest);
mask-image: var(--md-tasklist-icon);
background-image: var(--md-tasklist-icon);
opacity: 0.1;
content: "";
// Adjust for right-to-left languages
@ -74,22 +74,12 @@
right: px2em(-24px);
left: initial;
}
// Hack: mask-image is not supported in PDFs
@media print {
background: var(--md-tasklist-icon);
}
}
// Checkbox icon in checked state
[type="checkbox"]:checked + .task-list-indicator::before {
background-color: $clr-green-a400;
mask-image: var(--md-tasklist-icon--checked);
// Hack: mask-image is not supported in PDFs
@media print {
background: var(--md-tasklist-icon--checked);
}
background-image: var(--md-tasklist-icon--checked);
opacity: 1;
}
// Hide original checkbox behind icon

21
webpack.config.ts
View File

@ -109,12 +109,20 @@ function config(args: Configuration): Configuration {
options: {
multiple: [
{
search: "\\{{2}([^}]+)\\}{2}",
replace(_: string, name: string) {
return `data:image/svg+xml;utf8,${
icon.getSVG(path.basename(name.trim(), ".json"))
.replace(/"/g, "\\\"")
}`
search: "\\{{2}\\s+?([^}]+)\\s+?\\}{2}",
replace(_: string, props: string) {
const [name, color] = props.split(" ")
/* Load icon and set color, if given */
const svg = icon.getSVG(
path.basename(name, ".json"),
color ? ` style="fill: ${color}"` : undefined
)
.replace(/"/g, "'")
.replace(/#/g, "%23")
/* Return encoded icon */
return `data:image/svg+xml;utf8,${svg}`
},
flags: "g"
}
@ -271,6 +279,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
/* Template files */
new CopyPlugin([
{ from: ".icons/*.svg" },
{ from: "assets/images/*" },
{ from: "**/*.{py,yml}" },
{