typography.styl

@import 'lib';

@font-face {
    src: local('FiraSansOTLight'),
         local('FiraSansLight'),
         local('Fira Sans OT Light'),
         local('Fira Sans Light'),
         url('../fonts/FiraSans/firasansot-light-webfont.woff') format('woff'),
         url('../fonts/FiraSans/firasansot-light-webfont.ttf') format('truetype'),
         url('../fonts/FiraSans/firasansot-light-webfont.svg#fira_sans_otlight') format('svg');
    font-family: FiraSansWeb;
    font-weight: 300;
}

@font-face {
    src: local('FiraSansOT'),
         local('FiraSans'),
         local('Fira Sans OT'),
         local('Fira Sans'),
         url('../fonts/FiraSans/firasansot-regular-webfont.woff') format('woff'),
         url('../fonts/FiraSans/firasansot-regular-webfont.ttf') format('truetype'),
         url('../fonts/FiraSans/firasansot-regular-webfont.svg#fira_sans_otregular') format('svg');
    font-family: FiraSansWeb;
    font-weight: 400;
}

@font-face {
    src: local('FiraSansOTMedium'),
         local('FiraSansMedium'),
         local('Fira Sans OT Medium'),
         local('Fira Sans Medium'),
         url('../fonts/FiraSans/firasansot-medium-webfont.woff') format('woff'),
         url('../fonts/FiraSans/firasansot-medium-webfont.ttf') format('truetype'),
         url('../fonts/FiraSans/firasansot-medium-webfont.svg#fira_sans_otregular') format('svg');
    font-family: FiraSansWeb;
    font-weight: 500;
}

@font-face {
    /* Yes, the PostScript name contains a hyphen. Not a typo. */
    src: local('FiraSansOT-Bold'),
         local('FiraSans-Bold'),
         local('Fira Sans OT Bold'),
         local('Fira Sans Bold'),
         url('../fonts/FiraSans/firasansot-bold-webfont.woff') format('woff'),
         url('../fonts/FiraSans/firasansot-bold-webfont.ttf') format('truetype'),
         url('../fonts/FiraSans/firasansot-bold-webfont.svg#fira_sans_otbold') format('svg');
    font-family: FiraSansWeb;
    font-weight: 600;
}

body {
    color: $dark-gray;
    font: 15px $open-stack;
}

body, h1, h2, h3, h4 {
    font-weight: 400;
}

h1 {
    font-size: 24px;
    line-height: 26px;
}

h2, h3 {
    color: $castle-skull-gray;
}

h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 50px;
}

h3 {
    font-size: 15px;
    line-height: 15px;
}

.listing h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

address {
    color: $medium-gray;
    font-style: normal;
}

dl {
    margin: 0;
}

dt {
    font-weight: 600;
}

dd {
    color: $medium-gray;
    margin: 0 0 10px;
}

.lineclamp {
    overflow: hidden;
}

@media $narrower-than-desktop {
    .back-to-app {
        display: none;
    }
}

@media $at-least-desktop {
    h2 {
        font-size: 40px;
        font-weight: 300;
        line-height: 50px;
    }
    article {
        border-radius: 10px;
        margin: 48px 0 0;
        padding: 18px 15px;
    }
}

.island.prose {
    border-radius: 5px;
    padding: 24px;
}

.prose {
    color: $london-fog-gray;

    h3, h4 {
        font-weight: 500;
    }
    h3 {
        color: $castle-skull-gray;
        font-size: 24px;
        line-height: 28px;
    }
    h4 {
        color: $grey-gardens-gray;
        font-size: 18px;
        line-height: 24px;
    }
    blockquote, dl, h3, h4, ol, p, ul {
        margin: 24px 0;
    }
    :first-child {
        margin-top: 0;
    }
    :last-child {
        margin-bottom: 0;
    }
    dl, ol, ul {
        margin-left: 48px;
    }
    address, blockquote {
        margin: 0 48px;
    }
}

@media $narrower-than-desktop {
    .island.prose {
        margin: 10px;
        padding: 15px 10px;
    }
    .prose {
        dl, ol, ul {
            margin-left: 24px;
        }
        address, blockquote {
            margin: 0 24px;
        }
    }
}

// Hidden element used by textoverflowclamp.js
.msr {
    position: absolute;
    visibility: hidden;
    white-space: pre;
}
.clamped {
    display: block;
    ellipsis();
    width: 100%;
}