steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Upgrade Font Awesome to version 5 ()

Browse Source 
Upgrade Font Awesome to version 5 (SVG with JavaScript)

Close
This commit is contained in:
Michael Rose
2018-01-04 14:27:27 -05:00
committed by GitHub
parent e3858f80e4
commit 3e922ddf58
51 changed files with 108 additions and 4631 deletions

4
docs/_docs/02-structure.md

@ -2,7 +2,7 @@
title: "Structure"
permalink: /docs/structure/
excerpt: "How the theme is organized and what all of the files are for."
last_modified_at: 2016-10-06T22:39:43-04:00
last_modified_at: 2018-01-03T12:03:59-05:00
---
Nothing clever here :wink:. Layouts, data files, and includes are all placed in their default locations. Stylesheets and scripts in `assets`, and a few development related files in the project's root directory.
@ -40,8 +40,6 @@ minimal-mistakes
├── assets
| ├── css
| | └── main.scss # main stylesheet, loads SCSS partials from _sass
| ├── fonts
| | └── fontawesome-webfont # Font Awesome webfonts
| ├── images # image assets for posts/pages/collections/etc.
| ├── js
| | ├── plugins # jQuery plugins

4
docs/_docs/03-installation.md

@ -2,7 +2,7 @@
title: "Installation"
permalink: /docs/installation/
excerpt: "Instructions for installing the theme for new and existing Jekyll based sites."
last_modified_at: 2017-11-07T20:47:57-05:00
last_modified_at: 2018-01-03T11:30:48-05:00
toc: true
---
@ -16,7 +16,7 @@ If you plan to host with GitHub Pages be sure to properly setup [**jekyll-remote
**3.** And for those who'd like to make substantial edits to the theme, it can be downloaded as a ZIP file to customize.
[<i class="fa fa-download"></i> Download Minimal Mistakes Theme](https://github.com/mmistakes/minimal-mistakes/archive/master.zip){: .btn .btn--success}
[<i class="fas fa-download"></i> Download Minimal Mistakes Theme](https://github.com/mmistakes/minimal-mistakes/archive/master.zip){: .btn .btn--success}
**ProTip:** Be sure to remove `/docs` and `/test` if you forked or downloaded Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't littering up in your repo.
{: .notice--info}

18
docs/_docs/10-layouts.md

@ -7,7 +7,7 @@ single_layout_gallery:
alt: "single layout with header example"
- image_path: /assets/images/mm-layout-single-meta.png
alt: "single layout with comments and related posts"
last_modified_at: 2017-12-06T14:58:04-05:00
last_modified_at: 2018-01-03T11:22:31-05:00
toc: true
toc_label: "Included Layouts"
toc_icon: "columns"
@ -95,7 +95,7 @@ Auto-generated table of contents list for your posts and pages can be enabled by
| --------- | -------- | ----------- | ------- |
| **toc** | Optional | Show table of contents. (boolean) | `false` |
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fortawesome.github.io/Font-Awesome/icons/) <i class="fa fa-file-text"></i> **file-text** icon. Any other FA icon can be used instead. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
**TOC example with custom title and icon**
@ -103,7 +103,7 @@ Auto-generated table of contents list for your posts and pages can be enabled by
---
toc: true
toc_label: "My Table of Contents"
toc_icon: "gear"
toc_icon: "cog"
---
```
@ -453,7 +453,7 @@ To add more links you'll need to crack open [`_includes/author-profile-custom-li
```html
<li>
<a href="https://whatever-social-network.com/username">
<i class="fa fa-fw" aria-hidden="true"></i> Awesome Social Network
<i class="fab fa-fw" aria-hidden="true"></i> Awesome Social Network
</a>
</li>
```
@ -461,7 +461,7 @@ To add more links you'll need to crack open [`_includes/author-profile-custom-li
To add a new link you'll need three things:
1. Destination URL
2. [Font Awesome icon](http://fontawesome.io/icons/) (`fa-` class)
2. [Font Awesome icon](https://fontawesome.com/icons?d=gallery) (`fa-` class)
3. Label for the link
It's up to you if you want to wrap it in a `{% raw %}{% if %} ... {% endif %}{% endraw %}`conditional and add a variable to `_config.yml`. If you don't plan to change it then hard-coding the string is perfectly acceptable.
@ -477,7 +477,7 @@ And plug them into the appropriate locations:
```html
<li>
<a href="[1]">
<i class="fa fa-fw [2]" aria-hidden="true"></i> [3]
<i class="fab fa-fw [2]" aria-hidden="true"></i> [3]
</a>
</li>
```
@ -487,7 +487,7 @@ To end up with:
```html
<li>
<a href="https://www.reddit.com/user/username">
<i class="fa fa-fw fa-reddit" aria-hidden="true"></i> Reddit
<i class="fab fa-fw fa-reddit" aria-hidden="true"></i> Reddit
</a>
</li>
```
@ -650,7 +650,7 @@ If you'd like to add, remove, or change the order of these default links you can
Let's say you wanted to replace the Google+ button with a Reddit one. Simply replace the HTML with the following:
```html
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title }}" class="btn" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fa fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title }}" class="btn" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
```
The important parts to change are:
@ -681,7 +681,7 @@ $social:
Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | absolute_url }}) and away you go.
```html
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title }}" class="btn btn--reddit" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fa fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url }}&title={{ page.title }}" class="btn btn--reddit" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
```
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | absolute_url }})

10
docs/_docs/14-helpers.md

