static/css/com/_bits/_header.scss

@import '../../_config';

%header {
    position: relative;

    @include animation-keyframes(header-highlighting) {
        0%   {background-color: #FFFFCC;}
        100% {background-color: #fff;}
    };

    &:target,
    &.highlighted {
        @include animation(header-highlighting 1.5s);
    }

    .anchor {
        @extend %header-anchor;
    }
}

%h1 {
    margin-top: $vertical-rhythm-unit * 2;
    margin-bottom: $vertical-rhythm-unit;
    font-family: $font-family-sans-serif;
    font-size: 30px;
    line-height: 33px;

    &:first-of-type {
        margin-top: 0;
        margin-bottom: $vertical-rhythm-unit * 2;
    }

    @media print {
        page-break-before: always;
        page-break-after: avoid;
    }
}


%h1_section-title {
    padding-top: 140px;
    margin-bottom: 45px;
    font-size: 55px;
    line-height: 65px;
    font-weight: bold;
}

%h2 {
    margin-top: $vertical-rhythm-unit * 2;
    margin-bottom: $vertical-rhythm-unit;
    font-family: $font-family-sans-serif;
    font-size: 24px;
    line-height: 27px;

    &:first-of-type {
        margin-top: 0;
    }

    @media print {
        page-break-after: avoid;
    }
}

%h3 {
    margin-top: $vertical-rhythm-unit * 2;
    margin-bottom: $vertical-rhythm-unit;
    font-family: $font-family-sans-serif;
    font-size: 19px;
    line-height: 22px;

    @media print {
        page-break-after: avoid;
    }
}

%h4 {
    margin-top: $vertical-rhythm-unit * 2;
    margin-bottom: $vertical-rhythm-unit;
    font-family: $font-family-sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;

    @media print {
        page-break-after: avoid;
    }
}

%h5 {
    margin-top: $vertical-rhythm-unit * 2;
    margin-bottom: $vertical-rhythm-unit;
    font-family: $font-family-sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;

    @media print {
        page-break-after: avoid;
    }
}

%header-anchor {
    position: relative;
    display: inline-block;
    top: 1px;
    padding: 5px 8px 0;
    text-decoration: none;

    &:after {
        position: absolute;
        display: none;
        bottom: 50%;
        margin-top: -8px;
        opacity: 0.5;
        width: 16px;
        height: 16px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACxQAAAsUBidZ/7wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEqSURBVDiNjdM9S1xRFIXhB8QoihZ+DRoJjlPYWAy2qQSbBFv/gOlT2CuKf0BSphe0EAVBBAvRJlYxghrRQqNgFXEQK5tr4Wa4XO44t9jNXme9h732OZIk0azQigVc4wFr+JQkiSLmduwiyVQNlSKA72G4xzTK2IneZhHAGH6ikupVAvC/KaAB9HMAbhodmMUv3GEdgymtB8cB+JE1dmAjJ7Ct0HtT5nN0pc2d2K/PxgxGsIxJ9OEk9DOU6msM80GItxFSFd9ijV9xEfopBlIX+4DDEP9hNITt6D2nRvmN/szYFuuJUk4J4/gT2hNW0JYTuMs49KXBRkpoeWelagEYypjmMVzgTdgLwCo+Ygp/ozdXBDCBl5zdH6G7KSAoVW8/7hFXWMoLLK9eAaRNvta9bjm9AAAAAElFTkSuQmCC937405abf7d2fa1cd5d9079c2e5160ac');
        background-repeat: no-repeat;
        content: '';
    }

    &:hover:after,
    %header:hover &:after {
        display: block;
    }

    &:hover:after {
        opacity: 1;
    }
}