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

Switched to stylelint-config-rational-order

Browse Source
This commit is contained in:
squidfunk 2020-03-06 15:21:08 +01:00
parent baca54241b
commit 9ffcc05752
24 changed files with 599 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

405
package-lock.json generated
View File

@ -1288,6 +1288,31 @@
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"dev": true "dev": true
}, },
"camelcase-keys": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
"integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=",
"dev": true,
"requires": {
"camelcase": "^4.1.0",
"map-obj": "^2.0.0",
"quick-lru": "^1.0.0"
},
"dependencies": {
"camelcase": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
"integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
"dev": true
},
"map-obj": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz",
"integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk=",
"dev": true
}
}
},
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001016", "version": "1.0.30001016",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz",
@ -2623,6 +2648,15 @@
} }
} }
}, },
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
"dev": true,
"requires": {
"locate-path": "^2.0.0"
}
},
"findup-sync": { "findup-sync": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz", "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
@ -3341,6 +3375,12 @@
} }
} }
}, },
"get-stdin": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
"dev": true
},
"get-stream": { "get-stream": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@ -3839,6 +3879,12 @@
"resolve-from": "^3.0.0" "resolve-from": "^3.0.0"
} }
}, },
"import-lazy": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
"integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
"dev": true
},
"import-local": { "import-local": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@ -3855,6 +3901,12 @@
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
"dev": true "dev": true
}, },
"indent-string": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
"integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
"dev": true
},
"indexes-of": { "indexes-of": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@ -4082,6 +4134,12 @@
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true "dev": true
}, },
"is-supported-regexp-flag": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.1.tgz",
"integrity": "sha512-3vcJecUUrpgCqc/ca0aWeNu64UGgxcvO60K/Fkr1N6RSvfGCTU60UKN68JDmKokgba0rFFJs12EnzOQa14ubKQ==",
"dev": true
},
"is-whitespace-character": { "is-whitespace-character": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz",
@ -4227,6 +4285,18 @@
"integrity": "sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs=", "integrity": "sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs=",
"dev": true "dev": true
}, },
"load-json-file": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^4.0.0",
"pify": "^3.0.0",
"strip-bom": "^3.0.0"
}
},
"loader-runner": { "loader-runner": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@ -4450,6 +4520,23 @@
"readable-stream": "^2.0.1" "readable-stream": "^2.0.1"
} }
}, },
"meow": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz",
"integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
"dev": true,
"requires": {
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
"loud-rejection": "^1.0.0",
"minimist-options": "^3.0.1",
"normalize-package-data": "^2.3.4",
"read-pkg-up": "^3.0.0",
"redent": "^2.0.0",
"trim-newlines": "^2.0.0",
"yargs-parser": "^10.0.0"
}
},
"merge2": { "merge2": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
@ -5787,6 +5874,27 @@
"safe-buffer": "^5.1.0" "safe-buffer": "^5.1.0"
} }
}, },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
"dev": true,
"requires": {
"load-json-file": "^4.0.0",
"normalize-package-data": "^2.3.2",
"path-type": "^3.0.0"
}
},
"read-pkg-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
"integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
"dev": true,
"requires": {
"find-up": "^2.0.0",
"read-pkg": "^3.0.0"
}
},
"readable-stream": { "readable-stream": {
"version": "2.3.6", "version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@ -5813,6 +5921,16 @@
"readable-stream": "^2.0.2" "readable-stream": "^2.0.2"
} }
}, },
"redent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz",
"integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=",
"dev": true,
"requires": {
"indent-string": "^3.0.0",
"strip-indent": "^2.0.0"
}
},
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@ -6517,6 +6635,40 @@
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=", "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=",
"dev": true "dev": true
}, },
"string-width": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
"integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
"dev": true,
"requires": {
"emoji-regex": "^7.0.1",
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^5.1.0"
},
"dependencies": {
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true
},
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
"integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
"dev": true
},
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
}
}
},
"string_decoder": { "string_decoder": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@ -6547,12 +6699,24 @@
"ansi-regex": "^5.0.0" "ansi-regex": "^5.0.0"
} }
}, },
"strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true
},
"strip-eof": { "strip-eof": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true "dev": true
}, },
"strip-indent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
"integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
"dev": true
},
"style-search": { "style-search": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@ -6901,6 +7065,224 @@
} }
} }
}, },
"stylelint-config-rational-order": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/stylelint-config-rational-order/-/stylelint-config-rational-order-0.1.2.tgz",
"integrity": "sha512-Qo7ZQaihCwTqijfZg4sbdQQHtugOX/B1/fYh018EiDZHW+lkqH9uHOnsDwDPGZrYJuB6CoyI7MZh2ecw2dOkew==",
"dev": true,
"requires": {
"stylelint": "^9.10.1",
"stylelint-order": "^2.2.1"
},
"dependencies": {
"clone-regexp": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-1.0.1.tgz",
"integrity": "sha512-Fcij9IwRW27XedRIJnSOEupS7RVcXtObJXbcUOX93UCLqqOdRpkvzKywOOSizmEK/Is3S/RHX9dLdfo6R1Q1mw==",
"dev": true,
"requires": {
"is-regexp": "^1.0.0",
"is-supported-regexp-flag": "^1.0.0"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"execall": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/execall/-/execall-1.0.0.tgz",
"integrity": "sha1-c9CQTjlbPKsGWLCNCewlMH8pu3M=",
"dev": true,
"requires": {
"clone-regexp": "^1.0.0"
}
},
"file-entry-cache": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-4.0.0.tgz",
"integrity": "sha512-AVSwsnbV8vH/UVbvgEhf3saVQXORNv0ZzSkvkhQIaia5Tia+JhGTaa/ePUSVoPHQyGayQNmYfkzFi3WZV5zcpA==",
"dev": true,
"requires": {
"flat-cache": "^2.0.1"
}
},
"html-tags": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
"dev": true
},
"ignore": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
"integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
"dev": true
},
"is-regexp": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
"integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
"dev": true
},
"known-css-properties": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.11.0.tgz",
"integrity": "sha512-bEZlJzXo5V/ApNNa5z375mJC6Nrz4vG43UgcSCrg2OHC+yuB6j0iDSrY7RQ/+PRofFB03wNIIt9iXIVLr4wc7w==",
"dev": true
},
"leven": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
"integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA=",
"dev": true
},
"log-symbols": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
"integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
"dev": true,
"requires": {
"chalk": "^2.0.1"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"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"
}
},
"postcss-sass": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.3.5.tgz",
"integrity": "sha512-B5z2Kob4xBxFjcufFnhQ2HqJQ2y/Zs/ic5EZbCywCkxKd756Q40cIQ/veRDwSrw1BF6+4wUgmpm0sBASqVi65A==",
"dev": true,
"requires": {
"gonzales-pe": "^4.2.3",
"postcss": "^7.0.1"
}
},
"postcss-sorting": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-4.1.0.tgz",
"integrity": "sha512-r4T2oQd1giURJdHQ/RMb72dKZCuLOdWx2B/XhXN1Y1ZdnwXsKH896Qz6vD4tFy9xSjpKNYhlZoJmWyhH/7JUQw==",
"dev": true,
"requires": {
"lodash": "^4.17.4",
"postcss": "^7.0.0"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"stylelint": {
"version": "9.10.1",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.10.1.tgz",
"integrity": "sha512-9UiHxZhOAHEgeQ7oLGwrwoDR8vclBKlSX7r4fH0iuu0SfPwFaLkb1c7Q2j1cqg9P7IDXeAV2TvQML/fRQzGBBQ==",
"dev": true,
"requires": {
"autoprefixer": "^9.0.0",
"balanced-match": "^1.0.0",
"chalk": "^2.4.1",
"cosmiconfig": "^5.0.0",
"debug": "^4.0.0",
"execall": "^1.0.0",
"file-entry-cache": "^4.0.0",
"get-stdin": "^6.0.0",
"global-modules": "^2.0.0",
"globby": "^9.0.0",
"globjoin": "^0.1.4",
"html-tags": "^2.0.0",
"ignore": "^5.0.4",
"import-lazy": "^3.1.0",
"imurmurhash": "^0.1.4",
"known-css-properties": "^0.11.0",
"leven": "^2.1.0",
"lodash": "^4.17.4",
"log-symbols": "^2.0.0",
"mathml-tag-names": "^2.0.1",
"meow": "^5.0.0",
"micromatch": "^3.1.10",
"normalize-selector": "^0.2.0",
"pify": "^4.0.0",
"postcss": "^7.0.13",
"postcss-html": "^0.36.0",
"postcss-jsx": "^0.36.0",
"postcss-less": "^3.1.0",
"postcss-markdown": "^0.36.0",
"postcss-media-query-parser": "^0.2.3",
"postcss-reporter": "^6.0.0",
"postcss-resolve-nested-selector": "^0.1.1",
"postcss-safe-parser": "^4.0.0",
"postcss-sass": "^0.3.5",
"postcss-scss": "^2.0.0",
"postcss-selector-parser": "^3.1.0",
"postcss-syntax": "^0.36.2",
"postcss-value-parser": "^3.3.0",
"resolve-from": "^4.0.0",
"signal-exit": "^3.0.2",
"slash": "^2.0.0",
"specificity": "^0.4.1",
"string-width": "^3.0.0",
"style-search": "^0.1.0",
"sugarss": "^2.0.0",
"svg-tags": "^1.0.0",
"table": "^5.0.0"
}
},
"stylelint-order": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz",
"integrity": "sha512-019KBV9j8qp1MfBjJuotse6MgaZqGVtXMc91GU9MsS9Feb+jYUvUU3Z8XiClqPdqJZQ0ryXQJGg3U3PcEjXwfg==",
"dev": true,
"requires": {
"lodash": "^4.17.10",
"postcss": "^7.0.2",
"postcss-sorting": "^4.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"
}
}
}
},
"stylelint-config-recommended": { "stylelint-config-recommended": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz",
@ -7185,6 +7567,12 @@
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
"dev": true "dev": true
}, },
"trim-newlines": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz",
"integrity": "sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=",
"dev": true
},
"trim-trailing-lines": { "trim-trailing-lines": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz", "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz",
@ -8086,6 +8474,23 @@
"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
"dev": true "dev": true
}, },
"yargs-parser": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
"integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
"dev": true,
"requires": {
"camelcase": "^4.1.0"
},
"dependencies": {
"camelcase": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
"integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
"dev": true
}
}
},
"yn": { "yn": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz", "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",

2
package.json
View File

@ -75,8 +75,8 @@
"sass": "^1.25.0", "sass": "^1.25.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"stylelint": "^11.1.1", "stylelint": "^11.1.1",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^19.0.0", "stylelint-config-standard": "^19.0.0",
"stylelint-order": "^3.1.1",
"stylelint-scss": "^3.13.0", "stylelint-scss": "^3.13.0",
"ts-loader": "^6.2.1", "ts-loader": "^6.2.1",
"ts-node": "^7.0.1", "ts-node": "^7.0.1",

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

@ -50,8 +50,8 @@ body {
// Reset horizontal rules in FF // Reset horizontal rules in FF
hr { hr {
overflow: visible;
box-sizing: content-box; box-sizing: content-box;
overflow: visible;
} }
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8 // Remove gaps in underlined links in iOS >= 8 and Safari >= 8
@ -119,9 +119,9 @@ th {
button { button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0;
background: transparent;
font-size: inherit; font-size: inherit;
background: transparent;
border: 0;
} }
// Reset (native) input styles // Reset (native) input styles

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

@ -74,28 +74,28 @@ kbd {
h1 { h1 {
margin: 0 0 px2rem(40px); margin: 0 0 px2rem(40px);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
font-size: ms(3);
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; font-size: ms(3);
line-height: 1.3; line-height: 1.3;
letter-spacing: -0.01em;
} }
// 2nd level headline // 2nd level headline
h2 { h2 {
margin: px2rem(40px) 0 px2rem(16px); margin: px2rem(40px) 0 px2rem(16px);
font-size: ms(2);
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; font-size: ms(2);
line-height: 1.4; line-height: 1.4;
letter-spacing: -0.01em;
} }
// 3rd level headline // 3rd level headline
h3 { h3 {
margin: px2rem(32px) 0 px2rem(16px); margin: px2rem(32px) 0 px2rem(16px);
font-size: ms(1);
font-weight: 400; font-weight: 400;
letter-spacing: -0.01em; font-size: ms(1);
line-height: 1.5; line-height: 1.5;
letter-spacing: -0.01em;
} }
// 3rd level headline following an 2nd level headline // 3rd level headline following an 2nd level headline
@ -106,8 +106,8 @@ kbd {
// 4th level headline // 4th level headline
h4 { h4 {
margin: px2rem(16px) 0; margin: px2rem(16px) 0;
font-size: ms(0);
font-weight: 700; font-weight: 700;
font-size: ms(0);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
@ -116,8 +116,8 @@ kbd {
h6 { h6 {
margin: px2rem(16px) 0; margin: px2rem(16px) 0;
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700; font-weight: 700;
font-size: ms(-1);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
@ -164,10 +164,10 @@ kbd {
code, code,
pre, pre,
kbd { kbd {
background-color: var(--md-code-bg-color);
color: var(--md-code-fg-color); color: var(--md-code-fg-color);
font-size: 85%; font-size: 85%;
direction: ltr; direction: ltr;
background-color: var(--md-code-bg-color);
// Wrap text and hide scollbars // Wrap text and hide scollbars
@media print { @media print {
@ -181,11 +181,11 @@ kbd {
margin: 0 0.25em * $f; margin: 0 0.25em * $f;
padding: 0.0625em * $f 0; padding: 0.0625em * $f 0;
word-break: break-word;
border-radius: px2rem(2px); border-radius: px2rem(2px);
box-shadow: box-shadow:
+0.25em * $f 0 0 var(--md-code-bg-color), +0.25em * $f 0 0 var(--md-code-bg-color),
-0.25em * $f 0 0 var(--md-code-bg-color); -0.25em * $f 0 0 var(--md-code-bg-color);
word-break: break-word;
box-decoration-break: clone; box-decoration-break: clone;
} }
@ -205,9 +205,9 @@ kbd {
a > code { a > code {
margin: inherit; margin: inherit;
padding: inherit; padding: inherit;
border-radius: initial;
background-color: inherit;
color: inherit; color: inherit;
background-color: inherit;
border-radius: initial;
box-shadow: none; box-shadow: none;
} }
@ -215,8 +215,8 @@ kbd {
pre { pre {
position: relative; position: relative;
margin: 1em 0; margin: 1em 0;
border-radius: px2rem(2px);
line-height: 1.4; line-height: 1.4;
border-radius: px2rem(2px);
// Hack: reduce jitter // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -226,12 +226,12 @@ kbd {
display: block; display: block;
margin: 0; margin: 0;
padding: px2rem(10.5px) px2rem(12px); padding: px2rem(10.5px) px2rem(12px);
background-color: transparent; overflow: auto;
font-size: inherit; font-size: inherit;
word-break: normal;
background-color: transparent;
box-shadow: none; box-shadow: none;
box-decoration-break: slice; box-decoration-break: slice;
overflow: auto;
word-break: normal;
// Override native scrollbar styles // Override native scrollbar styles
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -272,34 +272,34 @@ kbd {
display: inline-block; display: inline-block;
padding: 0 0.5em * $f; padding: 0 0.5em * $f;
border-radius: px2rem(2px);
font-size: 0.75em; font-size: 0.75em;
line-height: 1.5; line-height: 1.5;
vertical-align: text-top;
word-break: break-word;
border-radius: px2rem(2px);
box-shadow: box-shadow:
0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter), 0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter),
0 px2rem(2px) 0 var(--md-default-fg-color--lighter), 0 px2rem(2px) 0 var(--md-default-fg-color--lighter),
inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color); inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color);
word-break: break-word;
vertical-align: text-top;
} }
// Text highlighting marker // Text highlighting marker
mark { mark {
margin: 0 0.25em; margin: 0 0.25em;
padding: 0.0625em 0; padding: 0.0625em 0;
border-radius: px2rem(2px); word-break: break-word;
background-color: transparentize($clr-yellow-500, 0.5); background-color: transparentize($clr-yellow-500, 0.5);
border-radius: px2rem(2px);
box-shadow: box-shadow:
+0.25em 0 0 transparentize($clr-yellow-500, 0.5), +0.25em 0 0 transparentize($clr-yellow-500, 0.5),
-0.25em 0 0 transparentize($clr-yellow-500, 0.5); -0.25em 0 0 transparentize($clr-yellow-500, 0.5);
word-break: break-word;
box-decoration-break: clone; box-decoration-break: clone;
} }
// Abbreviations // Abbreviations
abbr { abbr {
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
text-decoration: none; text-decoration: none;
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
cursor: help; cursor: help;
} }
@ -323,8 +323,8 @@ kbd {
// Blockquotes, possibly nested // Blockquotes, possibly nested
blockquote { blockquote {
padding-left: px2rem(12px); padding-left: px2rem(12px);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -420,13 +420,13 @@ kbd {
table:not([class]) { table:not([class]) {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
border-radius: px2rem(2px); overflow: auto;
background: var(--md-default-bg-color);
font-size: ms(-1); font-size: ms(-1);
background: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow: box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1); 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Due to margin collapse because of the necessary inline-block hack, we // Due to margin collapse because of the necessary inline-block hack, we
@ -451,16 +451,16 @@ kbd {
th { th {
min-width: px2rem(100px); min-width: px2rem(100px);
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
background-color: var(--md-default-fg-color--light);
color: var(--md-default-bg-color); color: var(--md-default-bg-color);
vertical-align: top; vertical-align: top;
background-color: var(--md-default-fg-color--light);
} }
// Table cells // Table cells
td { td {
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
vertical-align: top; vertical-align: top;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
} }
// Table rows // Table rows

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

@ -31,13 +31,13 @@
.admonition { .admonition {
margin: 1.5625em 0; margin: 1.5625em 0;
padding: 0 px2rem(12px); padding: 0 px2rem(12px);
overflow: auto;
font-size: ms(-1);
border-left: px2rem(4px) solid $clr-blue-a200; border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: px2rem(2px); border-radius: px2rem(2px);
font-size: ms(-1);
box-shadow: box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1); 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
overflow: auto;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -104,8 +104,8 @@
.admonition-title { .admonition-title {
margin: 0 px2rem(-12px); margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px); padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700; font-weight: 700;
background-color: transparentize($clr-blue-a200, 0.9);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {

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

@ -251,9 +251,9 @@ $codehilite-whitespace: transparent;
// Reset spacings // Reset spacings
pre { pre {
background-color: transparent;
color: inherit; color: inherit;
text-align: right; text-align: right;
background-color: transparent;
} }
} }

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

@ -106,26 +106,26 @@
&::before { &::before {
display: inline; display: inline;
margin: 0 0.2em; margin: 0 0.2em;
border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
font-size: 1.25em; font-size: 1.25em;
content: "";
vertical-align: px2rem(-5px); vertical-align: px2rem(-5px);
border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
content: "";
} }
} }
// Footnote back reference // Footnote back reference
.footnote-backref { .footnote-backref {
display: inline-block; display: inline-block;
color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon
font-size: 0;
vertical-align: text-bottom;
transform: translateX(px2rem(5px)); transform: translateX(px2rem(5px));
opacity: 0;
transition: transition:
transform 250ms 250ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 250ms; opacity 125ms 250ms;
color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon
font-size: 0;
opacity: 0;
vertical-align: text-bottom;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {

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

@ -32,15 +32,15 @@
display: inline-block; display: inline-block;
margin-left: px2rem(10px); margin-left: px2rem(10px);
transform: translate(0, px2rem(5px)); transform: translate(0, px2rem(5px));
// 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;
opacity: 0;
transition: transition:
transform 250ms 250ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 250ms, opacity 125ms 250ms,
visibility 0ms 500ms; 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;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
@ -64,13 +64,13 @@
:target .headerlink, :target .headerlink,
.headerlink:focus { .headerlink:focus {
transform: translate(0, 0); transform: translate(0, 0);
visibility: visible;
opacity: 1;
transition: transition:
transform 250ms 250ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 250ms, opacity 125ms 250ms,
visibility 0ms; visibility 0ms;
opacity: 1;
visibility: visible;
} }
// Active or targeted permalink // Active or targeted permalink

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

@ -33,14 +33,14 @@
// Inline line numbers // Inline line numbers
[data-linenos] { [data-linenos] {
&::before { &::before {
display: inline-block;
position: sticky; position: sticky;
left: px2rem(-12px); left: px2rem(-12px);
display: inline-block;
margin-right: px2rem(12px); margin-right: px2rem(12px);
margin-left: px2rem(-12px); margin-left: px2rem(-12px);
padding-left: px2rem(12px); padding-left: px2rem(12px);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--lighter); color: var(--md-default-fg-color--lighter);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
content: attr(data-linenos); content: attr(data-linenos);
user-select: none; user-select: none;

14
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -43,8 +43,8 @@
// Tabbed code block container // Tabbed code block container
.tabbed-set { .tabbed-set {
display: flex;
position: relative; position: relative;
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0; margin: 1em 0;
border: px2rem(1px) solid var(--md-default-fg-color--lightest); border: px2rem(1px) solid var(--md-default-fg-color--lightest);
@ -56,8 +56,8 @@
// Active tab label // Active tab label
&:checked + label { &:checked + label {
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color); color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
// Show code tab content // Show code tab content
& + .tabbed-content { & + .tabbed-content {
@ -96,14 +96,14 @@
width: auto; width: auto;
padding: px2rem(12px); padding: px2rem(12px);
padding-bottom: px2rem(10px); padding-bottom: px2rem(10px);
color: var(--md-default-fg-color--light);
font-weight: 700;
font-size: ms(-1);
border-bottom: px2rem(2px) solid transparent;
cursor: pointer;
transition: transition:
color 125ms, color 125ms,
border 250ms; border 250ms;
border-bottom: px2rem(2px) solid transparent;
color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700;
cursor: pointer;
// Hovered tab label // Hovered tab label
html &:hover { html &:hover {

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

@ -76,8 +76,8 @@
// Hide original checkbox behind icon // Hide original checkbox behind icon
[type="checkbox"] { [type="checkbox"] {
opacity: 0;
z-index: -1; z-index: -1;
opacity: 0;
} }
} }
} }

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

@ -36,7 +36,11 @@ $md-toggle__drawer--checked:
// based on relative ems (rems) // based on relative ems (rems)
html { html {
height: 100%; height: 100%;
background-color: var(--md-default-bg-color); // 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
// currently impacts the table of contents component between 1220 and 1234px
// and is to current knowledge not fixable.
overflow-x: hidden;
// Hack: normally, we would set the base font-size to 62.5%, so we can base // 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 // 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 // size of 12 if the system language is set to Chinese. For this reason we
@ -44,11 +48,7 @@ html {
// //
// See https://github.com/squidfunk/mkdocs-material/issues/911 // See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%; font-size: 125%;
// Hack: some browsers on some operating systems don't account for scroll background-color: var(--md-default-bg-color);
// 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
// and is to current knowledge not fixable.
overflow-x: hidden;
// [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) {
@ -63,8 +63,8 @@ html {
// Stretch body to container and leave room for footer // Stretch body to container and leave room for footer
body { body {
display: flex;
position: relative; position: relative;
display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
@ -122,9 +122,9 @@ hr {
// Apply ellipsis in case of overflowing text // Apply ellipsis in case of overflowing text
.md-ellipsis { .md-ellipsis {
display: block; display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -140,15 +140,15 @@ hr {
.md-overlay { .md-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 3;
width: 0; width: 0;
height: 0; height: 0;
background-color: var(--md-default-fg-color--light);
opacity: 0;
transition: transition:
width 0ms 250ms, width 0ms 250ms,
height 0ms 250ms, height 0ms 250ms,
opacity 250ms; opacity 250ms;
background-color: var(--md-default-fg-color--light);
opacity: 0;
z-index: 3;
// [tablet -]: Trigger overlay // [tablet -]: Trigger overlay
@include break-to-device(tablet) { @include break-to-device(tablet) {
@ -157,11 +157,11 @@ hr {
#{$md-toggle__drawer--checked} & { #{$md-toggle__drawer--checked} & {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 1;
transition: transition:
width 0ms, width 0ms,
height 0ms, height 0ms,
opacity 250ms; opacity 250ms;
opacity: 1;
} }
} }
} }
@ -175,21 +175,21 @@ hr {
position: fixed; position: fixed;
margin: px2rem(10px); margin: px2rem(10px);
padding: px2rem(6px) px2rem(10px); padding: px2rem(6px) px2rem(10px);
transform: translateY(px2rem(8px));
border-radius: px2rem(2px);
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color); color: var(--md-default-bg-color);
font-size: ms(-1); font-size: ms(-1);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
transform: translateY(px2rem(8px));
opacity: 0; opacity: 0;
// Show skip link on focus // Show skip link on focus
&:focus { &:focus {
z-index: 10;
transform: translateY(0); transform: translateY(0);
opacity: 1;
transition: transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 175ms 75ms; opacity 175ms 75ms;
opacity: 1;
z-index: 10;
} }
} }

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

@ -29,15 +29,15 @@
position: absolute; position: absolute;
top: px2rem(8px); top: px2rem(8px);
right: px2rem(8px); right: px2rem(8px);
z-index: 1;
width: px2rem(24px); width: px2rem(24px);
height: px2rem(24px); height: px2rem(24px);
transition: color 250ms;
border-radius: px2rem(2px);
color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--lightest);
cursor: pointer; border-radius: px2rem(2px);
z-index: 1;
// Hack: reduce jitter // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
cursor: pointer;
transition: color 250ms;
// Hide for print // Hide for print
@media print { @media print {

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

@ -75,16 +75,16 @@
// Button next to the title // Button next to the title
&__button { &__button {
float: right;
margin: px2rem(8px) 0; margin: px2rem(8px) 0;
margin-left: px2rem(8px); margin-left: px2rem(8px);
padding: 0; padding: 0;
float: right;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
float: left;
margin-right: px2rem(8px); margin-right: px2rem(8px);
margin-left: initial; margin-left: initial;
float: left;
// Flip icon vertically // Flip icon vertically
svg { svg {

18
src/assets/stylesheets/layout/_dialog.scss
View File

@ -28,24 +28,24 @@
.md-dialog { .md-dialog {
@include z-depth(2); @include z-depth(2);
display: block;
position: fixed; position: fixed;
right: px2rem(16px); right: px2rem(16px);
bottom: px2rem(16px); bottom: px2rem(16px);
left: initial; left: initial;
z-index: 2;
display: block;
min-width: px2rem(222px); min-width: px2rem(222px);
padding: px2rem(8px) px2rem(12px); padding: px2rem(8px) px2rem(12px);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
background: var(--md-default-fg-color);
border: none;
border-radius: px2rem(2px);
transform: translateY(100%); transform: translateY(100%);
opacity: 0;
transition: transition:
transform 0ms 400ms, transform 0ms 400ms,
opacity 400ms; opacity 400ms;
border: none;
border-radius: px2rem(2px);
background: var(--md-default-fg-color);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
opacity: 0;
z-index: 2;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -56,10 +56,10 @@
// Show open dialog // Show open dialog
&[data-md-state="open"] { &[data-md-state="open"] {
transform: translateY(0); transform: translateY(0);
opacity: 1;
transition: transition:
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1), transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
opacity 400ms; opacity 400ms;
opacity: 1;
} }
// Hide for print // Hide for print

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

@ -26,8 +26,8 @@
// Application footer // Application footer
.md-footer { .md-footer {
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color); color: var(--md-default-bg-color);
background-color: var(--md-default-fg-color);
// Hide for print // Hide for print
@media print { @media print {
@ -64,8 +64,8 @@
// Link to previous page // Link to previous page
&--prev { &--prev {
width: 25%;
float: left; float: left;
width: 25%;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -89,8 +89,8 @@
// Link to next page // Link to next page
&--next { &--next {
width: 75%;
float: right; float: right;
width: 75%;
text-align: right; text-align: right;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -165,8 +165,8 @@
// [tablet portrait +]: Show next to social media links // [tablet portrait +]: Show next to social media links
@include break-from-device(tablet portrait) { @include break-from-device(tablet portrait) {
max-width: 75%;
float: left; float: left;
max-width: 75%;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -187,8 +187,8 @@
// [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: px2rem(12px) 0;
float: right; float: right;
padding: px2rem(12px) 0;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -201,8 +201,8 @@
display: inline-block; display: inline-block;
width: px2rem(32px); width: px2rem(32px);
height: px2rem(32px); height: px2rem(32px);
transition: color 250ms;
text-align: center; text-align: center;
transition: color 250ms;
// Adjust line-height to match height for correct alignment // Adjust line-height to match height for correct alignment
&::before { &::before {

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

@ -30,34 +30,34 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 2;
height: px2rem(48px); height: px2rem(48px);
transition:
background-color 250ms,
color 250ms;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
// Hack: reduce jitter by adding a transparent box shadow of the same size // Hack: reduce jitter by adding a transparent box shadow of the same size
// so the size of the layer doesn't change during animation // so the size of the layer doesn't change during animation
box-shadow: box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0), 0 0 px2rem(4px) rgba(0, 0, 0, 0),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0); 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0);
z-index: 2; transition:
background-color 250ms,
color 250ms;
// Always hide shadow, in case JavaScript is not available // Always hide shadow, in case JavaScript is not available
.no-js & { .no-js & {
transition: none;
box-shadow: none; box-shadow: none;
transition: none;
} }
// Show and animate shadow // Show and animate shadow
&[data-md-state="shadow"] { &[data-md-state="shadow"] {
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
transition: transition:
background-color 250ms, background-color 250ms,
color 250ms, color 250ms,
box-shadow 250ms; box-shadow 250ms;
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
} }
// Hide for print // Hide for print
@ -74,11 +74,11 @@
// Icon buttons // Icon buttons
&__button { &__button {
position: relative; position: relative;
z-index: 1;
margin: px2rem(4px); margin: px2rem(4px);
padding: px2rem(8px); padding: px2rem(8px);
transition: opacity 250ms;
cursor: pointer; cursor: pointer;
z-index: 1; transition: opacity 250ms;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -145,27 +145,27 @@
// Header topics // Header topics
&__topic { &__topic {
display: block;
position: absolute; position: absolute;
display: block;
width: 100%; width: 100%;
padding: 0 px2rem(20px); padding: 0 px2rem(20px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Hack: reduce jitter
backface-visibility: hidden;
transition: transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms; opacity 150ms;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// Hack: reduce jitter
backface-visibility: hidden;
// Page title // Page title
& + & { & + & {
z-index: -1;
transform: translateX(px2rem(25px)); transform: translateX(px2rem(25px));
opacity: 0;
transition: transition:
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 150ms; opacity 150ms;
opacity: 0;
z-index: -1;
pointer-events: none; pointer-events: none;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -193,12 +193,12 @@
// Show page title // Show page title
&[data-md-state="active"] .md-header-nav__topic { &[data-md-state="active"] .md-header-nav__topic {
z-index: -1;
transform: translateX(px2rem(-25px)); transform: translateX(px2rem(-25px));
opacity: 0;
transition: transition:
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 150ms; opacity 150ms;
opacity: 0;
z-index: -1;
pointer-events: none; pointer-events: none;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -208,12 +208,12 @@
// Page title // Page title
& + .md-header-nav__topic { & + .md-header-nav__topic {
z-index: 0;
transform: translateX(0); transform: translateX(0);
opacity: 1;
transition: transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms; opacity 150ms;
opacity: 1;
z-index: 0;
pointer-events: initial; pointer-events: initial;
} }
} }

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

@ -26,11 +26,11 @@
// Hero teaser // Hero teaser
.md-hero { .md-hero {
transition: background 250ms; overflow: hidden;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
font-size: ms(1); font-size: ms(1);
overflow: hidden; background-color: var(--md-primary-fg-color);
transition: background 250ms;
// Inner wrapper // Inner wrapper
&__inner { &__inner {
@ -49,12 +49,12 @@
// Fade-out tabs background upon scrolling // Fade-out tabs background upon scrolling
[data-md-state="hidden"] & { [data-md-state="hidden"] & {
pointer-events: none;
transform: translateY(px2rem(12.5px)); transform: translateY(px2rem(12.5px));
opacity: 0;
transition: transition:
transform 0ms 400ms, transform 0ms 400ms,
opacity 100ms 0ms; opacity 100ms 0ms;
opacity: 0; pointer-events: none;
} }
// Adjust bottom spacing if there are no tabs // Adjust bottom spacing if there are no tabs

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

@ -33,9 +33,9 @@
&__title { &__title {
display: block; display: block;
padding: 0 px2rem(12px); padding: 0 px2rem(12px);
overflow: hidden;
font-weight: 700; font-weight: 700;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
// Hide buttons by default // Hide buttons by default
.md-nav__button { .md-nav__button {
@ -103,10 +103,10 @@
&__link { &__link {
display: block; display: block;
margin-top: 0.625em; margin-top: 0.625em;
transition: color 125ms; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
overflow: hidden; transition: color 125ms;
scroll-snap-align: start; scroll-snap-align: start;
// Hide link to table of contents by default - this will only match the // Hide link to table of contents by default - this will only match the
@ -154,14 +154,14 @@
// Stretch primary navigation to drawer // Stretch primary navigation to drawer
&--primary, &--primary,
&--primary .md-nav { &--primary .md-nav {
display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 1;
display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
z-index: 1;
} }
// Adjust styles for primary navigation // Adjust styles for primary navigation
@ -179,19 +179,19 @@
position: relative; position: relative;
height: px2rem(112px); height: px2rem(112px);
padding: px2rem(60px) px2rem(16px) px2rem(4px); padding: px2rem(60px) px2rem(16px) px2rem(4px);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
font-weight: 400; font-weight: 400;
line-height: px2rem(48px); line-height: px2rem(48px);
white-space: nowrap; white-space: nowrap;
background-color: var(--md-default-fg-color--lightest);
cursor: pointer; cursor: pointer;
// Icon // Icon
.md-nav__icon { .md-nav__icon {
display: block;
position: absolute; position: absolute;
top: px2rem(8px); top: px2rem(8px);
left: px2rem(8px); left: px2rem(8px);
display: block;
width: px2rem(24px); width: px2rem(24px);
height: px2rem(24px); height: px2rem(24px);
margin: px2rem(4px); margin: px2rem(4px);
@ -205,10 +205,10 @@
// Main lists // Main lists
~ .md-nav__list { ~ .md-nav__list {
overflow-y: auto;
background-color: var(--md-default-bg-color); background-color: var(--md-default-bg-color);
box-shadow: box-shadow:
inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto;
// Hack: reduce jitter // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
@ -222,15 +222,15 @@
// Site title in main navigation // Site title in main navigation
&[for="__drawer"] { &[for="__drawer"] {
position: relative; position: relative;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
// Site logo // Site logo
.md-nav__button { .md-nav__button {
display: block;
position: absolute; position: absolute;
top: px2rem(4px); top: px2rem(4px);
left: px2rem(4px); left: px2rem(4px);
display: block;
margin: px2rem(4px); margin: px2rem(4px);
padding: px2rem(8px); padding: px2rem(8px);
font-size: px2rem(48px); font-size: px2rem(48px);
@ -380,10 +380,10 @@
.md-nav__toggle ~ & { .md-nav__toggle ~ & {
display: flex; display: flex;
transform: translateX(100%); transform: translateX(100%);
opacity: 0;
transition: transition:
transform 250ms cubic-bezier(0.8, 0, 0.6, 1), transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
opacity 125ms 50ms; opacity 125ms 50ms;
opacity: 0;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -394,10 +394,10 @@
// Expand nested navigation, if toggle is checked // Expand nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & { .md-nav__toggle:checked ~ & {
transform: translateX(0); transform: translateX(0);
opacity: 1;
transition: transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 125ms 125ms; opacity 125ms 125ms;
opacity: 1;
} }
} }
@ -431,8 +431,8 @@
&__source { &__source {
display: block; display: block;
padding: 0 px2rem(4px); padding: 0 px2rem(4px);
background-color: var(--md-primary-fg-color--dark);
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color--dark);
} }
} }
@ -489,8 +489,8 @@
// Icon // Icon
&__icon { &__icon {
height: px2rem(18px);
float: right; float: right;
height: px2rem(18px);
transition: transform 250ms; transition: transform 250ms;
// Inline icon and adjust to match font size // Inline icon and adjust to match font size

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

@ -48,8 +48,8 @@ $md-toggle__search--checked:
// Search modal overlay // Search modal overlay
&__overlay { &__overlay {
opacity: 0;
z-index: 1; z-index: 1;
opacity: 0;
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
@ -58,13 +58,13 @@ $md-toggle__search--checked:
left: px2rem(-44px); left: px2rem(-44px);
width: px2rem(40px); width: px2rem(40px);
height: px2rem(40px); height: px2rem(40px);
overflow: hidden;
background-color: var(--md-default-bg-color);
border-radius: px2rem(20px);
transform-origin: center; transform-origin: center;
transition: transition:
transform 300ms 100ms, transform 300ms 100ms,
opacity 200ms 200ms; opacity 200ms 200ms;
border-radius: px2rem(20px);
background-color: var(--md-default-bg-color);
overflow: hidden;
pointer-events: none; pointer-events: none;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -75,10 +75,10 @@ $md-toggle__search--checked:
// Expanded overlay // Expanded overlay
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
opacity: 1;
transition: transition:
transform 400ms, transform 400ms,
opacity 100ms; opacity 100ms;
opacity: 1;
} }
} }
@ -108,12 +108,12 @@ $md-toggle__search--checked:
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
background-color: var(--md-default-fg-color--light);
cursor: pointer;
transition: transition:
width 0ms 250ms, width 0ms 250ms,
height 0ms 250ms, height 0ms 250ms,
opacity 250ms; opacity 250ms;
background-color: var(--md-default-fg-color--light);
cursor: pointer;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -125,11 +125,11 @@ $md-toggle__search--checked:
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 1;
transition: transition:
width 0ms, width 0ms,
height 0ms, height 0ms,
opacity 250ms; opacity 250ms;
opacity: 1;
} }
} }
} }
@ -144,27 +144,27 @@ $md-toggle__search--checked:
position: fixed; position: fixed;
top: 0; top: 0;
left: 100%; left: 100%;
z-index: 2;
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translateX(5%); transform: translateX(5%);
opacity: 0;
transition: transition:
right 0ms 300ms, right 0ms 300ms,
left 0ms 300ms, left 0ms 300ms,
transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 150ms 150ms; opacity 150ms 150ms;
opacity: 0;
z-index: 2;
// Active search modal // Active search modal
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
left: 0; left: 0;
transform: translateX(0); transform: translateX(0);
opacity: 1;
transition: transition:
right 0ms 0ms, right 0ms 0ms,
left 0ms 0ms, left 0ms 0ms,
transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1), transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms 150ms; opacity 150ms 150ms;
opacity: 1;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -184,9 +184,9 @@ $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;
float: right;
width: px2rem(234px); width: px2rem(234px);
padding: px2rem(2px) 0; padding: px2rem(2px) 0;
float: right;
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -223,9 +223,9 @@ $md-toggle__search--checked:
// Search input // Search input
&__input { &__input {
position: relative; position: relative;
z-index: 2;
padding: 0 px2rem(44px) 0 px2rem(72px); padding: 0 px2rem(44px) 0 px2rem(72px);
text-overflow: ellipsis; text-overflow: ellipsis;
z-index: 2;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -260,13 +260,13 @@ $md-toggle__search--checked:
width: 100%; width: 100%;
height: px2rem(36px); height: px2rem(36px);
padding-left: px2rem(44px); padding-left: px2rem(44px);
color: inherit;
font-size: ms(0);
background-color: var(--md-default-fg-color--lighter);
border-radius: px2rem(2px);
transition: transition:
background-color 250ms, background-color 250ms,
color 250ms; color 250ms;
border-radius: px2rem(2px);
background-color: var(--md-default-fg-color--lighter);
color: inherit;
font-size: ms(0);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -290,10 +290,10 @@ $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: px2rem(2px) px2rem(2px) 0 0;
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
text-overflow: clip; text-overflow: clip;
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px) px2rem(2px) 0 0;
// Icon and placeholder color in active state // Icon and placeholder color in active state
+ .md-search__icon, + .md-search__icon,
@ -307,13 +307,13 @@ $md-toggle__search--checked:
// Icon // Icon
&__icon { &__icon {
position: absolute; position: absolute;
z-index: 2;
width: px2rem(24px); width: px2rem(24px);
height: px2rem(24px); height: px2rem(24px);
cursor: pointer;
transition: transition:
color 250ms, color 250ms,
opacity 250ms; opacity 250ms;
cursor: pointer;
z-index: 2;
// Hovered icon // Hovered icon
&:hover { &:hover {
@ -368,10 +368,10 @@ $md-toggle__search--checked:
top: px2rem(6px); top: px2rem(6px);
right: px2rem(10px); right: px2rem(10px);
transform: scale(0.75); transform: scale(0.75);
opacity: 0;
transition: transition:
transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1), transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms; opacity 150ms;
opacity: 0;
pointer-events: none; pointer-events: none;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -409,10 +409,10 @@ $md-toggle__search--checked:
// Search output container // Search output container
&__output { &__output {
position: absolute; position: absolute;
width: 100%;
border-radius: 0 0 px2rem(2px) px2rem(2px);
overflow: hidden;
z-index: 1; z-index: 1;
width: 100%;
overflow: hidden;
border-radius: 0 0 px2rem(2px) px2rem(2px);
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
@ -423,8 +423,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) {
top: px2rem(38px); top: px2rem(38px);
transition: opacity 400ms;
opacity: 0; opacity: 0;
transition: opacity 400ms;
// Show search output in active state // Show search output in active state
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
@ -438,9 +438,9 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
height: 100%; height: 100%;
overflow-y: auto;
background-color: var(--md-default-bg-color); background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto;
// Hack: reduce jitter // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
@ -497,10 +497,10 @@ $md-toggle__search--checked:
// Search metadata // Search metadata
&__meta { &__meta {
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
font-size: ms(-1); font-size: ms(-1);
line-height: px2rem(36px); line-height: px2rem(36px);
background-color: var(--md-default-fg-color--lightest);
scroll-snap-align: start; scroll-snap-align: start;
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@ -519,8 +519,8 @@ $md-toggle__search--checked:
&__list { &__list {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
list-style: none; list-style: none;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
} }
// List item // List item
@ -531,9 +531,9 @@ $md-toggle__search--checked:
// Link inside item // Link inside item
&__link { &__link {
display: block; display: block;
transition: background 250ms;
outline: 0;
overflow: hidden; overflow: hidden;
outline: 0;
transition: background 250ms;
scroll-snap-align: start; scroll-snap-align: start;
// Focused or hovered link // Focused or hovered link
@ -576,8 +576,8 @@ $md-toggle__search--checked:
// Title // Title
.md-search-result__title { .md-search-result__title {
margin: px2rem(11px) 0; margin: px2rem(11px) 0;
font-size: ms(0);
font-weight: 400; font-weight: 400;
font-size: ms(0);
line-height: 1.4; line-height: 1.4;
} }
} }
@ -611,8 +611,8 @@ $md-toggle__search--checked:
// Title // Title
&__title { &__title {
margin: 0.5em 0; margin: 0.5em 0;
font-size: ms(-1);
font-weight: 700; font-weight: 700;
font-size: ms(-1);
line-height: 1.4; line-height: 1.4;
} }
@ -623,11 +623,11 @@ $md-toggle__search--checked:
display: -webkit-box; display: -webkit-box;
max-height: px2rem(33px); max-height: px2rem(33px);
margin: 0.5em 0; margin: 0.5em 0;
overflow: hidden;
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);
font-size: ms(-1); font-size: ms(-1);
line-height: 1.4; line-height: 1.4;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -648,8 +648,8 @@ $md-toggle__search--checked:
// Search term highlighting // Search term highlighting
em { em {
font-style: normal;
font-weight: 700; font-weight: 700;
font-style: normal;
text-decoration: underline; text-decoration: underline;
} }
} }

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

@ -58,14 +58,14 @@ $md-toggle__drawer--checked:
position: fixed; position: fixed;
top: 0; top: 0;
left: px2rem(-242px); left: px2rem(-242px);
z-index: 3;
width: px2rem(242px); width: px2rem(242px);
height: 100%; height: 100%;
background-color: var(--md-default-bg-color);
transform: translateX(0); transform: translateX(0);
transition: transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms; box-shadow 250ms;
background-color: var(--md-default-bg-color);
z-index: 3;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {

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

@ -59,12 +59,12 @@
// Source container // Source container
.md-source { .md-source {
display: block; display: block;
transition: opacity 250ms;
font-size: px2rem(13px); font-size: px2rem(13px);
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
// Hack: reduce jitter // Hack: reduce jitter
backface-visibility: hidden; backface-visibility: hidden;
transition: opacity 250ms;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -116,9 +116,9 @@
display: inline-block; display: inline-block;
max-width: calc(100% - #{px2rem(24px)}); max-width: calc(100% - #{px2rem(24px)});
margin-left: px2rem(12px); margin-left: px2rem(12px);
overflow: hidden;
font-weight: 700; font-weight: 700;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle; vertical-align: middle;
} }
@ -126,11 +126,11 @@
&__facts { &__facts {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: px2rem(11px); overflow: hidden;
font-weight: 700; font-weight: 700;
font-size: px2rem(11px);
list-style-type: none; list-style-type: none;
opacity: 0.75; opacity: 0.75;
overflow: hidden;
// Show after the data was loaded // Show after the data was loaded
[data-md-state="done"] & { [data-md-state="done"] & {

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

@ -27,10 +27,10 @@
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 250ms;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
overflow: auto; overflow: auto;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
transition: background 250ms;
// Omit transitions, in case JavaScript is not available // Omit transitions, in case JavaScript is not available
.no-js & { .no-js & {
@ -52,8 +52,8 @@
margin: 0; margin: 0;
margin-left: px2rem(4px); margin-left: px2rem(4px);
padding: 0; padding: 0;
list-style: none;
white-space: nowrap; white-space: nowrap;
list-style: none;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -75,11 +75,11 @@
&__link { &__link {
display: block; display: block;
margin-top: px2rem(16px); margin-top: px2rem(16px);
font-size: px2rem(14px);
opacity: 0.7;
transition: transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms; opacity 250ms;
font-size: px2rem(14px);
opacity: 0.7;
// Omit transitions, in case JavaScript is not available // Omit transitions, in case JavaScript is not available
.no-js & { .no-js & {
@ -109,11 +109,11 @@
// while scrolling down, while scrolling up seems to be okay // while scrolling down, while scrolling up seems to be okay
.md-tabs__link { .md-tabs__link {
transform: translateY(50%); transform: translateY(50%);
opacity: 0;
transition: transition:
color 250ms, color 250ms,
transform 0ms 400ms, transform 0ms 400ms,
opacity 100ms; opacity 100ms;
opacity: 0;
} }
} }

12
src/assets/stylesheets/palette.scss
View File

@ -85,14 +85,14 @@
// Application header (stays always on top) // Application header (stays always on top)
.md-header { .md-header {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
} }
// Hero teaser // Hero teaser
.md-hero { .md-hero {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
// Add a border if there are no tabs // Add a border if there are no tabs
&--expand { &--expand {
@ -105,8 +105,8 @@
// Repository containing source // Repository containing source
.md-nav__source { .md-nav__source {
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
background-color: var(--md-default-fg-color--lightest);
} }
} }
@ -134,8 +134,8 @@
// Site title in main navigation // Site title in main navigation
html & .md-nav--primary .md-nav__title[for="__drawer"] { html & .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
} }
// Hero teaser // Hero teaser
@ -149,9 +149,9 @@
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color); color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
} }
} }
} }