diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed4d9932..fd9529b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
### Enhancements
+- Add logo and title customization to the masthead. [#2026](https://github.com/mmistakes/minimal-mistakes/pull/2026)
- Add support to customize `issue-term` for utterances comment provider. [#2022](https://github.com/mmistakes/minimal-mistakes/pull/2022)
- Allow custom canonical url on a page-by-page basis. [#2021](https://github.com/mmistakes/minimal-mistakes/pull/2021)
- Update table of contents navigation based on scroll position to indicate which link is currently active in the viewport. [#2020](https://github.com/mmistakes/minimal-mistakes/pull/2020)
diff --git a/_config.yml b/_config.yml
index ae48ca31..689c38af 100644
--- a/_config.yml
+++ b/_config.yml
@@ -24,6 +24,8 @@ url : # the base hostname & protocol for your site e.g. "ht
baseurl : # the subpath of your site, e.g. "/blog"
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title : # overrides the website title displayed in the masthead, use " " for no title
# breadcrumbs : false # true, false (default)
words_per_minute : 200
comments:
diff --git a/_includes/masthead.html b/_includes/masthead.html
index f36d2c6e..f3ee59e9 100644
--- a/_includes/masthead.html
+++ b/_includes/masthead.html
@@ -1,8 +1,15 @@
+{% if site.logo contains "://" %}
+ {% capture logo_path %}{{ site.logo }}{% endcapture %}
+{% else %}
+ {% capture logo_path %}{{ site.logo | relative_url }}{% endcapture %}
+{% endif %}
+
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
- <a class="site-title" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+ {% if logo_path %}<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path }}"></a>{% endif %}
+ <a class="site-title" href="{{ '/' | relative_url }}">{{ site.masthead_title | default: site.title }}</a>
<ul class="visible-links">
{%- for link in site.data.navigation.main -%}
{%- if link.url contains '://' -%}
diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
index 2dfaed61..d87cde1f 100644
--- a/_sass/minimal-mistakes/_masthead.scss
+++ b/_sass/minimal-mistakes/_masthead.scss
@@ -39,6 +39,10 @@
}
}
+.site-logo img {
+ max-height: 2rem;
+}
+
.site-title {
display: -webkit-box;
display: -ms-flexbox;
diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss
index 66f3d5bd..9aae8854 100644
--- a/_sass/minimal-mistakes/_navigation.scss
+++ b/_sass/minimal-mistakes/_navigation.scss
@@ -189,6 +189,11 @@
color: $masthead-link-color-hover;
}
+ &.site-logo {
+ margin-left: 0;
+ margin-right: 0.5rem;
+ }
+
&.site-title {
margin-left: 0;
}
diff --git a/docs/_config.yml b/docs/_config.yml
index f3b9ce08..789452ce 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -19,6 +19,8 @@ url : https://mmistakes.github.io # the base hostname & pro
baseurl : "/minimal-mistakes" # the subpath of your site, e.g. "/blog"
repository : "mmistakes/minimal-mistakes"
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title : # overrides the website title displayed in the masthead, use " " for no title
# breadcrumbs : false # true, false (default)
words_per_minute : 200
comments:
diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
index fb4a1c81..5fd02461 100644
--- a/docs/_docs/05-configuration.md
+++ b/docs/_docs/05-configuration.md
@@ -2,7 +2,7 @@
title: "Configuration"
permalink: /docs/configuration/
excerpt: "Settings for configuring and customizing the theme."
-last_modified_at: 2018-11-25T19:42:42-05:00
+last_modified_at: 2019-01-15T08:31:44-05:00
toc: true
---
@@ -223,6 +223,27 @@ header:
<figcaption>Example of teaser images found in the related posts module.</figcaption>
</figure>
+### Site masthead logo
+
+To insert a logo before the site title, place a graphic in the `/assets/images/` directory and add the filename to `_config.yml`:
+
+```yaml
+logo: "/assets/images/88x88.png"
+```
+
+<figure>
+ <img src="{{ '/assets/images/mm-masthead-logo.png' | relative_url }}" alt="masthead with logo and custom title">
+ <figcaption>Example of masthead with logo and custom title.</figcaption>
+</figure>
+
+### Site masthead title
+
+By default your site title is used in the masthead. You can override this text by adding the following to your `_config.yml`:
+
+```yaml
+masthead_title: "My Custom Title"
+```
+
### Breadcrumb navigation (beta)
Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:
diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
index 16829c14..e18f5468 100644
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
-last_modified_at: 2019-01-15T08:09:30-05:00
+last_modified_at: 2019-01-15T08:32:58-05:00
toc: true
---
@@ -12,6 +12,7 @@ toc: true
### Enhancements
+- Add logo and title customization to the masthead. [#2026](https://github.com/mmistakes/minimal-mistakes/pull/2026)
- Add support to customize `issue-term` for utterances comment provider. [#2022](https://github.com/mmistakes/minimal-mistakes/pull/2022)
- Allow custom canonical url on a page-by-page basis. [#2021](https://github.com/mmistakes/minimal-mistakes/pull/2021)
- Update table of contents navigation based on scroll position to indicate which link is currently active in the viewport. [#2020](https://github.com/mmistakes/minimal-mistakes/pull/2020)
diff --git a/docs/assets/images/mm-masthead-logo.png b/docs/assets/images/mm-masthead-logo.png
new file mode 100644
index 00000000..65daae9f
Binary files /dev/null and b/docs/assets/images/mm-masthead-logo.png differ
diff --git a/test/_config.yml b/test/_config.yml
index ee0fdba5..dc3a0276 100644
--- a/test/_config.yml
+++ b/test/_config.yml
@@ -18,6 +18,8 @@ url : # the base hostname & protocol for your site e.g. "ht
baseurl : "/test"
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
+logo : "/assets/images/apple-touch-icon.png" # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
+masthead_title : "Custom Title" # overrides the website title displayed in the masthead, use " " for no title
# breadcrumbs : false # true, false (default)
words_per_minute : 200
comments:
diff --git a/test/assets/images/apple-touch-icon.png b/test/assets/images/apple-touch-icon.png
new file mode 100644
index 00000000..51f87919
Binary files /dev/null and b/test/assets/images/apple-touch-icon.png differ