typeplate.less

/*!
+---------------------------------------------------------------------+
|        _                               _         _                  |
|       | |_  _   _  _ __    ___  _ __  | |  __ _ | |_  ___           |
|       | __|| | | || '_ \  / _ \| '_ \ | | / _` || __|/ _ \          |
|       | |_ | |_| || |_) ||  __/| |_) || || (_| || |_|  __/          |
|        \__| \__, || .__/  \___|| .__/ |_| \__,_| \__|\___|          |
|             |___/ |_|          |_|                                  |
|                                                                     |
|                                                                     |
| URL: http://typeplate.com                                           |
| VERSION: 1.0.1                                                      |
| Github: https://github.com/typePlate/typeplate.github.com           |
| AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) |
| LICENSE: Creative Commmons                                          |
| http://creativecommons.org/licenses/by/3.0                          |
|                                                                     |
+---------------------------------------------------------------------+
*/


// ==========================================================================
//
// $V a r i a b l e s
//
// ==========================================================================


// $B a s e  T y p e
// --------------------------------------------------------------------------

@weight: normal;
@line-height: 1.4rem;
@font-size: 112.5; // percentage value (16 * 112.5% = 18px)
@font-base: 16 * (@font-size/100); // converts our percentage to a pixel value
@measure: @font-base * @line-height;
@font-family: serif;
@font-family-sans: sans-serif;

//the serif boolean var can be redeclared from another stylesheet. However
//the var must be placed after your @import "typeplate.less";
@serif-boolean: true;


// $C o l o r
// --------------------------------------------------------------------------

@body-copy-color: #444;
@heading-color: #222;


// $A M P E R S A N D  @font-face
// --------------------------------------------------------------------------

@amp-fontface-name: Ampersand;
@amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
@amp-fontface-fallback: local("Georgia");


// $A M P E R S A N D  e l e m e n t
// --------------------------------------------------------------------------

// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
@amp-font-family: Verdana, sans-serif;


// $T y p e  S c a l e
// --------------------------------------------------------------------------

@tera: 117;		//	117	= 18 × 6.5
@giga: 90;		//	90  = 18 × 5
@mega: 72;		//	72  = 18 × 4
@alpha: 60;		//	60  = 18 × 3.3333
@beta: 48;		//	48  = 18 × 2.6667
@gamma: 36;		//	36  = 18 × 2
@delta: 24;		//	24  = 18 × 1.3333
@epsilon: 21;	//	21  = 18 × 1.1667
@zeta: 18; 		//	18  = 18 × 1


// $T y p e  S c a l e  U n i t
// --------------------------------------------------------------------------

@type-scale-unit-value: rem;


// $T e x t  I n d e n t a t i o n
// --------------------------------------------------------------------------

@indent-val: 1.4rem;


// $S t a t s  T a b
// --------------------------------------------------------------------------

@stats-font-size: 1.4rem;
@stats-list-margin: 0 0.625rem 0 0;
@stats-list-padding: 0 0.625rem 0 0;
@stats-item-font-size: 0.875rem;
@stats-item-margin: 0.125rem 0 0 0;
@stats-border-style: 0.125rem solid #ccc;



// ==========================================================================
//
// $F o n t f a c e s
//
// ==========================================================================


// $U N I C O D E - R A N G E    A m p e r s a n d
// --------------------------------------------------------------------------

@font-face {
	font-family: "@{amp-fontface-name}";
	src: @amp-fontface-source;
	unicode-range: ~"U+270C";
}

// Ampersand fallback font for unicode range
@font-face {
	font-family: "@{amp-fontface-name}";
	src: @amp-fontface-fallback;
	unicode-range: ~"U+270C";
}



// ==========================================================================
//
// $F u n c t i o n s
//
// ==========================================================================


// $C o n t e x t    C a l c u l a t o r
// --------------------------------------------------------------------------

// Less conversion: No function support
//.ems(@target, @context) {
//	@return (@target/@context)#{em};
//}


