Feature Request: Reduce size of new SVG icons

[AWegnerGitHub]

The new SVG Icons feel to large. I liked the small icons provided by font-awesome. They were noticeable, but not distractingly large.

Examples:

---

New:

Old:

---

New:

Old:

---

The icons in the admonitions are larger than the text now, whereas previously they were the same size. The icons in the social widgets feel like tablet/phone homepage icons instead of just being small icons like before. The large size feels out of place with the rest of the theme. As an example, the icons in the "Like this post" section feel like the correct size:

[talha131]

Thanks for pointing it out. I was waiting for feedback.

As an example, the icons in the "Like this post" section feel like the correct size:

This is not an icon. It's a unicode character.

The icons in the social widgets feel like tablet/phone homepage icons instead of just being small icons like before.

I have reduced the size.

The icons in the admonitions are larger than the text now, whereas previously they were the same size.

Style has changed. Please have a look.

[AWegnerGitHub]

Regarding the snowflake: I know it's a unicode character, but it's the right size. It matches the size of the text it is near. It's not to large or to small.

Regarding the social icons: I'm not seeing a difference from my original report. They still look large.

Regarding the admonition: If I was to complain about any one thing, it'd be this. I do not like the drop shadow at all. It looks out of place. The rest of the theme is flat. The rounded radius doesn't match that of code blocks. When looking at a code block and an admonition on the same page (ie. here), it doesn't feel right. The admonition also only has rounded corners on the bottom. Every other thing we have is a rounded rectangle. The icons are still larger than the text (look at "Hint" and "Important" to see this most noticeably).

[talha131]

Thank you. Feedback is very necessary.

I do not like the drop shadow at all. It looks out of place

I have removed it.

The rounded radius doesn't match that of code blocks.

Very good point. Actually I matched the radius with that of table. See our table here

https://next.elegant.oncrashreboot.com/tables

I thought I was being consistent.

You are right. Code, table, admonition, everything should have consistent rounded corners. This would not have happened if we were using LESS or PostCSS.

Let me know which radius is better? The one we have for code or the one we have for table? I will make them all match.

The admonition also only has rounded corners on the bottom. Every other thing we have is a rounded rectangle.

That's because admonition have a title bar on the top. My CSS skills failed me (for now), otherwise I wanted to have nail or screw icons on each side of the title.

This is the look I am going for, though it does not exactly illustrate what I have in mind. A banner that is nailed on the top and bottom is curved.

I think it looks good.

The icons are still larger than the text (look at "Hint" and "Important" to see this most noticeably).

That's intentional. A bigger icon with text vertically aligned in the center.

I'm not seeing a difference from my original report. They still look large.

Again intentional for two reasons.

1. Elegant is bland. It's suitable for long-form articles. With these bigger icons and colorful admonition, my intention is to add some color to the otherwise plain website.
2. That's another reason why we moved from font-awesome to SVG. SVG icons can have different color than font-awesome. Whereas font-awesome fonts can only have single color. (Compare Picasa or Flickr icon)
3. More importantly, we have a new SVG icon.

The good thing is automatically changes calendar to the current date. If I make it smaller then month and date becomes illegible.

(I don't know why it does not appear in the hosted next version of the site. I need to look into it).

[talha131]

@Pelican-Elegant/dev guys please let me know what you think. We are very close to next release. It's the right time to share your feedback about the new look.

[AWegnerGitHub]

Let me know which radius is better? The one we have for code or the one we have for table? I will make them all match.

I like the radius on the code blocks.

I have removed it.

I think there is a drop shadow on the admonition title too. Can that be removed too? It'd make the text more crisp.

That's intentional. A bigger icon with text vertically aligned in the center.

That makes sense.

Elegant is bland. It's suitable for long-form articles. With these bigger icons and colorful admonition, my intention is to add some color to the otherwise plain website.

I like the idea of more colors, but the new bold icons draw the eye away from where I want focus to be. Unfortunately, I don't have a suggestion on how best to fix that. Part of the appeal for me is the "blandness". It is elegant (heh, pun intended).

I really like the colors on the admonitions. They are bold and I think they should be. The point of those blocks is to draw attention.

The good thing is automatically changes calendar to the current date.

That's awesome!

What page did you get the screenshot from? I clicked through a few articles and don't see the calendar icon.

[talha131]

I like the radius on the code blocks.

Please check the next branch.

What page did you get the screenshot from? I clicked through a few articles and don't see the calendar icon.

Shot was from local build. Please check the next docs now.

Unfortunately, I don't have a suggestion on how best to fix that.

I agree and understand your POV. Only issue with smaller social icons is that calendar icon becomes illegible. Lets move forward for now. We can always revisit and alter the size. By then hopefully, we will have more feedback.

I think there is a drop shadow on the admonition title too. Can that be removed too? It'd make the text more crisp.

Good catch. I didn't notice it. Please check the next branch.

[AWegnerGitHub]

I like how it looks (minus the size of the icons :) ) The radius look much better now that it's uniform everywhere.

[talha131]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[talha131]

@AWegnerGitHub What do you think of it?

Size is 25px, which I think was the size of font-awesome icons.

[talha131]

Received an email from Github that "Joshua" has commented

Just updated to 4.0.0. The icons seem....a bit big.

The comment is deleted so I assume that icons are not big 😄. Nonetheless, Joshua please let us know your preferred size.

I think a 20 x 20 icon which animates to a bigger size on hover should make everyone happy and restore the previous look and feel of Elegant.

[calfzhou]

I prefer 20x20:

div#sidebar-social-link a svg {
height: 20px;
width: 20px;
}

[talha131]

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