<h1><a href="/">SiteName</a></h1> <style> h1 > a { text-indent: -9999px; text-decoration: none; display: block; width: 100px; height: 50px; background: url(logo.png); } </style>
b0r1s wrote:Sorry AJ that was me being a dick IR is with screen readers seeing it HIDDEN is with display:none so therefore no visibility.
h1{ background:#f00; margin:1%; padding: 1%;} h2{ background:#0f0; margin:2%; padding: 1%;}Do you do that through a script? Seems really hard to work with...
b0r1s wrote:Looking at some of that blue you're either using a CDN, absolute paths or fucking huge filenames for your image files
.mydiv { color: #333; } .mydiv.mymydiv { color: #444; }
b0r1s wrote:No more like [...] And so on I looked back at my CSS file from my Sass file and it seemed overly complex because Sass encourages you to take shortcuts at the creation stage of CSS. This is bloody difficult to write on a phone, but I'll dig out some Sass and it's corresponding CSS to show you what it does tomorrow when I'm with my laptop.
.pullquote { background: url("/img/open-quote") no-repeat 0 0; margin: 80px 0 0 0; padding: 0; p { font-size: 16px; font-weight: $fw_300; margin: 0 0 0 21px; } cite { color: $grey_0; display: block; font-size: $h6_size; font-style: italic; padding: 10px 0 0 21px; strong { color: $dk_orange; font-style: normal; font-weight: $fw_600; } } }To me that is messy and more difficult to debug, if I code it by hand it would be like this:
.pullquote { background: url("/img/open-quote") no-repeat 0 0; margin: 80px 0 0 0; padding: 0; } .pullquote p { font-size: 16px; font-weight: 300; margin: 0 0 0 21px; } .pullquote cite { color: #555; display: block; font-size: 12px; font-style: italic; padding: 10px 0 0 21px; } .pullquote strong { color: #ff7800; font-style: normal; font-weight: 600; }Much easier to read. And seen in context of my editor, even clearer:
It looks like you're new here. If you want to get involved, click one of these buttons!