// $M o d u l a r    S c a l e
// --------------------------------------------------------------------------
// http://thesassway.com/projects/modular-scale

// Less conversion: No function support
//@function modular-scale(@scale, @base, @value) {
//	// divide a given font-size by base font-size & return a relative em value
//	@return (@scale/@base)#{@value};
//}

// Less conversion: No function support
//@function measure-margin(@scale, @measure, @value) {
//	// divide 1 unit of measure by given font-size & return a relative em value
//	@return (@measure/@scale)#{@value};
//}



// ==========================================================================
//
// $M i x i n s
//
// ==========================================================================


// $M o d u l a r    S c a l e
// --------------------------------------------------------------------------

// @Typographic scale
.modular-scale (@scale, @base, @value, @measure:"") when (@measure = "") {
	font-size: ~"@{scale}px";
	@font: (@scale/@base) + @value;
	font-size: ~"@{font}rem";
}
.modular-scale (@scale, @base, @value, @measure:"") when not (@measure = "") {
	font-size: ~"@{scale}px";
	@font: (@scale/@base) + @value;
	font-size: ~"@{font}rem";
	@margin: (@measure/@scale) + @value;
	margin-bottom: ~"@{margin}rem";
}


// $B o d y    C o p y
// --------------------------------------------------------------------------

.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when (@serif-boolean = true) {
	font: @weight ~"@{font-size}%/@{line-height}" @font-family;
}
.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when not (@serif-boolean = true) {
	font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans;
}


// $H y p h e n
// --------------------------------------------------------------------------
//http://trentwalton.com/2011/09/07/css-hyphenation

.css-hyphens (@val) {
	// Accepted values: [ none | manual | auto ]
	-webkit-hyphens: @val;	// Safari 5.1 thru 6, iOS 4.2 thru 6
	-moz-hyphens: @val;		// Firefox 16 thru 20
	-ms-hyphens: @val;		// IE10
	-o-hyphens: @val;		// PRESTO...haha LOL
	hyphens: @val;			// W3C standard
	-webkit-hyphenate-before:2;
	-webkit-hyphenate-after:3;
	hyphenate-lines: 3;
}


// $S m a l l c a p s
// --------------------------------------------------------------------------
// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
// ISSUE#1 : https://github.com/zakkain/web-thang/issues/1

.smallcaps (@color, @font-weight) {
	// depends on the font family.
	// some font-families don't support small caps
	// or don't provide them with their web font.
	font-variant: small-caps;
	font-weight: @font-weight;
	text-transform: lowercase;
	color: @color;
}


// $F o n t - S i z e  - A d j u s t
// --------------------------------------------------------------------------
// correct x-height for fallback fonts: requires secret formula
// yet to be discovered. This is still wacky for support. Use
// wisely grasshopper.

.font-size-adjust (@adjust-value) {
	// firefox 17+ only (as of Feb. 2013)
	font-size-adjust: @adjust-value;
}


// $A m p e r s a n d
// --------------------------------------------------------------------------

.ampersand (@amp-font-family) {
	font-family: @amp-font-family;
}

.ampersand-placeholder {
	.ampersand(@amp-font-family);
}

// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided...
// @extend %ampersand-placeholder;



// $W o r d    W r a p
// --------------------------------------------------------------------------
// Silent Sass Classes - A.K.A Placeholders
//
// normal: Indicates that lines may only break at normal word break points.
// break-word : Indicates that normally unbreakable words may be broken at
// arbitrary points if there are no otherwise acceptable break points in the line.

.breakword {
	word-wrap: break-word;
}

.normal-wrap {
	word-wrap: normal;
}

.inherit-wrap {
	word-wrap: auto;
}


// $D r o p c a p s
// --------------------------------------------------------------------------
/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent);
 *
 * Extend this object into your custom stylesheet.
 *
 */

