Closed tunetheweb closed 4 years ago
catalinred
commented
4 years ago @bazzadp An easy validation fix would be to transform <div class="decorative-line-center"> into <span class="alt-bg decorative-line"></span> and then add display: block to the selector. This way we could avoid any potential new issue without rewriting the .decorative-line.
Alternatively, we could rewrite the .decorative-line to use CSS pseudo-elements instead.
tunetheweb
commented
4 years ago That could work: https://stackoverflow.com/questions/7524185/can-we-add-a-span-inside-h1-tag
Still think it's clearer to pull this decorative stuff out of the <h1> and <h2> tags though.
rviscomi
commented
4 years ago The decorative line is a vestige of an earlier style implementation. I rewrote it on the chapter/methodology/TOC pages but didn't realize we're still using it on the home page. We should be able to do this style entirely in CSS without the need for additional markup.
catalinred
commented
4 years ago The decorative line is a vestige of an earlier style implementation. I rewrote it on the chapter/methodology/TOC pages but didn't realize we're still using it on the home page. We should be able to do this style entirely in CSS without the need for additional markup.
If that's ok, you could assign me to merge the chapter/methodology/TOC .title and index/homepage's .decorative-line.
I'll also add alt="" as @bazzadp suggested above for the decorative images/
Similar to https://github.com/HTTPArchive/almanac.httparchive.org/issues/309 index.html has the following:
<h1><div class="alt-bg decorative-line"></div><h2><div class="decorative-line-center"></div><h2><div class="decorative-line"></div><h2><div class="decorative-line-center"></div>Divs are not allowed in heading tags. Tried a few fixes but decided to leave to someone with better CSS than me!
Also the following
<img>tags could do withalt=""properties (assuming we're happy with that as these are just decorative):