// Styling of headers and footers
// Let’s define our header typography as a mixin // Note we don’t set margins here. // By default the header will center vertically in the margin box. // Control its position with ‘vertical-align: top` and then `margin-top`.
@mixin header-style() {
font-family: $font-text-main; font-size: $font-size-default * 0.8; text-transform: uppercase; letter-spacing: 0.05em; font-variant: prince-opentype(c2sc,smcp,onum); // If the font supports true small caps, this will look better
}
// Verso @page chapter:left {
@top { @include header-style(); } @top-right { @include header-style(); } @top-left { @include header-style(); } @top-right-corner { @include header-style(); } @top-left-corner { @include header-style(); } @bottom { @include header-style(); } @bottom-left { @include header-style(); } @bottom-right { @include header-style(); } @bottom-left-corner { @include header-style(); } @bottom-right-corner { @include header-style(); }
}
// Recto @page chapter:right {
@top { @include header-style(); } @top-right { @include header-style(); } @top-left { @include header-style(); } @top-right-corner { @include header-style(); } @top-left-corner { @include header-style(); } @bottom { @include header-style(); } @bottom-left { @include header-style(); } @bottom-right { @include header-style(); } @bottom-left-corner { @include header-style(); } @bottom-right-corner { @include header-style(); }
}
// Verso @page frontmatter:left {
@top { @include header-style(); } @top-right { @include header-style(); } @top-left { @include header-style(); } @top-right-corner { @include header-style(); } @top-left-corner { @include header-style(); } @bottom { @include header-style(); } @bottom-left { @include header-style(); } @bottom-right { @include header-style(); } @bottom-left-corner { @include header-style(); } @bottom-right-corner { @include header-style(); }
}
// Recto @page frontmatter:right {
@top { @include header-style(); } @top-right { @include header-style(); } @top-left { @include header-style(); } @top-right-corner { @include header-style(); } @top-left-corner { @include header-style(); } @bottom { @include header-style(); } @bottom-left { @include header-style(); } @bottom-right { @include header-style(); } @bottom-left-corner { @include header-style(); } @bottom-right-corner { @include header-style(); }
}