mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Integrated social icons and moved copyright banner below footer navigation
This commit is contained in:
squidfunk
parent
e08802aed1
commit
c0fcd8f8c5
1
material/assets/stylesheets/application-5c79a378e0.css
Normal file
1
material/assets/stylesheets/application-5c79a378e0.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -36,7 +36,10 @@
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ca351710b4.css">
|
||||
{% if config.extra.social %}
|
||||
<link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-5c79a378e0.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
|
||||
{% endif %}
|
||||
@ -91,24 +94,6 @@
|
||||
{% endif %}
|
||||
{{ page.content }}
|
||||
{% endblock %}
|
||||
<hr>
|
||||
<small class="md-content__copyright">
|
||||
{% if config.copyright %}
|
||||
{{ config.copyright }} –
|
||||
{% endif %}
|
||||
This document was created with
|
||||
<a href="http://www.mkdocs.org">MkDocs</a>
|
||||
and the
|
||||
<a href="http://squidfunk.github.io/mkdocs-material/">
|
||||
Material
|
||||
</a>
|
||||
theme.
|
||||
{% if config.edit_uri %}
|
||||
<a href="{{ page.edit_url }}">
|
||||
Edit this page
|
||||
</a>
|
||||
{% endif %}
|
||||
</small>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<footer class="md-footer">
|
||||
<div class="md-footer__inner">
|
||||
{% if page.previous_page or page.next_page %}
|
||||
<nav class="md-footer-nav md-grid">
|
||||
{% if page.previous_page or page.next_page %}
|
||||
<div class="md-footer-nav">
|
||||
<nav class="md-footer-nav__inner md-grid">
|
||||
{% if page.previous_page %}
|
||||
<a href="{{ page.previous_page.url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
|
||||
<i class="md-icon md-footer-nav__icon">arrow_back</i>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
||||
<span class="md-flex__ellipsis">
|
||||
@ -28,11 +28,35 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<i class="md-icon md-icon--forward md-footer-nav__icon"></i>
|
||||
<i class="md-icon md-footer-nav__icon">arrow_forward</i>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="md-footer-meta md-typeset">
|
||||
<div class="md-footer-meta__inner md-grid">
|
||||
<div class="md-footer-copyright">
|
||||
{% if config.copyright %}
|
||||
<span class="md-footer-copyright__highlight">
|
||||
{{ config.copyright }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<br>
|
||||
powered by
|
||||
<a href="http://www.mkdocs.org">MkDocs</a>
|
||||
and the
|
||||
<a href="http://squidfunk.github.io/mkdocs-material/">Material</a>
|
||||
theme
|
||||
</div>
|
||||
{% if config.extra.social %}
|
||||
<div class="md-footer-social">
|
||||
{% for social in config.extra.social %}
|
||||
<a href="{{ social.link }}" class="md-footer-social__link socicon-{{ social.type }}"></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
18
mkdocs.yml
18
mkdocs.yml
@ -37,17 +37,19 @@ theme_dir: material
|
||||
|
||||
# Options
|
||||
extra:
|
||||
version: 0.2.4
|
||||
logo: images/logo.png
|
||||
font:
|
||||
text: Ubuntu
|
||||
mono: Ubuntu Mono
|
||||
author:
|
||||
github: squidfunk
|
||||
twitter: squidfunk
|
||||
palette:
|
||||
primary: indigo
|
||||
accent: indigo
|
||||
font:
|
||||
text: Ubuntu
|
||||
mono: Ubuntu Mono
|
||||
social:
|
||||
- type: github
|
||||
link: https://github.com/squidfunk
|
||||
- type: twitter
|
||||
link: https://twitter.com/squidfunk
|
||||
- type: linkedin
|
||||
link: https://de.linkedin.com/in/martin-donath-20a95039
|
||||
|
||||
# Extensions
|
||||
markdown_extensions:
|
||||
|
||||
@ -32,18 +32,18 @@
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Footer container
|
||||
&__inner {
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation within footer
|
||||
.md-footer-nav {
|
||||
padding: 0.4rem;
|
||||
overflow: auto;
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
padding: 0.4rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Links to previous and next page
|
||||
&__link {
|
||||
@ -110,3 +110,67 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Non-navigational information
|
||||
.md-footer-meta {
|
||||
background: opacify($md-color-black, 0.025);
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
padding: 0.4rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Use a decent color for non-hovered links and ensure specificity
|
||||
html &.md-typeset a {
|
||||
color: $md-color-white--lighter;
|
||||
}
|
||||
}
|
||||
|
||||
// Copyright and theme information
|
||||
.md-footer-copyright {
|
||||
margin: 0 1.2rem;
|
||||
padding: 0.8rem 0;
|
||||
color: $md-color-white--lightest;
|
||||
font-size: ms(-1);
|
||||
|
||||
// [tablet portrait +]: Show next to social media links
|
||||
@include break-from-device(tablet portrait) {
|
||||
max-width: 75%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Highlight copyright information
|
||||
&__highlight {
|
||||
color: $md-color-white--light;
|
||||
}
|
||||
}
|
||||
|
||||
// Social media links
|
||||
.md-footer-social {
|
||||
margin: 0 0.8rem;
|
||||
padding: 1.2rem 0;
|
||||
text-align: center;
|
||||
|
||||
// [tablet portrait +]: Show next to copyright information
|
||||
@include break-from-device(tablet portrait) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Link with icon
|
||||
&__link {
|
||||
display: inline-block;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border: 0.1rem solid $md-color-white--lightest;
|
||||
border-radius: 100%;
|
||||
color: $md-color-white--light;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
|
||||
// Adjust line-height to match height for correct alignment
|
||||
&::before {
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,6 +82,12 @@
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
|
||||
<!-- Social icon webfont, if necessary -->
|
||||
{% if config.extra.social %}
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
|
||||
{% endif %}
|
||||
|
||||
<!-- Theme-related stylesheets -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="{{ base_url }}/assets/stylesheets/application.css" />
|
||||
@ -181,28 +187,6 @@
|
||||
<!-- Content -->
|
||||
{{ page.content }}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Copyright and theme information -->
|
||||
<hr />
|
||||
<small class="md-content__copyright">
|
||||
{% if config.copyright %}
|
||||
{{ config.copyright }} –
|
||||
{% endif %}
|
||||
This document was created with
|
||||
<a href="http://www.mkdocs.org">MkDocs</a>
|
||||
and the
|
||||
<a href="http://squidfunk.github.io/mkdocs-material/">
|
||||
Material
|
||||
</a>
|
||||
theme.
|
||||
|
||||
<!-- Edit button, if URL was defined -->
|
||||
{% if config.edit_uri %}
|
||||
<a href="{{ page.edit_url }}">
|
||||
Edit this page
|
||||
</a>
|
||||
{% endif %}
|
||||
</small>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,11 +22,11 @@
|
||||
|
||||
<!-- Application footer -->
|
||||
<footer class="md-footer">
|
||||
<div class="md-footer__inner">
|
||||
|
||||
<!-- Link to previous and/or next page -->
|
||||
{% if page.previous_page or page.next_page %}
|
||||
<nav class="md-footer-nav md-grid">
|
||||
<!-- Link to previous and/or next page -->
|
||||
{% if page.previous_page or page.next_page %}
|
||||
<div class="md-footer-nav">
|
||||
<nav class="md-footer-nav__inner md-grid">
|
||||
|
||||
<!-- Link to previous page -->
|
||||
{% if page.previous_page %}
|
||||
@ -34,7 +34,7 @@
|
||||
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
|
||||
rel="prev">
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<i class="md-icon md-icon--back md-footer-nav__icon"></i>
|
||||
<i class="md-icon md-footer-nav__icon">arrow_back</i>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--stretch
|
||||
md-footer-nav__title">
|
||||
@ -63,11 +63,42 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<i class="md-icon md-icon--forward md-footer-nav__icon"></i>
|
||||
<i class="md-icon md-footer-nav__icon">arrow_forward</i>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Further information -->
|
||||
<div class="md-footer-meta md-typeset">
|
||||
<div class="md-footer-meta__inner md-grid">
|
||||
|
||||
<!-- Copyright and theme information -->
|
||||
<div class="md-footer-copyright">
|
||||
{% if config.copyright %}
|
||||
<span class="md-footer-copyright__highlight">
|
||||
{{ config.copyright }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<br />
|
||||
powered by
|
||||
<a href="http://www.mkdocs.org">MkDocs</a>
|
||||
and the
|
||||
<a href="http://squidfunk.github.io/mkdocs-material/">Material</a>
|
||||
theme
|
||||
</div>
|
||||
|
||||
<!-- Link to social media accounts, if any -->
|
||||
{% if config.extra.social %}
|
||||
<div class="md-footer-social">
|
||||
{% for social in config.extra.social %}
|
||||
<a href="{{ social.link }}" class="md-footer-social__link
|
||||
socicon-{{ social.type }}"></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user