herereadthis/redwall

html {
    @media @da_baseline {
        background-image:
            linear-gradient(90deg, @code_grey_light 0%, @code_grey_light 100%);
        background-size: 1em 1em;
        background-position: 100% 0;
        background-repeat: repeat-y;
    }
    @media @da_small {
        background-image:
            linear-gradient(90deg, #FFF 50%, @code_grey_light 50%);
        background-size: 100% 1em;
        background-position: 0% 0%
    }
}
body {
    min-height: 100%;
    background-position: center center;
    background-repeat: repeat-y;
    font-family: 'Open Sans', sans-serif;


    @media @da_baseline {
    }
    @media @da_2x_small {
        background-image:
            linear-gradient(90deg, #FFF (11 / 12) * @pw_2x_small, @code_grey_light (11 / 12) * @pw_2x_small);
        background-size: @pw_2x_small 1rem;
    }
    @media @da_x_small {
        background-image:
            linear-gradient(90deg, #FFF (11 / 12) * @pw_x_small, @code_grey_light (11 / 12) * @pw_x_small);
        background-size: @pw_x_small 1rem;
    }
    @media @da_small {
        background-image:
            linear-gradient(90deg, #FFF (11 / 12) * @pw_small, @code_grey_light (11 / 12) * @pw_small);
        background-size: @pw_small 1rem;
    }
    @media @da_medium {
        background-image:
            linear-gradient(90deg, #FFF (10 / 12) * @pw_medium, @code_grey_light (10 / 12) * @pw_medium);
        background-size: @pw_medium 1rem;
    }
    @media @da_large {
        background-image:
            linear-gradient(90deg, #FFF (10 / 12) * @pw_large, @code_grey_light (10 / 12) * @pw_large);
        background-size: @pw_large 1rem;
    }
    @media @da_x_large {
        background-image:
            linear-gradient(90deg, #FFF (10 / 12) * @pw_x_large, @code_grey_light (10 / 12) * @pw_x_large);
        background-size: @pw_x_large 1rem;
    }

}

a:link {
    color: @code_a_link;
}
a:visited {
    color: @code_a_visited;
}
a:hover {
    color: @code_a_hover;
}


.text_container {
    @media @da_baseline {
        h2 {
            font-size: 2.8rem;
            line-height: 4rem;
            padding-bottom: 1rem;
        }
        h3 {
            font-size: 2rem;
            line-height: 3rem;

            code {
                font-size: 2rem;
                line-height: 3rem;
            }
        }
        h4, p, li, code {
            .font_standard;
        }
        p, ul, ol {
            margin: 0 0 2rem 0;
        }
        ul, ol {
            ul, ol {
                padding-left: 2rem;
            }
        }
        pre {
            margin: 0 2rem 1rem 0;

            code {
                margin: 0;
                padding: 0.5rem 0;
                display: block;
            }
        }
    }
    @media @da_small {
        h2, h3, h4, p, ul, ol {
            padding-right: 2rem;
        }
    }
    @media @da_medium {
        h2, h3, h4, p, ul, ol {
            padding-right: (1 / 12) * @pw_medium;
        }
        h2 {
            font-size: 2.8rem;
            line-height: 3.9rem;
            padding-bottom: 0.5rem;
        }
        h3 {
            font-size: 2.1rem;
            line-height: 3.3rem;

            code {
                font-size: 2.1rem;
                line-height: 3.3rem;
            }
        }
        h4, p, li, code {
            font-size: 1.4rem;
            line-height: 2.2rem;
        }
        p, ul, ol {
            margin: 0 0 2.2rem 0;
        }
        ul, ol {
            ul, ol {
                padding-right: 0;
                padding-left: 2.2rem;
            }
        }
        pre {
            margin: 0 2.2rem 1.1rem 0;

            code {
                padding: 0.5rem 0 0.6rem 0;
            }
        }
    }
    @media @da_large {
        h2, h3, h4, p, ul, ol {
            padding-right: (1 / 12) * @pw_large;
        }
        h2 {
            font-size: 3.2rem;
            line-height: 4.4rem;
            padding-bottom: 0.5rem;
        }
        h3 {
            font-size: 2.4rem;
            line-height: 3.9rem;

            code {
                font-size: 2.4rem;
                line-height: 3.9rem;
            }
        }
        h4, p, li, code {
            font-size: 1.6rem;
            line-height: 2.6rem;
        }
        p, ul, ol {
            margin: 0 0 2.6rem 0;
        }
        ul, ol {
            ul, ol {
                padding-right: 0;
                padding-left: 2.6rem;
            }
        }
        pre {
            margin: 0 2.6rem 1.3rem 0;

            code {
                padding: 0.6rem 0 0.7rem 0;
            }
        }
    }
    @media @da_x_large {
        h2, h3, h4, p, ul, ol {
            padding-right: (1 / 12) * @pw_x_large;
        }
    }

    figcaption * {
        padding-right: 0;
    }
    h2 {
        font-weight: 300;

        a:link, a:visited {
            color: #000;
        }
        a:hover {
            color: @code_a_hover;
        }
    }
    > h2 {
        display: none;
    }
    h3 {
        font-weight: 400;
    }
    h4 {
        font-weight: 700;
        font-style: italic;
    }
    strong {
        font-weight: 700;
    }
    ul, ol {
        ul, ol {
            margin: 0;
        }
    }
}




.content_container {
    margin: 0 auto;

    @media @da_baseline {
        padding: 2rem 2rem 0 1rem;
        width: auto;
    }
    @media @da_2x_small {
        padding: 2rem (1 / 12) * @pw_2x_small 0;
        width: (10 / 12) * @pw_2x_small;
    }
    @media @da_x_small {
        padding: 2rem (1 / 12) * @pw_x_small 0;
        width: (10 / 12) * @pw_x_small;
    }
    @media @da_small {
        padding: 2rem (1 / 12) * @pw_small 0;
        width: (10 / 12) * @pw_small;
    }
    @media @da_medium {
        padding: 2.2rem (2 / 12) * @pw_medium 0;
        width: (8 / 12) * @pw_medium;
    }
    @media @da_large {
        padding: 2.2rem (2 / 12) * @pw_large 0;
        width: (8 / 12) * @pw_large;
    }
    @media @da_x_large {
        padding: 2.2rem (2 / 12) * @pw_x_large 0;
        width: (8 / 12) * @pw_x_large;
    }
    hr:last-child {
        margin-top: 3.5rem;
        margin-bottom: 0.2rem;
    }
    &:last-child {
        hr {
            display: none;
        }
    }
    &:only-child {
        hr {
            display: block;
        }
    }
}

hr {
    border-width: 0;
    border-top: 0.1rem solid @code_grey_medium_light;
    border-bottom: 0.1rem solid @code_grey_medium_light;
    @media @da_baseline {
        margin: 0 0 1.7rem 0;
        padding: 0.1rem 0 0 0;
    }
    @media @da_small {
        margin-right: (2 / 12) * @pw_small;
    }
    @media @da_medium {
        margin-right: (2 / 12) * @pw_medium;
        margin-bottom: 1.9rem;
    }
    @media @da_large {
        margin-right: (2 / 12) * @pw_large;
        margin-bottom: 2.2rem;
        padding-top: 0.2rem;
    }
    @media @da_x_large {
        margin-right: (2 / 12) * @pw_x_large;
    }
}