Skip to content

Commit

Permalink
fix(social): reduce icon size in the sidebar
Browse files Browse the repository at this point in the history
fix #490
  • Loading branch information
talha131 committed Dec 1, 2019
1 parent 19af5e3 commit 4e0dc41
Show file tree
Hide file tree
Showing 8 changed files with 16 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,28 @@ social media profiles; inviting readers to engage with them else where on the
web too. Most social widgets are loud and obtrusive. Their colors and placement
takes away readers' attention from the actual content.

<img class="align-right" style="width: 179px; height: 202px"
src="{static}/images/social-profiles-sidebar-default-2019-08-12.png" alt="Social
<img class="align-right" style="width: 35%;"
src="{static}/images/social-profiles-sidebar-svg-default.png" alt="Social
Profiles in the Sidebar" />

Elegant understands the importance of readers engagement but it makes sure
not to push author's _"online social karma"_ down readers' throats.

Elegant displays the widget in the sidebar. Each icon is a link to a social
media profile with an optional title attribute. Icons use muted color which
changes when user hovers over them.
changes when user hovers over them. On hover, icon is also scaled up in size.

Here is an example of hovering over
LinkedIn <!-- yaspeller ignore -->
icon.

<img style="width: 177px; height: 201px"
src="{static}/images/social-profiles-sidebar-hover-linkedin-2019-08-12.png" alt="Hover over LinkedIn in the Sidebar" />
<img style="width:35%;"
src="{static}/images/social-profiles-sidebar-svg-hover-linkedin.png" alt="Hover over LinkedIn in the Sidebar" />

Following image shows what each of them look like when user hovers over them.
Following image shows these icons in color.

<img style="width: 177px; height: 205px"
src="{static}/images/social-profiles-sidebar-hover-2019-08-12.png" alt="Hover over all Social
Profiles in the Sidebar" />
<img style="width:35%;"
src="{static}/images/social-profiles-sidebar-svg-hover.png" alt="Social Profiles in color" />

These SVG icons are [Super Tiny](https://github.com/edent/SuperTinyIcons). Most of them have sizes less than 500 bytes, and none of them exceeds 1 K bytes in size. This gives you increased website speed.

Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions static/css/elegant.css
Original file line number Diff line number Diff line change
Expand Up @@ -306,15 +306,20 @@ ul.articles-timeline .previous-article {
}
div#sidebar-social-link a svg {
filter: saturate(0%) brightness(0.7);
height: 30px;
width: 30px;
margin-right: 4px;
height: 20px;
width: 20px;
margin-right: 3px;
transition: all 0.2s ease-in-out;
z-index: 0;
position: relative;
}
div#sidebar-social-link a {
text-decoration: none;
}
div#sidebar-social-link a svg:hover {
filter: none;
transform: scale(2.5);
z-index: 1;
}
ul.multi-parts-list a {
color: black;
Expand Down

0 comments on commit 4e0dc41

Please sign in to comment.