Sugar Labs

Change colors for social icons on sugar labs website - www-sugarlabs issue #79

Instagram hover color

The social buttons on every page have it to where it will darken on hover. The Instagram icon doesn't. This can be fixed by making the gradient background be darker on hover.

I won't include which colors it should darken to because you guys will probably want different colors.

Instagram color

The current colors for the Instagram icon don't look exactly like the real colors.

GitHub color

The GitHub icon could be #000 because it is always like that.

The code for the Social Share Kit is in assets/dist/css/social-share-kit.css. You can modify this file to update the social icons.

GitHub

Adding the following to the end of the file will make the GitHub icon be black:

.ssk-github { background: #000 } *You can add !important to the property if this code is above code that will override it. **This will make the GitHub icon lighten on hover (which actually looks nice, but also can't be avoided when making it black)

Instagram

At the end of the file, there is .instagram_colour and .instagram_colour:hover. Editing them can improve the gradient background of the icon.

Please submit screenshots

The source code to the website can be found at: https://github.com/sugarlabs/www-sugarlabs

Task tags

  • www
  • css

Students who completed this task

Matias Martinez

Task type

  • web Design
close

2017