@ -30,7 +30,7 @@ feature_row:
- image_path: /assets/images/unsplash-gallery-image-3-th.jpg
title: "Placeholder 3"
excerpt: "This is some sample content that goes here with **Markdown** formatting."
last_modified_at: 2017-10-20T14:20:36-04:00
last_modified_at: 2018-01-03T11:30:42-05:00
toc: true
toc_label: "Helpers"
toc_icon: "gears"
@ -251,7 +251,7 @@ Add `toc: true` to the YAML Front Matter of any post or page.
| --------- | -------- | ----------- | ------- |
| **toc** | Optional | Show table of contents. (boolean) | `false` |
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fortawesome.github.io/Font-Awesome/icons/) <i class="fa fa-file-text"></i> **file-text** icon. Any other FA icon can be used instead. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
**TOC example with custom title and icon**
@ -259,7 +259,7 @@ Add `toc: true` to the YAML Front Matter of any post or page.
---
toc: true
toc_label: "My Table of Contents"
toc_icon: "gear"
toc_icon: "cog"
---
```
@ -283,12 +283,12 @@ To include a Kramdown [auto-generated table of contents](https://kramdown.gettal
| Parameter | Required | Description | Default |
| --------- | -------- | ----------- | ------- |
| **title** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fortawesome.github.io/Font-Awesome/icons/) <i class="fa fa-file-text"></i> **file-text** icon. Any other FA icon can be used instead. |
| **icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
**TOC example with custom title and icon**
```liquid
{% raw %}{% include toc icon="gears" title="My Table of Contents" %}{% endraw %}
{% raw %}{% include toc icon="cog" title="My Table of Contents" %}{% endraw %}
```
## Navigation List

7
docs/_docs/16-stylesheets.md

@ -2,7 +2,7 @@
title: "Stylesheets"
permalink: /docs/stylesheets/
excerpt: "Instructions for customizing and building the theme's stylesheets."
last_modified_at: 2017-04-18T12:34:31-04:00
last_modified_at: 2018-01-03T12:05:16-05:00
---
The theme's `assets/css/main.css` file is built from several SCSS partials located in [`_sass/`](https://github.com/mmistakes/minimal-mistakes/tree/master/_sass) and is structured as follows:
@ -13,7 +13,6 @@ minimal-mistakes
| └── minimal-mistakes
| ├── vendor # vendor SCSS partials
| | ├── breakpoint # media query mixins
| | ├── font-awesome # Font Awesome icons
| | ├── magnific-popup # Magnific Popup lightbox
| | └── susy # Susy grid system
| ├── _animations.scss # animations
@ -84,7 +83,7 @@ The size of the indent can also be customized by changing the value of `$indent-
### Font Stacks
By default the theme uses [system fonts](https://medium.com/designing-medium/system-shock-6b1dc6d6596f#.rb81vgn7i) for all of the font stacks (serif, sans-serif, and monospace). This is done in part to provide a clean base for you to build off of and to improve performance since we aren't loading any custom webfonts[^font-awesome] by default.
By default the theme uses [system fonts](https://medium.com/designing-medium/system-shock-6b1dc6d6596f#.rb81vgn7i) for all of the font stacks (serif, sans-serif, and monospace). This is done in part to provide a clean base for you to build off of and to improve performance since we aren't loading any custom webfonts by default.
```scss
/* system typefaces */
@ -93,8 +92,6 @@ $sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetic
$monospace : Monaco, Consolas, "Lucida Console", monospace;
```
[^font-awesome]: Apart from [Font Awesome](https://fortawesome.github.io/Font-Awesome/) icon webfonts.
Sans-serif fonts have been used for most of the type, with serifs reserved for captions. If you wish to change this you'll need to poke around the various `SCSS` partials and modify `font-family` declarations.
**ProTip:** To use webfonts from services like [Adobe TypeKit](https://typekit.com/) or [Google Fonts](https://www.google.com/fonts) simply update the font stacks and then add their scripts to `_includes/head/custom.html`.

4
docs/_pages/home.md

@ -4,7 +4,7 @@ permalink: /
header:
overlay_color: "#5e616c"
overlay_image: /assets/images/mm-home-page-feature.jpg
cta_label: "<i class='fa fa-download'></i> Install Now"
cta_label: "<i class='fas fa-download'></i> Install Now"
cta_url: "/docs/quick-start-guide/"
caption:
excerpt: 'A flexible two-column Jekyll theme. Perfect for personal sites, blogs, and portfolios hosted on GitHub or your own server.<br /> <small><a href="https://github.com/mmistakes/minimal-mistakes/releases/tag/4.8.1">Latest release v4.8.1</a></small><br /><br /> {::nomarkdown}<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> <iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>{:/nomarkdown}'
@ -33,7 +33,7 @@ feature_row:
github:
- excerpt: '{::nomarkdown}<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> <iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>{:/nomarkdown}'
intro:
- excerpt: 'Get notified when I add new stuff &nbsp; [<i class="fa fa-twitter"></i> @mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter} [<i class="fa fa-paypal"></i> Tip Me](https://www.paypal.me/mmistakes){: .btn .btn--primary}'
- excerpt: 'Get notified when I add new stuff &nbsp; [<i class="fab fa-twitter"></i> @mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter} [<i class="fab fa-paypal"></i> Tip Me](https://www.paypal.me/mmistakes){: .btn .btn--primary}'
---
{% include feature_row id="intro" type="center" %}