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.
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.
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.
* Put news and blogs up front.
* Use 30 days as the cutoff for everything, consistently.
* Allow columns to collapse. Hopefully this is the start of a nicer
view on mobile.
* Reduce shading.
Due to confusion about "members" and "supporters", we want at least the
menu navigation to not use the phrase "members" since some Supporters
expect that to refer to a type of donor.
While we will not be rebranding "member projects" fully at this time, we
want to favor the term projects.
A few additional changes, in particular moving files from members/ ->
projects/ directory will be needed in next commit.
Text is not dislpayed correctly with newer browsers, such as Firefox 49,
because of CSS color values. In current browsers the four digit values
are discarded as invalid CSS. Browsers are adding support for RGBA as a
valid CSS color value.
https://github.com/webcompat/web-bugs/issues/2628
[0d89044: Replace gradient images with CSS gradients.] replaced gradient
images with CSS gradients but in doing so changed some of them from
light blue to gold. Change the colours to correct ones where necessary.
Because #logobutton had a fixed width, browser window narrower than 933
pixels resulted in an unnecessary horizontal scroll bar. Fix that by
using a dynamic 100% width which results in the header image being
automatically clipped as necessary.
To avoid clipping the tree and the text though, include min-width so
that very narrow windows result in a horizontal scroll bar so the whole
name can be seen.
Furthermore, simplify the markup by removing wrapper DIV and SPAN
elements which weren’t really necessary. As a consequence of that
change, the whole top of the page is now a link to the homepage (i.e.
‘/’). Prior to this change, the link wasn’t clickable.
In this situation:
<body class="conservancy-blog">
...
<video>
it turned out that this CSS:
body.conservancy-blog video {}
Did not apply.
So, this adds a hack to force the issue.
