Skip to content
Permalink
Browse files

fix(social): reduce icon size in the sidebar

fix #490
  • Loading branch information
talha131 committed Dec 1, 2019
1 parent 19af5e3 commit 4e0dc415c114bb07304605c9b1c153e372f1fa4b
@@ -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.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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;

0 comments on commit 4e0dc41

Please sign in to comment.
You can’t perform that action at this time.