863954c90e
Many files in the repo have the UNIX executable permission bit set, which indicates to the OS that these are executable binaries. None of these files are executable, so they should not have the executable permission bit set.
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';
|
|
}
|
|
}
|