1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-13 18:40:54 +01:00

Refactored icon options for mkdocs.yml

This commit is contained in:
squidfunk 2020-02-27 11:37:02 +01:00
parent f5222e03f3
commit eaeac798b1
18 changed files with 64 additions and 54 deletions

View File

@ -1,8 +1,8 @@
{ {
"assets/javascripts/bundle.js": "assets/javascripts/bundle.4333d4e1.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.f865046f.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4333d4e1.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f865046f.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
"assets/stylesheets/main.scss": "assets/stylesheets/main.d780ead5.min.css", "assets/stylesheets/main.scss": "assets/stylesheets/main.f8a03d30.min.css",
"assets/stylesheets/palette.scss": "assets/stylesheets/palette.f5f04e6f.min.css" "assets/stylesheets/palette.scss": "assets/stylesheets/palette.f5f04e6f.min.css"
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -43,7 +43,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.d780ead5.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f8a03d30.min.css' | url }}">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f5f04e6f.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f5f04e6f.min.css' | url }}">
{% endif %} {% endif %}
@ -195,7 +195,7 @@
{% endblock %} {% endblock %}
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.4333d4e1.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.f865046f.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

View File

@ -56,14 +56,19 @@ font:
# Fixed-width font for code listings # Fixed-width font for code listings
code: Roboto Mono code: Roboto Mono
# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
# icons that are part of the HTML can be configured and replaced
icon:
# Shown if no logo is set
logo: .icons/material/book-open-variant
# Repository icon
repo: .icons/fontawesome/git-alt
# Favicon to be rendered # Favicon to be rendered
favicon: assets/images/favicon.png favicon: assets/images/favicon.png
# The logo of the documentation shown in the header and navigation can either
# be a Material Icon ligature (see https://material.io/icons/) or an image URL
logo:
icon: "\uE80C"
# Material includes the search in the header as a partial, not as a separate # Material includes the search in the header as a partial, not as a separate
# template, so it's correct that search.html is missing # template, so it's correct that search.html is missing
include_search_page: false include_search_page: false

View File

@ -8,7 +8,7 @@
<nav class="md-footer-nav__inner md-grid"> <nav class="md-footer-nav__inner md-grid">
{% if page.previous_page %} {% if page.previous_page %}
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev"> <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-icon md-icon__button"> <div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-left.svg" %} {% include ".icons/material/arrow-left.svg" %}
</div> </div>
<div class="md-footer-nav__title"> <div class="md-footer-nav__title">
@ -31,7 +31,7 @@
{{ page.next_page.title }} {{ page.next_page.title }}
</div> </div>
</div> </div>
<div class="md-icon md-icon__button"> <div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-right.svg" %} {% include ".icons/material/arrow-right.svg" %}
</div> </div>
</a> </a>

View File

