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: $line-height-base
    @include media-breakpoint-up(md)
        font-size: $body-size-md

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

%heading
    font-family: $heading-font-family
    margin-top: 0
    margin-bottom: 0

h1, .h1
    @extend %heading
    font-size: $h1-size
    font-weight: $h1-weight
    line-height: $h1-line-height
    text-transform: $h1-text-transform
    @include media-breakpoint-up(md)
        font-size: $h1-size-md

h2, .h2
    @extend %heading
    font-size: $h2-size
    font-weight: $h2-weight
    line-height: $h2-line-height
    text-transform: $h2-text-transform
    @include media-breakpoint-up(md)
        font-size: $h2-size-md

h3, .h3
    @extend %heading
    font-size: $h3-size
    font-weight: $h3-weight
    line-height: $h3-line-height
    text-transform: $h3-text-transform
    @include media-breakpoint-up(md)
        font-size: $h3-size-md

h4, .h4
    @extend %heading
    font-size: $h4-size
    font-weight: $h4-weight
    line-height: $h4-line-height
    text-transform: $h4-text-transform
    @include media-breakpoint-up(md)
        font-size: $h4-size-md

h5, .h5
    @extend %heading
    font-size: $h5-size
    font-weight: $h5-weight
    line-height: $h5-line-height
    text-transform: $h5-text-transform
    @include media-breakpoint-up(md)
        font-size: $h5-size-md

h6, .h6
    @extend %heading
    font-size: $h6-size
    font-weight: $h6-weight
    line-height: $h6-line-height
    text-transform: $h6-text-transform
    @include media-breakpoint-up(md)
        font-size: $h6-size-md

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

.lead
    margin-top: 0
    font-family: $lead-font-family
    font-size: $lead-size
    font-weight: $lead-weight
    line-height: $lead-line-height
    @include media-breakpoint-up(md)
        font-size: $lead-size-md

.p,
.li
    font-size: $body-size
    @include media-breakpoint-up(md)
        font-size: $body-size-md

p
    margin-top: 0
    margin-bottom: 0

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

.signature
    font-family: $signature-font-family
    font-size: $signature-size
    font-weight: $signature-weight
    line-height: $signature-line-height
    @include media-breakpoint-up(md)
        font-size: $signature-size-md
    
small, .small
    font-family: $small-font-family
    font-size: $small-size
    font-weight: $small-weight
    line-height: $small-line-height
    @include media-breakpoint-up(md)
        font-size: $small-size-md


[itemprop="articleBody"]
    h1, h2, h3, h4, h5, h6
        margin-block-start: 2em
        &:first-child, meta + &
            margin-block-start: 0

blockquote, .blockquote
    margin: 0
    cite
        font-size: px2rem(18)
        font-style: normal

address
    font-style: normal

a,
.link
    @include link
    overflow-wrap: break-word
    &[target="_blank"]:not(.icon)
        @include icon("link-blank", "after")
        &::after
            content: " #{map-get($icons, "link-blank")}"
            display: inline
            font-size: px2rem(10)
    &[href^="mailto"]
        &::after
            content: none

.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(md)
        font-size: $btn-font-size-md
        padding: $btn-padding-y-md $btn-padding-x-md

.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

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

*:focus-visible
    outline-color: gray
    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/icons/icomoon.woff') format("woff")

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