funky/_sass/sassline-base/_typography.scss

364 lines
8.0 KiB
SCSS
Executable File

// Typography
// ---------------------------------------
// Setting root sizes and base styles.
html {
@include rootsize;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Site-wide base styles.
body {
@include fontsize(zeta, all);
font-family: unquote(map-get($bodytype, font-family));
font-style: normal;
font-weight: map-get($bodytype, regular);
line-height: 2rem;
}
// Links.
a {
color: $linkColour;
text-decoration: none;
transition: color .1s, background-color .1s;
&:hover, &:active, &:focus {
color: $hoverColour;
text-decoration: none;
}
}
// Styles for typeset text.
.typeset {
// Nice underlines for text links.
p a, li a {
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($linkColour,20%) 50%);
background-position: 0 93%;
background-repeat: repeat-x;
background-size: 100% 0.15rem;
text-shadow: 0.1rem 0 $backgroundColour,
0.15rem 0 $backgroundColour,
-0.1rem 0 $backgroundColour,
-0.15rem 0 $backgroundColour;
&:hover, &:active, &:focus {
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($hoverColour,20%) 50%);
}
}
// Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
p {
@include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
font-feature-settings: 'kern', 'onum', 'liga';
}
// Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
h1, h2, h3, h4, h5, h6 {
color: $headingColour;
font-family: unquote(map-get($headingtype, font-family));
font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
font-style: normal;
font-weight: map-get($headingtype, bold);
}
// Heading level 1.
h1, .alpha {
@include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all);
}
// Heading level 2.
h2, .beta {
@include sassline(beta, $headingtype, 3, 1, all);
}
// Heading level 3.
h3, .gamma {
@include sassline(gamma, $headingtype, 3, 1, all);
}
// Heading level 4.
h4, .delta {
@include sassline(delta, $headingtype, 2, 0, all);
}
// Heading level 5.
h5, .epsilon {
@include sassline(epsilon, $headingtype, 2, 0, all);
}
// Heading level 6.
h6, .zeta {
@include sassline(zeta, $headingtype, 2, 0, all);
}
// Lists.
ul, ol {
@include baseline(zeta, $bodytype, 2, 2, all);
li {
font-feature-settings: 'kern', 'onum', 'liga';
margin-left: 2rem;
@include breakpoint(break-1) {
margin-left: 0;
}
ol, ul {
padding-top: 1rem;
margin-bottom: 1rem;
margin-left: 2rem;
}
}
}
// Ordered lists.
ol {
list-style-type: none;
li {
counter-increment: top-level;
&:before {
content: counter(top-level) '.';
font-feature-settings: 'lnum', 'tnum';
margin-left: -3rem;
position: absolute;
text-align: right;
width: 2em;
}
ul {
li {
&:before {
content: '';
}
ol {
li {
counter-increment: alt-level;
&:before {
content: counter(alt-level) '.';
}
}
}
}
}
ol {
li {
counter-increment: sub-level;
&:before {
content: counter(top-level) '.' counter(sub-level);
}
ul {
li {
&:before {
content: '';
}
}
}
ol {
li {
counter-increment: sub-sub-level;
&:before {
content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level);
}
}
}
}
}
}
}
// Definition lists.
dl {
@include baseline(zeta, $bodytype, 2, 2, all);
dt, dd {
font-feature-settings: 'kern', 'onum', 'liga';
margin-left: 2rem;
@include breakpoint(break-1) {
margin-left: 0;
}
}
dt {
font-weight: map-get($bodytype, bold);
}
dd + dt {
padding-top: 1rem;
}
}
// Tables.
table {
@include sassline(eta, $headingtype, 2, 0, all);
font-family: unquote(map-get($headingtype, font-family));
font-feature-settings: 'liga', 'lnum', 'tnum', 'kern';
font-style: normal;
font-weight: map-get($headingtype, regular);
width: 100%;
thead {
th {
@include sassline(zeta, $headingtype, 2, 0, all);
padding-bottom: 1px;
}
}
}
// Bold.
b, strong, .bold {
font-weight: map-get($bodytype, bold);
}
// Italic.
em, i, .italic {
font-style: map-get($bodytype, italic);
}
// Caption and inline small text.
small, .caption {
@include fontsize(theta, all);
font-family: unquote(map-get($headingtype, font-family));
font-style: normal;
font-weight: map-get($headingtype, regular);
}
small {
line-height: 1rem;
}
.caption {
@include baseline(theta, $headingtype, 2, 2, all);
color: $captionColour;
}
// Nice spacing for captions.
h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption {
margin-top: -1rem;
}
.delta + .caption, .epsilon + .caption, .zeta + .caption {
margin-top: 0rem;
}
// Quotes.
blockquote {
p {
border-left: 0.15rem solid $linkColour;
font-style: map-get($bodytype, italic);
padding-left: 1rem;
// Add spacing below blockquote paragraphs to align to baseline grid.
$get-scale: map-get($modular-scale, scale-0);
$get-size: map-get($get-scale, zeta);
$rootsize: nth($sizes, 1);
$baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
$baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
margin-bottom: #{$baseline-push}rem;
padding-bottom: #{$baseline-shift}rem;
@for $i from 2 through $breakpoints-limit {
$get-scale: map-get($modular-scale, scale-#{$i - 1});
$get-size: map-get($get-scale, zeta);
$rootsize: nth($sizes, $i);
$baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
$baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
margin-bottom: #{$baseline-push}rem;
padding-bottom: #{$baseline-shift}rem;
}
}
}
@include breakpoint(break-1) {
margin-left: -1rem;
}
}
// Horizontal rule.
hr {
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 100% 0.15rem;
border: 0;
margin: 0;
padding-bottom: 3rem;
padding-top: 3rem;
}
// Code block.
code, pre {
background-color: $codeBackgroundColour;
font-family: unquote(map-get($monospacetype, font-family));
}
pre {
display: block;
margin-bottom: 2rem;
padding: 1rem;
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
code {
@include fontsize(theta, all);
line-height: 1rem;
}
// Letter space those capitals people, Jan Tschichold would be proud.
.upper {
font-kerning: normal;
letter-spacing: 0.1rem;
text-transform: uppercase;
}
// Real small caps.
.small-caps {
font-feature-settings: 'smcp', 'kern';
font-kerning: normal;
letter-spacing: 0.1rem;
}
// Consistent height numbers with OpenType.
.lining-numerals {
font-feature-settings: 'lnum', 'kern';
}
// Ascending and descending numbers with OpenType.
.oldstyle-numerals {
font-feature-settings: 'onum', 'kern';
}
}