Skip to content

Commit

Permalink
Update Social Sharing links section (#4066)
Browse files Browse the repository at this point in the history
* Update 10-layouts.md

Update social sharing section for appropriate Reddit example and resource locations.

* Update as reviewed

---------

Co-authored-by: iBug <git@ibugone.com>
  • Loading branch information
jstrong013 and iBug committed May 5, 2024
1 parent 64b1d42 commit 0378a31
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions docs/_docs/10-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -785,23 +785,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 use a different "brand" color](http://brandcolors.net/).
{: .notice--info}

Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | relative_url }}) and away you go.

```html
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | relative_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 %}
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&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" | relative_url }})
Expand Down

0 comments on commit 0378a31

Please sign in to comment.