The existing jQuery UI-based fundraising progress bar used a float layout,
making it hard to adapt for mobile use. Given that there is not interactivity,
I've dropped all the JS and switched to a flexbox layout. This works well
because the bar will stretch to fit the text rather than always maintaining its scale.
We've had a report that the sidebars are very distracting,
particularly for the blogs, on smaller screens. This change to the
CSS will cause sidebars to disappear on smaller screens.
A few additional places where the news and press pages were not
properly menu integrated. This fixes various inconsistencies and
missing category and submenu markings in menus.
ourcoverage.html was a reasonable minimal start but not really ready
for production. Make changes necessary to put this into production,
as follows:
* Rename ourcoverage.html to vizio-coverage.html. This is just
Vizio coverage for now.
* Order articles by most in-depth/interesting. Verified this
ordering by consensus with Conservancy staff.
* mailto: link for press coverage on the main inthenews page, but
don't use that on Vizio page; it's unlikely we'll miss any of the
Vizio coverage.
* use — instead of -
* put quotes around article titles.
* Add missing PR Web article
* Switch from <p>'s to <li>'s in vizio-coverage.html
* Fix menu issues. 09a4b02 outlined the issues regarding how to
add items to menu; it does require a CSS change as explained
therein; merely using the right `base_` is not enough
* Improve menu integration. Per PR people's recommendation, the
Vizio stuff that also goes in other areas needs to be placed in
multiple menus.
During the recent improvements made on the website, the menus and
submenu highlighting for selected menus fell into disarray.
Correction requires changes to the CSS and templates both, because
Django doesn't really have a convenient way to set variables in
templates to use to solve this.
There are still a few submenu items highlighting not working even
after this commit. More work needs to be done.
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.
