Add responsive styles for central.wordcamp.org

[iandunn]

​WordCamp Central wasn't designed to be responsive, but we can make it adapt well enough by just adding some media queries.

[ryelle]

I'm interested and have time to tackle this. Can the theme be open sourced?

[Otto42]

Most of the theme should be available for viewing here:

​http://meta.svn.wordpress.org/sites/trunk/wordcamp.org/public_html/wp-content/themes/

Edit: My mistake. Central is running something else.

[iandunn]

That's on my list, but it needs to be audited and probably cleaned up a bit first. I can't guarantee I'll have time to do that anytime soon, though.

Since it's mostly just adding CSS, one way to do it would be to use a browser extension like Stylebot (chrome) or Stylish (FIrefox) to create custom rules for the site, and then paste those here. If you need any markup changes, just paste those too and I can merge them at the same time.

[samuelsidler]

Since we have someone that wants to work on it, can we get it audited sooner? Seems like it shouldn't be too hard to audit a theme and I bet @ryelle could do some of the clean up along the way. ;)

[nacin]

Audited.

Not vouching for the security of the regular expressions in get_the_link_url() and make_tweets_clickable() methods in functions.php. The former has a fishy character class, and the latter is full of fishy character classes.

wcpt_wordcamp_title() was unescaped in an attribute in a few situations. This is now fixed and live.

Is otherwise good.

[iandunn]

Awesome, thanks. Both of those were dead code, so I just removed them.

[iandunn]

In 842:

Central Theme: Open source the Central theme.

See #565.

[ryelle]

meta-565.diff​ is a large patch :) This has the base style changes, along with some other tweaks. I needed to move the sidebar out of the #container div in a few templates. There's also now a js/navigation.js for the mobile menu toggle.

Details of the style changes:

I grabbed the base of these styles from ​Responsive TwentyTen, and adapted the custom sections as needed.

The header is pretty simple, the menu drops below the logo at "tablet" size, and then switches to a toggle button at 500px. Footer is also straightforward.

For the front page, the slider drops down below the content at tablet size, then disappears at "phone" size. The 3 columns squish a little at tablet size, but drop down to one column at 660px.

Archives, single posts, and single pages keep their sidebars at tablet, but drop to one column, again at 660px.

Single WordCamp pages were trickier, and still a little weird. At tablet they're basically the same, but at smaller sizes the bottom 3 column drops to 2 (website & info side by side), with Past WordCamps below. At phone size they drop to one column. The banner image looks strange at phone size, but that's just how that image is cropped.

[iandunn]

In 848:

Central Theme: Add responsive styles.

Fixes #565
props ryelle

[iandunn]

In 850:

Central Theme: Remove stray character from category template.

See #565

[iandunn]

In 851:

Central Theme: Raise the header z-index.

Previously the sidebar was being stacked above the submenus.

See #565

[iandunn]

In 852:

Central Theme: Add responsive styles for mailing list container.

See #565

[iandunn]

This has been deployed. Thanks Kelly :)