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

Prototypical implementation of instant loading

Browse Source
This commit is contained in:
squidfunk 2019-11-22 18:42:25 +01:00
parent f422c8f90e
commit 0cfd796598
18 changed files with 679 additions and 561 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
material/assets/javascripts/app.js
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/app.js.map
View File

File diff suppressed because one or more lines are too long

422
material/assets/stylesheets/app-palette.css
View File

@ -3,6 +3,7 @@ button[data-md-color-accent] {
width: 6.5rem;
margin-bottom: 0.2rem;
padding: 1.2rem 0.4rem 0.2rem;
-webkit-transition: background-color 0.25s, opacity 0.25s;
transition: background-color 0.25s, opacity 0.25s;
border-radius: 0.1rem;
color: white;
@ -32,18 +33,6 @@ button[data-md-color-primary="red"] {
[data-md-color-primary="red"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="red"] .md-nav__source {
background-color: rgba(190, 66, 64, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="red"] .md-nav--primary .md-nav__title--site {
background-color: #ef5350; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="red"] .md-tabs {
background-color: #ef5350; } }
button[data-md-color-primary="pink"] {
background-color: #e91e63; }
@ -63,18 +52,6 @@ button[data-md-color-primary="pink"] {
[data-md-color-primary="pink"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="pink"] .md-nav__source {
background-color: rgba(185, 24, 79, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="pink"] .md-nav--primary .md-nav__title--site {
background-color: #e91e63; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="pink"] .md-tabs {
background-color: #e91e63; } }
button[data-md-color-primary="purple"] {
background-color: #ab47bc; }
@ -94,18 +71,6 @@ button[data-md-color-primary="purple"] {
[data-md-color-primary="purple"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="purple"] .md-nav__source {
background-color: rgba(136, 57, 150, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="purple"] .md-nav--primary .md-nav__title--site {
background-color: #ab47bc; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="purple"] .md-tabs {
background-color: #ab47bc; } }
button[data-md-color-primary="deep-purple"] {
background-color: #7e57c2; }
@ -125,18 +90,6 @@ button[data-md-color-primary="deep-purple"] {
[data-md-color-primary="deep-purple"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="deep-purple"] .md-nav__source {
background-color: rgba(100, 69, 154, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="deep-purple"] .md-nav--primary .md-nav__title--site {
background-color: #7e57c2; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="deep-purple"] .md-tabs {
background-color: #7e57c2; } }
button[data-md-color-primary="indigo"] {
background-color: #3f51b5; }
@ -156,18 +109,6 @@ button[data-md-color-primary="indigo"] {
[data-md-color-primary="indigo"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="indigo"] .md-nav__source {
background-color: rgba(50, 64, 144, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="indigo"] .md-nav--primary .md-nav__title--site {
background-color: #3f51b5; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="indigo"] .md-tabs {
background-color: #3f51b5; } }
button[data-md-color-primary="blue"] {
background-color: #2196f3; }
@ -187,18 +128,6 @@ button[data-md-color-primary="blue"] {
[data-md-color-primary="blue"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="blue"] .md-nav__source {
background-color: rgba(26, 119, 193, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="blue"] .md-nav--primary .md-nav__title--site {
background-color: #2196f3; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="blue"] .md-tabs {
background-color: #2196f3; } }
button[data-md-color-primary="light-blue"] {
background-color: #03a9f4; }
@ -218,18 +147,6 @@ button[data-md-color-primary="light-blue"] {
[data-md-color-primary="light-blue"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="light-blue"] .md-nav__source {
background-color: rgba(2, 134, 194, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="light-blue"] .md-nav--primary .md-nav__title--site {
background-color: #03a9f4; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="light-blue"] .md-tabs {
background-color: #03a9f4; } }
button[data-md-color-primary="cyan"] {
background-color: #00bcd4; }
@ -249,18 +166,6 @@ button[data-md-color-primary="cyan"] {
[data-md-color-primary="cyan"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="cyan"] .md-nav__source {
background-color: rgba(0, 150, 169, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="cyan"] .md-nav--primary .md-nav__title--site {
background-color: #00bcd4; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="cyan"] .md-tabs {
background-color: #00bcd4; } }
button[data-md-color-primary="teal"] {
background-color: #009688; }
@ -280,18 +185,6 @@ button[data-md-color-primary="teal"] {
[data-md-color-primary="teal"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="teal"] .md-nav__source {
background-color: rgba(0, 119, 108, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="teal"] .md-nav--primary .md-nav__title--site {
background-color: #009688; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="teal"] .md-tabs {
background-color: #009688; } }
button[data-md-color-primary="green"] {
background-color: #4caf50; }
@ -311,18 +204,6 @@ button[data-md-color-primary="green"] {
[data-md-color-primary="green"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="green"] .md-nav__source {
background-color: rgba(60, 139, 64, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="green"] .md-nav--primary .md-nav__title--site {
background-color: #4caf50; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="green"] .md-tabs {
background-color: #4caf50; } }
button[data-md-color-primary="light-green"] {
background-color: #7cb342; }
@ -342,18 +223,6 @@ button[data-md-color-primary="light-green"] {
[data-md-color-primary="light-green"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="light-green"] .md-nav__source {
background-color: rgba(99, 142, 53, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="light-green"] .md-nav--primary .md-nav__title--site {
background-color: #7cb342; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="light-green"] .md-tabs {
background-color: #7cb342; } }
button[data-md-color-primary="lime"] {
background-color: #c0ca33; }
@ -373,18 +242,6 @@ button[data-md-color-primary="lime"] {
[data-md-color-primary="lime"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="lime"] .md-nav__source {
background-color: rgba(153, 161, 41, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="lime"] .md-nav--primary .md-nav__title--site {
background-color: #c0ca33; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="lime"] .md-tabs {
background-color: #c0ca33; } }
button[data-md-color-primary="yellow"] {
background-color: #f9a825; }
@ -404,18 +261,6 @@ button[data-md-color-primary="yellow"] {
[data-md-color-primary="yellow"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="yellow"] .md-nav__source {
background-color: rgba(198, 134, 29, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="yellow"] .md-nav--primary .md-nav__title--site {
background-color: #f9a825; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="yellow"] .md-tabs {
background-color: #f9a825; } }
button[data-md-color-primary="amber"] {
background-color: #ffa000; }
@ -435,18 +280,6 @@ button[data-md-color-primary="amber"] {
[data-md-color-primary="amber"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="amber"] .md-nav__source {
background-color: rgba(203, 127, 0, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="amber"] .md-nav--primary .md-nav__title--site {
background-color: #ffa000; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="amber"] .md-tabs {
background-color: #ffa000; } }
button[data-md-color-primary="orange"] {
background-color: #fb8c00; }
@ -466,18 +299,6 @@ button[data-md-color-primary="orange"] {
[data-md-color-primary="orange"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="orange"] .md-nav__source {
background-color: rgba(200, 111, 0, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="orange"] .md-nav--primary .md-nav__title--site {
background-color: #fb8c00; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="orange"] .md-tabs {
background-color: #fb8c00; } }
button[data-md-color-primary="deep-orange"] {
background-color: #ff7043; }
@ -497,18 +318,6 @@ button[data-md-color-primary="deep-orange"] {
[data-md-color-primary="deep-orange"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="deep-orange"] .md-nav__source {
background-color: rgba(203, 89, 53, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="deep-orange"] .md-nav--primary .md-nav__title--site {
background-color: #ff7043; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="deep-orange"] .md-tabs {
background-color: #ff7043; } }
button[data-md-color-primary="brown"] {
background-color: #795548; }
@ -528,18 +337,6 @@ button[data-md-color-primary="brown"] {
[data-md-color-primary="brown"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="brown"] .md-nav__source {
background-color: rgba(96, 68, 57, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="brown"] .md-nav--primary .md-nav__title--site {
background-color: #795548; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="brown"] .md-tabs {
background-color: #795548; } }
button[data-md-color-primary="grey"] {
background-color: #757575; }
@ -559,18 +356,6 @@ button[data-md-color-primary="grey"] {
[data-md-color-primary="grey"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="grey"] .md-nav__source {
background-color: rgba(93, 93, 93, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="grey"] .md-nav--primary .md-nav__title--site {
background-color: #757575; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="grey"] .md-tabs {
background-color: #757575; } }
button[data-md-color-primary="blue-grey"] {
background-color: #546e7a; }
@ -590,18 +375,6 @@ button[data-md-color-primary="blue-grey"] {
[data-md-color-primary="blue-grey"] .md-nav__item--nested > .md-nav__link {
color: inherit; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="blue-grey"] .md-nav__source {
background-color: rgba(67, 88, 97, 0.9675); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
background-color: #546e7a; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="blue-grey"] .md-tabs {
background-color: #546e7a; } }
button[data-md-color-primary="white"] {
background-color: white;
color: rgba(0, 0, 0, 0.87);
@ -617,30 +390,6 @@ button[data-md-color-primary="white"] {
[data-md-color-primary="white"] .md-hero--expand {
border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07); }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="white"] .md-nav__source {
background-color: rgba(0, 0, 0, 0.07);
color: rgba(0, 0, 0, 0.87); } }
@media only screen and (min-width: 60em) {
[data-md-color-primary="white"] .md-search__input {
background-color: rgba(0, 0, 0, 0.07); }
[data-md-color-primary="white"] .md-search__input::placeholder {
color: rgba(0, 0, 0, 0.54); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="white"] .md-nav--primary .md-nav__title--site {
background-color: white;
color: rgba(0, 0, 0, 0.87); }
[data-md-color-primary="white"] .md-hero {
border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07); } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="white"] .md-tabs {
border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07);
background-color: white;
color: rgba(0, 0, 0, 0.87); } }
button[data-md-color-primary="black"] {
background-color: #000; }
@ -650,22 +399,6 @@ button[data-md-color-primary="black"] {
[data-md-color-primary="black"] .md-hero {
background-color: #000; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="black"] .md-nav__source {
background-color: #404040; } }
@media only screen and (min-width: 60em) {
[data-md-color-primary="black"] .md-search__input {
background-color: rgba(255, 255, 255, 0.3); } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="black"] .md-nav--primary .md-nav__title--site {
background-color: #000; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="black"] .md-tabs {
background-color: #000; } }
button[data-md-color-accent="red"] {
background-color: #ff1744; }
@ -1306,4 +1039,157 @@ button[data-md-color-accent="deep-orange"] {
[data-md-color-accent="deep-orange"] .md-source-file:hover::before {
background-color: #ff6e40; }
@media only screen and (max-width: 59.9375em) {
[data-md-color-primary="red"] .md-nav__source {
background-color: rgba(190, 66, 64, 0.9675); }
[data-md-color-primary="pink"] .md-nav__source {
background-color: rgba(185, 24, 79, 0.9675); }
[data-md-color-primary="purple"] .md-nav__source {
background-color: rgba(136, 57, 150, 0.9675); }
[data-md-color-primary="deep-purple"] .md-nav__source {
background-color: rgba(100, 69, 154, 0.9675); }
[data-md-color-primary="indigo"] .md-nav__source {
background-color: rgba(50, 64, 144, 0.9675); }
[data-md-color-primary="blue"] .md-nav__source {
background-color: rgba(26, 119, 193, 0.9675); }
[data-md-color-primary="light-blue"] .md-nav__source {
background-color: rgba(2, 134, 194, 0.9675); }
[data-md-color-primary="cyan"] .md-nav__source {
background-color: rgba(0, 150, 169, 0.9675); }
[data-md-color-primary="teal"] .md-nav__source {
background-color: rgba(0, 119, 108, 0.9675); }
[data-md-color-primary="green"] .md-nav__source {
background-color: rgba(60, 139, 64, 0.9675); }
[data-md-color-primary="light-green"] .md-nav__source {
background-color: rgba(99, 142, 53, 0.9675); }
[data-md-color-primary="lime"] .md-nav__source {
background-color: rgba(153, 161, 41, 0.9675); }
[data-md-color-primary="yellow"] .md-nav__source {
background-color: rgba(198, 134, 29, 0.9675); }
[data-md-color-primary="amber"] .md-nav__source {
background-color: rgba(203, 127, 0, 0.9675); }
[data-md-color-primary="orange"] .md-nav__source {
background-color: rgba(200, 111, 0, 0.9675); }
[data-md-color-primary="deep-orange"] .md-nav__source {
background-color: rgba(203, 89, 53, 0.9675); }
[data-md-color-primary="brown"] .md-nav__source {
background-color: rgba(96, 68, 57, 0.9675); }
[data-md-color-primary="grey"] .md-nav__source {
background-color: rgba(93, 93, 93, 0.9675); }
[data-md-color-primary="blue-grey"] .md-nav__source {
background-color: rgba(67, 88, 97, 0.9675); }
[data-md-color-primary="white"] .md-nav__source {
background-color: rgba(0, 0, 0, 0.07);
color: rgba(0, 0, 0, 0.87); }
[data-md-color-primary="black"] .md-nav__source {
background-color: #404040; } }
@media only screen and (max-width: 76.1875em) {
html [data-md-color-primary="red"] .md-nav--primary .md-nav__title--site {
background-color: #ef5350; }
html [data-md-color-primary="pink"] .md-nav--primary .md-nav__title--site {
background-color: #e91e63; }
html [data-md-color-primary="purple"] .md-nav--primary .md-nav__title--site {
background-color: #ab47bc; }
html [data-md-color-primary="deep-purple"] .md-nav--primary .md-nav__title--site {
background-color: #7e57c2; }
html [data-md-color-primary="indigo"] .md-nav--primary .md-nav__title--site {
background-color: #3f51b5; }
html [data-md-color-primary="blue"] .md-nav--primary .md-nav__title--site {
background-color: #2196f3; }
html [data-md-color-primary="light-blue"] .md-nav--primary .md-nav__title--site {
background-color: #03a9f4; }
html [data-md-color-primary="cyan"] .md-nav--primary .md-nav__title--site {
background-color: #00bcd4; }
html [data-md-color-primary="teal"] .md-nav--primary .md-nav__title--site {
background-color: #009688; }
html [data-md-color-primary="green"] .md-nav--primary .md-nav__title--site {
background-color: #4caf50; }
html [data-md-color-primary="light-green"] .md-nav--primary .md-nav__title--site {
background-color: #7cb342; }
html [data-md-color-primary="lime"] .md-nav--primary .md-nav__title--site {
background-color: #c0ca33; }
html [data-md-color-primary="yellow"] .md-nav--primary .md-nav__title--site {
background-color: #f9a825; }
html [data-md-color-primary="amber"] .md-nav--primary .md-nav__title--site {
background-color: #ffa000; }
html [data-md-color-primary="orange"] .md-nav--primary .md-nav__title--site {
background-color: #fb8c00; }
html [data-md-color-primary="deep-orange"] .md-nav--primary .md-nav__title--site {
background-color: #ff7043; }
html [data-md-color-primary="brown"] .md-nav--primary .md-nav__title--site {
background-color: #795548; }
html [data-md-color-primary="grey"] .md-nav--primary .md-nav__title--site {
background-color: #757575; }
html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
background-color: #546e7a; }
html [data-md-color-primary="white"] .md-nav--primary .md-nav__title--site {
background-color: white;
color: rgba(0, 0, 0, 0.87); }
[data-md-color-primary="white"] .md-hero {
border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07); }
html [data-md-color-primary="black"] .md-nav--primary .md-nav__title--site {
background-color: #000; } }
@media only screen and (min-width: 76.25em) {
[data-md-color-primary="red"] .md-tabs {
background-color: #ef5350; }
[data-md-color-primary="pink"] .md-tabs {
background-color: #e91e63; }
[data-md-color-primary="purple"] .md-tabs {
background-color: #ab47bc; }
[data-md-color-primary="deep-purple"] .md-tabs {
background-color: #7e57c2; }
[data-md-color-primary="indigo"] .md-tabs {
background-color: #3f51b5; }
[data-md-color-primary="blue"] .md-tabs {
background-color: #2196f3; }
[data-md-color-primary="light-blue"] .md-tabs {
background-color: #03a9f4; }
[data-md-color-primary="cyan"] .md-tabs {
background-color: #00bcd4; }
[data-md-color-primary="teal"] .md-tabs {
background-color: #009688; }
[data-md-color-primary="green"] .md-tabs {
background-color: #4caf50; }
[data-md-color-primary="light-green"] .md-tabs {
background-color: #7cb342; }
[data-md-color-primary="lime"] .md-tabs {
background-color: #c0ca33; }
[data-md-color-primary="yellow"] .md-tabs {
background-color: #f9a825; }
[data-md-color-primary="amber"] .md-tabs {
background-color: #ffa000; }
[data-md-color-primary="orange"] .md-tabs {
background-color: #fb8c00; }
[data-md-color-primary="deep-orange"] .md-tabs {
background-color: #ff7043; }
[data-md-color-primary="brown"] .md-tabs {
background-color: #795548; }
[data-md-color-primary="grey"] .md-tabs {
background-color: #757575; }
[data-md-color-primary="blue-grey"] .md-tabs {
background-color: #546e7a; }
[data-md-color-primary="white"] .md-tabs {
border-bottom: 0.05rem solid rgba(0, 0, 0, 0.07);
background-color: white;
color: rgba(0, 0, 0, 0.87); }
[data-md-color-primary="black"] .md-tabs {
background-color: #000; } }
@media only screen and (min-width: 60em) {
[data-md-color-primary="white"] .md-search__input {
background-color: rgba(0, 0, 0, 0.07); }
[data-md-color-primary="white"] .md-search__input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.54); }
[data-md-color-primary="white"] .md-search__input::-moz-placeholder {
color: rgba(0, 0, 0, 0.54); }
[data-md-color-primary="white"] .md-search__input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.54); }
[data-md-color-primary="white"] .md-search__input::-ms-input-placeholder {
color: rgba(0, 0, 0, 0.54); }
[data-md-color-primary="white"] .md-search__input::placeholder {
color: rgba(0, 0, 0, 0.54); }
[data-md-color-primary="black"] .md-search__input {
background-color: rgba(255, 255, 255, 0.3); } }
/*# sourceMappingURL=app-palette.css.map */

26
material/assets/stylesheets/app-palette.css.map
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

93
material/assets/stylesheets/app.css
View File

@ -614,8 +614,8 @@ hr {
white-space: nowrap;
overflow: hidden; }
.md-header-nav__topic + .md-header-nav__topic {
-webkit-transform: translateX(1.25rem);
transform: translateX(1.25rem);
-webkit-transform: translateY(1.25rem);
transform: translateY(1.25rem);
-webkit-transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1);
transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1);
transition: transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), opacity 0.15s;
@ -624,8 +624,8 @@ hr {
z-index: -1;
pointer-events: none; }
[dir="rtl"] .md-header-nav__topic + .md-header-nav__topic {
-webkit-transform: translateX(-1.25rem);
transform: translateX(-1.25rem); }
-webkit-transform: translateY(-1.25rem);
transform: translateY(-1.25rem); }
.no-js .md-header-nav__topic {
position: initial; }
.no-js .md-header-nav__topic + .md-header-nav__topic {
@ -635,8 +635,8 @@ hr {
font-size: 0.9rem;
line-height: 2.4rem; }
.md-header-nav__title[data-md-state="active"] .md-header-nav__topic {
-webkit-transform: translateX(-1.25rem);
transform: translateX(-1.25rem);
-webkit-transform: translateY(-1.25rem);
transform: translateY(-1.25rem);
-webkit-transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1);
transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1);
transition: transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), opacity 0.15s;
@ -645,11 +645,11 @@ hr {
z-index: -1;
pointer-events: none; }
[dir="rtl"] .md-header-nav__title[data-md-state="active"] .md-header-nav__topic {
-webkit-transform: translateX(1.25rem);
transform: translateX(1.25rem); }
-webkit-transform: translateY(1.25rem);
transform: translateY(1.25rem); }
.md-header-nav__title[data-md-state="active"] .md-header-nav__topic + .md-header-nav__topic {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
transition: opacity 0.15s, -webkit-transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s;
@ -1238,7 +1238,6 @@ hr {
.md-typeset .admonition, .md-typeset details {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
position: relative;
margin: 1.5625em 0;
padding: 0 0.6rem;
border-left: 0.2rem solid #448aff;
@ -1264,13 +1263,13 @@ hr {
margin-bottom: 0; }
.md-typeset .admonition > .admonition-title::before, .md-typeset details > .admonition-title::before, .md-typeset .admonition > summary::before, .md-typeset details > summary::before {
position: absolute;
left: 0.6rem;
margin-left: -1.4rem;
color: #448aff;
font-size: 1rem;
content: "\E3C9"; }
[dir="rtl"] .md-typeset .admonition > .admonition-title::before, [dir="rtl"] .md-typeset details > .admonition-title::before, [dir="rtl"] .md-typeset .admonition > summary::before, [dir="rtl"] .md-typeset details > summary::before {
right: 0.6rem;
left: initial; }
margin-right: -1.4rem;
margin-left: initial; }
.md-typeset .admonition.summary, .md-typeset details.summary, .md-typeset .admonition.tldr, .md-typeset details.tldr, .md-typeset .admonition.abstract, .md-typeset details.abstract {
border-left-color: #00b0ff; }
[dir="rtl"] .md-typeset .admonition.summary, [dir="rtl"] .md-typeset details.summary, [dir="rtl"] .md-typeset .admonition.tldr, [dir="rtl"] .md-typeset details.tldr, [dir="rtl"] .md-typeset .admonition.abstract, [dir="rtl"] .md-typeset details.abstract {
@ -1748,13 +1747,13 @@ hr {
.md-typeset h1[id]::before {
display: block;
margin-top: -9px;
padding-top: 9px;
margin-top: -8px;
padding-top: 8px;
content: ""; }
.md-typeset h1[id]:target::before {
margin-top: -3.45rem;
padding-top: 3.45rem; }
margin-top: -3.4rem;
padding-top: 3.4rem; }
.md-typeset h1[id]:hover .headerlink,
.md-typeset h1[id]:target .headerlink,
@ -1792,13 +1791,13 @@ hr {
.md-typeset h3[id]::before {
display: block;
margin-top: -9px;
padding-top: 9px;
margin-top: -8px;
padding-top: 8px;
content: ""; }
.md-typeset h3[id]:target::before {
margin-top: -3.45rem;
padding-top: 3.45rem; }
margin-top: -3.4rem;
padding-top: 3.4rem; }
.md-typeset h3[id]:hover .headerlink,
.md-typeset h3[id]:target .headerlink,
@ -2550,35 +2549,33 @@ hr {
margin-left: 1.2rem; }
.md-header-nav__button.md-icon--menu {
display: none; }
.md-nav[data-md-state="animate"] {
.md-nav {
-webkit-transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); }
.md-nav__toggle ~ .md-nav {
max-height: 0;
overflow: hidden; }
.no-js .md-nav__toggle ~ .md-nav {
.md-nav__toggle ~ .md-nav {
max-height: 0;
overflow: hidden; }
.no-js .md-nav__toggle ~ .md-nav {
display: none; }
.md-nav__toggle:checked ~ .md-nav {
max-height: 100%; }
.md-nav__item--nested > .md-nav > .md-nav__title {
display: none; }
.md-nav__toggle:checked ~ .md-nav, .md-nav[data-md-state="expand"] {
max-height: 100%; }
.no-js .md-nav__toggle:checked ~ .md-nav, .no-js .md-nav[data-md-state="expand"] {
display: block; }
.md-nav__item--nested > .md-nav > .md-nav__title {
display: none; }
.md-nav__item--nested > .md-nav__link::after {
display: inline-block;
-webkit-transform-origin: 0.45em 0.45em;
transform-origin: 0.45em 0.45em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
vertical-align: -0.125em; }
.js .md-nav__item--nested > .md-nav__link::after {
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s; }
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link::after {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.md-nav__item--nested > .md-nav__link::after {
display: inline-block;
-webkit-transform-origin: 0.45em 0.45em;
transform-origin: 0.45em 0.45em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
vertical-align: -0.125em; }
.js .md-nav__item--nested > .md-nav__link::after {
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s; }
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link::after {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.md-search__inner {
margin-right: 1.2rem; }
[dir="rtl"] .md-search__inner {

2
material/assets/stylesheets/app.css.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/app.min.css.map
View File

File diff suppressed because one or more lines are too long

7
material/base.html
View File

@ -83,6 +83,9 @@
{% if config.extra.manifest %}
<link rel="manifest" href="{{ config.extra.manifest | url }}">
{% endif %}
{% if config.extra.social %}
<link rel="stylesheet" href="{{ 'assets/fonts/font-awesome.css' | url }}">
{% endif %}
{% for path in config["extra_css"] %}
<link rel="stylesheet" href="{{ path | url }}">
{% endfor %}
@ -123,7 +126,7 @@
{% block header %}
{% include "partials/header.html" %}
{% endblock %}
<div class="md-container">
<div class="md-container" data-md-component="container">
{% block hero %}
{% if page and page.meta and page.meta.hero %}
{% include "partials/hero.html" with context %}
@ -133,7 +136,7 @@
{% include "partials/tabs.html" %}
{% endif %}
<main class="md-main" role="main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-main__inner md-grid" data-md-component="main">
{% block site_nav %}
{% if nav %}
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">

1
material/partials/social.html
View File

@ -3,7 +3,6 @@
-#}
{% if config.extra.social %}
<div class="md-footer-social">
<link rel="stylesheet" href="{{ 'assets/fonts/font-awesome.css' | url }}">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link fa fa-{{ social.type }}"></a>
{% endfor %}

32
src/assets/javascripts/component/_/index.ts
View File

@ -21,8 +21,15 @@
*/
import { keys } from "ramda"
import { MonoTypeOperatorFunction, Observable, of, pipe } from "rxjs"
import { scan, shareReplay } from "rxjs/operators"
import {
MonoTypeOperatorFunction,
NEVER,
Observable,
OperatorFunction,
of,
pipe
} from "rxjs"
import { scan, shareReplay, switchMap } from "rxjs/operators"
import { getElement } from "../../ui"
@ -137,3 +144,24 @@ export function paintComponentMap(
})
)
}
/**
* Pluck a component from the component map
*
* @template T - Element type
*
* @param name - Component
*
* @return Operator function
*/
export function pluckComponent(
name: Component
): OperatorFunction<ComponentMap, HTMLElement> {
return pipe(
switchMap(map => {
return typeof map[name] !== "undefined"
? of(map[name]!)
: NEVER
})
)
}

480
src/assets/javascripts/index.ts
View File

@ -20,43 +20,67 @@
* IN THE SOFTWARE.
*/
import { difference } from "ramda"
import { findLast } from "ramda"
import {
distinctUntilKeyChanged,
finalize,
NEVER,
animationFrameScheduler,
fromEvent,
merge,
of
} from "rxjs"
import { AjaxRequest, ajax } from "rxjs/ajax"
import {
delay,
filter,
map,
pairwise,
startWith
mapTo,
observeOn,
scan,
shareReplay,
switchMap,
tap
} from "rxjs/operators"
import "./polyfill"
import {
resetAnchor,
resetSidebar,
setAnchorActive,
setAnchorBlur,
setHeaderShadow,
setSidebarHeight,
setSidebarLock,
watchAnchors,
watchContainer,
paintAnchorList,
paintComponentMap,
paintHeaderShadow,
paintSidebar,
pluckComponent,
setNavigationOverflowScrolling,
watchAnchorList,
watchComponentMap,
watchHeader,
watchMain,
watchNavigationIndex,
watchSidebar
} from "./component"
import {
getElement,
getElements,
watchLocation,
watchLocationHash,
watchMedia,
watchViewportOffset,
watchViewportSize
watchViewportSize,
withElement
} from "./ui"
import { toggle } from "./utilities"
// ----------------------------------------------------------------------------
// Disclaimer: this file is currently heavy WIP
// ----------------------------------------------------------------------------
const offset$ = watchViewportOffset()
const size$ = watchViewportSize()
const screen$ = watchMedia("(min-width: 1220px)")
const tablet$ = watchMedia("(min-width: 960px)")
const aboveScreen$ = watchMedia("(min-width: 1220px)")
const belowScreen$ = watchMedia("(max-width: 1219px)")
const aboveTablet$ = watchMedia("(min-width: 960px)")
const belowTablet$ = watchMedia("(max-width: 959px)")
// ----------------------------------------------------------------------------
@ -65,119 +89,343 @@ document.documentElement.classList.remove("no-js")
document.documentElement.classList.add("js")
// ----------------------------------------------------------------------------
// sidebar lock + height
// Observable that resolves with document when loaded
const init$ = fromEvent(document, "DOMContentLoaded")
.pipe(
mapTo(document),
shareReplay({ bufferSize: 1, refCount: true })
)
// Location subject
const location$ = watchLocation()
// Observable that resolves with document on XHR load
const reload$ = location$
.pipe(
switchMap(url => load(url))
)
// Extract and (re-)paint components
const components$ = merge(init$, reload$)
.pipe(
switchMap(watchComponentMap),
paintComponentMap(),
shareReplay({ bufferSize: 1, refCount: true })
)
// ----------------------------------------------------------------------------
const container = getElement("[data-md-component=container]")!
const header = getElement("[data-md-component=header]")!
const container$ = watchContainer(container, header, { size$, offset$ })
const header$ = components$
.pipe(
pluckComponent("header"),
switchMap(watchHeader)
)
// Optimize anchor list candidates
const anchors = getElements<HTMLAnchorElement>("[data-md-component=toc] .md-nav__link")
if (anchors.length)
tablet$
.pipe(
toggle(() => watchAnchors(anchors, header, { offset$ })
.pipe(
startWith({ done: [], next: [] }),
pairwise(),
map(([a, b]) => {
const begin = Math.max(0, Math.min(b.done.length, a.done.length) - 1)
const end = Math.max(b.done.length, a.done.length)
return {
done: b.done.slice(begin, end + 1),
next: difference(b.next, a.next)
}
}),
finalize(() => {
for (const anchor of anchors)
resetAnchor(anchor)
})
)
)
)
.subscribe(({ done, next }) => {
const main$ = components$
.pipe(
pluckComponent("main"),
switchMap(el => watchMain(el, { size$, offset$, header$ })),
shareReplay({ bufferSize: 1, refCount: true})
)
/* Look backward */
for (const [i, [anchor]] of done.entries()) {
setAnchorBlur(anchor, true)
setAnchorActive(anchor, i === done.length - 1)
}
/* Look forward */
for (const [anchor] of next) {
setAnchorBlur(anchor, false)
setAnchorActive(anchor, false)
}
})
// TODO: this should be subscribed to a subject!
// const toggle = getElement<HTMLInputElement>("[data-md-toggle=search]")!
// fromEvent(toggle, "change")
// .subscribe(x2 => {
// console.log("toggle changed", x2)
// })
// const query = getElement("[data-md-component=query]")
// if (typeof query !== "undefined") {
// fromEvent(query, "focus")
// .pipe(
// )
// .subscribe(console.log)
// }
/* Component: header shadow toggle */ // - TODO: put this into a separate component
if (typeof header !== "undefined") {
container$
.pipe(
distinctUntilKeyChanged("active")
)
.subscribe(({ active }) => {
setHeaderShadow(header, active)
})
}
// ----------------------------------------------------------------------------
/* Component: sidebar with navigation */
const nav = getElement("[data-md-component=navigation")
if (typeof nav !== "undefined") {
screen$
.pipe(
toggle(() => watchSidebar(nav, { container$, offset$ })
.pipe(
finalize(() => {
resetSidebar(nav)
})
components$
.pipe(
pluckComponent("navigation"),
switchMap(el => aboveScreen$
.pipe(
toggle(() => watchSidebar(el, { offset$, main$ })
.pipe(
paintSidebar(el)
)
)
)
)
.subscribe(({ height, lock }) => {
setSidebarHeight(nav, height)
setSidebarLock(nav, lock)
})
}
))
)
.subscribe()
/* Component: sidebar with table of contents (missing on 404 page) */
const toc = getElement("[data-md-component=toc")
if (typeof toc !== "undefined") {
tablet$
.pipe(
toggle(() => watchSidebar(toc, { container$, offset$ })
.pipe(
finalize(() => {
resetSidebar(toc)
})
components$
.pipe(
pluckComponent("toc"),
switchMap(el => aboveTablet$
.pipe(
toggle(() => watchSidebar(el, { offset$, main$ })
.pipe(
paintSidebar(el)
)
)
))
)
.subscribe()
/* Component: link blurring for table of contents */
components$
.pipe(
pluckComponent("toc"),
map(el => getElements<HTMLAnchorElement>(".md-nav__link", el)),
switchMap(els => aboveTablet$
.pipe(
toggle(() => watchAnchorList(els, { size$, offset$, header$ })
.pipe(
paintAnchorList(els)
)
)
)
)
.subscribe(({ height, lock }) => {
setSidebarHeight(toc, height)
setSidebarLock(toc, lock)
})
)
.subscribe()
/* Component: header shadow toggle */
components$
.pipe(
pluckComponent("header"),
switchMap(el => main$.pipe(
paintHeaderShadow(el)
))
)
.subscribe()
// ----------------------------------------------------------------------------
// Refactor:
// ----------------------------------------------------------------------------
// Observable that catches all internal links without the necessity of rebinding
// as events are bubbled up through the DOM.
init$
.pipe(
switchMap(({ body }) => fromEvent(body, "click")),
switchMap(ev => {
/* Walk up as long as we're not in a details tag */
let parent = ev.target as Node | undefined
while (parent && !(parent instanceof HTMLAnchorElement))
parent = parent.parentNode // TODO: fix errors...
if (parent) { // this one OR (!) one of
// its parents...
if (!/(:\/\/|^#[^\/]+$)/.test(parent.getAttribute("href")!)) {
ev.preventDefault()
console.log("> ", parent.href)
// Extract URL; push to state, then emit new URL
const href = parent.href
history.pushState({}, "", href) // move this somewhere else!???
return of(href)
}
}
return NEVER
}),
shareReplay({ bufferSize: 1, refCount: true })
)
.subscribe(location$)
// ----------------------------------------------------------------------------
const nav2 = getElement("[data-md-component=navigation]")!
const index$ = watchNavigationIndex(nav2) // TODO: maybe rename into setup!? merge with sidebar?
belowScreen$
.pipe(
toggle(() => index$
.pipe(
switchMap(index => merge(...[...index.keys()]
.map(input => fromEvent(input, "change"))
)
.pipe(
mapTo(index)
)
),
map(index => getElement("ul", index.get(
findLast(input => input.checked, [...index.keys()])!)
)!), // find the TOP MOST! <-- this is the actively displayed on mobile
// this is the paint job...
// dispatch action - TODO: document why this crap is even necessary
scan((prev, next) => {
if (prev)
setNavigationOverflowScrolling(prev, false) // TODO: resetOverflowScrolling ....
return next
}),
delay(250),
tap(next => {
setNavigationOverflowScrolling(next, true) // setNavigationScrollfix
})
)
)
)
.subscribe()
// ----------------------------------------------------------------------------
function isNavigationCollapsible(el: HTMLElement): boolean {
return el.getAttribute("data-md-component") === "collapsible" // TODO: maybe better remove again
}
aboveScreen$
.pipe(
toggle(() => index$
.pipe(
// map(index => )
// filter shit from index...
switchMap(index => [...index.keys()]
.filter(input => isNavigationCollapsible(index.get(input)!))
.map(input => {
const el = index.get(input)!
// this doesnt work...
el.setAttribute("data-md-height", `${el.offsetHeight}`) // TODO: this is a hack
return input
})
.map(input => fromEvent(input, "change")
.pipe(
map(() => {
const el = index.get(input)!
let height = parseInt(el.getAttribute("data-md-height")!, 10)
// always goes from data-md-height... wrong...
if (!input.checked) {
el.style.maxHeight = `${height}px`
/* Set target height */
height = 0
} else {
el.style.maxHeight = "initial" // 100%!?
el.style.transitionDuration = "initial"
/* Retrieve target height */
height = el.offsetHeight
console.log("expand to height")
/* Reset state and set start height */
// el.removeAttribute("data-md-state")
el.style.maxHeight = "0px"
}
/* Force style recalculation */
el.offsetHeight // tslint:disable-line
el.style.transitionDuration = ""
return height
}), // max height is set... just read it.
observeOn(animationFrameScheduler),
tap(height => {
const el = index.get(input)!
// el.setAttribute("data-md-state", "animate")
el.style.maxHeight = `${height}px`
console.log("setting shit...")
el.setAttribute("data-md-height", `${height}`)
}),
delay(250),
tap(() => {
const el = index.get(input)!
console.log("DONE")
// el.removeAttribute("data-md-state")
el.style.maxHeight = ""
})
)
.subscribe() // merge shit and return it...
)
)
)
)
)
.subscribe()
// ----------------------------------------------------------------------------
/* Open details after anchor jump */
const hash$ = watchLocationHash()
hash$
.pipe(
withElement(), // TODO: somehow ugly... not so nice and cool
tap(el => {
let parent = el.parentNode
while (parent && !(parent instanceof HTMLDetailsElement)) // TODO: put this into a FUNCTION!
parent = parent.parentNode
/* If there's a details tag, open it */
if (parent && !parent.open) {
parent.open = true
/* Hack: force reload for repositioning */ // TODO. what happens here!?
const hash = location.hash
location.hash = " "
location.hash = hash // tslint:disable-line
// TODO: setLocationHash() + forceLocationHashChange
}
})
)
.subscribe()
// ----------------------------------------------------------------------------
// setupAnchorToggle?
const drawerToggle = getElement<HTMLInputElement>("[data-md-toggle=drawer]")!
const searchToggle = getElement<HTMLInputElement>("[data-md-toggle=search]")!
/* Listener: close drawer when anchor links are clicked */
hash$
.pipe(
tap(() => setToggle(drawerToggle, false))
)
.subscribe()
/* Listener: open search on focus */
const query = getElement("[data-md-component=query]")!
if (query) {
fromEvent(query, "focus")
.pipe(
tap(() => setToggle(searchToggle, true))
)
.subscribe()
}
/* Listener: focus input after opening search */
fromEvent(searchToggle, "change")
.pipe(
filter(() => searchToggle.checked),
delay(400),
tap(() => query.focus())
)
.subscribe()
// data-md-toggle!
function setToggle(toggle: HTMLInputElement, active: boolean): void {
if (toggle.checked !== active) {
toggle.checked = active
toggle.dispatchEvent(new CustomEvent("change"))
}
}
// ----------------------------------------------------------------------------
export function app(config: any) {
console.log("called app")
// Asynchronously load a document
function load(url: string) {
const options: AjaxRequest = {
responseType: "document",
withCredentials: true
} // TODO: remove favicon from source!? patch...
return ajax({ url, ...options })
.pipe(
map(({ response }) => {
if (!(response instanceof Document)) // TODO: what to do in case of error?
throw Error("Unknown error...")
return response
})
)
}
// ----------------------------------------------------------------------------
// function isLocal(el: HTMLAnchorElement): boolean {
// return /(:\/\/|^#[^\/]+$)/.test(el.getAttribute("href")!)
// }
export function app(config: any) {
console.log("called app with", config)
}

65
src/assets/javascripts/utilities/index.ts
View File

@ -1,64 +1 @@
/*
* Copyright (c) 2016-2019 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
* IN THE SOFTWARE.
*/
import { NEVER, Observable, OperatorFunction, pipe } from "rxjs"
import { switchMap } from "rxjs/operators"
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Convert a collection to an array
*
* @template T - Element type
*
* @param collection - Collection or node list
*
* @return Array of elements
*/
export function toArray<
T extends HTMLElement
>(collection: HTMLCollection | NodeListOf<T>): T[] {
return Array.from(collection) as T[]
}
/* ----------------------------------------------------------------------------
* Operators
* ------------------------------------------------------------------------- */
/**
* Switch to another observable, if toggle is active
*
* @template T - Observable value type
*
* @param project - Project function
*
* @return Observable, if toggle is active
*/
export function toggle<T>(
project: () => Observable<T>
): OperatorFunction<boolean, T> {
return pipe(
switchMap(active => active ? project() : NEVER)
)
}
export * from "./other"

64
src/assets/javascripts/utilities/other/index.ts Normal file
View File

@ -0,0 +1,64 @@
/*
* Copyright (c) 2016-2019 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
* IN THE SOFTWARE.
*/
import { NEVER, Observable, OperatorFunction, pipe } from "rxjs"
import { switchMap } from "rxjs/operators"
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Convert a collection to an array
*
* @template T - Element type
*
* @param collection - Collection or node list
*
* @return Array of elements
*/
export function toArray<
T extends HTMLElement
>(collection: HTMLCollection | NodeListOf<T>): T[] {
return Array.from(collection) as T[]
}
/* ----------------------------------------------------------------------------
* Operators
* ------------------------------------------------------------------------- */
/**
* Switch to another observable, if toggle is active
*
* @template T - Observable value type
*
* @param project - Project function
*
* @return Observable, if toggle is active
*/
export function toggle<T>(
project: () => Observable<T>
): OperatorFunction<boolean, T> {
return pipe(
switchMap(active => active ? project() : NEVER)
)
}

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

@ -133,7 +133,7 @@
// Page title
& + & {
transform: translateX(px2rem(25px));
transform: translateY(px2rem(25px));
transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s;
@ -143,7 +143,7 @@
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(px2rem(-25px));
transform: translateY(px2rem(-25px));
}
}
@ -166,7 +166,7 @@
// Show page title
&[data-md-state="active"] .md-header-nav__topic {
transform: translateX(px2rem(-25px));
transform: translateY(px2rem(-25px));
transition:
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 0.15s;
@ -176,12 +176,12 @@
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(px2rem(25px));
transform: translateY(px2rem(25px));
}
// Page title
& + .md-header-nav__topic {
transform: translateX(0);
transform: translateY(0);
transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s;

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

@ -467,9 +467,7 @@
// Animation is only possible if JavaScript is available, as the max-height
// property must be calculated before transitioning
&[data-md-state="animate"] {
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
}
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
// Hide nested navigation by default
.md-nav__toggle ~ & {
@ -483,14 +481,8 @@
}
// Expand nested navigation, if toggle is checked
.md-nav__toggle:checked ~ &,
&[data-md-state="expand"] {
.md-nav__toggle:checked ~ & {
max-height: 100%;
// Just show for accessibility links if JavaScript is not available
.no-js & {
display: block;
}
}
// Hide titles for nested navigation