diff --git a/README.md b/README.md index 60831cdd..b478e1af 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ General notes and suggestions for customizing Minimal Mistakes. minimal-mistakes/ ├── _includes | ├── author-bio.html //bio stuff goes here -| ├── chrome-frame.html //displays on IE8 and less +| ├── browser-upgrade.html //displays on IE8 and less | ├── footer.html //site footer | ├── head.html //site head | ├── navigation.html //site top nav @@ -112,6 +112,15 @@ image: The large texture images used in *Minimal Mistakes* are from [Love Textures](http://lovetextures.com), probably a good idea to swap these out with your own photos... +If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source. + +``` yaml +image: + feature: feature-image-filename.jpg + credit: Michael Rose #name of the person or site you want to credit + creditlink: http://mademistakes.com #url to their site or licensing +``` + #### Categories In the sample `_posts` folder you may have noticed `category: articles` in the front matter. I like keeping all posts grouped in the same folder. If you decide to rename or add categories you will need to modify the permalink in `articles.md` along with the filename (if renaming). diff --git a/_includes/author-bio.html b/_includes/author-bio.html index 9ef2e8cc..0dd3666b 100644 --- a/_includes/author-bio.html +++ b/_includes/author-bio.html @@ -1,11 +1,11 @@ -{{ site.owner.name }} bio photo -

{{ site.owner.name }}

+{{ site.owner.name }} bio photo +

{{ site.owner.name }}

{{ site.owner.bio }}

-{% if site.owner.twitter %}

Twitter

{% endif %} -{% if site.owner.facebook %}

Facebook

{% endif %} -{% if site.owner.google_plus %}

Google+

{% endif %} -{% if site.owner.linkedin %}

LinkedIn

{% endif %} -{% if site.owner.instagram %}

Instagram

{% endif %} -{% if site.owner.github %}

Github

{% endif %} -{% if site.owner.lastfm %}

Last.fm

{% endif %} -{% if site.owner.tumblr %}

Tumblr

{% endif %} \ No newline at end of file +{% if site.owner.twitter %} Twitter{% endif %} +{% if site.owner.facebook %} Facebook{% endif %} +{% if site.owner.google_plus %} Google+{% endif %} +{% if site.owner.linkedin %} LinkedIn{% endif %} +{% if site.owner.instagram %} Instagram{% endif %} +{% if site.owner.github %} Github{% endif %} +{% if site.owner.lastfm %} Last.fm{% endif %} +{% if site.owner.tumblr %} Tumblr{% endif %} \ No newline at end of file diff --git a/_includes/browser-upgrade.html b/_includes/browser-upgrade.html new file mode 100644 index 00000000..99d9cbc2 --- /dev/null +++ b/_includes/browser-upgrade.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/chrome-frame.html b/_includes/chrome-frame.html deleted file mode 100644 index b65f1b01..00000000 --- a/_includes/chrome-frame.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 5c7e7bbc..0f93d659 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1 +1 @@ -
© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by Jekyll using the Minimal Mistakes theme.
+© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by Jekyll using the Minimal Mistakes theme. diff --git a/_layouts/home.html b/_layouts/home.html index bdced321..39e56816 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -9,26 +9,21 @@ -{% include chrome-frame.html %} +{% include browser-upgrade.html %} {% include navigation.html %} -
-
-

{{ page.title }}

- {% if page.tagline %}

{{ page.tagline }}

