@@ 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
- *
- <abbr title="hyper text markup language">HMTL</abbr>
- *
- * 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
- *
- <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>″″</p>
- <cite>
- <small><a href=""></a></small>
- </cite>
- </blockquote>
- *
- * 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
- *
- <aside class="pull-quote">
- <blockquote>
- <p></p>
- </blockquote>
- </aside>
- *
- * 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
- *
- <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.
- *
- */