Permalink
Browse files

fix(typography): updated fonts, line-heights, margins...

  • Loading branch information...
katrin-freihofner committed May 12, 2017
1 parent 3068155 commit 89e9ba55f64e1f3198c9c8f1579f8e1be2dfa135
Showing with 32 additions and 160 deletions.
  1. +1 −0 src/base/base.scss
  2. +31 −160 src/base/typography.scss
View
@@ -46,6 +46,7 @@ a.theme--dark:hover {
img {
max-width: 100%;
height: 100%;
}
pre {
View
@@ -1,4 +1,5 @@
@import "../common/variables";
@import "../common/mixins";
/**
* Typecsset
@@ -12,97 +13,25 @@
//------------------------------------\\
// SETTINGS
//------------------------------------\\
// Typecsset needs some variables setting before it can get started. Some of
// these variables can be overriden by developers, others need to remain
// untouched because Typecsset will assign them automatically based on what
// you’ve told it.
// What would you like your base font-size to be? Define in pixels; the library
// will convert measurements to the most appropriate units (rems or unitless).
$typecsset-base-font-size: 16px !default;
$typecsset-base-line-height: 24px !default;
// Heading sizes
$typecsset-h1-size: (xs: 32px, sm: 36px, md: 40px, lg: 44px, xl: 48px);
$typecsset-h2-size: (xs: 24px, sm: 28px, md: 32px, lg: 32px, xl: 32px);
$typecsset-h3-size: (xs: 20px, sm: 24px, md: 24px, lg: 24px, xl: 24px);
$typecsset-h4-size: 16px !default;
$typecsset-h5-size: 16px !default;
$typecsset-h6-size: 16px !default;
$typecsset-lead-size: 18px !default;
$typecsset-meta-size: 12px !default;
// Would you like indented (rather than spaced) paragraph delimiting?
$typecsset-indented-paragraphs: false !default;
// Would you like to show a baseline grid? This is handy during development.
$typecsset-show-baseline: false !default;
// Do not modify these variables; they are internal settings upon which the
// library depends.
$typecsset-magic-number: $typecsset-base-line-height;
$typecsset-magic-ratio: $typecsset-base-line-height / $typecsset-base-font-size;
//------------------------------------\\
// TOOLS
//------------------------------------\\
// Typecsset has a number of its own tools which it uses to generate its CSS
// more efficiently.
// Quickly generate a font-size in rems, with a pixel fallback, based on the
// value we pass into the mixin, e.g.:
//
// h1 {
// @include typecsset-font-size(24px);
// }
//
@mixin typecsset-font-size($font-size, $line-height: true) {
font-size: $font-size;
font-size: ($font-size / $typecsset-base-font-size) * 1rem;
@if $line-height == true {
line-height: ceil($font-size / $typecsset-base-line-height) * ($typecsset-base-line-height / $font-size);
}
}
// Space elements by an amount based on your magic number. Pass in the property
// to be indented as a paramater, e.g.:
//
//
@mixin typecsset-space($property) {
#{$property}: 2 * $typecsset-magic-ratio + rem;
}
// A small, internally-used function to remove the units from a given value.
@function typecsset-strip-units($number) {
@return $number / ($number * 0 + 1);
}
/*------------------------------------*\
#SHARED
\*------------------------------------*/
/**
* A lot of elements in Typecsset need to share some declarations (mainly for
* vertical rhythm), so we `@extend` some silent classes.
*/
//
%typecsset-reset {
margin: 0;
padding: 0;
margin-bottom: 0.8rem;
}
%typecsset-vertical-rhythm {
@extend %typecsset-reset;
margin-bottom: $typecsset-magic-ratio + rem;
}
/*------------------------------------*\
#BASE
\*------------------------------------*/
@@ -119,110 +48,51 @@ html {
line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */
}
/*------------------------------------*\
#HEADINGS
\*------------------------------------*/
h1 {
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h1-size, xs));
}
h2 {
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h2-size, xs));
}
h1,
h2,
h3 {
font-weight: 300;
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size(map-get($typecsset-h3-size, xs));
}
@media (min-width: $screen-sm) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, sm));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, sm));
}
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, sm));
}
@extend %typecsset-reset;
font-weight: 300;
line-height: 1.2;
}
@media (min-width: $screen-md) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, md));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, md));
}
h3 {
h1 {
@include typecsset-font-size(map-get($typecsset-h3-size, md));
}
@include fluidSizes(font-size, 32, 44); //blog
//@include fluidSizes(font-size, 28, 48); -> for website header
}
@media (min-width: $screen-lg) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, lg));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, lg));
}
h3 {
h2 {
@include typecsset-font-size(map-get($typecsset-h3-size, lg));
}
@include fluidSizes(font-size, 24, 32); //blog
line-height: 1.2;
}
@media (min-width: $screen-lg) {
h1 {
@include typecsset-font-size(map-get($typecsset-h1-size, xl));
}
h2 {
@include typecsset-font-size(map-get($typecsset-h2-size, xl));
}
h3 {
h3 {
@include typecsset-font-size(map-get($typecsset-h3-size, xl));
}
@include fluidSizes(font-size, 20, 24);
}
h4,
h5,
h6 {
line-height: 1.6;
font-size: 1rem;
margin-bottom: 0.4rem;
}
@extend %typecsset-vertical-rhythm;
@include typecsset-font-size($typecsset-h4-size);
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
margin-top: 2rem;
}
/*------------------------------------*\
@@ -231,9 +101,9 @@ h6 {
ul,
ol {
margin-left: 1rem;
@extend %typecsset-vertical-rhythm;
@extend %typecsset-reset;
margin-left: 1rem;
}
li > ul,
@@ -247,5 +117,6 @@ li > ol {
p {
@extend %typecsset-vertical-rhythm;
@extend %typecsset-reset;
line-height: 1.6; //blog 1.5
}

0 comments on commit 89e9ba5

Please sign in to comment.