hoodiehq / hoodie-css

Framework for all hoodie sites
http://hoodiehq.github.io/hoodie-css/
31 stars 13 forks source link

Add link states #12

Closed NickColley closed 8 years ago

NickColley commented 9 years ago

Not sure about this one, because the links are styled by a parent theme class all non themed links need overriding.

Suggestion would be to make classes with lower specificity e.g. .link-green but would require a ton of markup change :cry:

329 B increase in file size:

gzip-size src/css/prod/hoodie.min.pref.css | pretty-bytes
6.88 kB -> 7.21 kB
varjmes commented 9 years ago

Heya. Could we get some images/.gifs of the on/off (not focused, focused) states? I find it helps other people to review who may not be CSS-confident. Also maybe a little explanation why we want these states? :)

varjmes commented 9 years ago

Also, did you check the contrast ratios and such? Not to say you didn't (it's late here, I haven't checked yet), but just want to double check as you said 'subtle' but we don't want them to be too subtle.

NickColley commented 9 years ago

Yeah I can try and get the gifs for you, I normally post screenshots for this kind of thing but don't have recording set up at the moment.

In terms of contrast, there's a lot of contrast issues in the site and I think that should be dealt with separately.

The changes here generally darken all the colours with the exception of the white on a dark background.

varjmes commented 9 years ago

@nickcolley for .gifs, Licecap (link) is great. Small program, makes the .gif, saves the .gif. If you can't do .gifs, screenshots are defo cool. I agree that there are contrast issues but if we make sure the link hover/active states are actually noticeable, it's a good start. We don't want to add hover states that we'd have to change all over again. :)

NickColley commented 9 years ago

1 2

Ended up using byzanz (http://www.unixmen.com/make-animated-gif-screencasts-easily-byzanz/)

varjmes commented 9 years ago

I fear these might be a little too subtle. Id need to inspect it a little more (havebt had a chance to see with my own eyes yet). Though they do look very cool. I like them. :) On 12 Aug 2015 19:51, "Nick Colley" notifications@github.com wrote:

[image: 1] https://cloud.githubusercontent.com/assets/2445413/9233516/708a8108-412b-11e5-80a6-fedee60559f9.gif [image: 2] https://cloud.githubusercontent.com/assets/2445413/9233517/708b7e82-412b-11e5-9866-df758a85f8d6.gif

Ended up using byzanz ( http://www.unixmen.com/make-animated-gif-screencasts-easily-byzanz/)

— Reply to this email directly or view it on GitHub https://github.com/hoodiehq/hoodie-css/pull/12#issuecomment-130410367.

NickColley commented 8 years ago

@Charlotteis agree they could be more distinctive, do you want to open this one up for someone else? (Don't like open PRs :P)

varjmes commented 8 years ago

I don't think this will be touched until the CSS team finish their work.

varjmes commented 8 years ago

@lewiscowper & @verpixelt to confirm tho

verpixelt commented 8 years ago

Imho it doesn't make much sense to work on that before the refactoring.

NickColley commented 8 years ago

Okay, let me know if you need any help refactoring :+1: