Homepage and interior styles refresh work

[benlk]

This is a WIP, placeholder request submitted to start the review process.

Changes

Upgrades grunt-contrib-less; please run npm install

Redoes homepage layout:

• new styles for Homepage Alert
• span8 | span4 split, with custom styles for the image widget in the span8 and text widget in the span4
• span4 | span4 | span4 Homepage Middle widget area, with custom styles for a INN Next Event Widget in the first position
• (currently WIP) INN Next Event widget, showing the first The Events Calendar event
• new footer, replacing the 1col option with a two-column span4 | span8 design with the single widget area in the span8, with styles in less/common.less so they can be picked up by theme revamps for the next refresh of INN sites. This also includes an all-white INN logo, powered by the new file inc/common.php and its plugged pluggable function inn_logo().

Wireframes that this is based on:

• mobile: https://www.dropbox.com/s/bww4wiollngw2dl/Inn-homepage-wireframes-v5-mobile.pdf?dl=0
• desktop: https://www.dropbox.com/s/sp1g37oai24su9h/Inn-homepage-wireframes-v5.pdf?dl=0

Post-deploy changes for inn.org

• replace copyright notice with © Copyright %d, Institute for Nonprofit News
• configure new Main Navigation menu
• configure new Footer Navigation menu
• choose the "1col" footer
• Place widgets
  • Homepage Top Right
    • Image widget using <b> in the description for larger text
  • Homepage Top Left
    • text widget
  • Homepage Middle:
    • Next Event
    • Largo Recent Posts limited to category Announcements and no date
    • From INN Members widget

[benlk]

• Next Event widget: 4h
  • https://theeventscalendar.com/knowledgebase/using-tribe_get_events/
  • can this be something other than "sign up"?
• nav: 2h
  • staging gets nav items from mockup: 15m
  • decrease spacing on narrower desktop/tablet above 768px: 30m
  • can we use the sticky nav on the homepage as the main nav?
    • research: 20m
    • implementation: varies?
    • have we done this before? I think maybe MWEN nope, not MWEN, and it's not a theme option
    • just get sticky nav to show up at a larger breakpoint, above 768
• logo in alert: 1h
  • find the just-logo SVG
  • inline svg in css
• interior pages: 2h
  • font
  • border on 2col, in less/common.less so it gets grabbed by learn.inn.org and others properties
• homepage 3-column section breaks to 1col at 720px, not 600px: 30m

on hold:

• the image widget, words get vertically aligned: 2h
  • ask Julia for help on this, 'cos I'm stuck
  • increase font size and weight

[benlk]

@kaylima The wireframes for the custom "Events" widget specify a "Sign Up" button:

There's no guaranteed field for that in the event creation dialogs, but there is an "Event URL" field. Can we assume that that URL will always be a signup URL if it exists, or should the "Sign Up" text on the button instead be something like "More Info"?

[kaylima]

@benlk "More Info" is fine, thanks!

[benlk]

This also contains commits addressing:

#42
#43