Base typography for Hoverboard child themes

README.md

Default Typography for WordPress

Use this file to set up default responsive typography rules for a WordPress site.

WordPress Aligment Classes

Includes out-of-the-box support for WordPress alignment classes (.aligncenter, .alignleft, .alignright).

Social Media Embeds

Basic support for embedding Twitter, Facebook, and Instagram posts.

typography.less

/*
 * Typography Rules
 *****************************************************************************/

// The .hb-content wrapper is here because I didn’t have this in place before 
// I started designing non-page content, so this is my shameful way of 
// avoiding making all required the adjustments to the rest of the site.

.hb-content {
    // Font and vertical rhythm settings
    @font-color-base: @gray-dark;
    @font-color-light: @gray-light;
    @font-color-dark: @gray-darker;
    @font-size-base: 16px;
    @font-weight-base: 300;
    @font-weight-bold: 700;
    @font-weight-heading: 900;
    @border-color: @font-color-light;
    @vertical-grid-base: @font-size-base*1.375;

    // Allows for images to be a different width than the rest of the column
    @image-width: 110%;
    @image-outer-edge-margin: -5%;
    @image-inner-edge-margin: 25px;

    * { margin: 0; }

    // Sets font sizes and vertical rhythms
    .set-screen-size-rules(@font-size-base);

    @media (min-width: @screen-xs-min) {
        .set-screen-size-rules(@font-size-base*1.125);
    }

    @media (min-width: @screen-md-min) {
        .set-screen-size-rules(@font-size-base*1.25);
    }

    @media (min-width: @screen-lg-min) {
        .set-screen-size-rules(@font-size-base*1.375);
    }

    // Sets defaults that aren’t size-sensitive
    h1,h2,h3,h4,h5,h6,p,li {
        text-rendering: optimizeLegibility;
    }

    h1,h2,h3,h4,h5,h6 {
        font-weight: @font-weight-heading;
    }

    p,li {
        color: @font-color-base;
        font-weight: @font-weight-base;
    }

    .lead p {
        color: @font-color-dark;
    }

    .wp-caption-text {
        color: @font-color-light;
    }

    strong,b {
        color: @font-color-dark;
        font-weight: @font-weight-bold;
    }

    blockquote {
        position: relative;
        margin-left: @image-outer-edge-margin;
        margin-right: @image-outer-edge-margin;
        padding: @vertical-grid-base;
        border: none;

        >* {
            position: relative;
            z-index: 10;
        }

        &:before {
            content: '\201c';
            position: absolute;
            top: 0; left: 0;
            color: @gray-lighter;
            font-size: @font-size-base*3;
            font-weight: @font-weight-heading;
            z-index: 1;
        }

        p {
            font-style: italic;
        }

        small,strong:only-child {
            display: block;
            color: @font-color-light;
            text-align: right;

            &:before { content: '– '; }
        }
    }

    // Uses !important to override Twitter’s inline styles
    iframe.twitter-tweet {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .fb_iframe_widget {
        display: block;
        text-align: center;
    }

    // WordPress-specific alignment & caption styles
    img {
        .img-responsive;
        width: 100%;
        height: auto;
        border: 1px solid @border-color;
    }

    .wp-caption,.wp-caption[style] {
        max-width: 100%;
        width: 100% !important; // WordPress adds inline styles
    }

    @media (min-width: @screen-md-min) {
        img.aligncenter,.wp-caption.aligncenter {
            width: @image-width !important; // Overrides inline styles
            max-width: @image-width;
            margin-left: @image-outer-edge-margin;
            margin-right: @image-outer-edge-margin;
        }

        .alignleft,.alignright {
            &,&.wp-caption {
                max-width: 40%;
                margin-bottom: @image-inner-edge-margin;
            }
        }

        .alignright,.wp-caption.alignright {
            float: right;
            margin-left: @image-inner-edge-margin;
            margin-right: @image-outer-edge-margin;

            .wp-caption-text {
                text-align: right;
            }
        }

        .alignleft,.wp-caption.alignleft {
            float: left;
            margin-left: @image-outer-edge-margin;
            margin-right: @image-inner-edge-margin;
        }
    }
}

// Mixins for typography
.set-screen-size-rules( @font-size ) {
    @vertical-grid-base: @font-size * 1.375;

    *+* { margin-top: @vertical-grid-base*.75; }

    // Headings look better with a little additional top margin
    h1,h2,h3,h4,h5,h6 {
        &:not(:first-child) {
            margin-top: @vertical-grid-base*1.5;
        }
    }

    // Overrides inline margins
    iframe.twitter-tweet,.instagram-media[style] {
        margin-top: @vertical-grid-base*.75 !important;
    }

    .heading-sizes(6, @font-size);

    p,li {
        font-size: @font-size;
        font-weight: @font-weight-base;
        line-height: @vertical-grid-base;

        >img {
            margin-bottom: @vertical-grid-base*.75;
        }
    }

    li {
        margin-top: @vertical-grid-base*.25; 
    }

    .lead p,blockquote p {
        font-size: @font-size*1.125;
        line-height: @vertical-grid-base*1.125;
    }

    blockquote {
        strong:only-child,small {
            font-size: @font-size*.875;
        }
    }

    .wp-caption-text {
        margin-top: @vertical-grid-base*.25;
        font-size: @font-size*.625;
        line-height: @vertical-grid-base*.5;
    }
}

// Loops through heading declarations and sets styles
.heading-sizes(@number, @font-size, @i: 1) when (@i =< @number) {
    h@{i} {
        @heading-font-size: @font-size + (@font-size / @i);
        font-size: @heading-font-size;
        .line-height(@heading-font-size);
    }

    .heading-sizes(@number, @font-size, (@i + 1));
}

.line-height(@font-size) when (@font-size >= @vertical-grid-base*1.25) {
    line-height: @vertical-grid-base*1.5;
}

.line-height(@font-size) 
        when (@font-size >= @vertical-grid-base) 
        and (@font-size < @vertical-grid-base*1.25) {
    line-height: @vertical-grid-base*1.25;
}

.line-height(@font-size) when (@font-size < @vertical-grid-base) {
    line-height: @vertical-grid-base;
}