typography.sass

// https://developers.osuny.org/docs/theme/architecture/typographie/

body
    font-family: $body-font-family
    -moz-osx-font-smoothing: grayscale
    -webkit-font-smoothing: antialiased
    font-size: $body-size
    font-variant-ligatures: common-ligatures
    text-rendering: optimizelegibility
    line-height: $body-line-height
    @include media-breakpoint-up(desktop)
        font-size: $body-size-desktop

// Experimental, not implemented yet
p, h1, h2, h3, h4, h5, h6, li, a, th, td, span
    text-edge: cap alphabetic
    leading-trim: both

h1, h2, h3, h4, h5, h6
    margin-top: 0
    margin-bottom: 0

@mixin h1
    font-family: $h1-font-family
    font-size: $h1-size
    font-weight: $h1-weight
    line-height: $h1-line-height
    text-transform: $h1-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h1-size-desktop

h1, .h1
    @include h1

@mixin h2
    font-family: $h2-font-family
    font-size: $h2-size
    font-weight: $h2-weight
    line-height: $h2-line-height
    text-transform: $h2-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h2-size-desktop

h2, .h2
    @include h2

@mixin h3
    font-family: $h3-font-family
    font-size: $h3-size
    font-weight: $h3-weight
    line-height: $h3-line-height
    text-transform: $h3-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h3-size-desktop

h3, .h3
    @include h3

@mixin h4
    font-family: $h4-font-family
    font-size: $h4-size
    font-weight: $h4-weight
    line-height: $h4-line-height
    text-transform: $h4-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h4-size-desktop

h4, .h4
    @include h4

@mixin h5
    font-family: $h5-font-family
    font-size: $h5-size
    font-weight: $h5-weight
    line-height: $h5-line-height
    text-transform: $h5-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h5-size-desktop
    a
        text-decoration: none

h5, .h5
    @include h5

@mixin h6
    font-family: $h6-font-family
    font-size: $h6-size
    font-weight: $h6-weight
    line-height: $h6-line-height
    text-transform: $h6-text-transform
    @include media-breakpoint-up(desktop)
        font-size: $h6-size-desktop

h6, .h6
    @include h6

h1, .h1,
h2, .h2
    a
        text-decoration-thickness: 0
        &:hover
            text-decoration-thickness: 1px

@mixin lead($handle-sidebar: true)
    font-family: $lead-font-family
    font-size: $lead-size
    font-weight: $lead-weight
    line-height: $lead-line-height
    @include media-breakpoint-up(desktop)
        font-size: $lead-size-desktop
    @if $handle-sidebar
        @include in-page-with-sidebar
            font-family: $lead-sidebar-font-family
            font-size: $lead-sidebar-size-desktop
            font-weight: $lead-sidebar-weight
            line-height: $lead-sidebar-line-height

.lead
    @include lead

@mixin lead-hero
    font-family: $lead-hero-font-family
    font-size: $lead-hero-size
    font-weight: $lead-hero-weight
    line-height: $lead-hero-line-height
    @include media-breakpoint-up(desktop)
        font-size: $lead-hero-size-desktop


@mixin body-text
    font-family: $body-font-family
    font-size: $body-size
    @include media-breakpoint-up(desktop)
        font-size: $body-size-desktop

.p,
.li
    @include body-text

@mixin meta
    font-family: $meta-font-family
    font-size: $meta-size
    font-weight: $meta-weight
    line-height: $meta-line-height
    @include media-breakpoint-up(desktop)
        font-size: $meta-size-desktop

.meta
    @include meta

@mixin signature
    font-family: $signature-font-family
    font-size: $signature-size
    font-weight: $signature-weight
    line-height: $signature-line-height
    @include media-breakpoint-up(desktop)
        font-size: $signature-size-desktop

.signature
    @include signature

@mixin small
    font-family: $small-font-family
    font-size: $small-size
    font-weight: $small-weight
    line-height: $small-line-height
    @include media-breakpoint-up(desktop)
        font-size: $small-size-desktop

small, .small
    @include small

@mixin rich-text
    word-break: break-word
    h1, h2, h3, h4, h5, h6, p, ul
        margin-top: 2em
        &:first-child, meta + &
            margin-top: 0

.rich-text
    @include rich-text

@mixin inherit-text
    font-family: inherit
    font-weight: inherit
    font-style: inherit
    font-size: inherit
    line-height: inherit

[itemprop="articleBody"]
    @include rich-text

@mixin blockquote
    margin: 0
    font-family: $quote-font-family
    font-size: $quote-size
    font-weight: $quote-weight
    font-style: $quote-style
    line-height: $quote-line-height
    @include media-breakpoint-up(desktop)
        font-size: $quote-size-desktop-long
    cite
        font-size: px2rem(18)
        font-style: normal

blockquote, .blockquote
    @include blockquote
    font-style: italic

p
    margin-top: 0
    margin-bottom: 0
    + p
        margin-top: $spacing0

p:empty
    display: none

p + ul,
p + ol
    margin-top: 0

figcaption
    a
        color: inherit

address
    font-style: normal

a,
.link
    @include link
    overflow-wrap: break-word
    &[target="_blank"]:not(.icon)
        @include icon(link-blank, after, true)
            vertical-align: baseline
    &[href^="mailto"]
        &::after
            content: none
    &.glightbox
        text-decoration: none

@mixin btn
    font-size: $btn-font-size
    padding: $btn-padding-y $btn-padding-x
    text-decoration: none
    display: inline-block
    border-radius: $btn-border-radius
    @include media-breakpoint-up(desktop)
        font-size: $btn-font-size-desktop
        padding: $btn-padding-y-desktop $btn-padding-x-desktop

.btn
    @include btn

.link-more
    @include link
    @include icon(arrow, before)
    &::before
        font-size: px2rem(10)
        margin-right: px2rem(5)

dd
    margin-bottom: 0.5rem
    margin-left: 0

abbr, abbr[title]
    @include text-underline
    text-decoration-style: dotted

::selection
    background: rgba($color-text, .7)
    color: $color-background
    text-shadow: none

sub,
sup
    font-size: 60%
    margin-left: px2rem(2)

*:focus-visible
    outline-color: inherit
    outline-offset: 5px
    outline-style: dashed
    outline-width: 1px

@media (prefers-reduced-motion: no-preference)
    *:focus-visible
        transition: outline-offset .3s ease

// ICONS
@font-face
    font-display: block
    font-family: 'Icon'
    font-style: normal
    font-weight: 400
    src: url('../fonts/fonticons/IconFont.woff') format("woff")

@each $name, $glyph in $icons
    .icon-#{$name}
        @include icon($name, before)
    .icon-block-#{$name}
        @include icon-block($name, before)
    .btn-#{$name}
        @include icon($name)
        &::before
            margin-inline-end: px2rem(5)