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.
I was only able to get the site running on my local machine well enough to test the main page. It's possible, based on the filename, that the changes will appear on all Conservancy pages. I'm not sure if that is what is wanted or not. If not, it seems like some more invasive changes would need to be made to the base template so that the form would only appear on the index page.
The form POSTs to a mailman url. Once submitted, the user is redirected to the mailman site with no obvious way (aside from the back button) to return to the main site. This can be fixed by using AJAX to POST the form and report the subscription status back to the user, but it would likely require parsing the mailman html as there doesn't appear to be any real API to mailman.
I tested this in Firefox 11.0 and Chrome 18.0.1025.113 beta.
Several element id's were set to use "padding-bottom: 32767px;" and
"margin-bottom: -32767px;". This caused element targets (such as
http://sfconservancy.org/about/staff/#denver ) to be rendered poorly
in most browsers, by preventing the user from scrolling up. Removing
these lines appears to fix the rendering issue with no side effects
(in limited testing of the Staff page).
This change effectively reverts parts of 450ea2c and ed954b7 as the
32767px values were added in those commits.
