website Files · www/conservancy/static/css/conservancy-bigscreen.css

Files @ 170aa38bb5c3

Branch filter:

Location: website/www/conservancy/static/css/conservancy-bigscreen.css

170aa38bb5c3 778 B text/css Show Annotation Show as Raw Download as Raw

brett

blog: Headlines clear floats.

This avoids a situation where multiple summaries have floats that stack on
top of each other vertically, which end up getting far away from the actual
text.

In order to make this work, we had to change the styling of #mainContent on
blog pages (and others with a sidebar). Otherwise, headlines with
class="clear" would clear the sidebar as well.

/* "Big screen" means, approximately, bigger than a phone */

.column:nth-child(odd) {
    clear: both;
    float: left;
    width: 49%;
}

.column:nth-child(even) {
    float: right;
    width: 49%;
}

.left {
    float: left;
    margin-right: 1.5em;
}

.right {
    float: right;
    margin-left: 1.5em;
}

.picture {
    width: 30em;
    max-width: 35%;
    padding: .75em;
}

#contractpatch-follow {
    float: left;
    width: 30em;
    margin-right: 1.5em;
    /* Below from .shaded, but we don't want the class on non-big screens. */
    padding: .75em;
    background: #F0FFB8;
}

#contractpatch-follow h2 {
    font-size: large;
}

#contractpatch-blog h3:first-child {
    /* Don't let the first blog headline clear below #contractpatch-follow. */
    clear: right;
}