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

Add target support for permalinks

Browse Source
This commit is contained in:
squidfunk 2016-08-10 23:01:31 +02:00
parent c534800ab9
commit c3e10c25f3
12 changed files with 54 additions and 1844 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/getting-started.md
View File

@ -215,7 +215,7 @@ If you want more extensive highlighting, you can use a JavaScript library like
[highlight.js][], which is not included in Material. See [this link][extra] for [highlight.js][], which is not included in Material. See [this link][extra] for
further instructions further instructions
### Permalinks ### Permalinks <small>recommended</small>
In order to add [permalinks][] to the headers of your article, set the In order to add [permalinks][] to the headers of your article, set the
`markdown_extensions.toc.permalink` variable to a symbol, e.g. `¶`: `markdown_extensions.toc.permalink` variable to a symbol, e.g. `¶`:

1818
material/assets/javascripts/modernizr-30b4746408.js
View File

File diff suppressed because it is too large Load Diff

1
material/assets/javascripts/modernizr-d1e05123d4.js Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-76344d4d6f.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-cbf902c7ca.css
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/application.css
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,12 +41,12 @@
font-style: normal; font-style: normal;
} }
</style> </style>
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cbf902c7ca.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-76344d4d6f.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
{% for path in extra_css %} {% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}"> <link rel="stylesheet" href="{{ path }}">
{% endfor %} {% endfor %}
<script src="{{ base_url }}/assets/javascripts/modernizr-30b4746408.js"></script> <script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script>
</head> </head>
<body> <body>
<input class="md-toggle" type="checkbox" id="md-toggle-drawer"> <input class="md-toggle" type="checkbox" id="md-toggle-drawer">

22
material/header.html
View File

@ -12,8 +12,26 @@
<div class="md-flex__cell md-flex__cell--shrink"> <div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label> <label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
<div class="md-header-search"> <div class="md-header-search">
<input type="text" class="md-header-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="md-search"> <form class="md-header-search__form">
<label class="md-icon md-icon--search md-header-search__icon" for="md-search"></label> <input type="text" class="md-header-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="md-search">
<label class="md-icon md-icon--search md-header-search__icon" for="md-search"></label>
<div class="md-header-search__suggest">
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
FOO<br>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>

4
material/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico", "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
"assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js", "assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-30b4746408.js", "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d1e05123d4.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-cbf902c7ca.css" "assets/stylesheets/application.css": "assets/stylesheets/application-76344d4d6f.css"
} }

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

@ -41,23 +41,26 @@
transition: opacity .125s .25s, transition: opacity .125s .25s,
transform .25s .25s, transform .25s .25s,
color .25s; color .25s;
} }
/* /*
* Only show permalinks in active state * Only show permalinks in active state
*/ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
&:hover .headerlink { &:hover .headerlink,
&:target .headerlink {
margin-left: 1.0rem; margin-left: 1.0rem;
opacity: 1; opacity: 1;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
/* /*
* Active link * Active or targeted link
*/ */
&:hover { &:hover .headerlink:hover,
color: $md-color-accent; &:target .headerlink {
} color: $md-color-accent;
} }
} }
} }

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

@ -87,11 +87,12 @@
} }
/* /*
* Search bar within header * Search bar within header - the right aligment removes jitter
*/ */
&-search { &-search {
position: relative; position: relative;
margin: 0.6rem 0.4rem 0.6rem 0; margin: 0.6rem 0.4rem 0.6rem 0;
text-align: right;
/* /*
* Icon * Icon
@ -106,16 +107,16 @@
} }
/* /*
* Search field - the float is a hack for non-jittery transitions * Search field
*/ */
&__input { &__input {
display: inline-block;
width: 23.0rem; width: 23.0rem;
height: 3.6rem; height: 3.6rem;
padding-left: 4.4rem; padding-left: 4.4rem;
padding-right: 0.8rem; padding-right: 0.8rem;
float: right;
font-size: ms(0); font-size: ms(0);
background: $md-color-primary--dark; background: $md-color-white--lightest;
color: $md-color-white; color: $md-color-white;
border-radius: px2rem(2px); border-radius: px2rem(2px);
transition: color .25s, transition: color .25s,
@ -126,7 +127,7 @@
* Placeholder color * Placeholder color
*/ */
&::placeholder { &::placeholder {
color: $md-color-white--light; color: $md-color-white;
transition: color .25s; transition: color .25s;
} }

15
src/header.html
View File

@ -45,11 +45,16 @@
<label class="md-icon md-icon--search md-header-nav__icon" <label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label> for="md-toggle-search"></label>
<div class="md-header-search"> <div class="md-header-search">
<input type="text" class="md-header-search__input" <form class="md-header-search__form">
placeholder="Search" autocapitalize="off" autocorrect="off" <input type="text" class="md-header-search__input"
autocomplete="off" spellcheck="false" id="md-search" /> placeholder="Search" autocapitalize="off" autocorrect="off"
<label class="md-icon md-icon--search md-header-search__icon" autocomplete="off" spellcheck="false" id="md-search" />
for="md-search"></label> <label class="md-icon md-icon--search md-header-search__icon"
for="md-search"></label>
<div class="md-header-search__suggest">
</div>
</form>
</div> </div>
</div> </div>