.. even though you havent’t yet hovered over the link.
This change corrects that behavior. Suggested by mina86:
<mina86> so when you hover over the LI the link changes background even though
you havent’t yet hovered over the link
<mina86> #container #sidebar li:hover a { background: #577632; color: #fff; }
<mina86> s/li:hover a/li a:hover/ would be IMO better
This changes the hard-coded style for what I'm calling the
content-with-donate-sidebar. The advantage of not hard-coding style are
obvious, but I'm doing this now rather than later so that I can add
changes to the CSS that causes the width to extend to 100% on smaller
screen media when the donate bar disappears (the latter of which is
already implemented).
When we have both dt's and the donate-sidebar floating around, things
get tight. Perhaps there is a better solution than this (e.g., can you
set the @media conditional on there being a donate-sidebar at all?), but
this should be a reasonable hack to fix the problem.
Set the min-width for the left-floating dt's to 550px, so that small
screens just get everything in one column.
Note that the formatting previously used is now moved purely to @media,
which I don't know how that will impact browsers that don't support
@media in CSS, but OTOH, I believe the graceful degradation is done
correctly here.
This is accomplished by three key changes:
* use em rather than px sizes, so that font changes are accomodated.
* Add a margin to the dt.
* center the text in the dt's rather than right align.
Sidebar currently gets bottom cut off when your browser height is too
small. This URL seems to indicate a fix. I don't have time to do it
now, but wanted to save it as a note to do later.
This CSS, which I discovered from extensive research online, should work
to create a bulleted list with the bullets being the heart-shaped
Conservancy logo.
The donate-sidebar overlaps with text on small screens. This problem is
corrected herein by using @media for 500px screens to remove display of
the sidebar.
