Fix bugs on narrow screens

[tripu]

Fixes #35 (all items).

It would address #44 too, if my proposal (https://github.com/w3c/tr-pages/issues/44#issuecomment-373705510) is accepted instead.

@deniak, item no. 4 (strip of white at the right-hand side) was caused by a combination of factors:

• A spec title containing   and forcing a line to go beyond its boundaries (I replaced it with a normal space; see diff of index.html).
• Rules ::after used to append the maturity pill.

To solve the latter, I've changed how maturities are shown. That requires a change in index.html.

From:

<h2 class="ProposedEditedRecommendation">
    <a href="https://www.w3.org/TR/2016/PER-vibration-20160818/"
        title="Latest draft of Vibration API formally approved by the group">
        Vibration API
    </a>
</h2>

To:

<div class="profile">PER</div>
<h2>
    <a href="https://www.w3.org/TR/2016/PER-vibration-20160818/"
        title="Latest draft of Vibration API formally approved by the group">
        Vibration API
    </a>
</h2>          

Is that feasible? (I have made the change in the first 4 specs only, for testing. You can check those.)

---

Wide screen, before:

Wide screen, after:

Narrow screen, before:

Narrow screen, after:

[tripu]

@tanyeah, @deniak: that last commit should address the two issues we mentioned today. @deniak, I tested with the same width you used (375px). This should be ready to be merged now.

[tripu]

Merging myself, having discussed with @deniak just now.