Permalink
Fetching contributors…
Cannot retrieve contributors at this time
256 lines (217 sloc) 3.65 KB
/**
* Typography
* =================================
* - Base
* - Paragraphs
* - Headings
* - Type sizes
* - Misc
* - Utilities
*
* Body font size, leadings etc have been set in _variables.scss
*
* See http://modularscale.com for
*
*/
html {
font-size: $font-size-base-narrow-px;
-webkit-text-size-adjust: 100%;
@include media('>mid') {
font-size: $font-size-base-px;
}
}
body {
font-family: $font-family-base;
@include ko-font-size(base);
line-height: $leading-base;
color: $color-text;
// Add ligatures
font-feature-settings: "liga", "dlig", "hist";
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
// Two ways to smoothen type, they are disabled by default
// Enable only one of them if you need them
// 1.
// -webkit-font-smoothing: antialiased;
// -moz-font-smoothing: antialiased;
// font-smooth:always;
// 2.
// opacity: 0.99;
}
/**
* Paragraphs
*/
p {
font-family: $font-family-base;
@include ko-font-size(base);
margin-top: 0;
margin-bottom: $baseline;
// Measure - ideally about 65 chars per line
// max-width: #{type(base) * 30}px;
}
/**
* Headings
*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: $font-family-headings;
font-weight: $font-weight-headings;
line-height: $line-height-headings;
text-rendering: optimizelegibility; // Fix the character spacing for headings
margin-top: 0;
margin-bottom: $baseline;
small {
font-weight: normal;
}
}
// Use the helper classes to emulate styles for another element
// For example: h3.h1 or h3.alpha
h1,
.h1,
.alpha {
@include ko-font-size(jumbo);
margin-bottom: $baseline * 2;
}
h2,
.h2,
.beta {
@include ko-font-size(large);
}
h3,
.h3,
.gamma {
@include ko-font-size(mid);
}
h4,
.h4,
.delta {
@include ko-font-size(base);
}
h5,
.h5,
.epsilon,
h6,
.h6,
.zeta {
@include ko-font-size(base);
margin-bottom: 0;
}
// Only give these headings a margin-top if they are after other elements
* + h1,
* + .h1,
* + .alpha,
* + h2,
* + .h2,
* + .beta,
* + h3,
* + .h3,
* + .gamma,
* + h4,
* + .h4,
* + .delta {
margin-top: $baseline;
}
small {
font-size: 80%;
}
/**
* Miscellaneous
*/
// Emphasis
strong,
b {
font-weight: $font-weight-bold;
}
em,
i {
font-style: italic;
}
// Abbreviations and acronyms
abbr[title] {
border-bottom: 1px dotted #ddd;
cursor: help;
}
/**
* Blockquotes
*/
blockquote {
padding-left: 10px;
margin: $baseline;
border-left: 4px solid lighten(#000, 80%);
p {
margin-bottom: 0;
@include ko-font-size(base);
font-weight: 300;
}
small {
display: block;
color: lighten(#000, 70%);
&::before {
content: '\2014 \00A0';
}
}
}
// Quotes
q,
blockquote {
&::before,
&::after {
content: "";
}
}
cite {
font-style: normal;
}
// Addresses styling not present in S5, Chrome
dfn {
font-style: italic;
}
// Addresses styling not present in IE6/7/8/9
mark {
background: $yellow;
padding: 2px 4px;
border-radius: 3px;
}
// Prevents sub and sup affecting line-height in all browsers
// gist.github.com/413930
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
samp { font-family: $font-family-mono; }
/**
* Utilities
*/
.text-centre, // British or US English spellings..
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
@include ko-text-selection($color-selection, $color-selection-bg);
// Horizontal rules
hr {
margin: ($baseline) 0;
border: 0;
height: 1px;
background-color: $hr-color;
}
// https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}