Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Reduce size of new SVG icons #490

Open
AWegnerGitHub opened this issue Aug 15, 2019 · 11 comments
Assignees
Labels
Milestone

Comments

@AWegnerGitHub
Copy link
Contributor

@AWegnerGitHub AWegnerGitHub commented Aug 15, 2019

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: New Icon Size

Old: Old Icon Size


New: New Lightbulb

Old: Old Lightbulb


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:

Like this post

@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 17, 2019

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.

@talha131 talha131 closed this Aug 17, 2019
@talha131 talha131 added this to the 2019 - Q3 milestone Aug 17, 2019
@talha131 talha131 self-assigned this Aug 17, 2019
@AWegnerGitHub

This comment has been minimized.

Copy link
Contributor Author

@AWegnerGitHub AWegnerGitHub commented Aug 19, 2019

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 added a commit that referenced this issue Aug 19, 2019
Update #490
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 19, 2019

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

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 19, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

@AWegnerGitHub AWegnerGitHub commented Aug 19, 2019

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 added a commit that referenced this issue Aug 21, 2019
Update #490
talha131 added a commit that referenced this issue Aug 21, 2019
Fix #490
talha131 added a commit that referenced this issue Aug 21, 2019
Fix #490
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 21, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@AWegnerGitHub AWegnerGitHub commented Aug 22, 2019

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

talha131 pushed a commit that referenced this issue Aug 22, 2019
# [4.0.0](V3.2.0...V4.0.0) (2019-08-22)

### Bug Fixes

* **admonition:** an artifact in border behind the title ([88113c3](88113c3))
* **admonition:** reduce border radius to match radii of other components ([de08d20](de08d20)), closes [#490](#490)
* **admonition:** remove box shadow ([d059db8](d059db8)), closes [#490](#490)
* **admonition:** remove text-shadow from heading ([1c889da](1c889da)), closes [#490](#490)
* **clean URL:** default URL of categories, tags and archives fails on some servers ([3c7df6a](3c7df6a)), closes [#280](#280) [#276](#276)
* **comments:** W3C validation errors ([76a1f26](76a1f26))
* **disqus:** remove SITEURL condition to show Disqus comments section ([753d5a5](753d5a5))
* **lang:** do not override default value of DEFAULT_LANG set by Pelican ([d6c60c2](d6c60c2))
* **social:** reduce icon sizes in the sidebar ([c769ba3](c769ba3))
* **social:** use nofollow for social links in the sidebar ([50cff87](50cff87))
* **social:** W3C validation error ([ec4521e](ec4521e))
* **table:** reduce border radius to match radii of other components ([7eaaa96](7eaaa96))
* **w3c validation:** remove incorrect usage of article tag ([e8231e0](e8231e0)), closes [#251](#251)
* **w3c validation:** remove obsolete charset attribute ([8deb285](8deb285)), closes [#251](#251)
* **w3c validation:** remove redundant article tag ([d07c27e](d07c27e)), closes [#251](#251)
* **w3c validation:** remove redundant sections without heading ([df9221f](df9221f)), closes [#251](#251)
* **w3c validation:** remove type and language attributes ([b700224](b700224)), closes [#251](#251)
* **w3c validation:** update CSS rules ([0b78d46](0b78d46)), closes [#251](#251)

### Features

* **404:** auto fill search box with URL fragment that was not found ([c0a7f47](c0a7f47))
* **admonition:** add box shadow ([246f826](246f826))
* **admonition:** border color should match the title color ([1adadbe](1adadbe))
* **admonition:** increase contrast of title ([7fb82cc](7fb82cc))
* **admonition:** use svg image instead of font-awesome icon ([e7c4029](e7c4029)), closes [#487](#487)
* **clean url:** support clean URL for search page ([088791e](088791e))
* **comments:** add support for utterances comment system ([a2151cc](a2151cc)), closes [#288](#288)
* **quotes:** improve style and remove font-awesome for quote icon ([9ef3ac8](9ef3ac8)), closes [#487](#487)
* **social:** add icons for 7 more websites ([8dcf8fa](8dcf8fa)), closes [#494](#494)
* **social:** use svg icons instead of font-awesome ([19f458b](19f458b))
* **table:** add style rule to make tables pop out ([6a8500b](6a8500b)), closes [#440](#440)

### Performance Improvements

* **admonition:** add attributes to svg iamges ([a740a60](a740a60))
* **requests:** remove font awesome ([7c20145](7c20145)), closes [#487](#487)

### BREAKING CHANGES

* **requests:** We have removed font awesome. Now we use svg images for all icons. This will result
in one less web request, which in turn will improve your websites performance.
* **social:** Style customization and configuration of social icons
in the sidebar has changed.

New icons have better colors and bigger sizes.
* **clean URL:** To enable clean URLs for tags, categories and archives,
first configure your server to support clean URLs. Then set `TAGS_URL`,
`CATEGORIES_URL` and `ARCHIVES_URL` to `"tags"`, `"categories"` and
`"archives"` respectively.
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 22, 2019

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@talha131 talha131 added the released label Aug 22, 2019
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 22, 2019

@AWegnerGitHub What do you think of it?

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

@talha131 talha131 reopened this Aug 22, 2019
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Aug 23, 2019

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.

@talha131 talha131 modified the milestones: 2019 - Q3, 2019 - Q4 Sep 15, 2019
@talha131 talha131 referenced this issue Sep 29, 2019
0 of 8 tasks complete
@calfzhou

This comment has been minimized.

Copy link
Contributor

@calfzhou calfzhou commented Oct 7, 2019

I prefer 20x20:

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.