typography.sass 6.49 KiB
// 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 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)