@ -4,14 +4,14 @@
<header class="md-header" data-md-component="header"> <header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid"> <nav class="md-header-nav md-grid">
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo"> <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
{% if config.theme.logo.icon %} {% if config.theme.logo %}
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
{% else %}
<img src="{{ config.theme.logo | url }}" alt="logo"> <img src="{{ config.theme.logo | url }}" alt="logo">
{% else %}
{% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
{% endif %} {% endif %}
</a> </a>
<label class="md-header-nav__button md-icon md-icon__button" for="__drawer"> <label class="md-header-nav__button md-icon" for="__drawer">
{% include ".icons/material/menu.svg" %} {% include ".icons/material/menu" ~ ".svg" %}
</label> </label>
<div class="md-header-nav__title" data-md-component="header-title"> <div class="md-header-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis md-ellipsis"> <div class="md-header-nav__ellipsis md-ellipsis">
@ -32,7 +32,7 @@
</div> </div>
</div> </div>
{% if "search" in config["plugins"] %} {% if "search" in config["plugins"] %}
<label class="md-header-nav__button md-icon md-icon__button" for="__search"> <label class="md-header-nav__button md-icon" for="__search">
{% include ".icons/material/magnify.svg" %} {% include ".icons/material/magnify.svg" %}
</label> </label>
{% include "partials/search.html" %} {% include "partials/search.html" %}

View File

@ -4,10 +4,7 @@
{% import "partials/language.html" as lang with context %} {% import "partials/language.html" as lang with context %}
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source"> <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
<div class="md-source__icon md-icon"> <div class="md-source__icon md-icon">
{% set repo_icon = config.extra.repo_icon | default( {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
"fontawesome/brands/git-alt"
) %}
{% include ".icons/" ~ repo_icon ~ ".svg" %}
</div> </div>
<div class="md-source__repository"> <div class="md-source__repository">
{{ config.repo_name }} {{ config.repo_name }}

View File

@ -56,6 +56,9 @@ theme:
font: font:
text: Roboto text: Roboto
code: Roboto Mono code: Roboto Mono
icon:
logo: material/book-open-variant
repo: fontawesome/brands/git-alt
favicon: assets/favicon.png favicon: assets/favicon.png
logo: assets/images/icon.svg logo: assets/images/icon.svg
@ -68,13 +71,13 @@ plugins:
# Customization # Customization
extra: extra:
social: social:
- icon: brands/github-alt - icon: fontawesome/brands/github-alt
link: https://github.com/squidfunk link: https://github.com/squidfunk
- icon: brands/twitter - icon: fontawesome/brands/twitter
link: https://twitter.com/squidfunk link: https://twitter.com/squidfunk
- icon: brands/linkedin - icon: fontawesome/brands/linkedin
link: https://www.linkedin.com/in/squidfunk/ link: https://www.linkedin.com/in/squidfunk/
- icon: brands/instagram - icon: fontawesome/brands/instagram
link: https://instagram.com/squidfunk link: https://instagram.com/squidfunk
# Extensions # Extensions
@ -96,6 +99,8 @@ markdown_extensions:
- pymdownx.emoji: - pymdownx.emoji:
emoji_index: !!python/name:pymdownx.emoji.twemoji emoji_index: !!python/name:pymdownx.emoji.twemoji
emoji_generator: !!python/name:pymdownx.emoji.to_svg emoji_generator: !!python/name:pymdownx.emoji.to_svg
# - pymdownx.highlight:
# linenums_style: pymdownx-inline
- pymdownx.inlinehilite - pymdownx.inlinehilite
- pymdownx.keys - pymdownx.keys
- pymdownx.magiclink: - pymdownx.magiclink:

View File

@ -27,14 +27,6 @@
// Icon // Icon
.md-icon { .md-icon {
// Icon with button spacing
&__button {
display: inline-block;
margin: px2rem(4px);
padding: px2rem(8px);
cursor: pointer;
}
// SVG defaults // SVG defaults
svg { svg {
display: block; display: block;

View File

@ -116,6 +116,12 @@
line-height: px2rem(48px); line-height: px2rem(48px);
} }
// Link button
&__button {
margin: px2rem(4px);
padding: px2rem(8px);
}
// Link direction // Link direction
&__direction { &__direction {
position: absolute; position: absolute;

View File

@ -72,7 +72,10 @@
// Icon buttons // Icon buttons
&__button { &__button {
position: relative; position: relative;
margin: px2rem(4px);
padding: px2rem(8px);
transition: opacity 250ms; transition: opacity 250ms;
cursor: pointer;
z-index: 1; z-index: 1;
// Adjust for right-to-left languages // Adjust for right-to-left languages

View File

@ -56,14 +56,19 @@ font:
# Fixed-width font for code listings # Fixed-width font for code listings
code: Roboto Mono code: Roboto Mono
# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
# icons that are part of the HTML can be configured and replaced
icon:
# Shown if no logo is set
logo: .icons/material/book-open-variant
# Repository icon
repo: .icons/fontawesome/git-alt
# Favicon to be rendered # Favicon to be rendered
favicon: assets/images/favicon.png favicon: assets/images/favicon.png
# The logo of the documentation shown in the header and navigation can either
# be a Material Icon ligature (see https://material.io/icons/) or an image URL
logo:
icon: "\uE80C"
# Material includes the search in the header as a partial, not as a separate # Material includes the search in the header as a partial, not as a separate
# template, so it's correct that search.html is missing # template, so it's correct that search.html is missing
include_search_page: false include_search_page: false

View File

@ -38,7 +38,7 @@
class="md-footer-nav__link md-footer-nav__link--prev" class="md-footer-nav__link md-footer-nav__link--prev"
rel="prev" rel="prev"
> >
<div class="md-icon md-icon__button"> <div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-left.svg" %} {% include ".icons/material/arrow-left.svg" %}
</div> </div>
<div class="md-footer-nav__title"> <div class="md-footer-nav__title">
@ -68,7 +68,7 @@
{{ page.next_page.title }} {{ page.next_page.title }}
</div> </div>
</div> </div>
<div class="md-icon md-icon__button"> <div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-right.svg" %} {% include ".icons/material/arrow-right.svg" %}
</div> </div>
</a> </a>

View File

@ -33,17 +33,17 @@
aria-label="{{ config.site_name }}" aria-label="{{ config.site_name }}"
class="md-header-nav__button md-logo" class="md-header-nav__button md-logo"
> >
{% if config.theme.logo.icon %} {% if config.theme.logo %}
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
{% else %}
<img src="{{ config.theme.logo | url }}" alt="logo" /> <img src="{{ config.theme.logo | url }}" alt="logo" />
{% else %}
{% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
{% endif %} {% endif %}
</a> </a>
<label <label
class="md-header-nav__button md-icon md-icon__button" class="md-header-nav__button md-icon"
for="__drawer" for="__drawer"
> >
{% include ".icons/material/menu.svg" %} {% include ".icons/material/menu" ~ ".svg" %}
</label> </label>
<!-- Header title --> <!-- Header title -->
@ -69,7 +69,7 @@
<!-- Button to open search dialogue --> <!-- Button to open search dialogue -->
{% if "search" in config["plugins"] %} {% if "search" in config["plugins"] %}
<label <label
class="md-header-nav__button md-icon md-icon__button" class="md-header-nav__button md-icon"
for="__search" for="__search"
> >
{% include ".icons/material/magnify.svg" %} {% include ".icons/material/magnify.svg" %}

View File

@ -29,10 +29,7 @@
class="md-source" class="md-source"
> >
<div class="md-source__icon md-icon"> <div class="md-source__icon md-icon">
{% set repo_icon = config.extra.repo_icon | default( {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
"fontawesome/brands/git-alt"
) %}
{% include ".icons/" ~ repo_icon ~ ".svg" %}
</div> </div>
<div class="md-source__repository"> <div class="md-source__repository">
{{ config.repo_name }} {{ config.repo_name }}