gittip/www.gittip.com — pull request #1707 by dominic (2013-12-02 03:59:03+00:00)
Title: Refactor responsive styles

I originally started this while looking at https://github.com/gittip/www.gittip.com/issues/1652, but found the entire responsive stylesheet to be a bit of a mess (the first line being "`/* A Special Responsive Hell */`"). I've attempted to bring a little more consistency and usability to the flexible screen experience, as documented below:

---

The responsive layout now provides a larger gutter (5% each side) and enforces a minimum width of 320px (iPhone portrait width - a threshold that no modern smartphone is crossing as far as I'm aware). Device examples below:

Device examples:

### Phones

(Images reduced 50% from retina resolution)

#### Page top

Before:
![ios simulator screen shot dec 1 2013 7 18 44 pm](https://f.cloud.github.com/assets/185645/1652092/87580cce-5b00-11e3-93cc-954ff980895a.png)

After:
![ios simulator screen shot dec 1 2013 7 21 49 pm](https://f.cloud.github.com/assets/185645/1652101/02c2ce58-5b01-11e3-8702-99257a64912b.png)

The top of the page loses the centered icon (which can run into the logged in user's name), increases the hero copy size, and reformats the "Who inspires you?" block to have much larger touch targets.

#### Portraits (#1652)

Mobile layouts reduce the number of visible portraits per section from 4 to 3. Previously, this caused an extra gutter on the homepage as the page contents overflowed the viewport boundaries.

Before:
![ios simulator screen shot dec 1 2013 7 18 26 pm](https://f.cloud.github.com/assets/185645/1652091/874dca98-5b00-11e3-85a1-1ddf99f79159.png)

After:
![ios simulator screen shot dec 1 2013 7 22 26 pm](https://f.cloud.github.com/assets/185645/1652099/02715938-5b01-11e3-8a84-1c25de014bf5.png)

#### Footer

I've made the footer touch friendly, providing full-width, fixed touch targets that don't reflow at various screen sizes.

Before:
![ios simulator screen shot dec 1 2013 7 18 54 pm](https://f.cloud.github.com/assets/185645/1652090/87053904-5b00-11e3-8c27-bbd1c31367a9.png)

After:
![ios simulator screen shot dec 1 2013 7 21 54 pm](https://f.cloud.github.com/assets/185645/1652100/02c07c8e-5b01-11e3-8c5c-0de6a9adc571.png)

---

### Tablets

#### Landscape

Larger tablets (> 900px, so iPads and similarly sized devices) receive the full desktop layout of (3 columns of portraits, 2 columns on a profile page).

Before:
![ios simulator screen shot dec 1 2013 7 44 46 pm](https://f.cloud.github.com/assets/185645/1652152/1d229e74-5b04-11e3-9e77-46fb1ae00197.png)

After:
![ios simulator screen shot dec 1 2013 7 43 38 pm](https://f.cloud.github.com/assets/185645/1652151/1ce65e00-5b04-11e3-84c3-c7255d129c25.png)

---

### Other Changes

Some work has been put into being more Sass-like with our CSS, including breaking out some standard widths into variables and functions, as well as adding the commonly used `clearfix` mixing in place of `

`

---

Remaining issues:

* Charts still break out of the layout causing unsightly gutters.
* Logged in navigation still needs some work at the smallest mobile size:

![image 2013-12-01 at 7 57 54 pm](https://f.cloud.github.com/assets/185645/1652184/f904f5b2-5b05-11e3-9f38-7ab1c24629ac.png)

Thoughts?