From bc76650841ab34d0bb0812268a2d9f710f28e2bb Mon Sep 17 00:00:00 2001 From: Jeremiah Strong Date: Fri, 30 Dec 2022 21:49:41 -0600 Subject: [PATCH 1/2] Update 10-layouts.md Update social sharing section for appropriate Reddit example and resource locations. --- docs/_docs/10-layouts.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/_docs/10-layouts.md b/docs/_docs/10-layouts.md index 9574b44e2f68..c08d6d2b20e7 100644 --- a/docs/_docs/10-layouts.md +++ b/docs/_docs/10-layouts.md @@ -764,7 +764,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 LinkedIn button with a Reddit one. Simply replace the HTML with the following: ```html -{% raw %} Reddit{% endraw %} +{% raw %} Reddit{% endraw %} ``` The important parts to change are: @@ -778,23 +778,23 @@ The important parts to change are: To change the color of the button use one of the built in [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}). Or you can create a new button class to match whatever color you want. -Under the `$social` color map in `assets/_scss/_buttons.scss` simply add a name (this will be appened to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`. +Under the `$buttoncolors:` color map in `_sass/minimal-mistakes/_buttons.scss` simply add a name (this will be appended to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`. ```scss -$social: +$buttoncolors: (facebook, $facebook-color), (twitter, $twitter-color), (linkedin, $linkedin-color), -(reddit, #ff4500); +(reddit, $reddit-color); ``` -**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/). +**ProTip:** For bonus points you can modify the Sass variable `$reddit-color` that is set in `_variables.scss` [or create if different than Reddit example] to a modified ["brand" color](http://brandcolors.net/). {: .notice--info} Add the new `.btn--reddit` class to the `` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | relative_url }}) and away you go. ```html -{% raw %} Reddit{% endraw %} +{% raw %} Reddit{% endraw %} ``` ![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }}) From b740f108157658a4bbf8250100366e8cb1fcdd0a Mon Sep 17 00:00:00 2001 From: iBug Date: Sun, 5 May 2024 16:44:12 +0800 Subject: [PATCH 2/2] Update as reviewed --- docs/_docs/10-layouts.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_docs/10-layouts.md b/docs/_docs/10-layouts.md index c08d6d2b20e7..6bd3d0870b75 100644 --- a/docs/_docs/10-layouts.md +++ b/docs/_docs/10-layouts.md @@ -764,7 +764,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 LinkedIn button with a Reddit one. Simply replace the HTML with the following: ```html -{% raw %} Reddit{% endraw %} +{% raw %} Reddit{% endraw %} ``` The important parts to change are: @@ -788,13 +788,13 @@ $buttoncolors: (reddit, $reddit-color); ``` -**ProTip:** For bonus points you can modify the Sass variable `$reddit-color` that is set in `_variables.scss` [or create if different than Reddit example] to a modified ["brand" color](http://brandcolors.net/). +**ProTip:** For bonus points you can modify the Sass variable `$reddit-color` that is set in `_variables.scss` [or use a different "brand" color](http://brandcolors.net/). {: .notice--info} Add the new `.btn--reddit` class to the `` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | relative_url }}) and away you go. ```html -{% raw %} Reddit{% endraw %} +{% raw %} Reddit{% endraw %} ``` ![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }})