diff --git a/assets/less/ie.less b/assets/less/ie.less index 2f902a2b..d7f714de 100644 --- a/assets/less/ie.less +++ b/assets/less/ie.less @@ -11,8 +11,6 @@ /* Site wide styles (html, body, global classes) =========== */ @import "site.less"; // TYPOGRAPHY ================================================= -/* Typeplate.com typographic starter pack ================== */ -// @import "typeplate.less"; @import "typography.less"; // MIXINS ===================================================== @import "mixins.less"; diff --git a/assets/less/mixins.less b/assets/less/mixins.less index e5df34a3..c2d0c524 100644 --- a/assets/less/mixins.less +++ b/assets/less/mixins.less @@ -70,6 +70,8 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +@indent-var: 0rem + (@doc-line-height / @doc-font-size); + // GRADIENTS // -------------------------------------------------- diff --git a/assets/less/typeplate.less b/assets/less/typeplate.less deleted file mode 100644 index 9c59edb0..00000000 --- a/assets/less/typeplate.less +++ /dev/null @@ -1,727 +0,0 @@ -/*! -+---------------------------------------------------------------------+ -| _ _ _ | -| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ | -| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ | -| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ | -| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| | -| |___/ |_| |_| | -| | -| | -| 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.65; -@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: @textcolor; -@heading-color: @textcolor; - - -// $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.5em; - - -// $S t a t s T a b -// -------------------------------------------------------------------------- - -@stats-font-size: 1.5rem; -@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 -} - - -// $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: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @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 -.definition-list-style (@style) when (@style = dictionary-style) { - 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-wrap: Indicates that lines may only break at normal word break points. - // breakword : 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 - line-height: 1; - margin-top: 0; -} - -// 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 { - .alpha; - .hN; -} - -h2 { - .beta; - .hN; -} - -h3 { - .gamma; - .hN; -} - -h4 { - .delta; - .hN; -} - -h5 { - .epsilon; - .hN; -} - -h6 { - .zeta; - .hN; -} - - -// $ P a r a g r a p h s -// -------------------------------------------------------------------------- - -p { - margin: 0 0 @indent-val; - & + p { - //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 - * - HMTL - * - * Extend this object into your markup. - * - */ -abbr { - .smallcaps(@textcolor, 400); - &: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; -} - - -// $ D e f i n i t i o n L i s t s -// -------------------------------------------------------------------------- - -/** - * Lining Definition Style Markup - * -
-
-
-
- * - * Extend this object into your markup. - * - */ -.lining { - .definition-list-style(lining); -} - -/** - * Dictionary Definition Style Markup - * -
-
-
-
- * - * Extend this object into your markup. - * - */ -.dictionary-style { - .definition-list-style(dictionary-style); -} - - -// $S t a t s T a b -// -------------------------------------------------------------------------- - -/** - * Stats Tab Markup - * - - * - * 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 - * -
-

″″

- - - -
- * - * Extend this object into your markup. - * - */ - -.cite-style(@display:block, @text-align:right, @font-size: .875em) { - 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 - * - - * - * Extend this object into your custom stylesheet. - * - */ - -.pull-quotes(@font-size, @opacity) { - position: relative; - padding: (@font-size/@font-size); - &:before, - &:after { - height: (@font-size/@font-size); - opacity: @opacity; - position: absolute; - font-size: @font-size; - } - &:before { - content: '“'; - top: 0em; - left: 0em; - } - &:after { - content: '”'; - bottom: 0em; - right: 0em; - } -} - -.pull-quote { - .pull-quotes(4em, .15); -} - - -// @Figures -// -------------------------------------------------------------------------- - -/** - * Figures Markup - * -
-
- Fig. 4.2 | Type Anatomy, an excerpt from Mark Boulton's book"Designing for the Web" -
-
- * - * Extend this object into your markup. - * - */ - - - // @Footnotes -// -------------------------------------------------------------------------- - -/** - * Footnote Markup : Replace 'X' with your unique number for each footnote - * -
-

- -
- * - * Extend this object into your markup. - * - */