bettertext.less

/*! bettertext.css v2.0.4 | MIT License | github.com/paulradzkov/bettertext.css */

.bettertext-settings() {

    //settings
    @fz: 16px;                         // default font-size in pixels
    @rythm: 24px;                      // vertical rythm = line-height in pixels
    @fz-small: 12px;                   // smaller font-size (px)
    @linel: 50rem;                     // max-width for text (em or rem)
    @font-body: sans-serif;            // body
    @font-headers: sans-serif;         // headers
    @font-code: monospace, monospace;  // code (duplication is intentional)
    @scale1: 1.125;                    // header size multiplier for small screens
    @scale2: 1.250;                    // header size multiplier for large screens

    // margins for body, articles and sections
    @space-around: ~"calc(24px + 4vh) calc(10px + 4vw)";

    // breakpoint to switch from 'mobile' to 'desktop'
    @bettertext-breakpoint: ~"(min-width: 768px)";

}

.bettertext-calculations() {

    //calculations
    // you almost never need to edit below

    // one rem is 16px by default
    @onerem: 16px;

    // base font-size in ems
    @fz-ems: unit(((round( @onerem)) / @fz), em);

    // unitless line-height
    @lh: unit((@rythm / @fz));

    // margins for paragraphs, lists and other tags
    @m-default: unit(@lh, em);

    // small font-size in ems
    @fz-small-ems:  unit(((round( @fz-small)) / @fz), em);

    //headers size calculations for small screens
    @h1-fz: unit(((round( @fz * pow(@scale1, 4))) / @fz), em);
    @h2-fz: unit(((round( @fz * pow(@scale1, 3))) / @fz), em);
    @h3-fz: unit(((round( @fz * pow(@scale1, 2))) / @fz), em);
    @h4-fz: unit(((round( @fz * pow(@scale1, 1))) / @fz), em);
    @h5-fz: unit(((round( @fz * pow(@scale1, 0))) / @fz), em);
    @h6-fz: @fz-small-ems;

    //headers size calculations for large screens
    @h1-l-fz: unit(((round( @fz * pow(@scale2, 4))) / @fz), em);
    @h2-l-fz: unit(((round( @fz * pow(@scale2, 3))) / @fz), em);
    @h3-l-fz: unit(((round( @fz * pow(@scale2, 2))) / @fz), em);
    @h4-l-fz: unit(((round( @fz * pow(@scale2, 1))) / @fz), em);

    //headers lihe-height
    @h1-lh: 1.1;
    @h2-lh: 1.2;
    @h3-lh: 1.3;
    @h4-lh: 1.4;
    @h5-lh: unit((@rythm / @fz));
    @h6-lh: unit((@rythm / @fz-small));

    //headers margin-top
    @h1-mt: unit((@lh / @h1-fz * 3.5), em);
    @h2-mt: unit((@lh / @h2-fz * 3),   em);
    @h3-mt: unit((@lh / @h3-fz * 2.5), em);
    @h4-mt: unit((@lh / @h4-fz * 2),   em);
    @h5-mt: unit((@lh / @h5-fz * 1.5), em);
    @h6-mt: unit((@lh / @h6-fz * 1),   em);

    //headers margin-top for large screens
    @h1-l-mt: unit((@lh / @h1-l-fz * 5), em);
    @h2-l-mt: unit((@lh / @h2-l-fz * 4), em);
    @h3-l-mt: unit((@lh / @h3-l-fz * 3), em);
    @h4-l-mt: unit((@lh / @h4-l-fz * 2), em);

    //headers margin-bottom
    @h1-mb: unit((@lh / @h1-fz), em);
    @h2-mb: unit((@lh / @h2-fz), em);
    @h3-mb: unit((@lh / @h3-fz), em);
    @h4-mb: unit((@lh / @h4-fz), em);
    @h5-mb: unit((@lh / @h5-fz), em);
    @h6-mb: 0;

    //headers margin-bottom for large screens
    @h1-l-mb: unit((@lh / @h1-l-fz), em);
    @h2-l-mb: unit((@lh / @h2-l-fz), em);
    @h3-l-mb: unit((@lh / @h3-l-fz), em);
    @h4-l-mb: unit((@lh / @h4-l-fz), em);

    //double headers margin-top
    @h1h2-mt: unit( @h2-lh ,em);
    @h2h3-mt: unit( @h3-lh ,em);
    @h3h4-mt: unit( @h4-lh ,em);
    @h4h5-mt: unit((@lh / @h5-fz), em);
    @h5h6-mt: unit((@lh / @h6-fz), em);
}

