Retina-fy Icons

[jpdevries]

I noticed icons are now embedded in the CSS, awesome. One question, do you all have higher resolution graphics for the three icons? If so, it's very simple to add retina support using the below media query. Provided the artwork I'd be happy to do it! Could also remake the art, but wanted to ask if higher res versions are available first

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  #epiceditor-utilbar button.epiceditor-toggle-preview-btn {
    background-image:url(data:image/png;base64,...);
    background-size: 30px 30px;
  }

  #epiceditor-utilbar button.epiceditor-toggle-edit-btn {
    background:url(data:image/png;base64,...);
    background-size: 30px 30px;
  }

  #epiceditor-utilbar button.epiceditor-fullscreen-btn {
    background:url(data:image/png;base64,...); 
    background-size: 30px 30px;
  }
}

[Gankra]

Would it be out of the question to just make them into SVGs? They're pretty simple, and it would probably reduce the space they use (and also make them scale from retina to SD trivially).

[OscarGodson]

@sebnitu is the guy who made them. The PSD or AI file might be in the issues somewhere, but I dont have them on me. SVG would probably be best.

@gankro you still have to export SVGs to double the size you want and scale them down to make them retina because Firefox and IE turn them into bitmaps first. Still kinda a pain :\

[Gankra]

Well, that was a funfact that hurt my brain/soul.

[jpdevries]

SVG would certainly be great, but yes there are some complications and it looks like there is some very subtle shading (or my eyes are playing ticks on me) that might be tricky to pull off. Whatever makes them look sharp on my retina screen though gets a 💯

[sebnitu]

@jpdevries Here's the artwork file: http://cl.ly/QByr

Let me know if you need any help with this :)

Edit: the icons in the PSD are vector so you should be able to export them as SVG if you decide to go that route. I don't have any drop-shadows on them, but there is a subtle gradient.

[jpdevries]

you rock! thanks

JP DeVries
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Thursday, July 11, 2013 at 10:13 AM, Sebastian Nitu wrote:

@jpdevries (https://github.com/jpdevries) Here's the artwork file: http://cl.ly/QByr
Let me know if you need any help with this :)

—
Reply to this email directly or view it on GitHub (#265 (comment)).

[OscarGodson]

Merged. Thank you! 🎆