728 lines
17 KiB
Text
728 lines
17 KiB
Text
|
/*!
|
|||
|
|
+---------------------------------------------------------------------+
|
|||
|
|
| _ _ _ |
|
|||
|
|
| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ |
|
|||
|
|
| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ |
|
|||
|
|
| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ |
|
|||
|
|
| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| |
|
|||
|
|
| |___/ |_| |_| |
|
|||
|
|
| |
|
|||
|
|
| |
|
|||
|
|
| 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.
|
|||
|
|
*
|
|||
|
|
*/
|