75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
/* ----------------------------- */
|
|
/* ==typography */
|
|
/* ----------------------------- */
|
|
|
|
/**
|
|
* 1. Base font-size (corresponds to 10px) adapted to REM unit
|
|
* 2. Orientation iOS font-size fix
|
|
*/
|
|
html {
|
|
font: 62.5%/1.5 "Century Gothic", helvetica, arial, sans-serif; /* 1 */
|
|
color: #000;
|
|
|
|
@media (orientation: landscape) and (max-device-width: 768px) {
|
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 1. Put the base font-size at 14px (1.4rem)
|
|
*/
|
|
body {
|
|
@include rem(14); /* 1 */
|
|
}
|
|
|
|
/**
|
|
* Font-sizing for content
|
|
* Preserves vertical-rythm
|
|
* Source: http://soqr.fr/vertical-rhythm/
|
|
*/
|
|
p, ul, ol, dl,
|
|
blockquote, pre,
|
|
td, th,
|
|
label, textarea,
|
|
caption, details, figure {
|
|
@include rem(14);
|
|
line-height: 1.5;
|
|
margin: .75em 0 0;
|
|
}
|
|
|
|
h1, .h1-like,
|
|
h2, .h2-like,
|
|
h3, .h3-like,
|
|
h4, .h4-like,
|
|
h5, .h5-like,
|
|
h6, .h6-like {
|
|
font-weight: normal;
|
|
margin: 21px 0 0 0;
|
|
}
|
|
|
|
h1, .h1-like,
|
|
h2, .h2-like,
|
|
h3, .h3-like {
|
|
line-height: 42px;
|
|
}
|
|
|
|
h4, .h4-like,
|
|
h5, .h5-like,
|
|
h6, .h6-like {
|
|
line-height: 21px;
|
|
}
|
|
|
|
h1, .h1-like { @include rem(26); }
|
|
h2, .h2-like { @include rem(24); }
|
|
h3, .h3-like { @include rem(22); }
|
|
h4, .h4-like { @include rem(20); }
|
|
h5, .h5-like { @include rem(18); }
|
|
h6, .h6-like { @include rem(16); }
|
|
|
|
/* alternate font-sizing */
|
|
.smaller { @include rem(10); }
|
|
.small { @include rem(12); }
|
|
.medium { @include rem(14); }
|
|
.big { @include rem(16); }
|
|
.bigger { @include rem(18); }
|
|
.biggest { @include rem(20); } |