// Include your '@include dropcap()' mixin and pass the following
// arguments below. Feel free to pass in arguments we've provided.
// At this time you cannot pass in font-family arguments but you're gonna
// change that anyway so why not just make that separately in your declaration.
.dropcap (@float: left, @font-size: 2.8rem, @font-family: inherit, @text-indent: 0, @margin: none, @padding: 0 0.7rem 0 0, @color: inherit, @lineHeight: 1.2, @bg: transparent) {
	&:first-letter {
		float: @float;
		margin: @margin;
		padding: @padding;
		font-size: @font-size;
		font-family: @font-family;
		line-height: @lineHeight;
		text-indent: @text-indent;
		background: @bg;
		color: @color;
	}
}

.drop-cap {
	.dropcap;
}

// $D e f i n i t i o n    L i s t
// --------------------------------------------------------------------------
// lining
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
//
// dictionary-style
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css

.definition-list-style (@style) when (@style = lining) {
	dt,
	dd {
		display: inline;
		margin: 0;
	}
	dt,
	dd {
		& + dt {
			&:before {
				content: "\A";
				white-space: pre;
			}
		}
	}
	dd {
		& + dd {
			&:before {
				content: ", ";
			}
		}
		&:before {
				content: ": ";
				margin-left: -0.2rem; //removes extra space between the dt and the colon
		}
	}
}
// dictionary-style
dl {
	dt {
		display: inline;
		counter-reset: definitions;
		& + dt {
			&:before {
				content: ", ";
				margin-left: -0.2rem; // removes extra space between the dt and the comma
			}
		}
	}
	dd {
		display: block;
		counter-increment: definitions;
		&:before {
			content: ~"counter(definitions, decimal)" ". ";
		}
	}
}



// ==========================================================================
//
// $T y p e l a t e  S t y l i n g
//
// ==========================================================================


// $G l o b a l s
// --------------------------------------------------------------------------

html {
	.base-type(@weight, @line-height, @font-size, @font-family, @serif-boolean);
}

body {
	// Ala Trent Walton
	.css-hyphens (auto);
	// normal: Indicates that lines may only break at normal word break points.
	// break-word : Indicates that normally unbreakable words may be broken at ...
	// arbitrary points if there are no otherwise acceptable break points in the line.
	.normal-wrap;
	color: @body-copy-color;
}


// $H e a d i n g s
// --------------------------------------------------------------------------

// styles for all headings, in the style of @csswizardry
.hN () {
	// voodoo to enable ligatures and kerning
	text-rendering: optimizeLegibility;
	// this fixes huge spaces when a heading wraps onto two lines
}

// for each size in the scale, create a class
.tera 		{ .modular-scale(@tera, @font-base, @type-scale-unit-value, @measure); }
.giga 		{ .modular-scale(@giga, @font-base, @type-scale-unit-value, @measure); }
.mega 		{ .modular-scale(@mega, @font-base, @type-scale-unit-value, @measure); }
.alpha 		{ .modular-scale(@alpha, @font-base, @type-scale-unit-value, @measure); }
.beta 		{ .modular-scale(@beta, @font-base, @type-scale-unit-value, @measure); }
.gamma 		{ .modular-scale(@gamma, @font-base, @type-scale-unit-value, @measure); }
.delta 		{ .modular-scale(@delta, @font-base, @type-scale-unit-value, @measure); }
.epsilon 	{ .modular-scale(@epsilon, @font-base, @type-scale-unit-value, @measure); }
.zeta 		{ .modular-scale(@zeta, @font-base, @type-scale-unit-value, @measure); }

// associate h1-h6 tags with their appropriate greek heading
h1 {
	font-size: 2.25rem;
	line-height: 3rem;
	margin: 1rem 0;
	padding: 0;
	.hN;
	page-break-inside: never;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin: 1rem 0;
	padding: 0;
	.hN;
	page-break-inside: never;
}

h3, h4, h5, h6 {
	font-size: 1.125rem;
	line-height: 1.5rem;
	margin: 1rem 0;
	padding: 0;
	.hN;
	page-break-inside: never;
}


