364 lines
8.0 KiB
SCSS
364 lines
8.0 KiB
SCSS
// 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';
|
|
}
|
|
}
|