Due to the varying types of layouts used and the short time-frame the best
option seems to set a max-width etc. around the "outercontent" block. For now
this means we can't do "full bleed" body content, but that's not currently used
anyway.
Uses a combination of CSS changes and Tachyons classes to implement the design.
Adds the non-minified Tachyons CSS library itself and SVG icons from Font Awesome.
When one sponsor has a logo, and the next one doesn't, it looks like
the textual name of that sponsor is the sponsor above it. This bit
of CSS corrects that problem.
I pulled this from the `blog-left` style I used to use in blog posts
and created a new style called picture-small. On smaller screen
real estate, Tony's picture was ultimately too big.
I wrap the entire section that has material that can be expanded in a
div with class `expandable-section`. Once doing so, if you provide an
anchor with the class of `expander`, that anchor will be created with
text in the `data-expand-link-text` attribute.
I've also added some CSS to make the link look a certain way, for
good measure.
170aa38bb5 fixed one bug but added another:
#mainContent would always be the max-width of 1000px. If the user's window
wasn't wide enough to accommodate that alongside the sidebar, it would be
rendered below the sidebar.
Fix that by using positioning instead of floats, so #mainContent can have a
flexible width.
This makes it easier to keep baseline alignment between labels and their
respective inputs. Declaring `margin-left: 51%;` for the post-input notes
is not exactly what we want, but it's much closer and less troublesome than
dealing with the vertical alignment of labels otherwise.
This commit keeps the presentation basically the same, it just moves
presentation rules out of HTML and into CSS. It's not pixel-perfect but
pretty close.
The rationale given in the comments for these rules no longer applies: there
are no divs with class column or conservancy-blog on any pages. Meanwhile,
they're causing unwanted styling: we started using the column class on the
front page for two-column layout, and the videos are appearing smaller than
desired there. Just remove these.
This avoids a situation where multiple summaries have floats that stack on
top of each other vertically, which end up getting far away from the actual
text.
In order to make this work, we had to change the styling of #mainContent on
blog pages (and others with a sidebar). Otherwise, headlines with
class="clear" would clear the sidebar as well.