@bettertext: {

    .bettertext-settings();

    .bettertext-calculations();

    body {
        font-family: @font-body;
        font-size: @fz-ems;
        line-height: @lh;
    }

    body:not([class]),
    article:not([class]),
    section:not([class]) {
        margin: @space-around;

        article:not([class]),
        section:not([class]) {
            margin-left: 0;
            margin-right: 0;
        }

    }

    p {
        margin: 0 0 @m-default;
        max-width: @linel;
    }

    /* minimum paragraph width when floating http://css-tricks.com/minimum-paragraph-widths/ */
    p:before,
    ol:not([class]):before,
    ul:not([class]):before {
        content: '';
        display: block;
        width: 10em;
        overflow: hidden;
    }

    li p:before {
        content: none;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: @font-headers;
        font-weight: bolder;
    }

    h1 {
        font-size: @h1-fz;
        line-height: @h1-lh;
        margin: @h1-mt 0 @h1-mb;
    }

    h2 {
        font-size: @h2-fz;
        line-height: @h2-lh;
        margin: @h2-mt 0 @h2-mb;
    }

    h3 {
        font-size: @h3-fz;
        line-height: @h3-lh;
        margin: @h3-mt 0 @h3-mb;
    }

    h4 {
        font-size: @h4-fz;
        line-height: @h4-lh;
        margin: @h4-mt 0 @h4-mb;
    }

    h5 {
        font-size: @h5-fz;
        line-height: @h5-lh;
        margin: @h5-mt 0 @h5-mb;
    }

    h6 {
        font-size: @h6-fz;
        line-height: @h6-lh;
        margin: @h6-mt 0 @h6-mb;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    // do not create breakpoint and override if scale is not changing
    & when not (@scale1 = @scale2) {
        @media @bettertext-breakpoint {

            h1 {
                font-size: @h1-l-fz;
                margin-top: @h1-l-mt;
                margin-bottom: @h1-l-mb;
            }

            h2 {
                font-size: @h2-l-fz;
                margin-top: @h2-l-mt;
                margin-bottom: @h2-l-mb;
            }

            h3 {
                font-size: @h3-l-fz;
                margin-top: @h3-l-mt;
                margin-bottom: @h3-l-mb;
            }

            h4 {
                font-size: @h4-l-fz;
                margin-top: @h4-l-mt;
                margin-bottom: @h4-l-mb;
            }
        }
    }

    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child {
        margin-top: 0;
    }

    /* double headers */
    h1 + h2 {
        margin-top: @h1h2-mt;
    }
    h2 + h3 {
        margin-top: @h2h3-mt;
    }
    h3 + h4 {
        margin-top: @h3h4-mt;
    }
    h4 + h5 {
        margin-top: @h4h5-mt;
    }
    h5 + h6 {
        margin-top: @h5h6-mt;
    }

    /* lists */
    /* lists without classes */

    // 1) force reflow to fix bullet overlapping.
    // See https://git.io/vHyUo for details.

    ul:not([class]),
    ol:not([class]) {
        margin: 0 0 @m-default;
        max-width: calc(@linel - 2.5em);
        padding-left: 0;
        padding-right: 2.5em;

        ul,
        ol {
            margin-bottom: 0;
        }

        li {
            transform: translateX(2.5em);
            animation: fixlists 1s; // 1)
        }
    }

    @keyframes fixlists {
        0%   { text-indent: -0.001em;}
        100% { text-indent: 0;}
    }

    /* images */
    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    p img:not(:only-child) {
        vertical-align: baseline;
    }

    figure:not([class]) {
        margin: (@m-default * 2) 0;

        & > p {
            max-width: (@linel * 0.75);
            font-size: @fz-small-ems;
            margin: 0.5em 0 0;
        }
    }

    figcaption {
        max-width: (@linel * 0.75);
        font-size: @fz-small-ems;
        margin: 0.5em 0 (@m-default * 2);

        & > p {
            margin: 0.5em 0 0;
        }
    }

    /* blockquotes */
    blockquote {
        max-width: calc(@linel - 5em);
        margin: 0 0 (@m-default);
        padding: (@m-default) 2.5em;

        & > p:last-child {
            margin-bottom: 0;
        }

        & > footer,
        & > cite {
            display: block;
            font-size: @fz-small-ems;
        }
    }

    /* code */

    pre {
        margin: (@m-default) 0;
        white-space: pre-wrap;
    }

    p code {
        line-break: loose;
        overflow-wrap: break-word;
    }

    /* tables */
    table:not([class]) {
        margin-top: (@m-default * 2);
        margin-bottom: (@m-default * 2);
        border-collapse: separate;
        border-spacing: 0;

        caption {
            text-align: left;
            font-size: @fz-small-ems;
            margin-bottom: 0.625em;
        }

        td, th {
            padding: 0.5em 1em;
            text-align: left;
            vertical-align: top;
            border-style: solid;
            border-color: rgba(0,0,0,0.1);
            border-width: 0 0 1px;
        }

        thead {
            td, th {
                vertical-align: bottom;
                border-bottom-width: 2px;
            }
        }
    }

    /* definition lists */

    dl:not([class]) {
        max-width: @linel;
        margin: 0 0 @m-default;

        dt:not([class]) {
            font-weight: bolder;
        }

        dd:not([class]) {
            margin: 0 0 @m-default;
        }
    }

    /* other tags */
    hr:not([class]) {
        border: 0;
        border-bottom: 1px solid;
        margin: @m-default 0;
        max-width: @linel;
        opacity: .1;
    }

    abbr {
        letter-spacing: .05em;
        margin-right: -.05em;
    }

    strong, b, dt {
        font-weight: bolder;
    }

    code,
    kbd,
    pre,
    samp {
        font-family: @font-code;
        font-size: 1em;
    }

};

@bettertext();