25

As you can see, Ask Different community site got a slight design update today. I have moved site's CSS to a newly refactor LESS system, so it's easier for us to fix SE network CSS bugs globally going on forward. Also I've updated site's logo and icons to SVG for retina support. Visually it should "feel" the same as the old site, but with updated Apple aesthetics(yes, I did flatten all the things). I have retired Lucida Sans for Helvetica.

This update should retro-actively fix most of the old CSS bugs. If you see any new ones, or old ones not being fixed, please let me know!

P.S. I can't believe it's been over 4 years since AD launched. Here's the original design when the site first launched.

25
  • 7
    Awesome! Thank you! Looks snazzy.
    – Ian C.
    Mar 9, 2015 at 6:19
  • 4
    That's great, but I noticed that with the new updates, the designs of sites become less and less unique. Now the fonts are the same everywhere, the vote buttons, favorite button and The Checkmark are the same everywhere, only color differs in active state. Elements are now aligned with no difference on all the new sites and the sites with recently updated design. The only major difference between those sites is logo and, in some places, color scheme (and metas are almost indistinguishable, if I can't see the logo). Ah yes. Tag designs also differ a bit.
    – nicael
    Mar 9, 2015 at 9:24
  • But I love the new top bar on main site :)
    – nicael
    Mar 9, 2015 at 9:28
  • 1
    @nicael We only make visual changes when needed, sites should still retain their individual style. We did standardize icons when they don't affect the overall look and feel of the site. In the case of Ask Different, I used Helvetica because that's what Apple uses for the latest OS now. Some elements are more standardize now, e.g. tags and badges because they'd reduce layout issues across the network.
    – Jin
    Mar 9, 2015 at 11:08
  • Looks great!!!!
    – nuc
    Mar 9, 2015 at 14:38
  • 2
    Can we get the new profile page update as well?
    – bmike Mod
    Mar 9, 2015 at 18:15
  • 1
    @bmike it's coming soon!
    – Jin
    Mar 9, 2015 at 18:34
  • Perfect. I've hit a bunch of the edge cases - no glitches at all I've noticed in the revamp / vectorization. I'm really, really loving the changes. Thanks again to all who worked on it.
    – bmike Mod
    Mar 9, 2015 at 18:38
  • @bmike new LESS structure was launched on Stack Overflow first, so I had probably hundreds of thousands of SO users QAing for you guys :)
    – Jin
    Mar 9, 2015 at 19:15
  • @jin Even the odd mod tools pages look solid. Bigger crew of eyes there too I suppose.
    – bmike Mod
    Mar 9, 2015 at 19:32
  • 1
    How can you make the font thicker it is too thin to read comfortably - the text in the comment entry is readable
    – mmmmmm
    Mar 9, 2015 at 19:55
  • @Mark which font are you referring to? the font in the question and answer body?
    – Jin
    Mar 9, 2015 at 20:03
  • @Jin Yes and the question titles all appear to be overwhelmed by the white background - now if we could have a page with new and old on at the same time I could work out what the actual issue is
    – mmmmmm
    Mar 9, 2015 at 20:05
  • 3
    Answers with score -3 or lower aren't being "muted" anymore because there's no .downvoted-answer selector in the new CSS. Is this intentional?
    – epimorphic
    Mar 15, 2015 at 20:58
  • 4
    @epimorphic no it's not. it's a bug I'll fix.
    – Jin
    Mar 15, 2015 at 21:02

4 Answers 4

Reset to default
3

@mark

create a user style sheet with for example:

tr.comment>td {

    font: 16px Lucida Sans !important; 

}

---------- Or

tr.comment>td {

    font: 15px Helvetica !important; 

}

Save the file ( plain text) it as stackComments.css

And then in the Safari preferences -> Advanced:

Use the style sheet drop down option 'other' to navigate and select your style sheet.

This should change the font size and font to whatever you set it to.

1
  • I ended up using the Stylish extension for Safari to add styles - now to learn some CSS - at least I have the titles and comments readable
    – mmmmmm
    Mar 10, 2015 at 20:59
2

Jin - please see if the line spacing can be harmonized on this post (and those like it). I think the edit icon introduced a gap in the last line.

https://apple.stackexchange.com/a/180232/5472

enter image description here

Safari Version 8.0.5 (10600.5.17) - Retina MBP in closed clamshell mode to cinema display (non retina / non big-k)

3
  • It's not the edited icon, it's your diamond that's causing that.
    – grg Mod
    Apr 11, 2015 at 10:01
  • @grgarside Awesome catch. I believe it's both since my diamond alone doesn't make the gap tooth layout.
    – bmike Mod
    Apr 11, 2015 at 17:28
  • It is just the diamond?
    – grg Mod
    Apr 18, 2015 at 12:59
1

The newsletter ad looks a bit outdated now.

full ad

The image at time of posting

http://cdn.sstatic.net/apple/img/newsletter-ad.png

4
  • The new one is up. I think the old newsletter ad background image you're seeing is browser cached.
    – Jin
    Mar 10, 2015 at 20:31
  • 3
    @Jin — It's not browser cached, but it may be the CDN (not quite an expert on that). The last modified header is from Friday March 6 but it still gives me the old image. I also tried from 2 different internet connections, neither works.
    – 0942v8653
    Mar 10, 2015 at 21:14
  • 1
    are you still seeing the old one? you can try this link to cache break it: cdn.sstatic.net/apple/img/newsletter-ad.png?v=2
    – Jin
    Mar 11, 2015 at 13:40
  • 2
    @Jin: Looks like it's still cached on the CDN. But ?v=2 or anything else with a query string will work for curl and browsers.
    – 0942v8653
    Mar 11, 2015 at 19:41
0

Have to say - I didn't like the new font at all to start with.

Couple of weeks go by & now all the other SE sites actually look a bit fat & bold by comparison.

Nice job - seeing further than I did initially ;-)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .