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
further instructions
### Permalinks
### Permalinks <small>recommended</small>
In order to add [permalinks][] to the headers of your article, set the
`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;
}
</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">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}
<script src="{{ base_url }}/assets/javascripts/modernizr-30b4746408.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script>
</head>
<body>
<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">
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
<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">
<label class="md-icon md-icon--search md-header-search__icon" for="md-search"></label>
<form class="md-header-search__form">
<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>

4
material/manifest.json
View File

@ -1,6 +1,6 @@
{
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
"assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js",
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-30b4746408.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-cbf902c7ca.css"
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d1e05123d4.js",
"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,
transform .25s .25s,
color .25s;
}
/*
* Only show permalinks in active state
*/
h1, h2, h3, h4, h5, h6 {
&:hover .headerlink {
&:hover .headerlink,
&:target .headerlink {
margin-left: 1.0rem;
opacity: 1;
transform: translate3d(0, 0, 0);
}
/*
* Active link
*/
&:hover {
color: $md-color-accent;
}
/*
* Active or targeted link
*/
&:hover .headerlink:hover,
&: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 {
position: relative;
margin: 0.6rem 0.4rem 0.6rem 0;
text-align: right;
/*
* Icon
@ -106,16 +107,16 @@
}
/*
* Search field - the float is a hack for non-jittery transitions
* Search field
*/
&__input {
display: inline-block;
width: 23.0rem;
height: 3.6rem;
padding-left: 4.4rem;
padding-right: 0.8rem;
float: right;
font-size: ms(0);
background: $md-color-primary--dark;
background: $md-color-white--lightest;
color: $md-color-white;
border-radius: px2rem(2px);
transition: color .25s,
@ -126,7 +127,7 @@
* Placeholder color
*/
&::placeholder {
color: $md-color-white--light;
color: $md-color-white;
transition: color .25s;
}

15
src/header.html
View File

@ -45,11 +45,16 @@
<label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label>
<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" />
<label class="md-icon md-icon--search md-header-search__icon"
for="md-search"></label>
<form class="md-header-search__form">
<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">
</div>
</form>
</div>
</div>