Improve WordPress Image Behavior on Small Screens

[salcode]

Currently, the .alignleft and .alignright classes rendering on narrow screens are often sub-optimal.

On a recent project I retooled css/sass/supporting/wordpress-image.scss as follows. I think we should consider updating this file to be like this by default.

.alignleft,
.alignright,
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: $screen-md-min) {
    .alignleft {
        float: left;
    }

    .alignright {
        float: right;
    }

    .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    img.alignleft {
        margin: 5px 20px 5px 0;
    }

    .wp-caption.alignleft {
        margin: 5px 10px 5px 0;
    }

    img.alignright {
        margin: 5px 0 5px 20px;
    }

    .wp-caption.alignright {
        margin: 5px 0 5px 10px;
    }

    img.aligncenter {
        margin: 5px auto;
    }

    img.alignnone {
        margin: 5px 0;
    }
}

.wp-caption .wp-caption-text,
.entry-caption, .gallery-caption {
    color: $galleryCaptionColor;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
}

img.wp-smiley,
.rsswidget img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

.wp-caption.alignleft + ul,
.wp-caption.alignleft + ol  {
    list-style-position: inside;
}

[bryanwillis]

Looks good to me.

Not sure if you saw my other PR, but we should also be adding the rest of the wordpress generated classes as well. Most importantly for screen reader classes so we can support genesis-accessibility.

We could either put it in a separate file or to keep it simple just put it in with this since it's pretty much all that's missing from the generated classes page, and then possibly rename the file to wp-core or maybe even wordpress-generated-classes.scss to be inline with with the codex page slug.

#139