{% endif %} -
- {{ page.title }} feature image -
+{% if page.image.feature %}
+ {{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %} +
{% endif %}
{% include author-bio.html %}
- View all articles -

Latest Articles

-
+

Articles

{% for post in site.categories.articles limit:5 %}

{{ post.title }}

diff --git a/_layouts/page.html b/_layouts/page.html index 754c0651..9466931e 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -9,12 +9,13 @@ -{% include chrome-frame.html %} +{% include browser-upgrade.html %} {% include navigation.html %} {% if page.image.feature %}
{{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %}
{% endif %}
@@ -22,9 +23,7 @@ {% include author-bio.html %}
-
-

{{ page.title }}

-
+

{{ page.title }}

{{ content }}
diff --git a/_layouts/post-index.html b/_layouts/post-index.html index 6ed5c8b6..83cac079 100644 --- a/_layouts/post-index.html +++ b/_layouts/post-index.html @@ -9,33 +9,29 @@ -{% include chrome-frame.html %} +{% include browser-upgrade.html %} {% include navigation.html %} -
-
-

{{ page.title }}

- {% if page.tagline %}

{{ page.tagline }}

{% endif %} -
- {{ page.title }} feature image -
+{% if page.image.feature %}
+ {{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %} +
{% endif %}
{% include author-bio.html %}
+

{{ page.title }}

{% for post in site.posts %} {% unless post.next %}

{{ post.date | date: '%Y' }}

-
{% else %} {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %} {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %} {% if year != nyear %}

{{ post.date | date: '%Y' }}

-
{% endif %} {% endunless %}
diff --git a/_layouts/post.html b/_layouts/post.html index de352d0d..5539ee0d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -9,12 +9,13 @@ -{% include chrome-frame.html %} +{% include browser-upgrade.html %} {% include navigation.html %} {% if page.image.feature %}
{{ page.title }} feature image + {% if page.image.credit %}Photo Credit: {{ page.image.credit }}{% endif %}
{% endif %}
@@ -23,7 +24,7 @@
-

{{ page.title }}

+

{{ page.title }}

{{ page.tagline }}

@@ -40,7 +41,7 @@
- {% if site.related_posts.size %}
+ {% if site.related_posts.size > 0 %}

You might also enjoy (View all articles)

    {% for post in site.related_posts limit:3 %} diff --git a/_posts/2011-03-10-sample-post.md b/_posts/2011-03-10-sample-post.md index 62112a74..7c81c423 100644 --- a/_posts/2011-03-10-sample-post.md +++ b/_posts/2011-03-10-sample-post.md @@ -7,6 +7,8 @@ category: articles tags: [intro, beginner, jekyll, tutorial] image: feature: texture-feature-05.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com ---
    @@ -40,7 +42,7 @@ Below is just about everything you'll need to style in the theme. Check the sour Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam. ![Smithsonian Image]({{ site.url }}/images/3953273590_704e3899d5_m.jpg) -{: .pull-right} +{: .image-pull-right} *This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. @@ -93,10 +95,4 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c Make any link standout more when applying the `.btn` class. - - - - - - - + \ No newline at end of file diff --git a/_posts/2013-05-23-readability-feature-post.md b/_posts/2013-05-23-readability-feature-post.md index ddbc6a96..8c189983 100644 --- a/_posts/2013-05-23-readability-feature-post.md +++ b/_posts/2013-05-23-readability-feature-post.md @@ -7,6 +7,8 @@ category: articles tags: [sample post, readability, test] image: feature: texture-feature-04.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com --- This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md new file mode 100644 index 00000000..022f0e8d --- /dev/null +++ b/_posts/2013-08-16-code-highlighting-post.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Syntax Highlighting Post +description: "Demo post displaying the various ways of highlighting code in Markdown." +category: articles +tags: [sample post, code, highlighting] +--- + +[Syntax highlighting](http://en.wikipedia.org/wiki/Syntax_highlighting) is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers. + +### Pygments Code Blocks + +To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`. + +{% highlight css %} +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +{% endhighlight %} + +Line numbering enabled: + +{% highlight html linenos %} +{% raw %} + +{% endraw %} +{% endhighlight %} + +{% highlight ruby %} +module Jekyll + class TagIndex < Page + def initialize(site, base, dir, tag) + @site = site + @base = base + @dir = dir + @name = 'index.html' + self.process(@name) + self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') + self.data['tag'] = tag + tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' + tag_title_suffix = site.config['tag_title_suffix'] || '–' + self.data['title'] = "#{tag_title_prefix}#{tag}" + self.data['description'] = "An archive of posts tagged #{tag}." + end + end +end +{% endhighlight %} + + +### Standard Code Block + + {% raw %} + + {% endraw %} + + +### Fenced Code Blocks + +To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`. + +~~~ css +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +~~~ + +~~~ html +{% raw %}{% endraw %} +~~~ + +~~~ ruby +module Jekyll + class TagIndex < Page + def initialize(site, base, dir, tag) + @site = site + @base = base + @dir = dir + @name = 'index.html' + self.process(@name) + self.read_yaml(File.join(base, '_layouts'), 'tag_index.html') + self.data['tag'] = tag + tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: ' + tag_title_suffix = site.config['tag_title_suffix'] || '–' + self.data['title'] = "#{tag_title_prefix}#{tag}" + self.data['description'] = "An archive of posts tagged #{tag}." + end + end +end +~~~ \ No newline at end of file diff --git a/about.md b/about.md index 492933c6..e6a825fc 100644 --- a/about.md +++ b/about.md @@ -6,6 +6,8 @@ tagline: Minimal Mistakes, a Jekyll Theme tags: [about, Jekyll, theme, responsive] image: feature: texture-feature-02.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com --- Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com) as a theme for others to hack and build on would be fun. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with large featured images and solid typography. diff --git a/articles.md b/articles.md index 8476efcf..6c8f7e71 100644 --- a/articles.md +++ b/articles.md @@ -4,6 +4,4 @@ permalink: /articles/index.html title: Articles tagline: A List of Posts tags: [blog, graphic design] -image: - feature: texture-feature-03.jpg --- \ No newline at end of file diff --git a/assets/css/ie.css b/assets/css/ie.css index 803df4c8..d893fcb3 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -1,265 +1,1725 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;} -audio,canvas,video{display:inline-block;} -audio:not([controls]){display:none;height:0;} -[hidden]{display:none;} -html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} -body{margin:0;} -a:focus{outline:thin dotted;} -a:active,a:hover{outline:0;} -h1{font-size:2em;margin:0.67em 0;} -abbr[title]{border-bottom:1px dotted;} -b,strong{font-weight:bold;} -dfn{font-style:italic;} -hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;} -mark{background:#ff0;color:#000;} -code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;} -pre{white-space:pre-wrap;} -q{quotes:"\201C" "\201D" "\2018" "\2019";} -small{font-size:80%;} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} -sup{top:-0.5em;} -sub{bottom:-0.25em;} -img{border:0;} -svg:not(:root){overflow:hidden;} -figure{margin:0;} -fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;} -legend{border:0;padding:0;} -button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;} -button,input{line-height:normal;} -button,select{text-transform:none;} -button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;} -button[disabled],html input[disabled]{cursor:default;} -input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;} -input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} -input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} -button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} -textarea{overflow:auto;vertical-align:top;} -table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;} -::-moz-selection{background-color:#dadada;color:#343434;text-shadow:none;} -::selection{background-color:#dadada;color:#343434;text-shadow:none;} -.all-caps{text-transform:uppercase;} -.pull-left{float:left;} -.pull-right{float:right;} -.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} -.clearfix:after{clear:both;} -.unstyled-list{list-style:none;margin-left:0;padding-left:0;}.unstyled-list li{list-style-type:none;} -@font-face{font-family:"Ampersand";src:local("Georgia"),local("Garamond"),local("Palatino"),local("Book Antiqua");unicode-range:U+270C;}@font-face{font-family:"Ampersand";src:local("Georgia");unicode-range:U+270C;}.ampersand-placeholder{font-family:Verdana,sans-serif;} -.breakword{word-wrap:break-word;} -.normal-wrap{word-wrap:normal;} -.inherit-wrap{word-wrap:auto;} -.drop-cap:first-letter{float:left;margin:inherit;padding:inherit;font-size:4em;font-family:inherit;line-height:1;text-indent:0;background:transparent;color:inherit;} -html{font:normal 112.5%/1.65 serif;} -body{word-wrap:normal;color:#333332;} -.tera{font-size:117px;font-size:6.5rem;margin-bottom:0.25384615384615383rem;} -.giga{font-size:90px;font-size:5rem;margin-bottom:0.33rem;} -.mega{font-size:72px;font-size:4rem;margin-bottom:0.4125rem;} -.alpha{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;} -.beta{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.gamma{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.delta{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.epsilon{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;} -.zeta{font-size:18px;font-size:1rem;margin-bottom:1.65rem;} -h1{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h2{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h3{font-size:36px;font-size:2rem;margin-bottom:0.825rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h4{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h5{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h6{font-size:18px;font-size:1rem;margin-bottom:1.65rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -p{margin:0 0 1.5em;}p+p{text-indent:1.5em;margin-top:-1.5em;} -abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;} -pre code{word-wrap:normal;white-space:-moz-pre-wrap;white-space:pre-wrap;} -pre{white-space:pre;} -code{white-space:pre;font-family:monospace;} -abbr{font-variant:small-caps;font-weight:400;text-transform:lowercase;color:#333332;}abbr:hover{cursor:help;} -h1,h2,h3,h4,h5,h6{color:#333332;} -.lining dt,.lining dd{display:inline;margin:0;} -.lining dt+dt:before,.lining dd+dt:before{content:"\A";white-space:pre;} -.lining dd+dd:before{content:", ";} -.lining dd:before{content:": ";margin-left:-0.2rem;} -.dictionary-style dt{display:inline;counter-reset:definitions;}.dictionary-style dt+dt:before{content:", ";margin-left:-0.2rem;} -.dictionary-style dd{display:block;counter-increment:definitions;}.dictionary-style dd:before{content:counter(definitions, decimal) ". ";} -.stats-tabs{padding:0;}.stats-tabs li{display:inline-block;margin:0 0.625rem 0 0;padding:0 0.625rem 0 0;border-right:0.125rem solid #cccccc;}.stats-tabs li:last-child{margin:0;padding:0;border:none;} -.stats-tabs li a{display:inline-block;font-size:1.5rem;font-weight:bold;}.stats-tabs li a b{display:block;margin:0.125rem 0 0 0;font-size:0.875rem;font-weight:normal;} -.cite{display:block;font-size:0.875em;text-align:right;} -.pull-quote{position:relative;padding:1em;}.pull-quote:before,.pull-quote:after{height:1em;opacity:0.15;position:absolute;font-size:4em;} -.pull-quote:before{content:'“';top:0em;left:0em;} -.pull-quote:after{content:'”';bottom:0em;right:0em;} -h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;font-weight:700;} -h6{font-weight:400;} -a{text-decoration:none;color:#343434;}a:visited{color:#4e4e4e;} -a:hover{color:#1a1a1a;} -a:focus{outline:thin dotted;color:#343434;} -a:hover,a:active{outline:0;} -b,strong{font-weight:700;} -ul li{list-style-type:square;} -ol li{list-style-type:upper-roman;} -p>a,li>a,em>a,a>em,footer a{text-decoration:none;border-bottom:1px dotted #b3b3b1;} -p>a:hover,li>a:hover,em>a:hover,footer a:hover{text-decoration:none;border-bottom:1px solid #b3b3b1;} -figcaption{margin-top:0.75em;line-height:1.25;font-size:18px;font-size:1rem;margin-bottom:1.65rem;font-family:'PT Sans Narrow',sans-serif;counter-increment:captions;}figcaption:before{font-weight:700;text-transform:uppercase;content:"Figure " counter(captions) ": ";} -.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:90%;background-color:#ddd;border-left:10px solid #ccc;} -blockquote{font-style:italic;margin-left:0;padding-left:1em;border-left:10px solid #ccc;}blockquote p+p{text-indent:0;margin-top:0;} -.footnotes{font-size:90%;} -tt,code,kbd,samp,pre{font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;} -p code{font-size:80%;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -.hidden{display:none;visibility:hidden;} -.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;clip:auto;height:auto;width:auto;margin:0;overflow:visible;} -.visible-phone{display:none !important;} -.visible-tablet{display:none !important;} -.hidden-desktop{display:none !important;} -@media (max-width:767px){.visible-phone{display:inherit !important;} .hidden-phone{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important;}}@media (min-width:768px) and (max-width:979px){.visible-tablet{display:inherit !important;} .hidden-tablet{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important ;}}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} -article img{max-width:100%;height:auto;border-width:0;vertical-align:middle;-ms-interpolation-mode:bicubic;} -svg:not(:root){overflow:hidden;} -.half{margin:0 auto;width:100%;*zoom:1;}.half:before,.half:after{display:table;content:"";} -.half:after{clear:both;} -.half:before,.half:after{content:"";display:table;} -.half:after{clear:both;} -.half img{display:inline;float:left;width:50%;} -.half figcaption{display:inline;float:left;width:100%;} -.third{margin:0 auto;width:100%;*zoom:1;}.third:before,.third:after{display:table;content:"";} -.third:after{clear:both;} -.third:before,.third:after{content:"";display:table;} -.third:after{clear:both;} -.third img{display:inline;float:left;width:33.333333333333336%;} -.third figcaption{display:inline;float:left;width:100%;} -.btn{display:inline-block;*display:inline;*zoom:1;padding:12px 24px;margin-bottom:2em;line-height:1;text-align:center;text-transform:uppercase;vertical-align:middle;border:4px double #333332;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;cursor:pointer;*margin-left:.3em;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.btn:visited{border:4px double #4e4e4e;} -.btn:hover{border:4px double #1a1a1a;} -.btn:first-child{*margin-left:0;} -.btn-inverse{border:4px double #ffffff;color:#ffffff;background-color:#000000;}.btn-inverse:visited{color:#ffffff;border-color:#ffffff;} -.btn-inverse:hover{color:#ffffff;border-color:#ffffff;} -.btn-small{font-size:60%;padding:6px 12px;} -.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);} -form{margin:0 0 5px 0;}form fieldset{margin-bottom:5px;padding:0;border-width:0;} -form legend{display:block;width:100%;margin-bottom:10px;*margin-left:-7px;padding:0;color:#333332;border:0;border-bottom:1px solid #cccccc;white-space:normal;} -form p{margin-bottom:2.5px;} -form ul{list-style-type:none;margin:0 0 5px 0;padding:0;} -form br{display:none;} -label,input,button,select,textarea{vertical-align:baseline;*vertical-align:middle;} -input,button,select,textarea{font-family:'PT Serif',serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} -label{display:block;margin-bottom:1.25px;font-weight:bold;color:#333332;cursor:pointer;}label input,label textarea,label select{display:block;} -input,textarea,select{display:inline-block;width:100%;padding:4px;margin-bottom:1.25px;background-color:#ffffff;border:1px solid #cccccc;color:#333332;}input:hover,textarea:hover,select:hover{border-color:#808080;} -.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;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0 \9;} -input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:0;*width:13px;*height:13px;} -input[type="image"]{border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -input[type="file"]{width:auto;padding:initial;line-height:initial;border:initial;background-color:transparent;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;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:#ffffff;} -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;} -input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{-webkit-opacity:0.5;-moz-opacity:0.5;opacity:0.5;cursor:not-allowed;} -input:focus,textarea:focus{border-color:#000000;outline:0;outline:thin dotted \9;} -input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.help-block,.help-inline{color:#808080;} -.help-block{display:block;margin-bottom:1em;line-height:1em;} -.help-inline{display:inline-block;vertical-align:middle;padding-left:5px;} -.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 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;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius: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;} -html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;font-size:90%;} -.navigation-wrapper{margin:0 auto;width:100%;padding:2em 0 3em;font-family:'PT Sans Narrow',sans-serif;font-weight:700;text-transform:uppercase;} -.site-name{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:1em;} -.top-navigation{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:1em;} -.top-navigation ul{list-style:none;margin:0;padding:0;} -.top-navigation li{list-style-type:none;display:inline;margin-right:25px;}.top-navigation li a{decoration:none;border-bottom:0 solid transparent;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;} -#main{counter-reset:captions;margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;}#main:before,#main:after{display:table;content:"";} -#main:after{clear:both;} -#main:before,#main:after{content:"";display:table;} -#main:after{clear:both;} -#main article{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;} -#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;margin-bottom:0;} -#index article p+p{text-indent:0;} -.image-wrap{position:relative;margin-bottom:2em;}.image-wrap:after{content:" ";display:block;position:absolute;bottom:-1px;left:8%;width:0;height:0;border:20px solid transparent;border-bottom-color:#ffffff;} -.image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic;} -.image-wrap .headline-wrap{position:absolute;bottom:25px;margin-left:8.333333333333334%;}.image-wrap .headline-wrap h1,.image-wrap .headline-wrap h2{color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);} -.headline-wrap h1{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.headline-wrap h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-transform:uppercase;} -.article-wrap h2{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.article-wrap h3{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.byline{clear:both;font-size:80%;} -.article-author-top h4,.article-author-bottom h4{margin-bottom:0.5em;} -.article-author-top p,.article-author-bottom p{font-size:80%;font-style:italic;} -.article-author-top a,.article-author-bottom a,.article-author-top a:hover,.article-author-bottom a:hover{border-bottom:0 solid transparent;} -.article-author-top img.bio-photo,.article-author-bottom img.bio-photo{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} -.article-author-top{display:none;} -.article-author-bottom .bio-photo{float:left;margin-right:25px;} -.toc{display:none;font-size:95%;-webkit-opacity:0.7;-moz-opacity:0.7;opacity:0.7;-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-ms-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}.toc:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1;} -.toc header{background:#1a1a1a;} -.toc h3{margin:0;padding:5px 10px;color:#ffffff;}.toc h3:hover{cursor:pointer;} -.toc ul{margin:2px 0 0;padding:0;background:#4d4d4d;line-height:1;} -.toc li{display:block;margin:0;padding:0;font-family:'PT Sans Narrow',sans-serif;border-bottom:1px solid #808080;}.toc li:last-child{border-bottom:0 solid transparent;} -.toc li a,.toc li a:hover{color:#ffffff;border-bottom:0 solid transparent;} -.toc li a{padding:10px;display:block;} -.toc li ul{margin:0;border-top:1px solid #808080;} -.image-grid{*zoom:1;list-style:none;margin:0 0 1em;padding:0;}.image-grid:before,.image-grid:after{display:table;content:"";} -.image-grid:after{clear:both;} -.image-grid:before,.image-grid:after{content:"";display:table;} -.image-grid:after{clear:both;} -.image-grid li{display:inline;float:left;width:50%;} -.recent-grid{*zoom:1;list-style:none;margin:1em 0;}.recent-grid:before,.recent-grid:after{display:table;content:"";} -.recent-grid:after{clear:both;} -.recent-grid:before,.recent-grid:after{content:"";display:table;} -.recent-grid:after{clear:both;} -.recent-grid li{display:inline;}.recent-grid li a{border-bottom:0 solid transparent;}.recent-grid li a:hover{border-bottom:0 solid transparent;} -.recent-grid img{width:19%;margin-bottom:1%;} -.holder{font-family:'PT Sans Narrow',sans-serif;}.holder a{cursor:pointer;margin:0 5px;} -.holder a.jp-previous{margin-left:0;margin-right:15px;} -.holder a.jp-next{margin-left:15px;margin-right:0;} -.holder a.jp-current{font-weight:bold;} -.holder a.jp-current,.holder a.jp-current:hover,.holder a.jp-disabled,.holder a.jp-disabled:hover{cursor:default;background:none;} -.holder span{margin:0 5px;} -.footer-wrap{margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;padding-top:2em;padding-bottom:3em;background-color:#000000;}.footer-wrap:before,.footer-wrap:after{display:table;content:"";} -.footer-wrap:after{clear:both;} -.footer-wrap:before,.footer-wrap:after{content:"";display:table;} -.footer-wrap:after{clear:both;} -.footer-wrap a,.footer-wrap a:active,.footer-wrap a:visited,.footer-wrap p,.footer-wrap h4,.footer-wrap h5,.footer-wrap h6{color:#bfbfbf;} -.footer-wrap a{border-bottom:0 solid transparent;}.footer-wrap a:hover{color:#ffffff;border-bottom:0 solid transparent;} -.footer-wrap footer{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;} -.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-transform:uppercase;margin-bottom:0;} -.related-articles li{margin-bottom:0;color:#ffffff;} -.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} -.footer-icons li a:hover .icon-facebook,.footer-icons li a:hover .icon-facebook-sign{color:#3a5a98;} -.footer-icons li a:hover .icon-instagram,.footer-icons li a:hover .icon-instagram-sign{color:#306088;} -.footer-icons li a:hover .icon-google-plus,.footer-icons li a:hover .icon-google-plus-sign{color:#b63324;} -.footer-icons li a:hover .icon-lastfm,.footer-icons li a:hover .icon-lastfm-sign{color:#d80049;} -.footer-icons li a:hover .icon-github{color:#4183c4;} -.chrome-frame{background:#000;margin:0 0 2em 0;padding:10px;text-align:center;color:#ffffff;}.chrome-frame a{color:#ffffff;border-bottom:1px dotted #ffffff;text-decoration:none;}.chrome-frame a:hover{border-bottom:1px solid #ffffff;} -.image-grid li{width:33.333333%;} -html{font-size:95%;} -.site-name{display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} -.top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;} -.image-wrap .headline-wrap,.image-wrap:after{left:25%;} -.image-wrap .headline-wrap{margin-left:0;} -#main article{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} -#index{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} -.footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;} -.article-author-top{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} -.article-author-bottom{display:none;} -.toc{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;position:fixed;top:120px;right:0;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} -.image-grid li{width:25%;} -.related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;} -html{font-size:100%;} -.image-grid li{width:20%;} -html{font-size:112.5%;} -.image-grid li{width:16.666666666%;} -.site-name{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;} -.top-navigation{display:inline;float:left;width:66.66666666666667%;} -.image-wrap:after{left:33.333333333%;} -.image-wrap .headline-wrap{margin-left:8.333333333333334%;} -#main article{display:inline;float:left;width:37.5%;} -#index{display:inline;float:left;width:37.5%;} -.related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} -.footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} -.article-author-top{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;} +/* CSS Normalize =========================================== */ +/*! 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%; + -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; +} +/** + * 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"], +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; +} +/* Variables and mixins ==================================== */ +/* Links ================================================= */ +/* Site wide styles (html, body, global classes) =========== */ +/* Selection ============================================= */ +::-moz-selection { + background-color: #dadada; + color: #343434; + text-shadow: none; +} +::selection { + background-color: #dadada; + color: #343434; + text-shadow: none; +} +/* Global Classes ======================================== */ +.all-caps { + text-transform: uppercase; +} +.pull-left { + float: left; +} +.pull-right { + float: right; +} +.image-pull-right { + float: right; + margin-top: 0; +} +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; +} +.clearfix:after { + clear: both; +} +.unstyled-list { + list-style: none; + margin-left: 0; + padding-left: 0; +} +.unstyled-list li { + list-style-type: none; +} +/* Global Transition ==================================== */ +b, +i, +strong, +em, +blockquote, +p, +q, +span, +figure, +img, +h1, +h2, +header, +input, +a { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} +body { + font-family: 'PT Serif', serif; + color: #333332; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; +} +h1 { + font-size: 32px; + font-size: 2rem; + line-height: 0.8125; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h2 { + font-size: 28px; + font-size: 1.75rem; + line-height: 0.9286; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h3 { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.0833; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h4 { + font-size: 18px; + font-size: 1.125rem; + line-height: 1.4444; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h5 { + font-size: 16px; + font-size: 1rem; + line-height: 1.625; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h6 { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +a { + text-decoration: none; + color: #343434; +} +a:visited { + color: #676767; +} +a:hover { + color: #010101; +} +a:focus { + outline: thin dotted; + color: #010101; +} +a:hover, +a:active { + outline: 0; +} +figcaption { + padding-top: 10px; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + line-height: 1.3; + color: #4d4d4b; +} +.image-credit { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + display: block; + text-align: right; + font-size: 12px; + font-size: 0.75rem; + line-height: 2.1667; + line-height: 1.3; + font-style: italic; + color: #80807e; +} +.image-credit a { + color: #80807e; +} +.notice { + margin-top: 1.5em; + padding: .5em 1em; + text-indent: 0; + font-size: 14px; + font-size: 0.875rem; + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +blockquote { + margin-left: -28px; + padding-left: 20px; + border-left: 8px solid #333332; + font-family: 'PT Serif', serif; + font-style: italic; + font-size: 24px; + font-size: 1.5rem; +} +.footnotes ol, +.footnotes li, +.footnotes p { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +p { + margin: 0 0 1.625rem; +} +p + p { + text-indent: 1.625rem; + margin-top: -1.625rem; +} +tt, +code, +kbd, +samp, +pre { + font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +} +p code, +li code { + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid #f7f7f7; + background-color: #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +pre { + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; + overflow-x: auto; +} +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; + line-height: 0; +} +.clearfix:after { + clear: both; +} +.hidden { + display: none; + visibility: hidden; +} +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + position: static; + clip: auto; + height: auto; + width: auto; + margin: 0; + overflow: visible; +} +/* Figures, images, social media, other elements =========== */ +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 { + margin: 0 auto; + width: 100%; + *zoom: 1; +} +.half:before, +.half:after { + display: table; + content: ""; +} +.half:after { + clear: both; +} +.half:before, +.half:after { + display: table; + content: ""; + line-height: 0; +} +.half:after { + clear: both; +} +.half img { + display: inline; + float: left; + width: 50%; +} +.half figcaption { + display: inline; + float: left; + width: 100%; +} +.third { + margin: 0 auto; + width: 100%; + *zoom: 1; +} +.third:before, +.third:after { + display: table; + content: ""; +} +.third:after { + clear: both; +} +.third:before, +.third:after { + display: table; + content: ""; + line-height: 0; +} +.third:after { + clear: both; +} +.third img { + display: inline; + float: left; + width: 33.333333333333336%; +} +.third figcaption { + display: inline; + float: left; + width: 100%; +} +/* Buttons ============================================== */ +.btn { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + font-size: 14px; + font-size: 0.875rem; + background-color: #111111; + color: #ffffff; + border: 2px solid #111111 !important; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; +} +.btn:visited { + color: #ffffff; +} +.btn:hover { + background-color: #ffffff; + color: #111111; +} +.btn:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +/* Well ================================================= */ +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +/* Standard form controls ================================== */ +form { + margin: 0 0 5px 0; +} +form fieldset { + margin-bottom: 5px; + padding: 0; + border-width: 0; +} +form legend { + display: block; + width: 100%; + margin-bottom: 10px; + *margin-left: -7px; + padding: 0; + color: #333332; + border: 0; + border-bottom: 1px solid #dddddd; + white-space: normal; +} +form p { + margin-bottom: 2.5px; +} +form ul { + list-style-type: none; + margin: 0 0 5px 0; + padding: 0; +} +form br { + display: none; +} +label, +input, +button, +select, +textarea { + vertical-align: baseline; + *vertical-align: middle; +} +input, +button, +select, +textarea { + font-family: 'PT Serif', serif; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +label { + display: block; + margin-bottom: 1.25px; + font-weight: bold; + color: #333332; + cursor: pointer; +} +label input, +label textarea, +label select { + display: block; +} +input, +textarea, +select { + display: inline-block; + width: 100%; + padding: 4px; + margin-bottom: 1.25px; + background-color: #ffffff; + border: 1px solid #dddddd; + color: #333332; +} +input:hover, +textarea:hover, +select:hover { + border-color: #919191; +} +.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; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + border: 0 \9; +} +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} +input[type="image"] { + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + border: initial; + background-color: transparent; + background-color: initial; + -webkit-box-shadow: none; + -moz-box-shadow: none; + 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: #ffffff; +} +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] { + -webkit-opacity: 0.5; + -moz-opacity: 0.5; + opacity: 0.5; + cursor: not-allowed; +} +/* focus and active ============================ */ +input:focus, +textarea:focus { + border-color: #111111; + outline: 0; + outline: thin dotted \9; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* help text ==================================== */ +.help-block, +.help-inline { + color: #919191; +} +.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; + -webkit-border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 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; +} +/* Page level layout styles */ +body { + background-color: #ffffff; + font-family: 'PT Serif', serif; + font-color: #333332; +} +.navigation-wrapper { + margin: 0 auto; + width: 100%; + padding: 2em 0 3em; + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; + text-transform: uppercase; +} +.site-name { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 1em; +} +.top-navigation { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 1em; +} +.top-navigation ul { + list-style: none; + margin: 0; + padding: 0; +} +.top-navigation li { + list-style-type: none; + display: inline; + margin-right: 25px; +} +.top-navigation li a { + decoration: none; + border-bottom: 0 solid transparent; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} +#main { + counter-reset: captions; + margin: 0 auto; + width: 100%; + *zoom: 1; + clear: both; + margin-top: 1em; +} +#main:before, +#main:after { + display: table; + content: ""; +} +#main:after { + clear: both; +} +#main:before, +#main:after { + display: table; + content: ""; + line-height: 0; +} +#main:after { + clear: both; +} +#main article { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +#index { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +#index h3 { + margin: 0; + padding-bottom: .5em; + font-size: 28px; + font-size: 1.75rem; + border-bottom: 1px solid #c3c3c3; +} +#index article h2 { + margin-bottom: 0; + font-size: 24px; + font-size: 1.5rem; +} +#index article p + p { + text-indent: 0; +} +.image-wrap { + position: relative; + margin-bottom: 2em; +} +.image-wrap:after { + content: " "; + display: block; + position: absolute; + bottom: -1px; + left: 8%; + width: 0; + height: 0; + border: 20px solid transparent; + border-bottom-color: #ffffff; +} +.image-wrap img { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} +.image-wrap .headline-wrap { + position: absolute; + bottom: 25px; + margin-left: 8.333333333333334%; +} +.image-wrap .headline-wrap h1, +.image-wrap .headline-wrap h2 { + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); +} +.byline { + clear: both; + font-size: 80%; +} +.article-author-top h3, +.article-author-bottom h3 { + margin-bottom: 0; +} +.article-author-top p, +.article-author-bottom p { + font-size: 80%; + font-style: italic; +} +.article-author-top a, +.article-author-bottom a, +.article-author-top a:hover, +.article-author-bottom a:hover { + border-bottom: 0 solid transparent; +} +.article-author-top img.bio-photo, +.article-author-bottom img.bio-photo { + width: 100px; + height: 100px; + -webkit-border-radius: 100px; + -moz-border-radius: 100px; + border-radius: 100px; +} +.author-social { + display: block; + margin-bottom: 5px; + font-size: 14px; + font-size: 0.875rem; + color: #111111; +} +.author-social:visited { + color: #111111; +} +.author-social:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); +} +.author-social:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +.article-author-top { + display: none; + text-align: center; +} +.article-author-bottom { + margin-bottom: 1em; +} +.article-author-bottom .bio-photo { + float: left; + margin-right: 25px; +} +.article-author-bottom .author-social { + display: inline-block; + margin-right: 5px; +} +.article-wrap p > a, +.article-wrap li > a { + border-bottom: 1px dotted #b3b3b3; +} +.article-wrap p > a:hover, +.article-wrap li > a:hover { + border-bottom-style: solid; +} +.article-wrap p > a.reversefootnote, +.article-wrap li > a.reversefootnote { + border-bottom-width: 0; +} +.toc { + display: none; + font-size: 95%; + -webkit-opacity: 0.7; + -moz-opacity: 0.7; + opacity: 0.7; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; +} +.toc:hover { + -webkit-opacity: 1; + -moz-opacity: 1; + opacity: 1; +} +.toc header { + background: #2b2b2b; +} +.toc h3 { + margin: 0; + padding: 5px 10px; + color: #ffffff; +} +.toc h3:hover { + cursor: pointer; +} +.toc ul { + margin: 2px 0 0; + padding: 0; + background: #5e5e5e; + line-height: 1; +} +.toc li { + display: block; + margin: 0; + padding: 0; + font-family: 'PT Sans Narrow', sans-serif; + border-bottom: 1px solid #808080; +} +.toc li:last-child { + border-bottom: 0 solid transparent; +} +.toc li a, +.toc li a:hover { + color: #ffffff; + border-bottom: 0 solid transparent; +} +.toc li a { + padding: 10px; + display: block; +} +.toc li ul { + margin: 0; + border-top: 1px solid #808080; +} +.image-grid { + *zoom: 1; + list-style: none; + margin: 0 0 1em; + padding: 0; +} +.image-grid:before, +.image-grid:after { + display: table; + content: ""; +} +.image-grid:after { + clear: both; +} +.image-grid:before, +.image-grid:after { + display: table; + content: ""; + line-height: 0; +} +.image-grid:after { + clear: both; +} +.image-grid li { + display: inline; + float: left; + width: 50%; +} +.recent-grid { + *zoom: 1; + list-style: none; + margin: 1em 0; +} +.recent-grid:before, +.recent-grid:after { + display: table; + content: ""; +} +.recent-grid:after { + clear: both; +} +.recent-grid:before, +.recent-grid:after { + display: table; + content: ""; + line-height: 0; +} +.recent-grid:after { + clear: both; +} +.recent-grid li { + display: inline; +} +.recent-grid li a { + border-bottom: 0 solid transparent; +} +.recent-grid li a:hover { + border-bottom: 0 solid transparent; +} +.recent-grid img { + width: 19%; + margin-bottom: 1%; +} +.holder { + font-family: 'PT Sans Narrow', sans-serif; +} +.holder a { + cursor: pointer; + margin: 0 5px; +} +.holder a.jp-previous { + margin-left: 0; + margin-right: 15px; +} +.holder a.jp-next { + margin-left: 15px; + margin-right: 0; +} +.holder a.jp-current { + font-weight: bold; +} +.holder a.jp-current, +.holder a.jp-current:hover, +.holder a.jp-disabled, +.holder a.jp-disabled:hover { + cursor: default; + background: none; +} +.holder span { + margin: 0 5px; +} +.footer-wrap { + margin: 0 auto; + width: 100%; + *zoom: 1; + clear: both; + margin-top: 1em; + padding-top: 2em; + padding-bottom: 3em; + background-color: #111111; +} +.footer-wrap:before, +.footer-wrap:after { + display: table; + content: ""; +} +.footer-wrap:after { + clear: both; +} +.footer-wrap:before, +.footer-wrap:after { + display: table; + content: ""; + line-height: 0; +} +.footer-wrap:after { + clear: both; +} +.footer-wrap a, +.footer-wrap a:active, +.footer-wrap a:visited, +.footer-wrap p, +.footer-wrap h4, +.footer-wrap h5, +.footer-wrap h6, +.footer-wrap span { + color: #bfbfbf; +} +.footer-wrap span { + font-size: 14px; + font-size: 0.875rem; +} +.footer-wrap a { + border-bottom: 0 solid transparent; +} +.footer-wrap a:hover { + color: #ffffff; + border-bottom: 0 solid transparent; +} +.footer-wrap footer { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; +} +.related-articles { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +.related-articles h4 { + text-transform: uppercase; + margin-bottom: 0; +} +.related-articles li { + margin-bottom: 0; + color: #ffffff; +} +.footer-icons li { + display: inline-block; + padding-right: 5px; +} +.footer-icons li a { + color: #9a9a9a; + -webkit-transition: 0.4s linear; + -moz-transition: 0.4s linear; + -ms-transition: 0.4s linear; + -o-transition: 0.4s linear; + transition: 0.4s linear; +} +.footer-icons li a:hover { + text-decoration: none; + border-bottom: none; +} +.footer-icons li a:hover .icon-twitter, +.footer-icons li a:hover .icon-twitter-sign { + color: #2aa9df; +} +.footer-icons li a:hover .icon-facebook, +.footer-icons li a:hover .icon-facebook-sign { + color: #3a5a98; +} +.footer-icons li a:hover .icon-instagram, +.footer-icons li a:hover .icon-instagram-sign { + color: #306088; +} +.footer-icons li a:hover .icon-google-plus, +.footer-icons li a:hover .icon-google-plus-sign { + color: #b63324; +} +.footer-icons li a:hover .icon-lastfm, +.footer-icons li a:hover .icon-lastfm-sign { + color: #d80049; +} +.footer-icons li a:hover .icon-github { + color: #4183c4; +} +.browser-upgrade { + background: #000; + margin: 0 0 2em 0; + padding: 10px; + text-align: center; + color: #ffffff; +} +.browser-upgrade a { + color: #ffffff; + border-bottom: 1px dotted #ffffff; + text-decoration: none; +} +.browser-upgrade a:hover { + border-bottom: 1px solid #ffffff; +} +#goog-fixurl ul { + list-style: none; + margin-left: 0; + padding-left: 0; +} +#goog-fixurl ul li { + list-style-type: none; +} +#goog-wm-qt { + width: auto; + margin-right: 10px; + margin-bottom: 20px; + padding: 8px 20px; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + background-color: #ffffff; + color: #111111; + border-width: 2px !important; + border-style: solid !important; + border-color: #919191; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#goog-wm-sb { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + font-size: 14px; + font-size: 0.875rem; + background-color: #111111; + color: #ffffff; + border: 2px solid #111111 !important; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; +} +#goog-wm-sb:visited { + color: #ffffff; +} +#goog-wm-sb:hover { + background-color: #ffffff; + color: #111111; +} +#goog-wm-sb:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +/* 480px wide ============================================== */ +.article-author-top, +.article-author-bottom { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-opacity: 0.7; + -moz-opacity: 0.7; + opacity: 0.7; +} +.article-author-top:hover, +.article-author-bottom:hover { + -webkit-opacity: 1; + -moz-opacity: 1; + opacity: 1; +} +.image-grid li { + width: 33.333333%; +} +/* 600px wide ============================================== */ +.site-name { + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; +} +.top-navigation { + display: inline; + float: left; + width: 75%; + margin-left: 0%; + margin-right: 0%; +} +.image-wrap .headline-wrap, +.image-wrap:after { + left: 25%; +} +.image-wrap .headline-wrap { + margin-left: 0; +} +.image-credit { + display: inline; + float: left; + width: 75%; + margin-left: 0%; + margin-right: 0%; +} +#main article { + display: inline; + float: left; + width: 50%; + margin-left: 0%; + margin-right: 0%; +} +#index { + display: inline; + float: left; + width: 50%; + margin-left: 0%; + margin-right: 0%; +} +.footer-wrap footer { + display: inline; + float: left; + width: 50%; + margin-left: 25%; + margin-right: 25%; +} +.article-author-top { + display: block; + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; +} +.article-author-bottom { + display: none; +} +.toc { + display: block; + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; + position: fixed; + top: 120px; + right: 0; + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); +} +.image-grid li { + width: 25%; +} +.related-articles { + display: inline; + float: left; + width: 50%; + margin-left: 25%; + margin-right: 25%; +} +/* 768px wide ============================================== */ +/* Image Grid ============================================== */ +.image-grid li { + width: 20%; +} +/* 992px wide ============================================== */ +.article-author-top img.bio-photo, +.article-author-bottom img.bio-photo { + width: 150px; + height: 150px; + -webkit-border-radius: 150px; + -moz-border-radius: 150px; + border-radius: 150px; +} +/* Image Grid ============================================== */ +.image-grid li { + width: 16.666666666%; +} +/* 1382px wide ============================================= */ +.site-name { + display: inline; + float: left; + width: 12.5%; + margin-left: 16.666666666666668%; +} +.top-navigation { + display: inline; + float: left; + width: 66.66666666666667%; +} +.image-wrap:after { + left: 33.333333333%; +} +.image-wrap .headline-wrap { + margin-left: 8.333333333333334%; +} +.image-credit { + display: inline; + float: left; + width: 70.83333333333334%; +} +#main article { + display: inline; + float: left; + width: 37.5%; +} +#index { + display: inline; + float: left; + width: 37.5%; +} +.related-articles { + display: inline; + float: left; + width: 37.5%; + margin-left: 33.333333333333336%; + margin-right: 29.166666666666668%; +} +.footer-wrap footer { + display: inline; + float: left; + width: 37.5%; + margin-left: 33.333333333333336%; + margin-right: 29.166666666666668%; +} +.article-author-top { + display: inline; + float: left; + width: 12.5%; + margin-left: 16.666666666666668%; +} diff --git a/assets/css/main.css b/assets/css/main.css index 663d4fa0..6e9cf1e7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,379 +1,3069 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;} -audio,canvas,video{display:inline-block;} -audio:not([controls]){display:none;height:0;} -[hidden]{display:none;} -html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} -body{margin:0;} -a:focus{outline:thin dotted;} -a:active,a:hover{outline:0;} -h1{font-size:2em;margin:0.67em 0;} -abbr[title]{border-bottom:1px dotted;} -b,strong{font-weight:bold;} -dfn{font-style:italic;} -hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;} -mark{background:#ff0;color:#000;} -code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;} -pre{white-space:pre-wrap;} -q{quotes:"\201C" "\201D" "\2018" "\2019";} -small{font-size:80%;} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} -sup{top:-0.5em;} -sub{bottom:-0.25em;} -img{border:0;} -svg:not(:root){overflow:hidden;} -figure{margin:0;} -fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;} -legend{border:0;padding:0;} -button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;} -button,input{line-height:normal;} -button,select{text-transform:none;} -button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;} -button[disabled],html input[disabled]{cursor:default;} -input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;} -input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} -input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} -button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} -textarea{overflow:auto;vertical-align:top;} -table{border-collapse:collapse;border-spacing:0;margin-bottom:1.5em;} -::-moz-selection{background-color:#dadada;color:#343434;text-shadow:none;} -::selection{background-color:#dadada;color:#343434;text-shadow:none;} -.all-caps{text-transform:uppercase;} -.pull-left{float:left;} -.pull-right{float:right;} -.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} -.clearfix:after{clear:both;} -.unstyled-list{list-style:none;margin-left:0;padding-left:0;}.unstyled-list li{list-style-type:none;} -@font-face{font-family:"Ampersand";src:local("Georgia"),local("Garamond"),local("Palatino"),local("Book Antiqua");unicode-range:U+270C;}@font-face{font-family:"Ampersand";src:local("Georgia");unicode-range:U+270C;}.ampersand-placeholder{font-family:Verdana,sans-serif;} -.breakword{word-wrap:break-word;} -.normal-wrap{word-wrap:normal;} -.inherit-wrap{word-wrap:auto;} -.drop-cap:first-letter{float:left;margin:inherit;padding:inherit;font-size:4em;font-family:inherit;line-height:1;text-indent:0;background:transparent;color:inherit;} -html{font:normal 112.5%/1.65 serif;} -body{word-wrap:normal;color:#333332;} -.tera{font-size:117px;font-size:6.5rem;margin-bottom:0.25384615384615383rem;} -.giga{font-size:90px;font-size:5rem;margin-bottom:0.33rem;} -.mega{font-size:72px;font-size:4rem;margin-bottom:0.4125rem;} -.alpha{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;} -.beta{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.gamma{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.delta{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.epsilon{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;} -.zeta{font-size:18px;font-size:1rem;margin-bottom:1.65rem;} -h1{font-size:60px;font-size:3.3333333333333335rem;margin-bottom:0.495rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h2{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h3{font-size:36px;font-size:2rem;margin-bottom:0.825rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h4{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h5{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -h6{font-size:18px;font-size:1rem;margin-bottom:1.65rem;text-rendering:optimizeLegibility;line-height:1;margin-top:0;} -p{margin:0 0 1.5em;}p+p{text-indent:1.5em;margin-top:-1.5em;} -abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none;} -pre code{word-wrap:normal;white-space:-moz-pre-wrap;white-space:pre-wrap;} -pre{white-space:pre;} -code{white-space:pre;font-family:monospace;} -abbr{font-variant:small-caps;font-weight:400;text-transform:lowercase;color:#333332;}abbr:hover{cursor:help;} -h1,h2,h3,h4,h5,h6{color:#333332;} -.lining dt,.lining dd{display:inline;margin:0;} -.lining dt+dt:before,.lining dd+dt:before{content:"\A";white-space:pre;} -.lining dd+dd:before{content:", ";} -.lining dd:before{content:": ";margin-left:-0.2rem;} -.dictionary-style dt{display:inline;counter-reset:definitions;}.dictionary-style dt+dt:before{content:", ";margin-left:-0.2rem;} -.dictionary-style dd{display:block;counter-increment:definitions;}.dictionary-style dd:before{content:counter(definitions, decimal) ". ";} -.stats-tabs{padding:0;}.stats-tabs li{display:inline-block;margin:0 0.625rem 0 0;padding:0 0.625rem 0 0;border-right:0.125rem solid #cccccc;}.stats-tabs li:last-child{margin:0;padding:0;border:none;} -.stats-tabs li a{display:inline-block;font-size:1.5rem;font-weight:bold;}.stats-tabs li a b{display:block;margin:0.125rem 0 0 0;font-size:0.875rem;font-weight:normal;} -.cite{display:block;font-size:0.875em;text-align:right;} -.pull-quote{position:relative;padding:1em;}.pull-quote:before,.pull-quote:after{height:1em;opacity:0.15;position:absolute;font-size:4em;} -.pull-quote:before{content:'“';top:0em;left:0em;} -.pull-quote:after{content:'”';bottom:0em;right:0em;} -h1,h2,h3,h4,h5,h6{font-family:'PT Sans Narrow',sans-serif;font-weight:700;} -h6{font-weight:400;} -a{text-decoration:none;color:#343434;}a:visited{color:#4e4e4e;} -a:hover{color:#1a1a1a;} -a:focus{outline:thin dotted;color:#343434;} -a:hover,a:active{outline:0;} -b,strong{font-weight:700;} -ul li{list-style-type:square;} -ol li{list-style-type:upper-roman;} -p>a,li>a,em>a,a>em,footer a{text-decoration:none;border-bottom:1px dotted #b3b3b1;} -p>a:hover,li>a:hover,em>a:hover,footer a:hover{text-decoration:none;border-bottom:1px solid #b3b3b1;} -figcaption{margin-top:0.75em;line-height:1.25;font-size:18px;font-size:1rem;margin-bottom:1.65rem;font-family:'PT Sans Narrow',sans-serif;counter-increment:captions;}figcaption:before{font-weight:700;text-transform:uppercase;content:"Figure " counter(captions) ": ";} -.notice{margin-top:1.5em;padding:.5em 1em;text-indent:0;font-size:90%;background-color:#ddd;border-left:10px solid #ccc;} -blockquote{font-style:italic;margin-left:0;padding-left:1em;border-left:10px solid #ccc;}blockquote p+p{text-indent:0;margin-top:0;} -.footnotes{font-size:90%;} -tt,code,kbd,samp,pre{font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;} -p code{font-size:80%;white-space:nowrap;margin:0 2px;padding:0 5px;border:1px solid #e6e6e6;background-color:#f2f2f2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -.highlight{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;} -.highlight pre{margin:0px;padding:1em;} -.hll{background-color:#ffffcc;} -.c{color:#999988;font-style:italic;} -.err{color:#a61717;background-color:#e3d2d2;} -.k{color:#000000;font-weight:bold;} -.o{color:#000000;font-weight:bold;} -.cm{color:#999988;font-style:italic;} -.cp{color:#999999;font-weight:bold;font-style:italic;} -.c1{color:#999988;font-style:italic;} -.cs{color:#999999;font-weight:bold;font-style:italic;} -.gd{color:#000000;background-color:#ffdddd;} -.ge{color:#000000;font-style:italic;} -.gr{color:#aa0000;} -.gh{color:#999999;} -.gi{color:#000000;background-color:#ddffdd;} -.go{color:#888888;} -.gp{color:#555555;} -.gs{font-weight:bold;} -.gu{color:#aaaaaa;} -.gt{color:#aa0000;} -.kc{color:#000000;font-weight:bold;} -.kd{color:#000000;font-weight:bold;} -.kn{color:#000000;font-weight:bold;} -.kp{color:#000000;font-weight:bold;} -.kr{color:#000000;font-weight:bold;} -.kt{color:#445588;font-weight:bold;} -.m{color:#009999;} -.s{color:#d01040;} -.na{color:#008080;} -.nb{color:#0086b3;} -.nc{color:#445588;font-weight:bold;} -.no{color:#008080;} -.nd{color:#3c5d5d;font-weight:bold;} -.ni{color:#800080;} -.ne{color:#990000;font-weight:bold;} -.nf{color:#990000;font-weight:bold;} -.nl{color:#990000;font-weight:bold;} -.nn{color:#555555;} -.nt{color:#000080;} -.nv{color:#008080;} -.ow{color:#000000;font-weight:bold;} -.w{color:#bbbbbb;} -.mf{color:#009999;} -.mh{color:#009999;} -.mi{color:#009999;} -.mo{color:#009999;} -.sb{color:#d01040;} -.sc{color:#d01040;} -.sd{color:#d01040;} -.s2{color:#d01040;} -.se{color:#d01040;} -.sh{color:#d01040;} -.si{color:#d01040;} -.sx{color:#d01040;} -.sr{color:#009926;} -.s1{color:#d01040;} -.ss{color:#990073;} -.bp{color:#999999;} -.vc{color:#008080;} -.vg{color:#008080;} -.vi{color:#008080;} -.il{color:#009999;} -.hidden{display:none;visibility:hidden;} -.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;clip:auto;height:auto;width:auto;margin:0;overflow:visible;} -.visible-phone{display:none !important;} -.visible-tablet{display:none !important;} -.hidden-desktop{display:none !important;} -@media (max-width:767px){.visible-phone{display:inherit !important;} .hidden-phone{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important;}}@media (min-width:768px) and (max-width:979px){.visible-tablet{display:inherit !important;} .hidden-tablet{display:none !important;} .hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important ;}}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #ccc;border-bottom:1px solid #fff;} -article img{max-width:100%;height:auto;border-width:0;vertical-align:middle;-ms-interpolation-mode:bicubic;} -svg:not(:root){overflow:hidden;} -.half{margin:0 auto;width:100%;*zoom:1;}.half:before,.half:after{display:table;content:"";} -.half:after{clear:both;} -.half:before,.half:after{content:"";display:table;} -.half:after{clear:both;} -.half img{display:inline;float:left;width:50%;} -.half figcaption{display:inline;float:left;width:100%;} -.third{margin:0 auto;width:100%;*zoom:1;}.third:before,.third:after{display:table;content:"";} -.third:after{clear:both;} -.third:before,.third:after{content:"";display:table;} -.third:after{clear:both;} -.third img{display:inline;float:left;width:33.333333333333336%;} -.third figcaption{display:inline;float:left;width:100%;} -.btn{display:inline-block;*display:inline;*zoom:1;padding:12px 24px;margin-bottom:2em;line-height:1;text-align:center;text-transform:uppercase;vertical-align:middle;border:4px double #333332;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;cursor:pointer;*margin-left:.3em;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.btn:visited{border:4px double #4e4e4e;} -.btn:hover{border:4px double #1a1a1a;} -.btn:first-child{*margin-left:0;} -.btn-inverse{border:4px double #ffffff;color:#ffffff;background-color:#000000;}.btn-inverse:visited{color:#ffffff;border-color:#ffffff;} -.btn-inverse:hover{color:#ffffff;border-color:#ffffff;} -.btn-small{font-size:60%;padding:6px 12px;} -.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);} -@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot');src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('../fonts/icomoon.woff') format('woff'),url('../fonts/icomoon.ttf') format('truetype'),url('../fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}[data-icon]:before{font-family:'icomoon';content:attr(data-icon);speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;} -.icon-instagram,.icon-facebook,.icon-twitter,.icon-google-plus,.icon-feed,.icon-feed-2,.icon-linkedin,.icon-tumblr,.icon-lastfm,.icon-mail,.icon-github{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;} -.icon-instagram:before{content:"\e004";} -.icon-facebook:before{content:"\e003";} -.icon-twitter:before{content:"\e007";} -.icon-google-plus:before{content:"\e00a";} -.icon-feed:before{content:"\e00b";} -.icon-feed-2:before{content:"\e00c";} -.icon-linkedin:before{content:"\e001";} -.icon-tumblr:before{content:"\e002";} -.icon-lastfm:before{content:"\e005";} -.icon-mail:before{content:"\e006";} -.icon-github:before{content:"\e000";} -form{margin:0 0 5px 0;}form fieldset{margin-bottom:5px;padding:0;border-width:0;} -form legend{display:block;width:100%;margin-bottom:10px;*margin-left:-7px;padding:0;color:#333332;border:0;border-bottom:1px solid #cccccc;white-space:normal;} -form p{margin-bottom:2.5px;} -form ul{list-style-type:none;margin:0 0 5px 0;padding:0;} -form br{display:none;} -label,input,button,select,textarea{vertical-align:baseline;*vertical-align:middle;} -input,button,select,textarea{font-family:'PT Serif',serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} -label{display:block;margin-bottom:1.25px;font-weight:bold;color:#333332;cursor:pointer;}label input,label textarea,label select{display:block;} -input,textarea,select{display:inline-block;width:100%;padding:4px;margin-bottom:1.25px;background-color:#ffffff;border:1px solid #cccccc;color:#333332;}input:hover,textarea:hover,select:hover{border-color:#808080;} -.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;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0 \9;} -input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:0;*width:13px;*height:13px;} -input[type="image"]{border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -input[type="file"]{width:auto;padding:initial;line-height:initial;border:initial;background-color:transparent;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;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:#ffffff;} -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;} -input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{-webkit-opacity:0.5;-moz-opacity:0.5;opacity:0.5;cursor:not-allowed;} -input:focus,textarea:focus{border-color:#000000;outline:0;outline:thin dotted \9;} -input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.help-block,.help-inline{color:#808080;} -.help-block{display:block;margin-bottom:1em;line-height:1em;} -.help-inline{display:inline-block;vertical-align:middle;padding-left:5px;} -.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 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;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius: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;} -html{background-color:#ffffff;font-family:'PT Serif',serif;font-color:#333332;font-size:90%;} -.navigation-wrapper{margin:0 auto;width:100%;padding:2em 0 3em;font-family:'PT Sans Narrow',sans-serif;font-weight:700;text-transform:uppercase;} -.site-name{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:1em;} -.top-navigation{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:1em;} -.top-navigation ul{list-style:none;margin:0;padding:0;} -.top-navigation li{list-style-type:none;display:inline;margin-right:25px;}.top-navigation li a{decoration:none;border-bottom:0 solid transparent;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;} -#main{counter-reset:captions;margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;}#main:before,#main:after{display:table;content:"";} -#main:after{clear:both;} -#main:before,#main:after{content:"";display:table;} -#main:after{clear:both;} -#main article{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;} -#index{margin:0 auto;width:100%;display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;margin-bottom:2em;}#index article h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;margin-bottom:0;} -#index article p+p{text-indent:0;} -.image-wrap{position:relative;margin-bottom:2em;}.image-wrap:after{content:" ";display:block;position:absolute;bottom:-1px;left:8%;width:0;height:0;border:20px solid transparent;border-bottom-color:#ffffff;} -.image-wrap img{width:100%;height:auto;-ms-interpolation-mode:bicubic;} -.image-wrap .headline-wrap{position:absolute;bottom:25px;margin-left:8.333333333333334%;}.image-wrap .headline-wrap h1,.image-wrap .headline-wrap h2{color:#ffffff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);} -.headline-wrap h1{font-size:48px;font-size:2.6666666666666665rem;margin-bottom:0.61875rem;} -.headline-wrap h2{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;text-transform:uppercase;} -.article-wrap h2{font-size:36px;font-size:2rem;margin-bottom:0.825rem;} -.article-wrap h3{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;} -.byline{clear:both;font-size:80%;} -.article-author-top h4,.article-author-bottom h4{margin-bottom:0.5em;} -.article-author-top p,.article-author-bottom p{font-size:80%;font-style:italic;} -.article-author-top a,.article-author-bottom a,.article-author-top a:hover,.article-author-bottom a:hover{border-bottom:0 solid transparent;} -.article-author-top img.bio-photo,.article-author-bottom img.bio-photo{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} -.article-author-top{display:none;} -.article-author-bottom .bio-photo{float:left;margin-right:25px;} -.toc{display:none;font-size:95%;-webkit-opacity:0.7;-moz-opacity:0.7;opacity:0.7;-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-ms-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}.toc:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1;} -.toc header{background:#1a1a1a;} -.toc h3{margin:0;padding:5px 10px;color:#ffffff;}.toc h3:hover{cursor:pointer;} -.toc ul{margin:2px 0 0;padding:0;background:#4d4d4d;line-height:1;} -.toc li{display:block;margin:0;padding:0;font-family:'PT Sans Narrow',sans-serif;border-bottom:1px solid #808080;}.toc li:last-child{border-bottom:0 solid transparent;} -.toc li a,.toc li a:hover{color:#ffffff;border-bottom:0 solid transparent;} -.toc li a{padding:10px;display:block;} -.toc li ul{margin:0;border-top:1px solid #808080;} -.image-grid{*zoom:1;list-style:none;margin:0 0 1em;padding:0;}.image-grid:before,.image-grid:after{display:table;content:"";} -.image-grid:after{clear:both;} -.image-grid:before,.image-grid:after{content:"";display:table;} -.image-grid:after{clear:both;} -.image-grid li{display:inline;float:left;width:50%;} -.recent-grid{*zoom:1;list-style:none;margin:1em 0;}.recent-grid:before,.recent-grid:after{display:table;content:"";} -.recent-grid:after{clear:both;} -.recent-grid:before,.recent-grid:after{content:"";display:table;} -.recent-grid:after{clear:both;} -.recent-grid li{display:inline;}.recent-grid li a{border-bottom:0 solid transparent;}.recent-grid li a:hover{border-bottom:0 solid transparent;} -.recent-grid img{width:19%;margin-bottom:1%;} -.holder{font-family:'PT Sans Narrow',sans-serif;}.holder a{cursor:pointer;margin:0 5px;} -.holder a.jp-previous{margin-left:0;margin-right:15px;} -.holder a.jp-next{margin-left:15px;margin-right:0;} -.holder a.jp-current{font-weight:bold;} -.holder a.jp-current,.holder a.jp-current:hover,.holder a.jp-disabled,.holder a.jp-disabled:hover{cursor:default;background:none;} -.holder span{margin:0 5px;} -.footer-wrap{margin:0 auto;width:100%;*zoom:1;clear:both;margin-top:1em;padding-top:2em;padding-bottom:3em;background-color:#000000;}.footer-wrap:before,.footer-wrap:after{display:table;content:"";} -.footer-wrap:after{clear:both;} -.footer-wrap:before,.footer-wrap:after{content:"";display:table;} -.footer-wrap:after{clear:both;} -.footer-wrap a,.footer-wrap a:active,.footer-wrap a:visited,.footer-wrap p,.footer-wrap h4,.footer-wrap h5,.footer-wrap h6{color:#bfbfbf;} -.footer-wrap a{border-bottom:0 solid transparent;}.footer-wrap a:hover{color:#ffffff;border-bottom:0 solid transparent;} -.footer-wrap footer{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;} -.related-articles{display:inline;float:left;width:83.33333333333334%;margin-left:8.333333333333334%;margin-right:8.333333333333334%;}.related-articles h4{font-size:21px;font-size:1.1666666666666667rem;margin-bottom:1.4142857142857141rem;text-transform:uppercase;margin-bottom:0;} -.related-articles li{margin-bottom:0;color:#ffffff;} -.footer-icons li{display:inline-block;padding-right:5px;}.footer-icons li a{font-size:24px;font-size:1.3333333333333333rem;margin-bottom:1.2375rem;color:#9a9a9a;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-icons li a:hover{text-decoration:none;border-bottom:none;}.footer-icons li a:hover .icon-twitter,.footer-icons li a:hover .icon-twitter-sign{color:#2aa9df;} -.footer-icons li a:hover .icon-facebook,.footer-icons li a:hover .icon-facebook-sign{color:#3a5a98;} -.footer-icons li a:hover .icon-instagram,.footer-icons li a:hover .icon-instagram-sign{color:#306088;} -.footer-icons li a:hover .icon-google-plus,.footer-icons li a:hover .icon-google-plus-sign{color:#b63324;} -.footer-icons li a:hover .icon-lastfm,.footer-icons li a:hover .icon-lastfm-sign{color:#d80049;} -.footer-icons li a:hover .icon-github{color:#4183c4;} -.chrome-frame{background:#000;margin:0 0 2em 0;padding:10px;text-align:center;color:#ffffff;}.chrome-frame a{color:#ffffff;border-bottom:1px dotted #ffffff;text-decoration:none;}.chrome-frame a:hover{border-bottom:1px solid #ffffff;} -.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{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-inline-holder .mfp-content:after,.mfp-ajax-holder .mfp-content:after{content:'';display:block;width:auto;height:auto;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;box-shadow:0 0 8px rgba(0, 0, 0, 0.6);} -.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;border:0;-webkit-appearance:none;display:block;padding:0;z-index:506;} -button.mfp-close{background:transparent;} -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{text-indent:100%;white-space:nowrap;overflow:hidden;position:absolute;top:0;opacity:0.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;background-color:#000000;-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-ms-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;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;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:0;border-top-left-radius:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -.mfp-arrow-left:after,.mfp-arrow-left .mfp-a{border-right:12px solid #fff;left:5px;} -.mfp-arrow-left:before,.mfp-arrow-left .mfp-b{border-right:20px solid #fff;} -.mfp-arrow-right{right:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:5px;border-top-left-radius:5px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -.mfp-arrow-right:after,.mfp-arrow-right .mfp-a{border-left:12px solid #fff;left:3px;} -.mfp-arrow-right:before,.mfp-arrow-right .mfp-b{border-left:20px solid #fff;} -.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;display:block;top:0;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:-40px;} -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;} -.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){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0;} .mfp-img-mobile img.mfp-img{padding:0;} .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;} -.mfp-fade .zoom-anim-dialog{opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);} -.mfp-fade.mfp-ready .zoom-anim-dialog{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} -.mfp-fade.mfp-removing .zoom-anim-dialog{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);opacity:0;} -.mfp-fade.mfp-bg{opacity:0;-webkit-transition:opacity 0.3s ease-out;-moz-transition:opacity 0.3s ease-out;-ms-transition:opacity 0.3s ease-out;-o-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out;} -.mfp-fade.mfp-ready.mfp-bg{opacity:0.8;} -.mfp-fade.mfp-removing.mfp-bg{opacity:0;} -@media print{*{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;}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:"";} img{max-width:100% !important;page-break-inside:avoid;} thead{display:table-header-group;} tr{page-break-inside:avoid;}}@media only screen and (min-width:30em){.image-grid li{width:33.333333%;}}@media only screen and (min-width:37.5em){html{font-size:95%;} .site-name{display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .top-navigation{display:inline;float:left;width:75%;margin-left:0%;margin-right:0%;} .image-wrap .headline-wrap,.image-wrap:after{left:25%;} .image-wrap .headline-wrap{margin-left:0;} #main article{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} #index{display:inline;float:left;width:50%;margin-left:0%;margin-right:0%;} .footer-wrap footer{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;} .article-author-top{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;} .article-author-bottom{display:none;} .toc{display:block;display:inline;float:left;width:16.666666666666668%;margin-left:4.166666666666667%;margin-right:4.166666666666667%;position:fixed;top:120px;right:0;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} .image-grid li{width:25%;} .related-articles{display:inline;float:left;width:50%;margin-left:25%;margin-right:25%;}}@media only screen and (min-width:48em){html{font-size:100%;} .image-grid li{width:20%;}}@media only screen and (min-width:62em){html{font-size:112.5%;} .image-grid li{width:16.666666666%;}}@media only screen and (min-width:86.375em){.site-name{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;} .top-navigation{display:inline;float:left;width:66.66666666666667%;} .image-wrap:after{left:33.333333333%;} .image-wrap .headline-wrap{margin-left:8.333333333333334%;} #main article{display:inline;float:left;width:37.5%;} #index{display:inline;float:left;width:37.5%;} .related-articles{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .footer-wrap footer{display:inline;float:left;width:37.5%;margin-left:33.333333333333336%;margin-right:29.166666666666668%;} .article-author-top{display:inline;float:left;width:12.5%;margin-left:16.666666666666668%;}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){} +/* CSS Normalize =========================================== */ +/*! 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%; + -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; +} +/** + * 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"], +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; +} +/* Variables and mixins ==================================== */ +/* Links ================================================= */ +/* Site wide styles (html, body, global classes) =========== */ +/* Selection ============================================= */ +::-moz-selection { + background-color: #dadada; + color: #343434; + text-shadow: none; +} +::selection { + background-color: #dadada; + color: #343434; + text-shadow: none; +} +/* Global Classes ======================================== */ +.all-caps { + text-transform: uppercase; +} +.pull-left { + float: left; +} +.pull-right { + float: right; +} +.image-pull-right { + float: right; + margin-top: 0; +} +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; +} +.clearfix:after { + clear: both; +} +.unstyled-list { + list-style: none; + margin-left: 0; + padding-left: 0; +} +.unstyled-list li { + list-style-type: none; +} +/* Global Transition ==================================== */ +b, +i, +strong, +em, +blockquote, +p, +q, +span, +figure, +img, +h1, +h2, +header, +input, +a { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} +body { + font-family: 'PT Serif', serif; + color: #333332; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; +} +h1 { + font-size: 32px; + font-size: 2rem; + line-height: 0.8125; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h2 { + font-size: 28px; + font-size: 1.75rem; + line-height: 0.9286; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h3 { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.0833; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h4 { + font-size: 18px; + font-size: 1.125rem; + line-height: 1.4444; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h5 { + font-size: 16px; + font-size: 1rem; + line-height: 1.625; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +h6 { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +a { + text-decoration: none; + color: #343434; +} +a:visited { + color: #676767; +} +a:hover { + color: #010101; +} +a:focus { + outline: thin dotted; + color: #010101; +} +a:hover, +a:active { + outline: 0; +} +figcaption { + padding-top: 10px; + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + line-height: 1.3; + color: #4d4d4b; +} +.image-credit { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + display: block; + text-align: right; + font-size: 12px; + font-size: 0.75rem; + line-height: 2.1667; + line-height: 1.3; + font-style: italic; + color: #80807e; +} +.image-credit a { + color: #80807e; +} +.notice { + margin-top: 1.5em; + padding: .5em 1em; + text-indent: 0; + font-size: 14px; + font-size: 0.875rem; + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +blockquote { + margin-left: -28px; + padding-left: 20px; + border-left: 8px solid #333332; + font-family: 'PT Serif', serif; + font-style: italic; + font-size: 24px; + font-size: 1.5rem; +} +.footnotes ol, +.footnotes li, +.footnotes p { + font-size: 14px; + font-size: 0.875rem; + line-height: 1.8571; + margin-bottom: 26px; + margin-bottom: 1.625rem; +} +p { + margin: 0 0 1.625rem; +} +p + p { + text-indent: 1.625rem; + margin-top: -1.625rem; +} +tt, +code, +kbd, +samp, +pre { + font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +} +p code, +li code { + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid #f7f7f7; + background-color: #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +pre { + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; + overflow-x: auto; +} +/* Pygments Syntax highlighting ============================= */ +.highlight { + background-color: #efefef; + font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; + font-size: 12px; + font-size: 0.75rem; + line-height: 2.1667; + color: #333332; + margin-bottom: 1.5em; + /* Comment */ + + /* Error */ + + /* Keyword */ + + /* Operator */ + + /* Comment.Multiline */ + + /* Comment.Preproc */ + + /* Comment.Single */ + + /* Comment.Special */ + + /* Generic.Deleted */ + + /* Generic.Emph */ + + /* Generic.Error */ + + /* Generic.Heading */ + + /* Generic.Inserted */ + + /* Generic.Output */ + + /* Generic.Prompt */ + + /* Generic.Strong */ + + /* Generic.Subheading */ + + /* Generic.Traceback */ + + /* Keyword.Constant */ + + /* Keyword.Declaration */ + + /* Keyword.Namespace */ + + /* Keyword.Pseudo */ + + /* Keyword.Reserved */ + + /* Keyword.Type */ + + /* Literal.Number */ + + /* Literal.String */ + + /* Name.Attribute */ + + /* Name.Builtin */ + + /* Name.Class */ + + /* Name.Constant */ + + /* Name.Decorator */ + + /* Name.Entity */ + + /* Name.Exception */ + + /* Name.Function */ + + /* Name.Label */ + + /* Name.Namespace */ + + /* Name.Tag */ + + /* Name.Variable */ + + /* Operator.Word */ + + /* Text.Whitespace */ + + /* Literal.Number.Float */ + + /* Literal.Number.Hex */ + + /* Literal.Number.Integer */ + + /* Literal.Number.Oct */ + + /* Literal.String.Backtick */ + + /* Literal.String.Char */ + + /* Literal.String.Doc */ + + /* Literal.String.Double */ + + /* Literal.String.Escape */ + + /* Literal.String.Heredoc */ + + /* Literal.String.Interpol */ + + /* Literal.String.Other */ + + /* Literal.String.Regex */ + + /* Literal.String.Single */ + + /* Literal.String.Symbol */ + + /* Name.Builtin.Pseudo */ + + /* Name.Variable.Class */ + + /* Name.Variable.Global */ + + /* Name.Variable.Instance */ + + /* Literal.Number.Integer.Long */ + +} +.highlight pre { + position: relative; + margin: 0; + padding: 1em; +} +.highlight .lineno { + padding-right: 24px; + color: #b3b3b1; +} +.highlight .hll { + background-color: #ffffcc; +} +.highlight .c { + color: #999988; + font-style: italic; +} +.highlight .err { + color: #a61717; + background-color: #e3d2d2; +} +.highlight .k { + color: #000000; + font-weight: bold; +} +.highlight .o { + color: #000000; + font-weight: bold; +} +.highlight .cm { + color: #999988; + font-style: italic; +} +.highlight .cp { + color: #999999; + font-weight: bold; + font-style: italic; +} +.highlight .c1 { + color: #999988; + font-style: italic; +} +.highlight .cs { + color: #999999; + font-weight: bold; + font-style: italic; +} +.highlight .gd { + color: #000000; + background-color: #ffdddd; +} +.highlight .ge { + color: #000000; + font-style: italic; +} +.highlight .gr { + color: #aa0000; +} +.highlight .gh { + color: #999999; +} +.highlight .gi { + color: #000000; + background-color: #ddffdd; +} +.highlight .go { + color: #888888; +} +.highlight .gp { + color: #555555; +} +.highlight .gs { + font-weight: bold; +} +.highlight .gu { + color: #aaaaaa; +} +.highlight .gt { + color: #aa0000; +} +.highlight .kc { + color: #000000; + font-weight: bold; +} +.highlight .kd { + color: #000000; + font-weight: bold; +} +.highlight .kn { + color: #000000; + font-weight: bold; +} +.highlight .kp { + color: #000000; + font-weight: bold; +} +.highlight .kr { + color: #000000; + font-weight: bold; +} +.highlight .kt { + color: #445588; + font-weight: bold; +} +.highlight .m { + color: #009999; +} +.highlight .s { + color: #d01040; +} +.highlight .na { + color: #008080; +} +.highlight .nb { + color: #0086b3; +} +.highlight .nc { + color: #445588; + font-weight: bold; +} +.highlight .no { + color: #008080; +} +.highlight .nd { + color: #3c5d5d; + font-weight: bold; +} +.highlight .ni { + color: #800080; +} +.highlight .ne { + color: #990000; + font-weight: bold; +} +.highlight .nf { + color: #990000; + font-weight: bold; +} +.highlight .nl { + color: #990000; + font-weight: bold; +} +.highlight .nn { + color: #555555; +} +.highlight .nt { + color: #000080; +} +.highlight .nv { + color: #008080; +} +.highlight .ow { + color: #000000; + font-weight: bold; +} +.highlight .w { + color: #bbbbbb; +} +.highlight .mf { + color: #009999; +} +.highlight .mh { + color: #009999; +} +.highlight .mi { + color: #009999; +} +.highlight .mo { + color: #009999; +} +.highlight .sb { + color: #d01040; +} +.highlight .sc { + color: #d01040; +} +.highlight .sd { + color: #d01040; +} +.highlight .s2 { + color: #d01040; +} +.highlight .se { + color: #d01040; +} +.highlight .sh { + color: #d01040; +} +.highlight .si { + color: #d01040; +} +.highlight .sx { + color: #d01040; +} +.highlight .sr { + color: #009926; +} +.highlight .s1 { + color: #d01040; +} +.highlight .ss { + color: #990073; +} +.highlight .bp { + color: #999999; +} +.highlight .vc { + color: #008080; +} +.highlight .vg { + color: #008080; +} +.highlight .vi { + color: #008080; +} +.highlight .il { + color: #009999; +} +.CodeRay { + background-color: #efefef; + font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; + font-size: 12px; + font-size: 0.75rem; + line-height: 2.1667; + color: #333332; + margin-bottom: 1.5em; +} +.CodeRay pre { + margin: 0px; + padding: 1em; +} +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: #ff0000; +} +.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: #000077; +} +.CodeRay .attribute-name { + color: #ff0088; +} +.CodeRay .attribute-value { + color: #770000; +} +.CodeRay .binary { + color: #509; + font-weight: bold; +} +.CodeRay .comment { + color: #998; + font-style: italic; +} +.CodeRay .char { + color: #0044dd; +} +.CodeRay .char .content { + color: #0044dd; +} +.CodeRay .char .delimiter { + color: #003399; +} +.CodeRay .class { + color: #458; + font-weight: bold; +} +.CodeRay .complex { + color: #A08; + font-weight: bold; +} +.CodeRay .constant { + color: teal; +} +.CodeRay .color { + color: #00aa00; +} +.CodeRay .class-variable { + color: #336699; +} +.CodeRay .decorator { + color: #B0B; +} +.CodeRay .definition { + color: #099; + font-weight: bold; +} +.CodeRay .directive { + color: #088; + font-weight: bold; +} +.CodeRay .delimiter { + color: #000000; +} +.CodeRay .doc { + color: #997700; +} +.CodeRay .doctype { + color: #3344bb; +} +.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: #ffaaaa; +} +.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: #000000; +} +.CodeRay .inline .inline { + background: #cccccc; +} +.CodeRay .inline .inline .inline { + background: #bbbbbb; +} +.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: #008080; +} +.CodeRay .label { + color: #970; + font-weight: bold; +} +.CodeRay .local-variable { + color: #996633; +} +.CodeRay .octal { + color: #40E; + font-weight: bold; +} +.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: #880088; +} +.CodeRay .regexp .delimiter { + color: #440044; +} +.CodeRay .regexp .modifier { + color: #cc22cc; +} +.CodeRay .regexp .function { + color: #404; + font-weight: bold; +} +.CodeRay .string { + color: #D20; +} +.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: #dd1144; +} +.CodeRay .shell .delimiter { + color: #dd1144; +} +.CodeRay .symbol { + color: #990073; +} +.CodeRay .symbol .content { + color: #aa6600; +} +.CodeRay .symbol .delimiter { + color: #663300; +} +.CodeRay .tag { + color: #007700; +} +.CodeRay .tag-special { + color: #D70; + font-weight: bold; +} +.CodeRay .type { + color: #339; + font-weight: bold; +} +.CodeRay .variable { + color: #003366; +} +.CodeRay .insert { + background: #afa; +} +.CodeRay .delete { + background: #faa; +} +.CodeRay .change { + color: #aaf; + background: #007; +} +.CodeRay .head { + color: #f8f; + background: #550055; +} +.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; +} +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; + line-height: 0; +} +.clearfix:after { + clear: both; +} +.hidden { + display: none; + visibility: hidden; +} +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + position: static; + clip: auto; + height: auto; + width: auto; + margin: 0; + overflow: visible; +} +/* Figures, images, social media, other elements =========== */ +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 { + margin: 0 auto; + width: 100%; + *zoom: 1; +} +.half:before, +.half:after { + display: table; + content: ""; +} +.half:after { + clear: both; +} +.half:before, +.half:after { + display: table; + content: ""; + line-height: 0; +} +.half:after { + clear: both; +} +.half img { + display: inline; + float: left; + width: 50%; +} +.half figcaption { + display: inline; + float: left; + width: 100%; +} +.third { + margin: 0 auto; + width: 100%; + *zoom: 1; +} +.third:before, +.third:after { + display: table; + content: ""; +} +.third:after { + clear: both; +} +.third:before, +.third:after { + display: table; + content: ""; + line-height: 0; +} +.third:after { + clear: both; +} +.third img { + display: inline; + float: left; + width: 33.333333333333336%; +} +.third figcaption { + display: inline; + float: left; + width: 100%; +} +/* Buttons ============================================== */ +.btn { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + font-size: 14px; + font-size: 0.875rem; + background-color: #111111; + color: #ffffff; + border: 2px solid #111111 !important; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; +} +.btn:visited { + color: #ffffff; +} +.btn:hover { + background-color: #ffffff; + color: #111111; +} +.btn:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +/* Well ================================================= */ +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +/* Custom set of Icomoon webfont icons ===================== */ +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot'); + src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Use the following CSS code if you want to use data attributes for inserting your icons */ +[data-icon]:before { + font-family: 'icomoon'; + content: attr(data-icon); + speak: none; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +/* Use the following CSS code if you want to have a class per icon */ +/* +Instead of a list of all class selectors, +you can use the generic selector below, but it's slower: +[class*="icon-"] { +*/ +.icon-instagram, +.icon-facebook, +.icon-twitter, +.icon-google-plus, +.icon-feed, +.icon-feed-2, +.icon-linkedin, +.icon-tumblr, +.icon-lastfm, +.icon-mail, +.icon-github { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-instagram:before { + content: "\e004"; +} +.icon-facebook:before { + content: "\e003"; +} +.icon-twitter:before { + content: "\e007"; +} +.icon-google-plus:before { + content: "\e00a"; +} +.icon-feed:before { + content: "\e00b"; +} +.icon-feed-2:before { + content: "\e00c"; +} +.icon-linkedin:before { + content: "\e001"; +} +.icon-tumblr:before { + content: "\e002"; +} +.icon-lastfm:before { + content: "\e005"; +} +.icon-mail:before { + content: "\e006"; +} +.icon-github:before { + content: "\e000"; +} +/* Standard form controls ================================== */ +form { + margin: 0 0 5px 0; +} +form fieldset { + margin-bottom: 5px; + padding: 0; + border-width: 0; +} +form legend { + display: block; + width: 100%; + margin-bottom: 10px; + *margin-left: -7px; + padding: 0; + color: #333332; + border: 0; + border-bottom: 1px solid #dddddd; + white-space: normal; +} +form p { + margin-bottom: 2.5px; +} +form ul { + list-style-type: none; + margin: 0 0 5px 0; + padding: 0; +} +form br { + display: none; +} +label, +input, +button, +select, +textarea { + vertical-align: baseline; + *vertical-align: middle; +} +input, +button, +select, +textarea { + font-family: 'PT Serif', serif; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +label { + display: block; + margin-bottom: 1.25px; + font-weight: bold; + color: #333332; + cursor: pointer; +} +label input, +label textarea, +label select { + display: block; +} +input, +textarea, +select { + display: inline-block; + width: 100%; + padding: 4px; + margin-bottom: 1.25px; + background-color: #ffffff; + border: 1px solid #dddddd; + color: #333332; +} +input:hover, +textarea:hover, +select:hover { + border-color: #919191; +} +.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; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + border: 0 \9; +} +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + *width: 13px; + *height: 13px; +} +input[type="image"] { + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + border: initial; + background-color: transparent; + background-color: initial; + -webkit-box-shadow: none; + -moz-box-shadow: none; + 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: #ffffff; +} +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] { + -webkit-opacity: 0.5; + -moz-opacity: 0.5; + opacity: 0.5; + cursor: not-allowed; +} +/* focus and active ============================ */ +input:focus, +textarea:focus { + border-color: #111111; + outline: 0; + outline: thin dotted \9; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* help text ==================================== */ +.help-block, +.help-inline { + color: #919191; +} +.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; + -webkit-border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 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; +} +/* Page level layout styles ================================ */ +body { + background-color: #ffffff; + font-family: 'PT Serif', serif; + font-color: #333332; +} +.navigation-wrapper { + margin: 0 auto; + width: 100%; + padding: 2em 0 3em; + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; + text-transform: uppercase; +} +.site-name { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 1em; +} +.top-navigation { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 1em; +} +.top-navigation ul { + list-style: none; + margin: 0; + padding: 0; +} +.top-navigation li { + list-style-type: none; + display: inline; + margin-right: 25px; +} +.top-navigation li a { + decoration: none; + border-bottom: 0 solid transparent; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} +#main { + counter-reset: captions; + margin: 0 auto; + width: 100%; + *zoom: 1; + clear: both; + margin-top: 1em; +} +#main:before, +#main:after { + display: table; + content: ""; +} +#main:after { + clear: both; +} +#main:before, +#main:after { + display: table; + content: ""; + line-height: 0; +} +#main:after { + clear: both; +} +#main article { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +#index { + margin: 0 auto; + width: 100%; + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +#index h3 { + margin: 0; + padding-bottom: .5em; + font-size: 28px; + font-size: 1.75rem; + border-bottom: 1px solid #c3c3c3; +} +#index article h2 { + margin-bottom: 0; + font-size: 24px; + font-size: 1.5rem; +} +#index article p + p { + text-indent: 0; +} +.image-wrap { + position: relative; + margin-bottom: 2em; +} +.image-wrap:after { + content: " "; + display: block; + position: absolute; + bottom: -1px; + left: 8%; + width: 0; + height: 0; + border: 20px solid transparent; + border-bottom-color: #ffffff; +} +.image-wrap img { + width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} +.image-wrap .headline-wrap { + position: absolute; + bottom: 25px; + margin-left: 8.333333333333334%; +} +.image-wrap .headline-wrap h1, +.image-wrap .headline-wrap h2 { + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); +} +.byline { + clear: both; + font-size: 80%; +} +.article-author-top h3, +.article-author-bottom h3 { + margin-bottom: 0; +} +.article-author-top p, +.article-author-bottom p { + font-size: 80%; + font-style: italic; +} +.article-author-top a, +.article-author-bottom a, +.article-author-top a:hover, +.article-author-bottom a:hover { + border-bottom: 0 solid transparent; +} +.article-author-top img.bio-photo, +.article-author-bottom img.bio-photo { + width: 100px; + height: 100px; + -webkit-border-radius: 100px; + -moz-border-radius: 100px; + border-radius: 100px; +} +.author-social { + display: block; + margin-bottom: 5px; + font-size: 14px; + font-size: 0.875rem; + color: #111111; +} +.author-social:visited { + color: #111111; +} +.author-social:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); +} +.author-social:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +.article-author-top { + display: none; + text-align: center; +} +.article-author-bottom { + margin-bottom: 1em; +} +.article-author-bottom .bio-photo { + float: left; + margin-right: 25px; +} +.article-author-bottom .author-social { + display: inline-block; + margin-right: 5px; +} +.article-wrap p > a, +.article-wrap li > a { + border-bottom: 1px dotted #b3b3b3; +} +.article-wrap p > a:hover, +.article-wrap li > a:hover { + border-bottom-style: solid; +} +.article-wrap p > a.reversefootnote, +.article-wrap li > a.reversefootnote { + border-bottom-width: 0; +} +.toc { + display: none; + font-size: 95%; + -webkit-opacity: 0.7; + -moz-opacity: 0.7; + opacity: 0.7; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; +} +.toc:hover { + -webkit-opacity: 1; + -moz-opacity: 1; + opacity: 1; +} +.toc header { + background: #2b2b2b; +} +.toc h3 { + margin: 0; + padding: 5px 10px; + color: #ffffff; +} +.toc h3:hover { + cursor: pointer; +} +.toc ul { + margin: 2px 0 0; + padding: 0; + background: #5e5e5e; + line-height: 1; +} +.toc li { + display: block; + margin: 0; + padding: 0; + font-family: 'PT Sans Narrow', sans-serif; + border-bottom: 1px solid #808080; +} +.toc li:last-child { + border-bottom: 0 solid transparent; +} +.toc li a, +.toc li a:hover { + color: #ffffff; + border-bottom: 0 solid transparent; +} +.toc li a { + padding: 10px; + display: block; +} +.toc li ul { + margin: 0; + border-top: 1px solid #808080; +} +.image-grid { + *zoom: 1; + list-style: none; + margin: 0 0 1em; + padding: 0; +} +.image-grid:before, +.image-grid:after { + display: table; + content: ""; +} +.image-grid:after { + clear: both; +} +.image-grid:before, +.image-grid:after { + display: table; + content: ""; + line-height: 0; +} +.image-grid:after { + clear: both; +} +.image-grid li { + display: inline; + float: left; + width: 50%; +} +.recent-grid { + *zoom: 1; + list-style: none; + margin: 1em 0; +} +.recent-grid:before, +.recent-grid:after { + display: table; + content: ""; +} +.recent-grid:after { + clear: both; +} +.recent-grid:before, +.recent-grid:after { + display: table; + content: ""; + line-height: 0; +} +.recent-grid:after { + clear: both; +} +.recent-grid li { + display: inline; +} +.recent-grid li a { + border-bottom: 0 solid transparent; +} +.recent-grid li a:hover { + border-bottom: 0 solid transparent; +} +.recent-grid img { + width: 19%; + margin-bottom: 1%; +} +.holder { + font-family: 'PT Sans Narrow', sans-serif; +} +.holder a { + cursor: pointer; + margin: 0 5px; +} +.holder a.jp-previous { + margin-left: 0; + margin-right: 15px; +} +.holder a.jp-next { + margin-left: 15px; + margin-right: 0; +} +.holder a.jp-current { + font-weight: bold; +} +.holder a.jp-current, +.holder a.jp-current:hover, +.holder a.jp-disabled, +.holder a.jp-disabled:hover { + cursor: default; + background: none; +} +.holder span { + margin: 0 5px; +} +.footer-wrap { + margin: 0 auto; + width: 100%; + *zoom: 1; + clear: both; + margin-top: 1em; + padding-top: 2em; + padding-bottom: 3em; + background-color: #111111; +} +.footer-wrap:before, +.footer-wrap:after { + display: table; + content: ""; +} +.footer-wrap:after { + clear: both; +} +.footer-wrap:before, +.footer-wrap:after { + display: table; + content: ""; + line-height: 0; +} +.footer-wrap:after { + clear: both; +} +.footer-wrap a, +.footer-wrap a:active, +.footer-wrap a:visited, +.footer-wrap p, +.footer-wrap h4, +.footer-wrap h5, +.footer-wrap h6, +.footer-wrap span { + color: #bfbfbf; +} +.footer-wrap span { + font-size: 14px; + font-size: 0.875rem; +} +.footer-wrap a { + border-bottom: 0 solid transparent; +} +.footer-wrap a:hover { + color: #ffffff; + border-bottom: 0 solid transparent; +} +.footer-wrap footer { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; +} +.related-articles { + display: inline; + float: left; + width: 83.33333333333334%; + margin-left: 8.333333333333334%; + margin-right: 8.333333333333334%; + margin-bottom: 2em; +} +.related-articles h4 { + text-transform: uppercase; + margin-bottom: 0; +} +.related-articles li { + margin-bottom: 0; + color: #ffffff; +} +.footer-icons li { + display: inline-block; + padding-right: 5px; +} +.footer-icons li a { + color: #9a9a9a; + -webkit-transition: 0.4s linear; + -moz-transition: 0.4s linear; + -ms-transition: 0.4s linear; + -o-transition: 0.4s linear; + transition: 0.4s linear; +} +.footer-icons li a:hover { + text-decoration: none; + border-bottom: none; +} +.footer-icons li a:hover .icon-twitter, +.footer-icons li a:hover .icon-twitter-sign { + color: #2aa9df; +} +.footer-icons li a:hover .icon-facebook, +.footer-icons li a:hover .icon-facebook-sign { + color: #3a5a98; +} +.footer-icons li a:hover .icon-instagram, +.footer-icons li a:hover .icon-instagram-sign { + color: #306088; +} +.footer-icons li a:hover .icon-google-plus, +.footer-icons li a:hover .icon-google-plus-sign { + color: #b63324; +} +.footer-icons li a:hover .icon-lastfm, +.footer-icons li a:hover .icon-lastfm-sign { + color: #d80049; +} +.footer-icons li a:hover .icon-github { + color: #4183c4; +} +.browser-upgrade { + background: #000; + margin: 0 0 2em 0; + padding: 10px; + text-align: center; + color: #ffffff; +} +.browser-upgrade a { + color: #ffffff; + border-bottom: 1px dotted #ffffff; + text-decoration: none; +} +.browser-upgrade a:hover { + border-bottom: 1px solid #ffffff; +} +#goog-fixurl ul { + list-style: none; + margin-left: 0; + padding-left: 0; +} +#goog-fixurl ul li { + list-style-type: none; +} +#goog-wm-qt { + width: auto; + margin-right: 10px; + margin-bottom: 20px; + padding: 8px 20px; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + background-color: #ffffff; + color: #111111; + border-width: 2px !important; + border-style: solid !important; + border-color: #919191; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#goog-wm-sb { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + font-size: 14px; + font-size: 0.875rem; + background-color: #111111; + color: #ffffff; + border: 2px solid #111111 !important; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; +} +#goog-wm-sb:visited { + color: #ffffff; +} +#goog-wm-sb:hover { + background-color: #ffffff; + color: #111111; +} +#goog-wm-sb:active { + -webkit-transform: translate(0, 2px); + -moz-transform: translate(0, 2px); + -ms-transform: translate(0, 2px); + -o-transform: translate(0, 2px); + transform: translate(0, 2px); +} +/* jQuery Magnific-Popup =================================== */ +/* Magnific Popup CSS */ +.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 { + 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-inline-holder .mfp-content:after, +.mfp-ajax-holder .mfp-content:after { + content: ''; + display: block; + width: auto; + height: auto; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: -1; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} +.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; + border: 0; + -webkit-appearance: none; + display: block; + padding: 0; + z-index: 506; +} +button.mfp-close { + background: transparent; +} +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 { + text-indent: 100%; + white-space: nowrap; + overflow: hidden; + position: absolute; + top: 0; + opacity: 0.65; + margin: 0; + top: 50%; + margin-top: -55px; + padding: 0; + width: 90px; + height: 110px; + background-color: #111111; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + 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; + -webkit-border-top-right-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 5px; + -moz-border-radius-bottomright: 5px; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.mfp-arrow-left:after, +.mfp-arrow-left .mfp-a { + border-right: 12px solid #fff; + left: 5px; +} +.mfp-arrow-left:before, +.mfp-arrow-left .mfp-b { + border-right: 20px solid #fff; +} +.mfp-arrow-right { + right: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 5px; + -webkit-border-top-left-radius: 5px; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 5px; + -moz-border-radius-topleft: 5px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.mfp-arrow-right:after, +.mfp-arrow-right .mfp-a { + border-left: 12px solid #fff; + left: 3px; +} +.mfp-arrow-right:before, +.mfp-arrow-right .mfp-b { + border-left: 20px solid #fff; +} +.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; + display: block; + top: 0; + 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: -40px; +} +/* 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; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); +} +/* animate in */ +.mfp-fade.mfp-ready .zoom-anim-dialog { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); +} +/* animate out */ +.mfp-fade.mfp-removing .zoom-anim-dialog { + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); + opacity: 0; +} +/* Dark overlay, start state */ +.mfp-fade.mfp-bg { + opacity: 0; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + 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; +} +/* Print =================================================== */ +@media print { + * { + 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; + } + 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: ""; + } + img { + max-width: 100% !important; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr { + page-break-inside: avoid; + } +} +/* 480px wide ============================================== */ +@media only screen and (min-width: 30em) { + .article-author-top, + .article-author-bottom { + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-opacity: 0.7; + -moz-opacity: 0.7; + opacity: 0.7; + } + .article-author-top:hover, + .article-author-bottom:hover { + -webkit-opacity: 1; + -moz-opacity: 1; + opacity: 1; + } + .image-grid li { + width: 33.333333%; + } +} +/* 600px wide ============================================== */ +@media only screen and (min-width: 37.5em) { + .site-name { + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; + } + .top-navigation { + display: inline; + float: left; + width: 75%; + margin-left: 0%; + margin-right: 0%; + } + .image-wrap .headline-wrap, + .image-wrap:after { + left: 25%; + } + .image-wrap .headline-wrap { + margin-left: 0; + } + .image-credit { + display: inline; + float: left; + width: 75%; + margin-left: 0%; + margin-right: 0%; + } + #main article { + display: inline; + float: left; + width: 50%; + margin-left: 0%; + margin-right: 0%; + } + #index { + display: inline; + float: left; + width: 50%; + margin-left: 0%; + margin-right: 0%; + } + .footer-wrap footer { + display: inline; + float: left; + width: 50%; + margin-left: 25%; + margin-right: 25%; + } + .article-author-top { + display: block; + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; + } + .article-author-bottom { + display: none; + } + .toc { + display: block; + display: inline; + float: left; + width: 16.666666666666668%; + margin-left: 4.166666666666667%; + margin-right: 4.166666666666667%; + position: fixed; + top: 120px; + right: 0; + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + } + .image-grid li { + width: 25%; + } + .related-articles { + display: inline; + float: left; + width: 50%; + margin-left: 25%; + margin-right: 25%; + } +} +/* 768px wide ============================================== */ +@media only screen and (min-width: 48em) { + /* Image Grid ============================================== */ + .image-grid li { + width: 20%; + } +} +/* 992px wide ============================================== */ +@media only screen and (min-width: 62em) { + .article-author-top img.bio-photo, + .article-author-bottom img.bio-photo { + width: 150px; + height: 150px; + -webkit-border-radius: 150px; + -moz-border-radius: 150px; + border-radius: 150px; + } + /* Image Grid ============================================== */ + .image-grid li { + width: 16.666666666%; + } +} +/* 1382px wide ============================================= */ +@media only screen and (min-width: 86.375em) { + .site-name { + display: inline; + float: left; + width: 12.5%; + margin-left: 16.666666666666668%; + } + .top-navigation { + display: inline; + float: left; + width: 66.66666666666667%; + } + .image-wrap:after { + left: 33.333333333%; + } + .image-wrap .headline-wrap { + margin-left: 8.333333333333334%; + } + .image-credit { + display: inline; + float: left; + width: 70.83333333333334%; + } + #main article { + display: inline; + float: left; + width: 37.5%; + } + #index { + display: inline; + float: left; + width: 37.5%; + } + .related-articles { + display: inline; + float: left; + width: 37.5%; + margin-left: 33.333333333333336%; + margin-right: 29.166666666666668%; + } + .footer-wrap footer { + display: inline; + float: left; + width: 37.5%; + margin-left: 33.333333333333336%; + margin-right: 29.166666666666668%; + } + .article-author-top { + display: inline; + float: left; + width: 12.5%; + margin-left: 16.666666666666668%; + } +} +/* 2x for retina displays ================================== */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + +} diff --git a/assets/less/1382.less b/assets/less/1382.less index 617b2aeb..8402d8c3 100644 --- a/assets/less/1382.less +++ b/assets/less/1382.less @@ -18,6 +18,9 @@ .prefix(12,1); } } +.image-credit { + .grid(12,8.5); +} #main article { .grid(12,4.5); } diff --git a/assets/less/480.less b/assets/less/480.less index bbc0b028..7973dad2 100644 --- a/assets/less/480.less +++ b/assets/less/480.less @@ -3,6 +3,14 @@ // TEXTURE ==================================================== // ELEMENTS =================================================== // LAYOUT ===================================================== +.article-author-top, +.article-author-bottom { + .transition(all .2s ease); + .opacity(.7); + &:hover { + .opacity(1); + } +} .image-grid { li { width: 33.333333%; diff --git a/assets/less/600.less b/assets/less/600.less index 47fd85e8..8cd3fcea 100644 --- a/assets/less/600.less +++ b/assets/less/600.less @@ -1,7 +1,4 @@ // ROOT ======================================================= -html { - font-size: 95%; -} // TYPOGRAPHY ================================================= // TEXTURE ==================================================== // ELEMENTS =================================================== @@ -23,6 +20,11 @@ html { .image-wrap .headline-wrap { margin-left: 0; } +.image-credit { + .grid(12,9); + .prefix(12,0); + .suffix(12,0); +} #main article { .grid(12,6); .prefix(12,0); diff --git a/assets/less/768.less b/assets/less/768.less index bf1c3a5d..b0da0146 100644 --- a/assets/less/768.less +++ b/assets/less/768.less @@ -1,7 +1,4 @@ // ROOT ======================================================= -html { - font-size: 100%; -} // TYPOGRAPHY ================================================= // TEXTURE ==================================================== // ELEMENTS =================================================== diff --git a/assets/less/992.less b/assets/less/992.less index b21a2ac2..9fb24de1 100644 --- a/assets/less/992.less +++ b/assets/less/992.less @@ -1,11 +1,16 @@ // ROOT ======================================================= -html { - font-size: 112.5%; -} // TYPOGRAPHY ================================================= // TEXTURE ==================================================== // ELEMENTS =================================================== // LAYOUT ===================================================== +.article-author-top, +.article-author-bottom { + img.bio-photo { + width: 150px; + height: 150px; + .rounded(150px); + } +} /* Image Grid ============================================== */ .image-grid { li { diff --git a/assets/less/coderay.less b/assets/less/coderay.less index b76e9529..be52e568 100644 --- a/assets/less/coderay.less +++ b/assets/less/coderay.less @@ -1,14 +1,13 @@ .CodeRay { background-color: #efefef; - font-family: @codefont; - font-size: 80%; + font-family: @code-font; + .font(12); color: #333332; margin-bottom: 1.5em; -} - -.CodeRay pre { - margin: 0px; - padding: 1em; + pre { + margin: 0px; + padding: 1em; + } } div.CodeRay { } diff --git a/assets/less/elements.less b/assets/less/elements.less index b0ca695f..3d8165ec 100644 --- a/assets/less/elements.less +++ b/assets/less/elements.less @@ -38,49 +38,26 @@ svg:not(:root) { .grid(12,12); } } -/* Buttons =============================================== */ +/* Buttons ============================================== */ .btn { display: inline-block; - *display: inline; - /* IE7 inline-block hack */ - *zoom: 1; - padding: 12px 24px; - margin-bottom: 2em; - line-height: 1; - text-align: center; - text-transform: uppercase; - vertical-align: middle; - border: 4px double @textcolor; - .rounded(50px); - 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; + margin-bottom: 20px; + padding: 8px 20px; + .font-rem(14); background-color: @black; + color: @white; + border: 2px solid @black !important; + .rounded(20px); &:visited { color: @white; - border-color: @white; } &:hover { - color: @white; - border-color: @white; + background-color: @white; + color: @black; + } + &:active { + .translate(0, 2px); } -} -.btn-small { - font-size: 60%; - padding: 6px 12px; } /* Well ================================================= */ .well { diff --git a/assets/less/forms.less b/assets/less/forms.less index 594f44af..37c77a43 100644 --- a/assets/less/forms.less +++ b/assets/less/forms.less @@ -40,7 +40,7 @@ input, button, select, textarea { - font-family: @basefont; + font-family: @base-font; .box-sizing(border-box); } label { diff --git a/assets/less/ie.less b/assets/less/ie.less index 1cd4c4d0..d7f714de 100644 --- a/assets/less/ie.less +++ b/assets/less/ie.less @@ -11,8 +11,6 @@ /* Site wide styles (html, body, global classes) =========== */ @import "site.less"; // TYPOGRAPHY ================================================= -/* Typeplate.com typographic starter pack ================== */ -@import "typeplate.less"; @import "typography.less"; // MIXINS ===================================================== @import "mixins.less"; diff --git a/assets/less/main.less b/assets/less/main.less index 253e0531..dcd90963 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -11,11 +11,11 @@ /* Site wide styles (html, body, global classes) =========== */ @import "site.less"; // TYPOGRAPHY ================================================= -/* Typeplate.com typographic starter pack ================== */ -@import "typeplate.less"; @import "typography.less"; /* Pygments Syntax highlighting ============================= */ @import "pygments.less"; +// Coderay Syntax highlighting =============================== +@import "coderay.less"; // MIXINS ===================================================== @import "mixins.less"; @import "grid.less"; diff --git a/assets/less/mixins.less b/assets/less/mixins.less index 1329a231..c2d0c524 100644 --- a/assets/less/mixins.less +++ b/assets/less/mixins.less @@ -1,76 +1,126 @@ -// =========================================================== +// UTILITY MIXINS +// -------------------------------------------------- -// 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 +// Clearfix +// -------------------- +// For clearing floats like a boss h5bp.com/q +.clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} -// ===========================================================/ +// Webkit-style focus +// -------------------- +.tab-focus() { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} -// ROOT ===================================================== -// TYPOGRAPHY =============================================== -.font-size(@font-size: 16){ -@rem: (@font-size / 10); -font-size : @font-size * 1px; -font-size : ~"@{rem}rem"; } +// Center-align a block level element +// ---------------------------------- +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} -.lineheight(@font-size: 16){ -@rem: (@font-size / 10); -line-height: @font-size * 1px; -line-height: ~"@{rem}rem"; } +// TYPOGRAPHY +// -------------------------------------------------- + +// Full-fat vertical rhythm +// ------------------------ +.font-size(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; + margin-bottom: 0px + @doc-line-height; + margin-bottom: 0rem + (@doc-line-height / @doc-font-size); +} + +// Just the REMs +// ------------- +.font-rem(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; +} + +// Just font-size and line-height +// ------------------------------ +.font(@size) { + font-size: 0px + @size; + font-size: 0rem + @size / @doc-font-size; + line-height: 0 + round(@doc-line-height / @size*10000) / 10000; +} .text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -// COLOR ==================================================== -// TEXTURE ================================================== -/* Gradients ============================================= */ +@indent-var: 0rem + (@doc-line-height / @doc-font-size); + +// 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-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-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-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-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(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); ====================================== */ +// ROUND CORNERS +// -------------------------------------------------- + +// .rounded(VALUE); .rounded(@radius:4px) { -webkit-border-radius : @radius; -moz-border-radius : @radius; border-radius : @radius; } -/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */ +// .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; @@ -88,29 +138,32 @@ border-top-left-radius : @topleft; -moz-background-clip : padding; background-clip : padding-box; } -/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */ +// .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(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(); .text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) { text-shadow : @shadow; } -/* .opacity(VALUE); ======================================= */ +// .opacity(VALUE); .opacity(@opacity : .5) { -webkit-opacity : @opacity; -moz-opacity : @opacity; opacity : @opacity; } -/* .rotate(VALUEdeg); ===================================== */ +// TRANSFORMATIONS +// -------------------------------------------------- + +// .rotate(VALUEdeg); .rotate(@deg) { -webkit-transform : rotate(@deg); -moz-transform : rotate(@deg); @@ -118,7 +171,7 @@ opacity : @opacity; } -o-transform : rotate(@deg); transform : rotate(@deg); } -/* .scale(VALUE); ========================================= */ +// .scale(VALUE); .scale(@ratio) { -webkit-transform : scale(@ratio); -moz-transform : scale(@ratio); @@ -126,7 +179,7 @@ transform : rotate(@deg); } -o-transform : scale(@ratio); transform : scale(@ratio); } -/* .skew(VALUE, VALUE); =================================== */ +// .skew(VALUE, VALUE); .skew(@x: 0, @y: 0) { -webkit-transform : skew(@x, @y); -moz-transform : skew(@x, @y); @@ -134,7 +187,7 @@ transform : scale(@ratio); } -o-transform : skew(@x, @y); transform : skew(@x, @y); } -/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ +// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); .transition(@transition) { -webkit-transition : @transition; -moz-transition : @transition; @@ -142,7 +195,7 @@ transform : skew(@x, @y); } -o-transition : @transition; transition : @transition; } -/* .translate(VALUE, VALUE) =============================== */ +// .translate(VALUE, VALUE) .translate(@x: 0, @y: 0) { -webkit-transform : translate(@x, @y); -moz-transform : translate(@x, @y); @@ -157,51 +210,46 @@ transform : translate(@x, @y); } -o-transform : translate(@x, @y, @z); transform : translate(@x, @y, @z); } -// ELEMENTS ================================================== -/* .background-alpha(VALUE VALUE); ======================== */ +.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) { + -webkit-animation: @name @duration @delay @ease; + -moz-animation: @name @duration @delay @ease; + -ms-animation: @name @duration @delay @ease; +} + +// BACKGROUND +// -------------------------------------------------- + +// .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(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(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(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 ================================== */ +// For image replacement .hide-text() { text-indent : 100%; white-space : nowrap; overflow : hidden; } -/* Hide from visual and speaking browsers ================= */ +// Hide from visual and speaking browsers .hidden() { display : none !important; visibility : hidden; } @@ -210,23 +258,23 @@ visibility : hidden; } visibility: hidden; } -/* Hide but maintain layout =============================== */ +// Hide but maintain layout .invisible() { visibility : hidden; } -/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ +// .resize(VALUE) (none, both, horizontal, vertical, inherit) .resize(@direction: both) { resize : @direction; overflow : auto; } -/* .userselect(VALUE) (all, element, none, text) ========== */ +// .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 ============== */ +// Hidden but available to speaking browsers .visuallyhidden() { overflow : hidden; position : absolute; @@ -237,7 +285,7 @@ margin : -1px; padding : 0; border : 0; } -/* Make visuallyhidden focusable with a keyboard ========== */ +// Make visuallyhidden focusable with a keyboard .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position : static; @@ -245,55 +293,4 @@ 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; } \ No newline at end of file +overflow: visible; } \ No newline at end of file diff --git a/assets/less/normalize.less b/assets/less/normalize.less index c5e2924d..3eb569df 100644 --- a/assets/less/normalize.less +++ b/assets/less/normalize.less @@ -171,7 +171,7 @@ samp { */ pre { - white-space: pre-wrap; + white-space: pre; } /** diff --git a/assets/less/page.less b/assets/less/page.less index 753227b4..ef8e96f2 100644 --- a/assets/less/page.less +++ b/assets/less/page.less @@ -1,13 +1,12 @@ -html { +body { background-color: @bodycolor; - font-family: @basefont; + font-family: @base-font; font-color: @textcolor; - font-size: 90%; } .navigation-wrapper { .container(); padding: 2em 0 3em; - font-family: @baseheadingfont; + font-family: @heading-font; font-weight: 700; text-transform: uppercase; } @@ -62,10 +61,16 @@ html { .prefix(12,1); .suffix(12,1); margin-bottom: 2em; + h3 { + margin: 0; + padding-bottom: .5em; + .font-rem(28); + border-bottom: 1px solid lighten(@black,70); + } article { h2 { - .delta(); margin-bottom: 0; + .font-rem(24); } p+p { text-indent: 0; @@ -101,31 +106,14 @@ html { } } } -.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; + h3 { + margin-bottom: 0; } p { font-size: 80%; @@ -135,17 +123,54 @@ html { border-bottom: 0 solid transparent; } img.bio-photo { + width: 100px; + height: 100px; .rounded(100px); } } +.author-social { + display: block; + margin-bottom: 5px; + .font-rem(14); + color: @black; + &:visited { + color: @black; + } + &:hover { + .scale(1.1); + } + &:active { + .translate(0, 2px); + } +} .article-author-top { display: none; + text-align: center; } .article-author-bottom { + margin-bottom: 1em; .bio-photo { float: left; margin-right: 25px; } + .author-social { + display: inline-block; + margin-right: 5px; + } +} +.article-wrap { + // Dotted line underlines for links + p > a, + li > a { + border-bottom: 1px dotted lighten(@link-color, 50); + &:hover { + border-bottom-style: solid; + } + } + p > a.reversefootnote, + li > a.reversefootnote { + border-bottom-width: 0; + } } .toc { display: none; @@ -176,7 +201,7 @@ html { display: block; margin: 0; padding: 0; - font-family: @baseheadingfont; + font-family: @heading-font; border-bottom: 1px solid darken(@white, 50); &:last-child { border-bottom: 0 solid transparent; @@ -223,7 +248,7 @@ html { } } .holder { - font-family: @baseheadingfont; + font-family: @heading-font; a { cursor: pointer; margin: 0 5px; @@ -267,9 +292,13 @@ html { p, h4, h5, - h6 { + h6, + span { color: darken(@white, 25); } + span { + .font-rem(14); + } a { border-bottom: 0 solid transparent; &:hover { @@ -287,8 +316,9 @@ html { .grid(12,10); .prefix(12,1); .suffix(12,1); + margin-bottom: 2em; h4 { - .epsilon(); + text-transform: uppercase; margin-bottom: 0; } @@ -302,7 +332,6 @@ html { display: inline-block; padding-right: 5px; a { - .delta(); color: lighten(@basecolor, 40%); .transition(.4s linear); &:hover { @@ -335,7 +364,10 @@ html { } } } -.chrome-frame { + +// Browser Upgrade +// -------------------------------------------------- +.browser-upgrade { background: #000; text-align: center; margin: 0 0 2em 0; @@ -350,4 +382,34 @@ html { border-bottom: 1px solid @white; } } +} + +// Google Search +// -------------------------------------------------- +#goog-fixurl { + ul { + list-style: none; + margin-left: 0; + padding-left: 0; + li { + list-style-type: none; + } + } +} +#goog-wm-qt { + width: auto; + margin-right: 10px; + margin-bottom: 20px; + padding: 8px 20px; + display: inline-block; + .font-rem(14); + background-color: @white; + color: @black; + border-width: 2px !important; + border-style: solid !important; + border-color: lighten(@black,50); + .rounded(3px); +} +#goog-wm-sb { + .btn(); } \ No newline at end of file diff --git a/assets/less/pygments.less b/assets/less/pygments.less index 9076b380..dedca6be 100644 --- a/assets/less/pygments.less +++ b/assets/less/pygments.less @@ -1,74 +1,74 @@ .highlight { - background-color: #efefef; - font-family: @codefont; - font-size: 80%; - color: #333332; - margin-bottom: 1.5em; -} - -.highlight pre { - margin: 0px; - padding: 1em; -} - -.hll { background-color: #ffffcc } -.c { color: #999988; font-style: italic } /* Comment */ -.err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.k { color: #000000; font-weight: bold } /* Keyword */ -.o { color: #000000; font-weight: bold } /* Operator */ -.cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ -.c1 { color: #999988; font-style: italic } /* Comment.Single */ -.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.ge { color: #000000; font-style: italic } /* Generic.Emph */ -.gr { color: #aa0000 } /* Generic.Error */ -.gh { color: #999999 } /* Generic.Heading */ -.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.go { color: #888888 } /* Generic.Output */ -.gp { color: #555555 } /* Generic.Prompt */ -.gs { font-weight: bold } /* Generic.Strong */ -.gu { color: #aaaaaa } /* Generic.Subheading */ -.gt { color: #aa0000 } /* Generic.Traceback */ -.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ -.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ -.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ -.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ -.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ -.kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.m { color: #009999 } /* Literal.Number */ -.s { color: #d01040 } /* Literal.String */ -.na { color: #008080 } /* Name.Attribute */ -.nb { color: #0086B3 } /* Name.Builtin */ -.nc { color: #445588; font-weight: bold } /* Name.Class */ -.no { color: #008080 } /* Name.Constant */ -.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ -.ni { color: #800080 } /* Name.Entity */ -.ne { color: #990000; font-weight: bold } /* Name.Exception */ -.nf { color: #990000; font-weight: bold } /* Name.Function */ -.nl { color: #990000; font-weight: bold } /* Name.Label */ -.nn { color: #555555 } /* Name.Namespace */ -.nt { color: #000080 } /* Name.Tag */ -.nv { color: #008080 } /* Name.Variable */ -.ow { color: #000000; font-weight: bold } /* Operator.Word */ -.w { color: #bbbbbb } /* Text.Whitespace */ -.mf { color: #009999 } /* Literal.Number.Float */ -.mh { color: #009999 } /* Literal.Number.Hex */ -.mi { color: #009999 } /* Literal.Number.Integer */ -.mo { color: #009999 } /* Literal.Number.Oct */ -.sb { color: #d01040 } /* Literal.String.Backtick */ -.sc { color: #d01040 } /* Literal.String.Char */ -.sd { color: #d01040 } /* Literal.String.Doc */ -.s2 { color: #d01040 } /* Literal.String.Double */ -.se { color: #d01040 } /* Literal.String.Escape */ -.sh { color: #d01040 } /* Literal.String.Heredoc */ -.si { color: #d01040 } /* Literal.String.Interpol */ -.sx { color: #d01040 } /* Literal.String.Other */ -.sr { color: #009926 } /* Literal.String.Regex */ -.s1 { color: #d01040 } /* Literal.String.Single */ -.ss { color: #990073 } /* Literal.String.Symbol */ -.bp { color: #999999 } /* Name.Builtin.Pseudo */ -.vc { color: #008080 } /* Name.Variable.Class */ -.vg { color: #008080 } /* Name.Variable.Global */ -.vi { color: #008080 } /* Name.Variable.Instance */ -.il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file + background-color: #efefef; + font-family: @code-font; + .font(12); + color: #333332; + margin-bottom: 1.5em; + pre { + position: relative; + margin: 0; + padding: 1em; + } + .lineno { padding-right: 24px; color: lighten(#333332,50);} + .hll { background-color: #ffffcc } + .c { color: #999988; font-style: italic } /* Comment */ + .err { color: #a61717; background-color: #e3d2d2 } /* Error */ + .k { color: #000000; font-weight: bold } /* Keyword */ + .o { color: #000000; font-weight: bold } /* Operator */ + .cm { color: #999988; font-style: italic } /* Comment.Multiline */ + .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ + .c1 { color: #999988; font-style: italic } /* Comment.Single */ + .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ + .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ + .ge { color: #000000; font-style: italic } /* Generic.Emph */ + .gr { color: #aa0000 } /* Generic.Error */ + .gh { color: #999999 } /* Generic.Heading */ + .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ + .go { color: #888888 } /* Generic.Output */ + .gp { color: #555555 } /* Generic.Prompt */ + .gs { font-weight: bold } /* Generic.Strong */ + .gu { color: #aaaaaa } /* Generic.Subheading */ + .gt { color: #aa0000 } /* Generic.Traceback */ + .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ + .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ + .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ + .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ + .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ + .kt { color: #445588; font-weight: bold } /* Keyword.Type */ + .m { color: #009999 } /* Literal.Number */ + .s { color: #d01040 } /* Literal.String */ + .na { color: #008080 } /* Name.Attribute */ + .nb { color: #0086B3 } /* Name.Builtin */ + .nc { color: #445588; font-weight: bold } /* Name.Class */ + .no { color: #008080 } /* Name.Constant */ + .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ + .ni { color: #800080 } /* Name.Entity */ + .ne { color: #990000; font-weight: bold } /* Name.Exception */ + .nf { color: #990000; font-weight: bold } /* Name.Function */ + .nl { color: #990000; font-weight: bold } /* Name.Label */ + .nn { color: #555555 } /* Name.Namespace */ + .nt { color: #000080 } /* Name.Tag */ + .nv { color: #008080 } /* Name.Variable */ + .ow { color: #000000; font-weight: bold } /* Operator.Word */ + .w { color: #bbbbbb } /* Text.Whitespace */ + .mf { color: #009999 } /* Literal.Number.Float */ + .mh { color: #009999 } /* Literal.Number.Hex */ + .mi { color: #009999 } /* Literal.Number.Integer */ + .mo { color: #009999 } /* Literal.Number.Oct */ + .sb { color: #d01040 } /* Literal.String.Backtick */ + .sc { color: #d01040 } /* Literal.String.Char */ + .sd { color: #d01040 } /* Literal.String.Doc */ + .s2 { color: #d01040 } /* Literal.String.Double */ + .se { color: #d01040 } /* Literal.String.Escape */ + .sh { color: #d01040 } /* Literal.String.Heredoc */ + .si { color: #d01040 } /* Literal.String.Interpol */ + .sx { color: #d01040 } /* Literal.String.Other */ + .sr { color: #009926 } /* Literal.String.Regex */ + .s1 { color: #d01040 } /* Literal.String.Single */ + .ss { color: #990073 } /* Literal.String.Symbol */ + .bp { color: #999999 } /* Name.Builtin.Pseudo */ + .vc { color: #008080 } /* Name.Variable.Class */ + .vg { color: #008080 } /* Name.Variable.Global */ + .vi { color: #008080 } /* Name.Variable.Instance */ + .il { color: #009999 } /* Literal.Number.Integer.Long */ +} \ No newline at end of file diff --git a/assets/less/site.less b/assets/less/site.less index 99b18fdd..d1d58bc0 100644 --- a/assets/less/site.less +++ b/assets/less/site.less @@ -18,7 +18,11 @@ float: left; } .pull-right { - float:right; + float: right; +} +.image-pull-right { + float: right; + margin-top: 0; } .clearfix { *zoom: 1; @@ -38,4 +42,9 @@ li { list-style-type: none; } +} + +/* Global Transition ==================================== */ +b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { + .transition(all .2s ease); } \ No newline at end of file diff --git a/assets/less/typeplate.less b/assets/less/typeplate.less deleted file mode 100644 index 9c59edb0..00000000 --- a/assets/less/typeplate.less +++ /dev/null @@ -1,727 +0,0 @@ -/*! -+---------------------------------------------------------------------+ -| _ _ _ | -| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ | -| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ | -| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ | -| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| | -| |___/ |_| |_| | -| | -| | -| URL: http://typeplate.com | -| VERSION: 1.0.1 | -| Github: https://github.com/typePlate/typeplate.github.com | -| AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) | -| LICENSE: Creative Commmons | -| http://creativecommons.org/licenses/by/3.0 | -| | -+---------------------------------------------------------------------+ -*/ - - -// ========================================================================== -// -// $V a r i a b l e s -// -// ========================================================================== - - -// $B a s e T y p e -// -------------------------------------------------------------------------- - -@weight: normal; -@line-height: 1.65; -@font-size: 112.5; // percentage value (16 * 112.5% = 18px) -@font-base: 16 * (@font-size/100); // converts our percentage to a pixel value -@measure: @font-base * @line-height; -@font-family: serif; -@font-family-sans: sans-serif; - -//the serif boolean var can be redeclared from another stylesheet. However -//the var must be placed after your @import "typeplate.less"; -@serif-boolean: true; - - -// $C o l o r -// -------------------------------------------------------------------------- - -@body-copy-color: @textcolor; -@heading-color: @textcolor; - - -// $A M P E R S A N D @font-face -// -------------------------------------------------------------------------- - -@amp-fontface-name: Ampersand; -@amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua"); -@amp-fontface-fallback: local("Georgia"); - - -// $A M P E R S A N D e l e m e n t -// -------------------------------------------------------------------------- - -// Allows for our ampersand element to have differing -// font-family from the ampersand unicode font-family. -@amp-font-family: Verdana, sans-serif; - - -// $T y p e S c a l e -// -------------------------------------------------------------------------- - -@tera: 117; // 117 = 18 × 6.5 -@giga: 90; // 90 = 18 × 5 -@mega: 72; // 72 = 18 × 4 -@alpha: 60; // 60 = 18 × 3.3333 -@beta: 48; // 48 = 18 × 2.6667 -@gamma: 36; // 36 = 18 × 2 -@delta: 24; // 24 = 18 × 1.3333 -@epsilon: 21; // 21 = 18 × 1.1667 -@zeta: 18; // 18 = 18 × 1 - - -// $T y p e S c a l e U n i t -// -------------------------------------------------------------------------- - -@type-scale-unit-value: rem; - - -// $T e x t I n d e n t a t i o n -// -------------------------------------------------------------------------- - -@indent-val: 1.5em; - - -// $S t a t s T a b -// -------------------------------------------------------------------------- - -@stats-font-size: 1.5rem; -@stats-list-margin: 0 0.625rem 0 0; -@stats-list-padding: 0 0.625rem 0 0; -@stats-item-font-size: 0.875rem; -@stats-item-margin: 0.125rem 0 0 0; -@stats-border-style: 0.125rem solid #ccc; - - - -// ========================================================================== -// -// $F o n t f a c e s -// -// ========================================================================== - - -// $U N I C O D E - R A N G E A m p e r s a n d -// -------------------------------------------------------------------------- - -@font-face { - font-family: "@{amp-fontface-name}"; - src: @amp-fontface-source; - unicode-range: ~"U+270C"; -} - -// Ampersand fallback font for unicode range -@font-face { - font-family: "@{amp-fontface-name}"; - src: @amp-fontface-fallback; - unicode-range: ~"U+270C"; -} - - - -// ========================================================================== -// -// $F u n c t i o n s -// -// ========================================================================== - - -// $C o n t e x t C a l c u l a t o r -// -------------------------------------------------------------------------- - -// Less conversion: No function support -//.ems(@target, @context) { -// @return (@target/@context)#{em}; -//} - - -// $M o d u l a r S c a l e -// -------------------------------------------------------------------------- -// http://thesassway.com/projects/modular-scale - -// Less conversion: No function support -//@function modular-scale(@scale, @base, @value) { -// // divide a given font-size by base font-size & return a relative em value -// @return (@scale/@base)#{@value}; -//} - -// Less conversion: No function support -//@function measure-margin(@scale, @measure, @value) { -// // divide 1 unit of measure by given font-size & return a relative em value -// @return (@measure/@scale)#{@value}; -//} - - - -// ========================================================================== -// -// $M i x i n s -// -// ========================================================================== - - -// $M o d u l a r S c a l e -// -------------------------------------------------------------------------- - -// @Typographic scale -.modular-scale (@scale, @base, @value, @measure:"") when (@measure = "") { - font-size: ~"@{scale}px"; - @font: (@scale/@base) + @value; - font-size: ~"@{font}rem"; -} -.modular-scale (@scale, @base, @value, @measure:"") when not (@measure = "") { - font-size: ~"@{scale}px"; - @font: (@scale/@base) + @value; - font-size: ~"@{font}rem"; - @margin: (@measure/@scale) + @value; - margin-bottom: ~"@{margin}rem"; -} - - -// $B o d y C o p y -// -------------------------------------------------------------------------- - -.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when (@serif-boolean = true) { - font: @weight ~"@{font-size}%/@{line-height}" @font-family; -} -.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when not (@serif-boolean = true) { - font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans; -} - - -// $H y p h e n -// -------------------------------------------------------------------------- -//http://trentwalton.com/2011/09/07/css-hyphenation - -.css-hyphens (@val) { - // Accepted values: [ none | manual | auto ] - -webkit-hyphens: @val; // Safari 5.1 thru 6, iOS 4.2 thru 6 - -moz-hyphens: @val; // Firefox 16 thru 20 - -ms-hyphens: @val; // IE10 - -o-hyphens: @val; // PRESTO...haha LOL - hyphens: @val; // W3C standard -} - - -// $S m a l l c a p s -// -------------------------------------------------------------------------- -// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face -// ISSUE#1 : https://github.com/zakkain/web-thang/issues/1 - -.smallcaps (@color, @font-weight) { - // depends on the font family. - // some font-families don't support small caps - // or don't provide them with their web font. - font-variant: small-caps; - font-weight: @font-weight; - text-transform: lowercase; - color: @color; -} - - -// $F o n t - S i z e - A d j u s t -// -------------------------------------------------------------------------- -// correct x-height for fallback fonts: requires secret formula -// yet to be discovered. This is still wacky for support. Use -// wisely grasshopper. - -.font-size-adjust (@adjust-value) { - // firefox 17+ only (as of Feb. 2013) - font-size-adjust: @adjust-value; -} - - -// $A m p e r s a n d -// -------------------------------------------------------------------------- - -.ampersand (@amp-font-family) { - font-family: @amp-font-family; -} - -.ampersand-placeholder { - .ampersand(@amp-font-family); -} - -// Call your ampersand on any element you wish from another stylesheet -// using this Sass extend we've provided... -// @extend %ampersand-placeholder; - - - -// $W o r d W r a p -// -------------------------------------------------------------------------- -// Silent Sass Classes - A.K.A Placeholders -// -// normal: Indicates that lines may only break at normal word break points. -// break-word : Indicates that normally unbreakable words may be broken at -// arbitrary points if there are no otherwise acceptable break points in the line. - -.breakword { - word-wrap: break-word; -} - -.normal-wrap { - word-wrap: normal; -} - -.inherit-wrap { - word-wrap: auto; -} - - -// $D r o p c a p s -// -------------------------------------------------------------------------- -/** - * Dropcap Sass @include - * Use the following Sass @include with any selector you feel necessary. - * - @include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent); - * - * Extend this object into your custom stylesheet. - * - */ - -// Include your '@include dropcap()' mixin and pass the following -// arguments below. Feel free to pass in arguments we've provided. -// At this time you cannot pass in font-family arguments but you're gonna -// change that anyway so why not just make that separately in your declaration. -.dropcap (@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent) { - &:first-letter { - float: @float; - margin: @margin; - padding: @padding; - font-size: @font-size; - font-family: @font-family; - line-height: @lineHeight; - text-indent: @text-indent; - background: @bg; - color: @color; - } -} - -.drop-cap { - .dropcap; -} - -// $D e f i n i t i o n L i s t -// -------------------------------------------------------------------------- -// lining -// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css -// -// dictionary-style -// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css - -.definition-list-style (@style) when (@style = lining) { - dt, - dd { - display: inline; - margin: 0; - } - dt, - dd { - & + dt { - &:before { - content: "\A"; - white-space: pre; - } - } - } - dd { - & + dd { - &:before { - content: ", "; - } - } - &:before { - content: ": "; - margin-left: -0.2rem; //removes extra space between the dt and the colon - } - } -} -// dictionary-style -.definition-list-style (@style) when (@style = dictionary-style) { - dt { - display: inline; - counter-reset: definitions; - & + dt { - &:before { - content: ", "; - margin-left: -0.2rem; // removes extra space between the dt and the comma - } - } - } - dd { - display: block; - counter-increment: definitions; - &:before { - content: ~"counter(definitions, decimal)" ". "; - } - } -} - - - -// ========================================================================== -// -// $T y p e l a t e S t y l i n g -// -// ========================================================================== - - -// $G l o b a l s -// -------------------------------------------------------------------------- - -html { - .base-type(@weight, @line-height, @font-size, @font-family, @serif-boolean); -} - -body { - // Ala Trent Walton - // .css-hyphens (auto); - - // normal-wrap: Indicates that lines may only break at normal word break points. - // breakword : Indicates that normally unbreakable words may be broken at ... - // arbitrary points if there are no otherwise acceptable break points in the line. - .normal-wrap; - color: @body-copy-color; -} - - -// $H e a d i n g s -// -------------------------------------------------------------------------- - -// styles for all headings, in the style of @csswizardry -.hN () { - // voodoo to enable ligatures and kerning - text-rendering: optimizeLegibility; - // this fixes huge spaces when a heading wraps onto two lines - line-height: 1; - margin-top: 0; -} - -// for each size in the scale, create a class -.tera { .modular-scale(@tera, @font-base, @type-scale-unit-value, @measure); } -.giga { .modular-scale(@giga, @font-base, @type-scale-unit-value, @measure); } -.mega { .modular-scale(@mega, @font-base, @type-scale-unit-value, @measure); } -.alpha { .modular-scale(@alpha, @font-base, @type-scale-unit-value, @measure); } -.beta { .modular-scale(@beta, @font-base, @type-scale-unit-value, @measure); } -.gamma { .modular-scale(@gamma, @font-base, @type-scale-unit-value, @measure); } -.delta { .modular-scale(@delta, @font-base, @type-scale-unit-value, @measure); } -.epsilon { .modular-scale(@epsilon, @font-base, @type-scale-unit-value, @measure); } -.zeta { .modular-scale(@zeta, @font-base, @type-scale-unit-value, @measure); } - -// associate h1-h6 tags with their appropriate greek heading -h1 { - .alpha; - .hN; -} - -h2 { - .beta; - .hN; -} - -h3 { - .gamma; - .hN; -} - -h4 { - .delta; - .hN; -} - -h5 { - .epsilon; - .hN; -} - -h6 { - .zeta; - .hN; -} - - -// $ P a r a g r a p h s -// -------------------------------------------------------------------------- - -p { - margin: 0 0 @indent-val; - & + p { - //siblings indentation - text-indent: @indent-val; - margin-top: -@indent-val; - } -} - - -// $ H y p h e n s -// -------------------------------------------------------------------------- -// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation - -abbr, -acronym, -blockquote, -code, -dir, -kbd, -listing, -plaintext, -q, -samp, -tt, -var, -xmp { - .css-hyphens (none); -} - - -// $C o d e b l o c k s -// -------------------------------------------------------------------------- - -// White Space Mixins -.white-space-pre-wrap () { - white-space: -moz-pre-wrap; // Firefox 1.0-2.0 - white-space: pre-wrap; // Current Browsers -} -.white-space-pre () { - white-space: pre; -} - -pre code { - .normal-wrap; - .white-space-pre-wrap; -} -pre { - .white-space-pre; -} -code { - .white-space-pre; - font-family: monospace; -} - - -// $ S m a l l c a p s -// -------------------------------------------------------------------------- - -/** - * Abbreviations Markup - * - HMTL - * - * Extend this object into your markup. - * - */ -abbr { - .smallcaps(@textcolor, 400); - &:hover { - cursor: help; - } -} - - -// $ H e a d i n g s C o l o r -// -------------------------------------------------------------------------- - -h1, -h2, -h3, -h4, -h5, -h6 { - color: @heading-color; -} - - -// $ D e f i n i t i o n L i s t s -// -------------------------------------------------------------------------- - -/** - * Lining Definition Style Markup - * -
    -
    -
    -
    - * - * Extend this object into your markup. - * - */ -.lining { - .definition-list-style(lining); -} - -/** - * Dictionary Definition Style Markup - * -
    -
    -
    -
    - * - * Extend this object into your markup. - * - */ -.dictionary-style { - .definition-list-style(dictionary-style); -} - - -// $S t a t s T a b -// -------------------------------------------------------------------------- - -/** - * Stats Tab Markup - * - - * - * Extend this object into your markup. - * - */ -.stats-tabs { - padding: 0; - li { - display: inline-block; - margin: @stats-list-margin; - padding: @stats-list-padding; - border-right: @stats-border-style; - &:last-child { - margin: 0; - padding: 0; - border: none; - } - a { - display: inline-block; - font-size: @stats-font-size; - font-weight: bold; - b { - display: block; - margin: @stats-item-margin; - font-size: @stats-item-font-size; - font-weight: normal; - } - } - } -} - - -// @Blockquote Cites -// -------------------------------------------------------------------------- -/** - * Blockquote Markup - * -
    -

    ″″

    - - - -
    - * - * Extend this object into your markup. - * - */ - -.cite-style(@display:block, @text-align:right, @font-size: .875em) { - display: @display; - font-size: @font-size; - text-align: @text-align; -} - -.cite { - .cite-style; -} - - -// @Pull Quotes -// -------------------------------------------------------------------------- -// http://24ways.org/2005/swooshy-curly-quotes-without-images -// -// http://todomvc.com - Thanks sindresorhus! -// https://github.com/typeplate/typeplate.github.com/issues/49 - -/** - * Pull Quotes Markup - * - - * - * Extend this object into your custom stylesheet. - * - */ - -.pull-quotes(@font-size, @opacity) { - position: relative; - padding: (@font-size/@font-size); - &:before, - &:after { - height: (@font-size/@font-size); - opacity: @opacity; - position: absolute; - font-size: @font-size; - } - &:before { - content: '“'; - top: 0em; - left: 0em; - } - &:after { - content: '”'; - bottom: 0em; - right: 0em; - } -} - -.pull-quote { - .pull-quotes(4em, .15); -} - - -// @Figures -// -------------------------------------------------------------------------- - -/** - * Figures Markup - * -
    -
    - Fig. 4.2 | Type Anatomy, an excerpt from Mark Boulton's book"Designing for the Web" -
    -
    - * - * Extend this object into your markup. - * - */ - - - // @Footnotes -// -------------------------------------------------------------------------- - -/** - * Footnote Markup : Replace 'X' with your unique number for each footnote - * -
    -

    - -
    - * - * Extend this object into your markup. - * - */ diff --git a/assets/less/typography.less b/assets/less/typography.less index e0a105be..45c48ce9 100644 --- a/assets/less/typography.less +++ b/assets/less/typography.less @@ -1,25 +1,48 @@ -/* Headings ============================================== */ -h1, h2, h3, h4, h5, h6 { - font-family: @baseheadingfont; - font-weight: 700; -} -h6 { - font-weight: 400; +// Body +// -------------------------------------------------- +body { + font-family: @base-font; + color: @text-color; } -/* Links ================================================= */ +// Headings +// -------------------------------------------------- +h1, h2, h3, h4, h5, h6 { + font-family: @heading-font; +} +h1 { + .font-size(32) +} +h2 { + .font-size(28) +} +h3 { + .font-size(24) +} +h4 { + .font-size(18) +} +h5 { + .font-size(16) +} +h6 { + .font-size(14); +} + +// Links +// -------------------------------------------------- a { text-decoration: none; - color: @linkcolor; + color: @link-color; &:visited { - color: @linkcolorvisited; + color: lighten(@link-color, 20); } &:hover { - color: @linkcolorhover; + color: darken(@link-color, 20); } &:focus { outline: thin dotted; - color: @linkcolorfocus; + color: darken(@link-color, 20); } &:hover, &:active { @@ -27,88 +50,94 @@ a { } } -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 ===================================== */ +// Figures +// -------------------------------------------------- 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) ": "; + padding-top: 10px; + .font(14); + line-height: 1.3; + color: lighten(@text-color, 10); +} + +// Feature Image Caption +// -------------------------------------------------- +.image-credit { + .grid(12,10); + .prefix(12,1); + .suffix(12,1); + display: block; + text-align: right; + .font(12); + line-height: 1.3; + font-style: italic; + color: lighten(@text-color, 30); + a { + color: lighten(@text-color, 30); } } -/* Notice ============================================== */ +// Note text +// -------------------------------------------------- .notice { margin-top: 1.5em; padding: .5em 1em; text-indent: 0; - font-size: 90%; - background-color: #ddd; - border-left: 10px solid #ccc; + .font-rem(14); + background-color: @body-color; + border: 1px solid darken(@body-color,20); + .rounded(3px); } -/* Blockquote =========================================== */ + +// Blockquotes +// -------------------------------------------------- blockquote { + margin-left: -28px; + padding-left: 20px; + border-left: 8px solid @border-color; + font-family: @alt-font; 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; + .font-rem(24); +} + +// Footnotes +// -------------------------------------------------- +.footnotes { + ol, li, p { + .font-size(14); } } -/* Footnotes ============================================= */ -.footnotes { - font-size: 90%; + +// Paragraphs +// -------------------------------------------------- +p { + margin: 0 0 @indent-var; + & + p { + //siblings indentation + text-indent: @indent-var; + margin-top: -(@indent-var); + } } -/* Code ================================================== */ + +// Code +// -------------------------------------------------- tt, code, kbd, samp, pre { - font-family: @codefont; + font-family: @code-font; +} +p, +li { + code { + .font-rem(12); + line-height: 1.5; + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid lighten(@black, 90); + background-color: lighten(@black, 95); + .rounded(3px); + } +} +pre { + .font-rem(12); + line-height: 1.5; + overflow-x: auto; } -p code { - font-size: 80%; - white-space: nowrap; - margin: 0 2px; - padding: 0 5px; - border: 1px solid lighten(@black, 90); - background-color: lighten(@black, 95); - .rounded(3px); -} \ No newline at end of file diff --git a/assets/less/variables.less b/assets/less/variables.less index 41ab42ee..74d6865d 100644 --- a/assets/less/variables.less +++ b/assets/less/variables.less @@ -1,19 +1,26 @@ // TYPOGRAPHY ================================================ -@basefont: 'PT Serif', serif; -@baseheadingfont: 'PT Sans Narrow', sans-serif; -@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +@doc-font-size: 16; +@doc-line-height: 26; +@base-font: 'PT Serif', serif; +@heading-font: 'PT Sans Narrow', sans-serif; +@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; +@alt-font: @base-font; // COLOR ==================================================== @bodycolor : #fff; +@body-color: @bodycolor; @textcolor : #333332; +@text-color : @textcolor; +@border-color: @text-color; @basecolor : #343434; @compcolor : spin(@basecolor, 180); @bordercolor : @basecolor; @white : #fff; -@black : #000; +@black : #111; @accentcolor : @black; /* Links ================================================= */ @linkcolor : #343434; +@link-color: @linkcolor; @linkcolorhover : darken(@linkcolor, 10); @linkcolorvisited : lighten(@linkcolorhover, 20); @linkcolorfocus : darken(@linkcolorvisited, 10); \ No newline at end of file diff --git a/images/bio-photo.jpg b/images/bio-photo.jpg index 65dc72e3..49a83054 100644 Binary files a/images/bio-photo.jpg and b/images/bio-photo.jpg differ diff --git a/index.md b/index.md index e176244e..0d6d247c 100644 --- a/index.md +++ b/index.md @@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi tags: [Jekyll, theme, responsive, blog, template] image: feature: texture-feature-01.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com --- \ No newline at end of file diff --git a/theme-setup.md b/theme-setup.md index 6e139e6c..464969c1 100644 --- a/theme-setup.md +++ b/theme-setup.md @@ -6,6 +6,8 @@ description: "Instructions on how to install and customize the Jekyll theme Mini tags: [Jekyll, theme, responsive] image: feature: texture-feature-02.jpg + credit: Texture Lovers + creditlink: http://texturelovers.com ---
    @@ -32,7 +34,7 @@ General notes and suggestions for customizing Minimal Mistakes. minimal-mistakes/ ├── _includes | ├── author-bio.html //bio stuff goes here -| ├── chrome-frame.html //displays on IE8 and less +| ├── browser-upgrade.html //displays on IE8 and less | ├── footer.html //site footer | ├── head.html //site head | ├── navigation.html //site top nav @@ -60,7 +62,7 @@ minimal-mistakes/ ### _config.yml -Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ site.url }}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**... +Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ "{{ site.url " }}}}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**... #### Owner/Author Information @@ -106,6 +108,15 @@ image: thumb: thumbnail-image.jpg #keep it square 200x200 px is good {% endhighlight %} +If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source. + +{% highlight yaml %} +image: + feature: feature-image-filename.jpg + credit: Michael Rose #name of the person or site you want to credit + creditlink: http://mademistakes.com #url to their site or licensing +{% endhighlight %} + #### Thumbnails for OG and Twitter Cards Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.