// $ P a r a g r a p h s
// --------------------------------------------------------------------------

p, div {
	margin: 0 0 @indent-val;
	widows:4;
	orphans:4;
	& + p, & + div {
		//siblings indentation
		text-indent: @indent-val;
		margin-top: -@indent-val;
	}
}

// $ H y p h e n s
// --------------------------------------------------------------------------
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
	.css-hyphens (none);
}


// $C o d e b l o c k s
// --------------------------------------------------------------------------

// White Space Mixins
.white-space-pre-wrap () {
	white-space: -moz-pre-wrap; // Firefox 1.0-2.0
	white-space: pre-wrap;			// Current Browsers
}
.white-space-pre () {
	white-space: pre;
}

pre code {
	.normal-wrap;
	.white-space-pre-wrap;
}
pre {
	.white-space-pre;
}
code {
	.white-space-pre;
	font-family: monospace;
}


// $ S m a l l c a p s
// --------------------------------------------------------------------------

/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
	.smallcaps(gray, 600);
	&:hover {
		cursor: help;
	}
}


// $ H e a d i n g s    C o l o r
// --------------------------------------------------------------------------

h1,
h2,
h3,
h4,
h5,
h6 {
	color: @heading-color;
	text-overflow: ellipsis;
}


// $ D e f i n i t i o n    L i s t s
// --------------------------------------------------------------------------

/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining {
	.definition-list-style(lining);
}

/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style {
	.definition-list-style(dictionary-style);
}


// $S t a t s    T a b
// --------------------------------------------------------------------------

/**
 * Stats Tab Markup
 *
	<ul class="stats-tabs">
		<li><a href="#">[value]<b>[name]</b></a></li>
	</ul>
 *
 * Extend this object into your markup.
 *
 */
.stats-tabs {
	padding: 0;
	li {
		display: inline-block;
		margin: @stats-list-margin;
		padding: @stats-list-padding;
		border-right: @stats-border-style;
		&:last-child {
			margin: 0;
			padding: 0;
			border: none;
		}
		a {
			display: inline-block;
			font-size: @stats-font-size;
			font-weight: bold;
			b {
				display: block;
				margin: @stats-item-margin;
				font-size: @stats-item-font-size;
				font-weight: normal;
			}
		}
	}
}


// @Blockquote Cites
// --------------------------------------------------------------------------
/**
 * Blockquote Markup
 *
	<blockquote cite="">
		<p>&Prime;&Prime;</p>
		<cite>
			<small><a href=""></a></small>
		</cite>
	</blockquote>
 *
 * Extend this object into your markup.
 *
 */

.cite-style(@display:block, @text-align:right, @font-size: .85em) {
	display: @display;
	font-size: @font-size;
	text-align: @text-align;
}

cite {
	.cite-style;
}


// @Pull Quotes
// --------------------------------------------------------------------------
// http://24ways.org/2005/swooshy-curly-quotes-without-images
//
// http://todomvc.com - Thanks sindresorhus!
// https://github.com/typeplate/typeplate.github.com/issues/49

/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */

.pull-quotes(@font-size, @opacity) {
	position: relative;
	padding: 0.7rem 1.4rem;
	&:before,
	&:after {
		height: (@font-size/@font-size);
		opacity: @opacity;
		position: absolute;
		font-size: @font-size;
		font-family: Georgia, "Times New Roman", Times, serif;
		width: (@font-size/@font-size);
	}
	&:before {
		content: '“';
		left: -1.8rem;
	}
	&:after {
		content: '”';
		right: -1.4rem;
	}
}

blockquote {
	.pull-quotes(4em, .15);
	p {
		margin-bottom: 0;
	}
	pre, code {
		font-family: inherit;
	}
}


// @Figures
// --------------------------------------------------------------------------

/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 /*
 * Extend this object into your markup.
 *
 */


 // @Footnotes
// --------------------------------------------------------------------------

/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */