steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Initial commit

Browse Source
This commit is contained in:
Michael Rose
2013-05-24 10:25:31 -04:00
commit aea18887c0
64 changed files with 12551 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1974
assets/css/ie.css Normal file
View File

File diff suppressed because it is too large Load Diff

2875
assets/css/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/img/background-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
assets/img/background-light.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

1879
assets/js/main.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
assets/js/main.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
assets/js/vendor/jquery-1.9.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

81
assets/js/vendor/jquery.fitvids.js vendored Normal file
View File

@@ -0,0 +1,81 @@
/*global jQuery */
/*jshint multistr:true browser:true */
/*!
* FitVids 1.0
*
* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
* Date: Thu Sept 01 18:00:00 2011 -0500
*/
(function( $ ){
"use strict";
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null
};
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
div.className = 'fit-vids-style';
div.innerHTML = '&shy;<style> \
.fluid-width-video-wrapper { \
width: 100%; \
position: relative; \
padding: 0; \
} \
\
.fluid-width-video-wrapper iframe, \
.fluid-width-video-wrapper object, \
.fluid-width-video-wrapper embed { \
position: absolute; \
top: 0; \
left: 0; \
width: 100%; \
height: 100%; \
} \
</style>';
ref.parentNode.insertBefore(div,ref);
if ( options ) {
$.extend( settings, options );
}
return this.each(function(){
var selectors = [
"iframe[src*='player.vimeo.com']",
"iframe[src*='www.youtube.com']",
"iframe[src*='www.youtube-nocookie.com']",
"iframe[src*='www.kickstarter.com']",
"object",
"embed"
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos.each(function(){
var $this = $(this);
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('id')){
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
$this.attr('id', videoID);
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
$this.removeAttr('height').removeAttr('width');
});
});
};
})( jQuery );

1760
assets/js/vendor/jquery.magnific-popup.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

4
assets/js/vendor/modernizr-2.6.2.custom.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

48
assets/less/1382.less Normal file
View File

@@ -0,0 +1,48 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,1.5);
.prefix(12,2);
}
.top-navigation {
.grid(12,8);
}
.image-wrap {
img {
.grid(12,8);
.prefix(12,2);
.suffix(12,2);
margin-top: 1em;
margin-bottom: 2em;
}
&:after {
left: 33.333333333%;
}
.headline-wrap {
.prefix(12,4);
}
}
#main article {
.grid(12,4.5);
}
#index {
.grid(12,4.5);
}
.related-articles {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.footer-wrap footer {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.article-author-top {
.grid(12,1.5);
.prefix(12,2);
}
// VENDOR-SPECIFIC ============================================

6
assets/less/2x.less Normal file
View File

@@ -0,0 +1,6 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
// VENDOR-SPECIFIC ============================================

11
assets/less/480.less Normal file
View File

@@ -0,0 +1,11 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.image-grid {
li {
width: 33.333333%;
}
}
// VENDOR-SPECIFIC ============================================

69
assets/less/600.less Normal file
View File

@@ -0,0 +1,69 @@
// ROOT =======================================================
html {
font-size: 95%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
.top-navigation {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
.image-wrap .headline-wrap {
.prefix(12,3);
}
.image-wrap:after {
left: 25%;
}
#main article {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
#index {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
.footer-wrap footer {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
.article-author-top {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
.article-author-bottom {
display: none;
}
.toc {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
position: fixed;
top: 25px;
right: 0;
.box-shadow(0 0 5px rgba(0,0,0,.50));
}
.image-grid {
li {
width: 25%;
}
}
.related-articles {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
// VENDOR-SPECIFIC ============================================

15
assets/less/768.less Normal file
View File

@@ -0,0 +1,15 @@
// ROOT =======================================================
html {
font-size: 100%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
/* Image Grid ============================================== */
.image-grid {
li {
width: 20%;
}
}
// VENDOR-SPECIFIC ============================================

15
assets/less/992.less Normal file
View File

@@ -0,0 +1,15 @@
// ROOT =======================================================
html {
font-size: 112.5%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
/* Image Grid ============================================== */
.image-grid {
li {
width: 16.666666666%;
}
}
// VENDOR-SPECIFIC ============================================

133
assets/less/coderay.less Normal file
View File

@@ -0,0 +1,133 @@
.CodeRay {
background-color: #efefef;
font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
font-size: 80%;
color: #333332;
margin-bottom: 1.5em;
}
.CodeRay pre {
margin: 0px;
padding: 1em;
}
div.CodeRay { }
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
table.CodeRay td {
padding: 1em 0.5em;
vertical-align: top;
}
.CodeRay .line-numbers, .CodeRay .no {
background-color: #ECECEC;
color: #AAA;
text-align: right;
}
.CodeRay .line-numbers a {
color: #AAA;
}
.CodeRay .line-numbers tt { font-weight: bold }
.CodeRay .line-numbers .highlighted { color: red }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay span.line-numbers { padding: 0 24px 0 4px }
.CodeRay .code { width: 100% }
ol.CodeRay { font-size: 10pt }
ol.CodeRay li { white-space: pre }
.CodeRay .code pre { overflow: auto }
.CodeRay .debug { color:white ! important; background:blue ! important; }
.CodeRay .annotation { color:#007 }
.CodeRay .attribute-name { color:#f08 }
.CodeRay .attribute-value { color:#700 }
.CodeRay .binary { color:#509; font-weight:bold }
.CodeRay .comment { color:#998; font-style: italic;}
.CodeRay .char { color:#04D }
.CodeRay .char .content { color:#04D }
.CodeRay .char .delimiter { color:#039 }
.CodeRay .class { color:#458; font-weight:bold }
.CodeRay .complex { color:#A08; font-weight:bold }
.CodeRay .constant { color:teal; }
.CodeRay .color { color:#0A0 }
.CodeRay .class-variable { color:#369 }
.CodeRay .decorator { color:#B0B; }
.CodeRay .definition { color:#099; font-weight:bold }
.CodeRay .directive { color:#088; font-weight:bold }
.CodeRay .delimiter { color:black }
.CodeRay .doc { color:#970 }
.CodeRay .doctype { color:#34b }
.CodeRay .doc-string { color:#D42; font-weight:bold }
.CodeRay .escape { color:#666; font-weight:bold }
.CodeRay .entity { color:#800; font-weight:bold }
.CodeRay .error { color:#F00; background-color:#FAA }
.CodeRay .exception { color:#C00; font-weight:bold }
.CodeRay .filename { color:#099; }
.CodeRay .function { color:#900; font-weight:bold }
.CodeRay .global-variable { color:teal; font-weight:bold }
.CodeRay .hex { color:#058; font-weight:bold }
.CodeRay .integer { color:#099; }
.CodeRay .include { color:#B44; font-weight:bold }
.CodeRay .inline { color: black }
.CodeRay .inline .inline { background: #ccc }
.CodeRay .inline .inline .inline { background: #bbb }
.CodeRay .inline .inline-delimiter { color: #D14; }
.CodeRay .inline-delimiter { color: #D14; }
.CodeRay .important { color:#f00; }
.CodeRay .interpreted { color:#B2B; font-weight:bold }
.CodeRay .instance-variable { color:teal }
.CodeRay .label { color:#970; font-weight:bold }
.CodeRay .local-variable { color:#963 }
.CodeRay .octal { color:#40E; font-weight:bold }
.CodeRay .operator { }
.CodeRay .predefined-constant { font-weight:bold }
.CodeRay .predefined { color:#369; font-weight:bold }
.CodeRay .preprocessor { color:#579; }
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
.CodeRay .predefined-type { color:#074; font-weight:bold }
.CodeRay .reserved, .keyword { color:#000; font-weight:bold }
.CodeRay .key { color: #808; }
.CodeRay .key .delimiter { color: #606; }
.CodeRay .key .char { color: #80f; }
.CodeRay .value { color: #088; }
.CodeRay .regexp { background-color:#fff0ff }
.CodeRay .regexp .content { color:#808 }
.CodeRay .regexp .delimiter { color:#404 }
.CodeRay .regexp .modifier { color:#C2C }
.CodeRay .regexp .function { color:#404; font-weight: bold }
.CodeRay .string { color: #D20; }
.CodeRay .string .string { }
.CodeRay .string .string .string { background-color:#ffd0d0 }
.CodeRay .string .content { color: #D14; }
.CodeRay .string .char { color: #D14; }
.CodeRay .string .delimiter { color: #D14; }
.CodeRay .shell { color:#D14 }
.CodeRay .shell .content { }
.CodeRay .shell .delimiter { color:#D14 }
.CodeRay .symbol { color:#990073 }
.CodeRay .symbol .content { color:#A60 }
.CodeRay .symbol .delimiter { color:#630 }
.CodeRay .tag { color:#070 }
.CodeRay .tag-special { color:#D70; font-weight:bold }
.CodeRay .type { color:#339; font-weight:bold }
.CodeRay .variable { color:#036 }
.CodeRay .insert { background: #afa; }
.CodeRay .delete { background: #faa; }
.CodeRay .change { color: #aaf; background: #007; }
.CodeRay .head { color: #f8f; background: #505 }
.CodeRay .insert .insert { color: #080; font-weight:bold }
.CodeRay .delete .delete { color: #800; font-weight:bold }
.CodeRay .change .change { color: #66f; }
.CodeRay .head .head { color: #f4f; }

79
assets/less/elements.less Normal file
View File

@@ -0,0 +1,79 @@
hr {
display: block;
margin: 1em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
/* Figures and images ==================================== */
article img {
max-width: 100%;
height: auto;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
.half {
.container();
.clearfix();
img {
.grid(12,6);
}
figcaption {
.grid(12,12);
}
}
.third {
.container();
.clearfix();
img {
.grid(12,4);
}
figcaption {
.grid(12,12);
}
}
/* Buttons =============================================== */
.btn {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 12px;
margin-bottom: 2em;
line-height: 1;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
border: 4px double @textcolor;
cursor: pointer;
*margin-left: .3em;
.transition(.4s linear);
&:visited {
border: 4px double @linkcolorvisited;
}
&:hover {
border: 4px double @linkcolorhover;
}
}
.btn:first-child {
*margin-left: 0;
}
.btn-inverse {
border: 4px double @white;
color: @white;
background-color: @black;
&:visited {
color: @white;
border-color: @white;
}
&:hover {
color: @white;
border-color: @white;
}
}

249
assets/less/forms.less Normal file
View File

@@ -0,0 +1,249 @@
form {
margin: 0 0 5px 0;
fieldset {
margin-bottom: 5px;
padding: 0;
border-width: 0;
}
legend {
display: block;
width: 100%;
margin-bottom: 5px * 2;
*margin-left: -7px;
padding: 0;
color: @textcolor;
border: 0;
border-bottom: 1px solid lighten(@black, 80);
white-space: normal;
}
p {
margin-bottom: 5px / 2;
}
ul {
list-style-type: none;
margin: 0 0 5px 0;
padding: 0;
}
br {
display: none;
}
}
label,
input,
button,
select,
textarea {
vertical-align: baseline;
*vertical-align: middle;
}
input,
button,
select,
textarea {
font-family: @basefont;
.box-sizing(border-box);
}
label {
display: block;
margin-bottom: 10px / 8;
font-weight: bold;
color: @textcolor;
cursor: pointer;
input,
textarea,
select {
display: block;
}
}
input,
textarea,
select {
display: inline-block;
width: 100%;
padding: 4px;
margin-bottom: 5px / 4;
background-color: @white;
border: 1px solid lighten(@black, 80);
color: @textcolor;
&:hover {
border-color: lighten(@accentcolor, 50);
}
}
.input-mini {
width: 60px;
}
.input-small {
width: 90px;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0;
line-height: normal;
cursor: pointer;
.rounded(0);
border: 0 \9;
}
input[type="checkbox"],
input[type="radio"] {
.box-sizing(border-box);
padding: 0;
*width: 13px;
*height: 13px;
}
input[type="image"] {
border: 0;
.box-shadow(none);
}
input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
border: initial;
background-color: transparent;
background-color: initial;
.box-shadow(none);
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
width : auto;
height : auto;
cursor : pointer;
*overflow : visible;
}
select,
input[type="file"] {
*margin-top : 4px;
}
select {
width : auto;
background-color : @white;
}
select[multiple],
select[size] {
height : auto;
}
textarea {
.resize(vertical);
height : auto;
overflow : auto;
vertical-align : top;
}
input[type="hidden"] {
display : none;
}
.radio,
.checkbox {
padding-left : 18px;
font-weight : normal;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float : left;
margin-left : -18px;
}
.radio.inline,
.checkbox.inline {
display : inline-block;
padding-top : 5px;
margin-bottom : 0;
vertical-align : middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left : 10px;
}
/* disabled ==================================== */
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
.opacity(.5);
cursor : not-allowed;
}
/* focus and active ============================ */
input:focus,
textarea:focus {
border-color : @accentcolor;
outline : 0;
outline : thin dotted \9;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none);
}
/* help text ==================================== */
.help-block,
.help-inline {
color : lighten(@black, 50);
}
.help-block {
display : block;
margin-bottom : 1em;
line-height : 1em;
}
.help-inline {
display : inline-block;
vertical-align : middle;
padding-left : 5px;
}
/* .form-inline ================================= */
.form-inline input,
.form-inline textarea,
.form-inline select {
display : inline-block;
margin-bottom : 0;
}
.form-inline label {
display : inline-block;
}
.form-inline .radio,
.form-inline .checkbox,
.form-inline .radio {
padding-left : 0;
margin-bottom : 0;
vertical-align : middle;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float : left;
margin-left : 0;
margin-right : 3px; }
/* .form-search ================================= */
.form-search input,
.form-search textarea,
.form-search select {
display : inline-block;
margin-bottom : 0;
}
.form-search .search-query {
padding-left : 14px;
padding-right : 14px;
margin-bottom : 0;
.rounded(14px);
}
.form-search label {
display : inline-block;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio {
padding-left : 0;
margin-bottom : 0;
vertical-align : middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] {
float : left;
margin-left : 0;
margin-right : 3px;
}

47
assets/less/grid.less Normal file
View File

@@ -0,0 +1,47 @@
// Defining number of columns in the grid.
// Common Values would be 12, 16 or 24
@width: 100%;
@def_grid: 12;
@margin: 0;
.container(){
margin:0 auto;
width:@width;
}
// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Removes 20px for margins
.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){
display:@display;
float:@float;
width:(100%/@grid * @cols) - (@margin * 2);
}
// Allows for padding before element
.prefix(@grid:@def_grid,@cols:''){
margin-left:(100%/@grid * @cols);
}
// Allows for padding after element
.suffix(@grid:@def_grid,@cols:''){
margin-right:(100%/@grid * @cols);
}
// Removes left margin
.first(){
margin-left:0;
}
// Removes right margin
.last(){
margin-right:0;
}
.push(@grid:@def_grid,@move:'') {
position:relative;
left:(100%/@grid * @move);
}
.pull(@grid:@def_grid,@move:''){
position:relative;
left:(100%/@grid * @move) * -1;
}

39
assets/less/ie.less Normal file
View File

@@ -0,0 +1,39 @@
// ===========================================================
// Minimal Mistakes
// By: Michael Rose
// ===========================================================/
// ROOT =======================================================
/* CSS Normalize =========================================== */
@import "normalize.less";
/* Variables and mixins ==================================== */
@import "variables.less";
/* 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";
@import "grid.less";
// ELEMENTS ===================================================
/* Figures, images, social media, other elements =========== */
@import "elements.less";
/* Standard form controls ================================== */
@import "forms.less";
// LAYOUT =====================================================
/* Page level layout styles */
@import "page.less";
// MODERNIZR ==================================================
// MEDIA QUERIES ==============================================
/* 480px wide ============================================== */
@import "480.less";
/* 600px wide ============================================== */
@import "600.less";
/* 768px wide ============================================== */
@import "768.less";
/* 992px wide ============================================== */
@import "992.less";
/* 1382px wide ============================================= */
@import "1382.less";

437
assets/less/magnific-popup.less Normal file
View File

@@ -0,0 +1,437 @@
/* Magnific Popup CSS */
// Modified by Michael Rose
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 502;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 503;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
height: 100%;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 505; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom,
.image-popup {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 504; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
padding: 0;
z-index: 506; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
.hide-text();
position: absolute;
top: 0;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
background-color: @black;
.transition(opacity 0.2s ease-in-out);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: solid transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a {
opacity: 0.8;
border-top-width: 12px;
border-bottom-width: 12px;
top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b {
border-top-width: 20px;
border-bottom-width: 20px; }
.mfp-arrow-left {
left: 0;
.border-radius(5px, 5px, 0, 0); }
.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a {
border-right: 12px solid white;
left: 5px; }
.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
border-right: 20px solid white; }
.mfp-arrow-right {
right: 0;
.border-radius(0, 0, 5px, 5px); }
.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
border-left: 12px solid white;
left: 3px; }
.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
border-left: 20px solid white; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
top: -3px;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
.mfp-iframe-holder .mfp-close {
top: -43px; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.mfp-figure {
line-height: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #f3f3f3; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
/* The shadow behind the image */
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; } }
@media all and (max-width: 800px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
/**
* Fade-zoom animation for first dialog
*/
/* start state */
.mfp-fade .zoom-anim-dialog {
opacity: 0;
.transition(all 0.2s ease-in-out);
.scale(0.8);
}
/* animate in */
.mfp-fade.mfp-ready .zoom-anim-dialog {
opacity: 1;
.scale(1);
}
/* animate out */
.mfp-fade.mfp-removing .zoom-anim-dialog {
.scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.mfp-fade.mfp-bg {
opacity: 0;
.transition(opacity 0.3s ease-out);
}
/* animate in */
.mfp-fade.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.mfp-fade.mfp-removing.mfp-bg {
opacity: 0;
}

61
assets/less/main.less Normal file
View File

@@ -0,0 +1,61 @@
// ===========================================================
// Minimal Mistakes
// By: Michael Rose
// ===========================================================/
// ROOT =======================================================
/* CSS Normalize =========================================== */
@import "normalize.less";
/* Variables and mixins ==================================== */
@import "variables.less";
/* Site wide styles (html, body, global classes) =========== */
@import "site.less";
// TYPOGRAPHY =================================================
/* Typeplate.com typographic starter pack ================== */
@import "typeplate.less";
@import "typography.less";
/* Codeway Syntax highlighting ============================= */
@import "coderay.less";
// MIXINS =====================================================
@import "mixins.less";
@import "grid.less";
// ELEMENTS ===================================================
/* Figures, images, social media, other elements =========== */
@import "elements.less";
/* Standard form controls ================================== */
@import "forms.less";
// LAYOUT =====================================================
/* Page level layout styles ================================ */
@import "page.less";
// PLUGINS ===================================================
/* jQuery Magnific-Popup =================================== */
@import "magnific-popup.less";
// MEDIA QUERIES ==============================================
/* Print =================================================== */
@media print {
@import "print.less";
}
/* 480px wide ============================================== */
@media only screen and (min-width: 30em) {
@import "480.less";
}
/* 600px wide ============================================== */
@media only screen and (min-width: 37.5em) {
@import "600.less";
}
/* 768px wide ============================================== */
@media only screen and (min-width: 48em) {
@import "768.less";
}
/* 992px wide ============================================== */
@media only screen and (min-width: 62em) {
@import "992.less";
}
/* 1382px wide ============================================= */
@media only screen and (min-width: 86.375em) {
@import "1382.less";
}
/* 2x for retina displays ================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@import "2x.less";
}

299
assets/less/mixins.less Normal file
View File

@@ -0,0 +1,299 @@
// ===========================================================
// 320 and Up by Andy Clarke
// Version: 3.0
// URL: http://stuffandnonsense.co.uk/projects/320andup/
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
// Modified by: Michael Rose
// ===========================================================/
// ROOT =====================================================
// TYPOGRAPHY ===============================================
.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size : @font-size * 1px;
font-size : ~"@{rem}rem"; }
.lineheight(@font-size: 16){
@rem: (@font-size / 10);
line-height: @font-size * 1px;
line-height: ~"@{rem}rem"; }
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
// COLOR ====================================================
// TEXTURE ==================================================
/* Gradients ============================================= */
.horizontal(@startColor : @white, @endColor : @lightergrey) {
background-color: @endColor;
background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(left, @startColor, @endColor); // W3C
background-repeat : repeat-x; }
.vertical(@startColor : @white, @endColor: @lightergrey) {
background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-color : @endColor;
background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(top, @startColor, @endColor); // W3C
background-repeat : repeat-x; }
.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
background-color : @endColor;
background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(@deg, @startColor, @endColor); // W3C
background-repeat : repeat-x; }
/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
border-top : solid 1px @top-color;
border-left : solid 1px @left-color;
border-right : solid 1px @right-color;
border-bottom : solid 1px @bottom-color; }
/* .rounded(VALUE); ====================================== */
.rounded(@radius:4px) {
-webkit-border-radius : @radius;
-moz-border-radius : @radius;
border-radius : @radius; }
/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius : @topright;
-webkit-border-bottom-right-radius : @bottomright;
-webkit-border-bottom-left-radius : @bottomleft;
-webkit-border-top-left-radius : @topleft;
-moz-border-radius-topright : @topright;
-moz-border-radius-bottomright : @bottomright;
-moz-border-radius-bottomleft : @bottomleft;
-moz-border-radius-topleft : @topleft;
border-top-right-radius : @topright;
border-bottom-right-radius : @bottomright;
border-bottom-left-radius : @bottomleft;
border-top-left-radius : @topleft;
-webkit-background-clip : padding-box;
-moz-background-clip : padding;
background-clip : padding-box; }
/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow : @shadow;
-moz-box-shadow : @shadow;
box-shadow : @shadow; }
/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }
/* .text-shadow(); ======================================== */
.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
text-shadow : @shadow; }
/* .opacity(VALUE); ======================================= */
.opacity(@opacity : .5) {
-webkit-opacity : @opacity;
-moz-opacity : @opacity;
opacity : @opacity; }
/* .rotate(VALUEdeg); ===================================== */
.rotate(@deg) {
-webkit-transform : rotate(@deg);
-moz-transform : rotate(@deg);
-ms-transform : rotate(@deg);
-o-transform : rotate(@deg);
transform : rotate(@deg); }
/* .scale(VALUE); ========================================= */
.scale(@ratio) {
-webkit-transform : scale(@ratio);
-moz-transform : scale(@ratio);
-ms-transform : scale(@ratio);
-o-transform : scale(@ratio);
transform : scale(@ratio); }
/* .skew(VALUE, VALUE); =================================== */
.skew(@x: 0, @y: 0) {
-webkit-transform : skew(@x, @y);
-moz-transform : skew(@x, @y);
-ms-transform : skew(@x, @y);
-o-transform : skew(@x, @y);
transform : skew(@x, @y); }
/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
.transition(@transition) {
-webkit-transition : @transition;
-moz-transition : @transition;
-ms-transition : @transition;
-o-transition : @transition;
transition : @transition; }
/* .translate(VALUE, VALUE) =============================== */
.translate(@x: 0, @y: 0) {
-webkit-transform : translate(@x, @y);
-moz-transform : translate(@x, @y);
-ms-transform : translate(@x, @y);
-o-transform : translate(@x, @y);
transform : translate(@x, @y); }
.translate3d(@x: 0, @y: 0, @z: 0) {
-webkit-transform : translate(@x, @y, @z);
-moz-transform : translate(@x, @y, @z);
-ms-transform : translate(@x, @y, @z);
-o-transform : translate(@x, @y, @z);
transform : translate(@x, @y, @z); }
// ELEMENTS ==================================================
/* .background-alpha(VALUE VALUE); ======================== */
.background-alpha(@color: @white, @alpha: 1) {
background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
/* .background-size(VALUE VALUE); ========================= */
.background-size(@size){
-webkit-background-size : @size;
-moz-background-size : @size;
-o-background-size : @size;
background-size : @size; }
/* .background-clip(VALUE); (border-box, padding-box, content-box) */
.background-clip(@clip) {
-webkit-background-clip : @clip;
-moz-background-clip : @clip;
background-clip : @clip; }
/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
.box-sizing(@boxsize: border-box) {
-webkit-box-sizing : @boxsize;
-moz-box-sizing : @boxsize;
-ms-box-sizing : @boxsize;
box-sizing : @boxsize; }
/* Contain floats ========================================= */
.clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
/* For image replacement ================================== */
.hide-text() {
text-indent : 100%;
white-space : nowrap;
overflow : hidden; }
/* Hide from visual and speaking browsers ================= */
.hidden() {
display : none !important;
visibility : hidden; }
.hidden {
display: none;
visibility: hidden;
}
/* Hide but maintain layout =============================== */
.invisible() {
visibility : hidden; }
/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
.resize(@direction: both) {
resize : @direction;
overflow : auto; }
/* .userselect(VALUE) (all, element, none, text) ========== */
.user-select(@select) {
-webkit-user-select : @select;
-moz-user-select : @select;
-o-user-select : @select;
user-select : @select; }
/* Hidden but available to speaking browsers ============== */
.visuallyhidden() {
overflow : hidden;
position : absolute;
clip : rect(0 0 0 0);
height : 1px;
width : 1px;
margin : -1px;
padding : 0;
border : 0; }
/* Make visuallyhidden focusable with a keyboard ========== */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
position : static;
clip : auto;
height : auto;
width : auto;
margin : 0;
overflow: visible; }
/* Responsive visibility utilities =================================== */
/* For desktops =========================================== */
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.visible-desktop { } // Don't set initially
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { display: none !important; }
/* Mobile phones only =====================================*/
@media (max-width: 767px) {
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide
.hidden-phone { display: none !important; }
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
}
/* Tablets & small desktops only ========================== */
@media (min-width: 768px) and (max-width: 979px) {
// Show
.visible-tablet { display: inherit !important; }
// Hide
.hidden-tablet { display: none !important; }
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
}
// LAYOUT ====================================================
/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
-webkit-column-width : @colwidth;
-webkit-column-count : @colcount;
-webkit-column-gap : @colgap;
-webkit-column-rule-color : @columnRuleColor;
-webkit-column-rule-style : @columnRuleStyle;
-webkit-column-rule-width : @columnRuleWidth;
-moz-column-width : @colwidth;
-moz-column-count : @colcount;
-moz-column-gap : @colgap;
-moz-column-rule-color : @columnRuleColor;
-moz-column-rule-style : @columnRuleStyle;
-moz-column-rule-width : @columnRuleWidth;
column-width : @colwidth;
column-count : @colcount;
column-gap : @colgap;
column-rule-color : @columnRuleColor;
column-rule-style : @columnRuleStyle;
column-rule-width : @columnRuleWidth; }

397
assets/less/normalize.less vendored Normal file
View File

@@ -0,0 +1,397 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.5em;
}

355
assets/less/page.less Normal file
View File

@@ -0,0 +1,355 @@
html {
background: @bodycolor url(../img/background-light.jpg);
font-family: @basefont;
font-color: @textcolor;
font-size: 90%;
}
.navigation-wrapper {
.container();
padding: 2em 0 3em;
font-family: @baseheadingfont;
font-weight: 700;
text-transform: uppercase;
}
.site-name {
.container();
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
margin-bottom: 1em;
}
.top-navigation {
.container();
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
margin-bottom: 1em;
}
.top-navigation {
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
display: inline;
margin-right: 25px;
&:after {
content: ".";
}
a {
decoration: none;
border-bottom: 0 solid transparent;
}
}
}
#main {
counter-reset: captions;
.container();
.clearfix();
clear: both;
margin-top: 1em;
article {
.container();
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
margin-bottom: 2em;
}
}
#index {
.container();
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
margin-bottom: 2em;
article {
h2 {
.delta();
margin-bottom: 0;
}
p+p {
text-indent: 0;
}
}
}
.image-wrap {
position: relative;
margin-bottom: 2em;
&:after {
content: " ";
display: block;
position: absolute;
bottom: -1px;
left: 8%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: @bodycolor;
}
img {
width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
}
.headline-wrap {
position: absolute;
bottom: 25px;
.prefix(12,1);
h1, h2 {
color: @white;
.text-shadow(0 1px 2px rgba(0,0,0,.25));
}
}
}
.headline-wrap {
h1 {
.beta();
}
h2 {
.delta();
text-transform: uppercase;
}
}
.article-wrap {
h2 {
.gamma();
}
h3 {
.delta();
}
}
.byline {
clear: both;
font-size: 80%;
}
.article-author-top,
.article-author-bottom {
h4 {
margin-bottom: 0.5em;
}
p {
font-size: 80%;
font-style: italic;
}
a, a:hover {
border-bottom: 0 solid transparent;
}
img.bio-photo {
.rounded(100px);
}
}
.article-author-top {
display: none;
}
.article-author-bottom {
.bio-photo {
float: left;
margin-right: 25px;
}
}
.toc {
display: none;
font-size: 95%;
.opacity(0.7);
.transition(opacity 0.2s ease-in-out);
&:hover {
.opacity(1);
}
header {
background: lighten(@black, 10);
}
h3 {
margin: 0;
padding: 5px 10px;
color: @white;
&:hover {
cursor: pointer;
}
}
ul {
margin: 2px 0 0;
padding: 0;
background: lighten(@black, 30);
line-height: 1;
}
li {
display: block;
margin: 0;
padding: 0;
font-family: @baseheadingfont;
border-bottom: 1px solid darken(@white, 50);
&:last-child {
border-bottom: 0 solid transparent;
}
a, a:hover {
color: @white;
border-bottom: 0 solid transparent;
}
a {
padding: 10px;
display: block;
}
ul {
margin: 0;
border-top: 1px solid darken(@white, 50);
}
}
}
.image-grid {
.clearfix();
list-style: none;
margin: 0 0 1em;
padding: 0;
li {
.grid(12,6);
}
}
.recent-grid {
.clearfix();
list-style: none;
margin: 1em 0;
li {
display: inline;
a {
border-bottom: 0 solid transparent;
&:hover {
border-bottom: 0 solid transparent;
}
}
}
img {
width: 19%;
margin-bottom: 1%;
}
}
.holder {
font-family: @baseheadingfont;
a {
cursor: pointer;
margin: 0 5px;
}
a.jp-previous {
margin-left: 0;
margin-right: 15px;
}
a.jp-next {
margin-left: 15px;
margin-right: 0;
}
a.jp-current {
font-weight: bold;
}
a.jp-disabled,
a.jp-disabled:hover {
}
a.jp-current,
a.jp-current:hover,
a.jp-disabled,
a.jp-disabled:hover {
cursor: default;
background: none;
}
span {
margin: 0 5px;
}
}
.footer-wrap {
.container();
.clearfix();
clear: both;
margin-top: 1em;
padding-top: 2em;
padding-bottom: 3em;
background: @black url(../img/background-dark.png);
a,
a:active,
a:visited,
p,
h4,
h5,
h6 {
color: darken(@white, 25);
}
a {
border-bottom: 0 solid transparent;
&:hover {
color: @white;
border-bottom: 0 solid transparent;
}
}
footer {
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
}
}
.related-articles {
.grid(12,10);
.prefix(12,1);
.suffix(12,1);
h4 {
.epsilon();
text-transform: uppercase;
margin-bottom: 0;
}
li {
margin-bottom: 0;
color: @white;
}
}
.footer-icons {
li {
display: inline-block;
padding-right: 5px;
a {
.delta();
color: lighten(@basecolor, 40%);
.transition(.4s linear);
&:hover {
text-decoration: none;
border-bottom: none;
.icon-twitter,
.icon-twitter-sign {
color: #2aa9df;
}
.icon-facebook,
.icon-facebook-sign {
color: #3a5a98;
}
.icon-instagram,
.icon-instagram-sign {
color: #306088;
}
.icon-google-plus,
.icon-google-plus-sign {
color: #b63324;
}
.icon-lastfm,
.icon-lastfm-sign {
color: #d80049;
}
.icon-github {
color: #4183c4;
}
}
}
}
}
.chrome-frame {
background: #000;
text-align: center;
margin: 0 0 2em 0;
padding: 10px;
text-align: center;
color: @white;
a {
color: @white;
border-bottom: 1px dotted @white;
text-decoration: none;
&:hover {
border-bottom: 1px solid @white;
}
}
}

56
assets/less/print.less Normal file
View File

@@ -0,0 +1,56 @@
// ROOT =====================================================
* {
background : transparent !important;
color : black !important;
box-shadow : none !important;
text-shadow : none !important;
filter : none !important;
-ms-filter : none !important;
position: static !important; }
@page {
margin : 0.5cm; }
// TYPOGRAPHY ===============================================
h2, h3 {
orphans : 3;
widows : 3;
page-break-after : avoid; }
p {
orphans : 3;
widows : 3; }
pre, blockquote {
border : 1px solid #333;
page-break-inside : avoid;
padding: 1em; }
abbr[title]:after {
content: " (" attr(title) ")"; }
a, a:visited {
text-decoration : underline; }
a[href]:after {
content : " (" attr(href) ")"; }
a[href^="javascript:"]:after,
a[href^="#"]:after {
content : ""; }
// TEXTURE ===============================================
img {
max-width : 100% !important;
page-break-inside : avoid; }
thead {
display : table-header-group; }
tr {
page-break-inside : avoid; }
// ELEMENTS ==============================================
// LAYOUT ================================================
// VENDOR-SPECIFIC =======================================
// MODERNIZR =============================================

41
assets/less/site.less Normal file
View File

@@ -0,0 +1,41 @@
/* Selection ============================================= */
::-moz-selection {
background-color: lighten(@basecolor, 65%);
color: @basecolor;
text-shadow: none;
}
::selection {
background-color: lighten(@basecolor, 65%);
color: @basecolor;
text-shadow: none;
}
/* Global Classes ======================================== */
.all-caps {
text-transform: uppercase;
}
.pull-left {
float: left;
}
.pull-right {
float:right;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
.unstyled-list {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}

727
assets/less/typeplate.less Normal file
View File

@@ -0,0 +1,727 @@
/*!
+---------------------------------------------------------------------+
| _ _ _ |
| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ |
| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ |
| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ |
| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| |
| |___/ |_| |_| |
| |
| |
| 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>&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: .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.
*
*/

101
assets/less/typography.less Normal file
View File

@@ -0,0 +1,101 @@
/* Headings ============================================== */
h1, h2, h3, h4, h5, h6 {
font-family: @baseheadingfont;
font-weight: 700;
}
h6 {
font-weight: 400;
}
/* Links ================================================= */
a {
text-decoration: none;
color: @linkcolor;
&:visited {
color: @linkcolorvisited;
}
&:hover {
color: @linkcolorhover;
}
&:focus {
outline: thin dotted;
color: @linkcolorfocus;
}
&:hover,
&:active {
outline: 0;
}
}
b, strong {
font-weight: 700;
}
/* Lists ============================================== */
ul {
li {
list-style-type: square
}
}
ol {
li {
list-style-type: upper-roman;
}
}
/* Add underline for main links ======================= */
p > a,
li > a,
em > a,
a > em,
footer a {
text-decoration: none;
border-bottom: 1px dotted lighten(@textcolor, 50%);
}
p > a:hover,
li > a:hover,
em > a:hover,
footer a:hover {
text-decoration: none;
border-bottom: 1px solid lighten(@textcolor, 50%);
}
/* Figure caption ===================================== */
figcaption {
margin-top: (@indent-val / 2);
line-height: 1.25;
.zeta();
font-family: @baseheadingfont;
counter-increment: captions;
&:before {
font-weight: 700;
text-transform: uppercase;
content: "Figure " counter(captions) ": ";
}
}
/* Notice ============================================== */
.notice {
margin-top: 1.5em;
padding: .5em 1em;
text-indent: 0;
font-size: 90%;
background-color: #ddd;
border-left: 10px solid #ccc;
}
/* Blockquote =========================================== */
blockquote {
font-style: italic;
border-left: 10px solid #ccc;
margin-left: 0;
padding-left: 1em;
border-left: 10px solid #ccc;
p+p {
text-indent: 0;
margin-top: 0;
}
}
/* Footnotes ============================================= */
.footnotes {
font-size: 90%;
}

19
assets/less/variables.less Normal file
View File

@@ -0,0 +1,19 @@
// TYPOGRAPHY ================================================
@basefont: 'PT Serif', serif;
@baseheadingfont: 'PT Sans Narrow', sans-serif;
@codefont: Monaco, Courier New, monospace;
// COLOR ====================================================
@bodycolor : #ebebeb;
@textcolor : #333332;
@basecolor : #343434;
@compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor;
@white : #fff;
@black : #000;
@accentcolor : @black;
/* Links ================================================= */
@linkcolor : #343434;
@linkcolorhover : darken(@linkcolor, 10);
@linkcolorvisited : lighten(@linkcolorhover, 20);
@linkcolorfocus : darken(@linkcolorvisited, 10);