guardian/frontend — pull request #7106 by robertberry (2014-11-13 16:27:56+00:00)
Title: Tag pages revamp

WARNING: I wrote CSS and HTML! Bad things happen when I do this! CC @phamann @ironsidevsquincy

## Date containers

Previously we had one large container that contained all the stories for the tag page bunched up together. They now break out into containers, either for a given day or given month, depending on the frequency of content published during the time frame. This gives you perspective on how a topic is reported on over time.

Take as an example the Tour De France 2014. Our recent reporting is sparse (obviously) so is grouped monthly, but then as you move backwards days begin to pop out into their own containers:

![screen shot 2014-11-13 at 16 26 16](https://cloud.githubusercontent.com/assets/1001642/5031907/d875ac08-6b51-11e4-9404-f4db11108e24.png)

## Headers

I had to rewrite index page headers. They used to be part of the first container and would occupy the left column on wider breakpoints. This doesn't work anymore because we have no guarantee that the first container will be spacious enough for the title, the image, the description, and the date of the container.

@sammorrisdesign and Alex Breuer came up with the following solution, which has the header occupy the full width of the screen regardless of breakpoint:

![screen shot 2014-11-13 at 16 16 40](https://cloud.githubusercontent.com/assets/1001642/5031728/bfff41bc-6b50-11e4-9c7e-3e3459d6c69e.png)

![screen shot 2014-11-13 at 16 17 04](https://cloud.githubusercontent.com/assets/1001642/5031738/d3260b04-6b50-11e4-8185-83f8dddb3fee.png)

![screen shot 2014-11-13 at 16 17 13](https://cloud.githubusercontent.com/assets/1001642/5031742/d922cc36-6b50-11e4-8300-15b72ae1ca3f.png)

![screen shot 2014-11-13 at 16 17 32](https://cloud.githubusercontent.com/assets/1001642/5031755/ee8c0cea-6b50-11e4-860b-889486b7c89b.png)

![screen shot 2014-11-13 at 16 17 43](https://cloud.githubusercontent.com/assets/1001642/5031760/f49e3216-6b50-11e4-97a1-ff7172624a8b.png)