Compare commits

...
84 Commits
Author SHA1 Message Date
Michael Rose 82e306ebc9 Improve responsive nav experience 2014-02-13 14:20:28 -05:00
Michael Rose 73d9750be4 Remove Modernizr script and add html5shiv and media query polyfill scripts for < IE9 2014-02-13 13:45:16 -05:00
Michael Rose b9b9154797 Create media query mixins and consolidate .less files 2014-02-13 13:29:42 -05:00
Michael Rose 51723f2c15 Shrink bio-photo size on large screens 2014-02-13 10:26:21 -05:00
Michael Rose 17c20823eb Cleanup table of contents styling 2014-02-13 10:26:04 -05:00
Michael Rose b43254c2ee Correct demo theme link 2014-02-12 11:06:01 -05:00
Michael Rose 16e89e1b22 Remove table of contents hover indent 2014-02-12 11:00:22 -05:00
Michael Rose a2bfa7fa7b Add rake tasks for creating new posts/pages 2014-02-12 10:58:10 -05:00
Michael Rose b6c7e18d6d Remove category 2014-02-12 10:57:50 -05:00
Michael Rose 9daaa53cbd Update Gemfile 2014-02-12 09:40:24 -05:00
Michael Rose a6423e4a6f Merge branch 'hotfix/schema' 2014-01-20 10:41:29 -05:00
Michael Rose 28a0176b84 Remove schema reference 2014-01-20 10:40:59 -05:00
Michael Rose 37483110e9 Merge pull request #17 from denolfe/lastfm-fix
Correct url to Last.fm profile
2014-01-20 07:25:22 -08:00
Elliot DeNolf b467208cb9 Correct url to Last.fm profile 2014-01-17 21:54:31 -05:00
Michael Rose 9b6c41e936 Merge pull request #16 from Danez/patch-1
Correct url to jekyll
2014-01-17 05:46:52 -08:00
Daniel Tschinder 1a7daa165d Correct url to jekyll 2014-01-17 10:44:28 +01:00
Michael Rose 35d8c699f3 Merge branch 'hotfix/updates' 2014-01-15 15:32:59 -05:00
Michael Rose c7f29a1d56 Rename Articles to Posts to stay consistent with Jekyll naming conventions 2014-01-15 15:32:48 -05:00
Michael Rose e2e01bdbb8 Remove schema.org references to simplify markup 2014-01-15 15:09:59 -05:00
Michael Rose 1931d22a33 Add trailing / to permalinks 2014-01-15 14:59:52 -05:00
Michael Rose e9a7679b47 Merge branch 'release/1.2.0' 2013-12-09 09:38:28 -05:00
Michael Rose 855ca19f2c Decrease spacing between footnotes 2013-12-09 09:32:40 -05:00
Michael Rose 5e92dddf9f Change footer from dark to light 2013-12-09 09:29:15 -05:00
Michael Rose 9990bc0441 Rename article-author-top class to article-author-side 2013-12-09 09:19:05 -05:00
Michael Rose b527a83e54 Rename _includes 2013-12-09 09:16:56 -05:00
Michael Rose df55210149 Update nav links 2013-12-09 09:00:49 -05:00
Michael Rose d281a0ba8f Remove category limit on post index 2013-12-09 09:00:39 -05:00
Michael Rose 4526f3ffa7 Replace bio photo with generic image 2013-12-09 09:00:23 -05:00
Michael Rose 96a7c4aebd Remove all CAPS styling on post headlines in index listing 2013-12-09 08:45:49 -05:00
Michael Rose 41470fa117 Update permalink 2013-12-09 08:44:48 -05:00
Michael Rose 460b251a15 Replace site.url with localhost server 2013-12-09 08:41:58 -05:00
Michael Rose a253f65bd0 Merge branch 'hotfix/table-width' 2013-12-09 08:37:32 -05:00
Michael Rose 4a69bbfcce Merge branch 'hotfix/table-width' into develop 2013-12-09 08:37:32 -05:00
Michael Rose dcab265971 Size tables to fill content container 2013-12-09 08:37:17 -05:00
Michael Rose 9c9643e769 Merge pull request #13 from dhruvbhatia/patch-1
Make Markdown tables take 100% width
2013-12-09 05:34:08 -08:00
Dhruv Bhatia babf712cdc Make Markdown tables take 100% width 2013-12-08 01:31:58 +11:00
Michael Rose 0366c15464 Merge branch 'hotfix/navigation-links' into develop 2013-10-14 08:16:16 -04:00
Michael Rose 99bbc51cf3 Merge branch 'hotfix/navigation-links' 2013-10-14 08:16:16 -04:00
Michael Rose 69101c2ae9 Clear floats 2013-10-14 08:15:44 -04:00
Michael Rose 92431b42e8 Merge branch 'hotfix/navigation-bug' into develop 2013-10-11 11:07:36 -04:00
Michael Rose 5ee64d1ee8 Merge branch 'hotfix/navigation-bug' 2013-10-11 11:07:36 -04:00
Michael Rose 3623452823 Remove line-wrap on top navigation links that may span two lines 2013-10-11 11:06:38 -04:00
Michael Rose 435e600e1e Correct top navigation link bug, fixes #10 2013-10-11 11:05:23 -04:00
Michael Rose 86bfa8a6c3 Update README.md 2013-09-15 00:55:40 -04:00
Michael Rose f8d136b513 Merge branch 'hotfix/screenshot' into develop 2013-09-15 00:42:01 -04:00
Michael Rose 597408d402 Merge branch 'hotfix/screenshot' 2013-09-15 00:42:01 -04:00
Michael Rose 378a3aa9df Update screenshot 2013-09-15 00:41:52 -04:00
Michael Rose 8462771c15 Update README.md 2013-09-12 22:30:00 -04:00
Michael Rose fee64f30d6 Merge branch 'release/1.1.2' into develop 2013-09-09 12:21:08 -04:00
Michael Rose 7e38b8aea4 Merge branch 'release/1.1.2' 2013-09-09 12:21:07 -04:00
Michael Rose eec3cd6dd6 Update theme setup documentation 2013-09-09 12:20:51 -04:00
Michael Rose 3fd34e611e Darken code background 2013-09-09 11:56:09 -04:00
Michael Rose cf8f714bd8 Add Twitter Card summary large image 2013-09-09 11:47:15 -04:00
Michael Rose 0a71132bff Merge branch 'feature/build-script' into develop 2013-09-09 11:28:42 -04:00
Michael Rose 6cac33d0c4 Optimize images 2013-09-09 11:28:28 -04:00
Michael Rose b6aa91bfe3 Minor adjustments to TOC and author sidebar 2013-09-09 11:27:38 -04:00
Michael Rose 9708efd7d1 Gruntify stylesheets 2013-09-09 11:26:55 -04:00
Michael Rose 9b49d5843f Update scripts 2013-09-09 10:29:05 -04:00
Michael Rose a472d16bdf Init Gruntjs build script 2013-09-09 10:12:07 -04:00
Michael Rose 9053d22b06 Merge branch 'hotfix/404-page' 2013-09-07 13:08:09 -04:00
Michael Rose 8d0146f86e Merge branch 'hotfix/404-page' into develop 2013-09-07 13:08:09 -04:00
Michael Rose 2d8c427328 Add custom 404 page 2013-09-07 13:08:00 -04:00
Michael Rose b86bf97cae Merge branch 'release/v1.1.0' into develop 2013-09-07 12:58:22 -04:00
Michael Rose 2aaca38059 Merge branch 'release/v1.1.0' 2013-09-07 12:58:21 -04:00
Michael Rose 3086e9d8d7 Improve typography of .article-author 2013-09-07 12:57:20 -04:00
Michael Rose b78518dae5 HTML cleanup 2013-09-07 12:26:18 -04:00
Michael Rose c0e5ec5b85 Improve style of highlighted syntax 2013-09-07 11:59:02 -04:00
Michael Rose 66dd137d68 Fix .image-pull-right overlap with paragraph text 2013-09-07 10:16:37 -04:00
Michael Rose dd3d50064c Add image attribution 2013-09-07 10:12:56 -04:00
Michael Rose f2b576b6b3 Remove headline wrap and fix schema tag on post/page title's 2013-09-07 10:12:25 -04:00
Michael Rose c088d244cc Improve typography 2013-09-07 10:10:55 -04:00
Michael Rose f161948750 Minor adjustments to author-bio typography 2013-09-07 09:59:49 -04:00
Michael Rose 5a93cefe57 Remove Typleplate styles 2013-09-07 09:42:28 -04:00
Michael Rose faf8239cf0 Add global transition text and block elements 2013-09-07 09:41:07 -04:00
Michael Rose 237eb8f8ba Remove Chrome Frame references 2013-09-07 09:25:00 -04:00
Michael Rose b7db62c970 Update bio photo for author sidebar 2013-09-07 09:09:54 -04:00
Michael Rose 3d59923b7f Add image attribution for post and page feature images 2013-09-07 09:05:36 -04:00
Michael Rose 07b98f3459 Cleanup LESS variable names 2013-09-07 08:44:10 -04:00
Michael Rose 194642eaa0 Merge branch 'master' into develop 2013-08-08 13:40:52 -04:00
Michael Rose 2765f2d0f2 Update README.md 2013-08-08 13:37:38 -04:00
Michael Rose 0ee0071d5a Merge branch 'hotfix/minor' into develop 2013-07-17 08:57:23 -04:00
Michael Rose 4b6efd7fe7 Merge branch 'hotfix/minor' 2013-07-17 08:57:23 -04:00
Michael Rose a4bcd6e0a9 Optional Google Analytics, Google Authorship, webmaster verifies, and Twitter cards meta. 2013-07-17 08:57:09 -04:00
Michael Rose 17f6e0c599 Merge branch 'hotfix/updates' 2013-07-16 15:45:58 -04:00
80 changed files with 2210 additions and 4424 deletions
+20
View File
@@ -0,0 +1,20 @@
{
"bitwise": true,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"es5": false,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": false,
"undef": true,
"multistr": true,
"expr": true
}
+19
View File
@@ -0,0 +1,19 @@
---
layout: page
title: "Page Not Found"
description: "Page not found. Your pixels are in another canvas."
image:
feature: texture-feature-01.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
---
Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below.
<script type="text/javascript">
var GOOG_FIXURL_LANG = 'en';
var GOOG_FIXURL_SITE = '{{ site.url }}'
</script>
<script type="text/javascript"
src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>
+4 -2
View File
@@ -1,6 +1,8 @@
source 'https://rubygems.org' source 'https://rubygems.org'
gem 'jekyll' gem 'jekyll'
gem 'jekyll-minibundle' gem 'kramdown'
gem 'coderay' gem 'coderay'
gem 'rake' gem 'rake'
gem 'activesupport'
gem 'stringex'
+106
View File
@@ -0,0 +1,106 @@
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'assets/js/*.js',
'!assets/js/plugins/*.js',
'!assets/js/scripts.min.js'
]
},
recess: {
dist: {
options: {
compile: true,
compress: true
},
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
}
}
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [
'assets/js/plugins/*.js',
'assets/js/_*.js'
]
}
}
},
imagemin: {
dist: {
options: {
optimizationLevel: 7,
progressive: true
},
files: [{
expand: true,
cwd: 'images/',
src: '{,*/}*.{png,jpg,jpeg}',
dest: 'images/'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: '{,*/}*.svg',
dest: 'images/'
}]
}
},
watch: {
less: {
files: [
'assets/less/*.less'
],
tasks: ['recess']
},
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint','uglify']
}
},
clean: {
dist: [
'assets/css/main.min.css',
'assets/js/scripts.min.js'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
// Register tasks
grunt.registerTask('default', [
'clean',
'recess',
'uglify',
'imagemin',
'svgmin'
]);
grunt.registerTask('dev', [
'watch'
]);
};
+277 -17
View File
@@ -1,21 +1,281 @@
The MIT License GNU GENERAL PUBLIC LICENSE
Version 2, June 1991
Copyright (c) François Monniot, http://francois.monniot.eu Copyright (C) 1989, 1991 Free Software Foundation, Inc.
51 Franklin St, Fifth Floor, Boston, MA 02110, USA
Permission is hereby granted, free of charge, to any person obtaining a copy Everyone is permitted to copy and distribute verbatim copies
of this software and associated documentation files (the "Software"), to deal of this license document, but changing it is not allowed.
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in Preamble
all copies or substantial portions of the Software.
The licenses for most software are designed to take away your
freedom to share and change it. By contrast, the GNU General Public
License is intended to guarantee your freedom to share and change free
software--to make sure the software is free for all its users. This
General Public License applies to most of the Free Software
Foundation's software and to any other program whose authors commit to
using it. (Some other Free Software Foundation software is covered by
the GNU Library General Public License instead.) You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
this service if you wish), that you receive source code or can get it
if you want it, that you can change the software or use pieces of it
in new free programs; and that you know you can do these things.
To protect your rights, we need to make restrictions that forbid
anyone to deny you these rights or to ask you to surrender the rights.
These restrictions translate to certain responsibilities for you if you
distribute copies of the software, or if you modify it.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must give the recipients all the rights that
you have. You must make sure that they, too, receive or can get the
source code. And you must show them these terms so they know their
rights.
We protect your rights with two steps: (1) copyright the software, and
(2) offer you this license which gives you legal permission to copy,
distribute and/or modify the software.
Also, for each author's protection and ours, we want to make certain
that everyone understands that there is no warranty for this free
software. If the software is modified by someone else and passed on, we
want its recipients to know that what they have is not the original, so
that any problems introduced by others will not reflect on the original
authors' reputations.
Finally, any free program is threatened constantly by software
patents. We wish to avoid the danger that redistributors of a free
program will individually obtain patent licenses, in effect making the
program proprietary. To prevent this, we have made it clear that any
patent must be licensed for everyone's free use or not licensed at all.
The precise terms and conditions for copying, distribution and
modification follow.
GNU GENERAL PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. This License applies to any program or other work which contains
a notice placed by the copyright holder saying it may be distributed
under the terms of this General Public License. The "Program", below,
refers to any such program or work, and a "work based on the Program"
means either the Program or any derivative work under copyright law:
that is to say, a work containing the Program or a portion of it,
either verbatim or with modifications and/or translated into another
language. (Hereinafter, translation is included without limitation in
the term "modification".) Each licensee is addressed as "you".
Activities other than copying, distribution and modification are not
covered by this License; they are outside its scope. The act of
running the Program is not restricted, and the output from the Program
is covered only if its contents constitute a work based on the
Program (independent of having been made by running the Program).
Whether that is true depends on what the Program does.
1. You may copy and distribute verbatim copies of the Program's
source code as you receive it, in any medium, provided that you
conspicuously and appropriately publish on each copy an appropriate
copyright notice and disclaimer of warranty; keep intact all the
notices that refer to this License and to the absence of any warranty;
and give any other recipients of the Program a copy of this License
along with the Program.
You may charge a fee for the physical act of transferring a copy, and
you may at your option offer warranty protection in exchange for a fee.
2. You may modify your copy or copies of the Program or any portion
of it, thus forming a work based on the Program, and copy and
distribute such modifications or work under the terms of Section 1
above, provided that you also meet all of these conditions:
a) You must cause the modified files to carry prominent notices
stating that you changed the files and the date of any change.
b) You must cause any work that you distribute or publish, that in
whole or in part contains or is derived from the Program or any
part thereof, to be licensed as a whole at no charge to all third
parties under the terms of this License.
c) If the modified program normally reads commands interactively
when run, you must cause it, when started running for such
interactive use in the most ordinary way, to print or display an
announcement including an appropriate copyright notice and a
notice that there is no warranty (or else, saying that you provide
a warranty) and that users may redistribute the program under
these conditions, and telling the user how to view a copy of this
License. (Exception: if the Program itself is interactive but
does not normally print such an announcement, your work based on
the Program is not required to print an announcement.)
These requirements apply to the modified work as a whole. If
identifiable sections of that work are not derived from the Program,
and can be reasonably considered independent and separate works in
themselves, then this License, and its terms, do not apply to those
sections when you distribute them as separate works. But when you
distribute the same sections as part of a whole which is a work based
on the Program, the distribution of the whole must be on the terms of
this License, whose permissions for other licensees extend to the
entire whole, and thus to each and every part regardless of who wrote it.
Thus, it is not the intent of this section to claim rights or contest
your rights to work written entirely by you; rather, the intent is to
exercise the right to control the distribution of derivative or
collective works based on the Program.
In addition, mere aggregation of another work not based on the Program
with the Program (or with a work based on the Program) on a volume of
a storage or distribution medium does not bring the other work under
the scope of this License.
3. You may copy and distribute the Program (or a work based on it,
under Section 2) in object code or executable form under the terms of
Sections 1 and 2 above provided that you also do one of the following:
a) Accompany it with the complete corresponding machine-readable
source code, which must be distributed under the terms of Sections
1 and 2 above on a medium customarily used for software interchange; or,
b) Accompany it with a written offer, valid for at least three
years, to give any third party, for a charge no more than your
cost of physically performing source distribution, a complete
machine-readable copy of the corresponding source code, to be
distributed under the terms of Sections 1 and 2 above on a medium
customarily used for software interchange; or,
c) Accompany it with the information you received as to the offer
to distribute corresponding source code. (This alternative is
allowed only for noncommercial distribution and only if you
received the program in object code or executable form with such
an offer, in accord with Subsection b above.)
The source code for a work means the preferred form of the work for
making modifications to it. For an executable work, complete source
code means all the source code for all modules it contains, plus any
associated interface definition files, plus the scripts used to
control compilation and installation of the executable. However, as a
special exception, the source code distributed need not include
anything that is normally distributed (in either source or binary
form) with the major components (compiler, kernel, and so on) of the
operating system on which the executable runs, unless that component
itself accompanies the executable.
If distribution of executable or object code is made by offering
access to copy from a designated place, then offering equivalent
access to copy the source code from the same place counts as
distribution of the source code, even though third parties are not
compelled to copy the source along with the object code.
4. You may not copy, modify, sublicense, or distribute the Program
except as expressly provided under this License. Any attempt
otherwise to copy, modify, sublicense or distribute the Program is
void, and will automatically terminate your rights under this License.
However, parties who have received copies, or rights, from you under
this License will not have their licenses terminated so long as such
parties remain in full compliance.
5. You are not required to accept this License, since you have not
signed it. However, nothing else grants you permission to modify or
distribute the Program or its derivative works. These actions are
prohibited by law if you do not accept this License. Therefore, by
modifying or distributing the Program (or any work based on the
Program), you indicate your acceptance of this License to do so, and
all its terms and conditions for copying, distributing or modifying
the Program or works based on it.
6. Each time you redistribute the Program (or any work based on the
Program), the recipient automatically receives a license from the
original licensor to copy, distribute or modify the Program subject to
these terms and conditions. You may not impose any further
restrictions on the recipients' exercise of the rights granted herein.
You are not responsible for enforcing compliance by third parties to
this License.
7. If, as a consequence of a court judgment or allegation of patent
infringement or for any other reason (not limited to patent issues),
conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot
distribute so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you
may not distribute the Program at all. For example, if a patent
license would not permit royalty-free redistribution of the Program by
all those who receive copies directly or indirectly through you, then
the only way you could satisfy both it and this License would be to
refrain entirely from distribution of the Program.
If any portion of this section is held invalid or unenforceable under
any particular circumstance, the balance of the section is intended to
apply and the section as a whole is intended to apply in other
circumstances.
It is not the purpose of this section to induce you to infringe any
patents or other property right claims or to contest validity of any
such claims; this section has the sole purpose of protecting the
integrity of the free software distribution system, which is
implemented by public license practices. Many people have made
generous contributions to the wide range of software distributed
through that system in reliance on consistent application of that
system; it is up to the author/donor to decide if he or she is willing
to distribute software through any other system and a licensee cannot
impose that choice.
This section is intended to make thoroughly clear what is believed to
be a consequence of the rest of this License.
8. If the distribution and/or use of the Program is restricted in
certain countries either by patents or by copyrighted interfaces, the
original copyright holder who places the Program under this License
may add an explicit geographical distribution limitation excluding
those countries, so that distribution is permitted only in or among
countries not thus excluded. In such case, this License incorporates
the limitation as if written in the body of this License.
9. The Free Software Foundation may publish revised and/or new versions
of the General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the Program
specifies a version number of this License which applies to it and "any
later version", you have the option of following the terms and conditions
either of that version or of any later version published by the Free
Software Foundation. If the Program does not specify a version number of
this License, you may choose any version ever published by the Free Software
Foundation.
10. If you wish to incorporate parts of the Program into other free
programs whose distribution conditions are different, write to the author
to ask for permission. For software which is copyrighted by the Free
Software Foundation, write to the Free Software Foundation; we sometimes
make exceptions for this. Our decision will be guided by the two goals
of preserving the free status of all derivatives of our free software and
of promoting the sharing and reuse of software generally.
NO WARRANTY
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
REPAIR OR CORRECTION.
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES.
END OF TERMS AND CONDITIONS
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
+65 -160
View File
@@ -1,192 +1,97 @@
# Minimal Mistakes # Minimal Mistakes
Jekyll is pretty rad and figured releasing a cleaned up version of [my setup](http://mademistakes.com) as a theme to hack up and use would be cool. So here be that theme --- I call it **[Minimal Mistakes](http://mmistakes.github.io/minimal-mistakes)**, a responsive Jekyll theme with editorial tendencies. **[Minimal Mistakes](http://mmistakes.github.io/minimal-mistakes)** is a two column responsive Jekyll theme perfect for powering your GitHub hosted blog.
## Minimal Mistakes is all about: ## Minimal Mistakes is all about:
* Responsive templates. Looking good on mobile, tablet, and desktop. * Responsive templates. Looking good on mobile, tablet, and desktop.
* Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers. * Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
* Minimal embellishments. Content first --- other widget nonsense never. * Minimal embellishments. Content first; other widget nonsense never.
* Large feature images for posts and pages. * Large feature images for posts and pages.
* Simple and clear permalink structure *(ie: domain.com/category/post-title)* * Simple and clear permalink structure.
* [Custom 404 page](http://mmistakes.github.io/minimal-mistakes/404.html) to get you started.
* Stylesheets for Pygments and Coderay [syntax highlighting](http://mmistakes.github.io/minimal-mistakes/articles/code-highlighting-post/) to make your code examples look snazzy.
![screenshot of Minimal Mistakes theme](http://mmistakes.github.io/minimal-mistakes/images/mm-theme-post-600.jpg) ![screenshot of Minimal Mistakes theme](http://mmistakes.github.io/minimal-mistakes/images/mm-theme-post-600.jpg)
General notes and suggestions for customizing Minimal Mistakes. General notes and suggestions for customizing Minimal Mistakes.
## Basic Setup ## Basic Setup for a new Jekyll site
1. [Install Jekyll](http://jekyllrb.com) if you haven't already. 1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/) 2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
3. Make it your own and customize, customize, customize. 3. Clone the repo you just forked and rename it.
4. Edit `_config.yml` to personalize your site.
5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, assigning categories and tags, and other YAML data.
6. Read the documentation below for further customization pointers and documentation.
## [Preview the Theme](http://mmistakes.github.io/minimal-mistakes) [Demo the Theme](http://mmistakes.github.io/minimal-mistakes)
``` bash **Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you don't want on your site.
minimal-mistakes/
├── _includes
| ├── author-bio.html //bio stuff goes here
| ├── chrome-frame.html //displays on IE8 and less
| ├── footer.html //site footer
| ├── head.html //site head
| ├── navigation.html //site top nav
| └── scripts.html //jQuery, plugins, GA, etc.
├── _layouts
| ├── home.html //homepage layout
| ├── page.html //page layout
| ├── post-index.html //post listing layout
| └── post.html //post layout
├── _posts
├── assets
| ├── css //preprocessed less styles. good idea to minify
| ├── img //images and graphics used in css and js
| ├── js
| | ├── main.js //jQuery plugins and settings
| | └── vendor //all 3rd party scripts
| └── less
├── images //images for posts and pages
├── about.md //about page
├── articles.md //lists all posts from latest to oldest
└── index.md //homepage. lists 5 most recent posts
```
## Customization ---
### _config.yml ## Setup for an Existing Jekyll site
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**... 1. Clone the following folders: `_includes`, `_layouts`, `assets`, and `images`.
2. Clone the following files and personalize content as need: `about.md`, `posts.md`, `index.md`, `feed.xml`, `sitemap.xml`
#### Owner/Author Information 3. Set the following variables in your `config.yml` file:
Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `author-bio.html` since it assumes it is located in `\images`.
Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank and/or remove `<link rel="author" href="{{ site.owner.google_plus }}">` from `head.html`.
#### Google Analytics and Webmaster Tools
Your Google Analytics ID goes here along with meta tags for [Google Webmaster Tools](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35179) and [Bing Webmaster Tools](https://ssl.bing.com/webmaster/configure/verify/ownershi) site verification.
#### Top Navigation Links
Edit page/post titles and URLs to include in the site's navigation. For external links add `external: true`.
``` yaml ``` yaml
# sample top navigation links title: Site Title
description: Describe your website here.
disqus_shortname: shortname
url: http://your-website.com
# Owner/author information
owner:
name: Your Name
avatar: avatar.jpg
bio: "Your bio goes here. It shouldn't be super long but a good two sentences or two should suffice."
email: you@email.com
# Social networking links used in footer. Update and remove as you like.
twitter:
facebook:
github:
stackexchange:
linkedin:
instagram:
flickr:
tumblr:
# For Google Authorship https://plus.google.com/authorship
google_plus:
# Analytics and webmaster tools stuff goes here
google_analytics:
google_verify:
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Links to include in top navigation
# For external links add external: true
links: links:
- title: About Page - title: Theme Setup
url: /about url: /theme-setup/
- title: Articles - title: External Link
url: /articles
- title: Other Page
url: /other-page
- title: External Page
url: http://mademistakes.com url: http://mademistakes.com
external: true external: true
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: America/New_York
future: true
pygments: true
markdown: kramdown
``` ```
#### Other Stuff ---
The rest is just your average Jekyll config settings. Nothing too crazy here...
### _includes
For the most part you can leave these as is since the author/owner details are pulled from `_config.yml`. That said you'll probably want to customize the copyright stuff in `footer.html` to your liking.
### Adding Posts and Pages
There are two main content layouts: `post.html` (for posts) and `page.html` (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for text heavy blog posts (or articles).
#### Feature Images
A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I'd suggest looking at [Picturefill](https://github.com/scottjehl/picturefill) or [Adaptive Images](http://adaptive-images.com/).
The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so.
``` yaml
image:
feature: feature-image-filename.jpg
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
```
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...
#### 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).
For example. Say you want to group all your posts under `blog/` instead of `articles/`. In your post add `category: blog` to the front matter, rename or duplicate `articles.md` to `blog.md` and change the permalink in that file to `permalink: /blog/index.html`.
If done correctly `/blog` should be a page listing all the site's posts.
#### 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.
#### Table of Contents
Insert the following HTML in post or page content that you want a *table of contents* to render. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list.
**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only shows on tablet and desktop breakpoints...
``` html
<section id="table-of-contents" class="toc">
<header>
<h3 class="delta">Contents</h3>
</header>
<div id="drawer" markdown="1">
* Auto generated table of contents
{:toc}
</div>
</section><!-- /#table-of-contents -->
```
#### Videos
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
``` html
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
```
#### Twitter Cards
Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
## Further Customization
To make things easier I use LESS to build Minimal Mistakes' stylesheets. If you want to make some minor cosmetic alterations, take a look at `variables.less` in `assets/less/`. Changing some of the following variables can help make the theme your own. Just compile `main.less` and `ie.less` using your preprocessor of choice and off you go -- I like [CodeKit](http://incident57.com/codekit/) and [Prepros](http://alphapixels.com/prepros/).
``` css
// TYPOGRAPHY ================================================
@basefont: 'PT Serif', serif;
@baseheadingfont: 'PT Sans Narrow', sans-serif;
@codefont: Monaco, Courier New, monospace;
// COLOR ====================================================
@bodycolor : #ebebeb;
@textcolor : #333332;
@basecolor : #343434;
@compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor;
@white : #fff;
@black : #000;
@accentcolor : @black;
/* Links ================================================= */
@linkcolor : #343434;
@linkcolorhover : darken(@linkcolor, 10);
@linkcolorvisited : lighten(@linkcolorhover, 20);
@linkcolorfocus : darken(@linkcolorvisited, 10);
```
## Questions? ## Questions?
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/minimal-mistakes/issues/new). Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/minima-mistakes/issues/new). And if you make something cool with this theme feel free to let me know.
---
## License ## License
This is [MIT](LICENSE) with no added caveats, so feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer. This theme is free and open source software, distributed under the [GNU General Public License](http://mmistakes.github.io/minimal-mistakes/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.
If you'd like give me credit somewhere on your blog or tweet a shout out to
[@mmistakes](https://twitter.com/mmistakes), that would be pretty sweet.
+88
View File
@@ -0,0 +1,88 @@
require "rubygems"
require "bundler/setup"
require "stringex"
## -- Config -- ##
posts_dir = "_posts" # directory for blog files
new_post_ext = "md" # default new post file extension when using the new_post task
new_page_ext = "md" # default new page file extension when using the new_page task
#############################
# Create a new Post or Page #
#############################
# usage rake new_post
desc "Create a new post in #{posts_dir}"
task :new_post, :title do |t, args|
if args.title
title = args.title
else
title = get_stdin("Enter a title for your post: ")
end
filename = "#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
if File.exist?(filename)
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
end
tags = get_stdin("Enter tags to classify your post (comma separated): ")
puts "Creating new post: #{filename}"
open(filename, 'w') do |post|
post.puts "---"
post.puts "layout: post"
post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
post.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
post.puts "tags: [#{tags}]"
post.puts "image:"
post.puts " feature: "
post.puts " credit: "
post.puts " creditlink: "
post.puts "comments: "
post.puts "share: "
post.puts "---"
end
end
# usage rake new_page
desc "Create a new page"
task :new_page, :title do |t, args|
if args.title
title = args.title
else
title = get_stdin("Enter a title for your page: ")
end
filename = "#{title.to_url}.#{new_page_ext}"
if File.exist?(filename)
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
end
tags = get_stdin("Enter tags to classify your page (comma separated): ")
puts "Creating new page: #{filename}"
open(filename, 'w') do |page|
page.puts "---"
page.puts "layout: page"
page.puts "permalink: /#{title.to_url}/"
page.puts "title: \"#{title}\""
page.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
page.puts "tags: [#{tags}]"
page.puts "image:"
page.puts " feature: "
page.puts " credit: "
page.puts " creditlink: "
page.puts "share: "
page.puts "---"
end
end
def get_stdin(message)
print message
STDIN.gets.chomp
end
def ask(message, valid_options)
if valid_options
answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
else
answer = get_stdin(message)
end
answer
end
+8 -8
View File
@@ -1,8 +1,8 @@
title: Site Title title: Site Title
tagline: A short tagline tagline: A short tagline
description: Describe your website. description: Describe your website.
#Comment out url when working locally to resolve base urls correctly # Your site's domain goes here. Leave localhost server or blank when working locally.
url: http://your-site.com url: http://localhost:4000
# Owner/author information # Owner/author information
owner: owner:
@@ -31,11 +31,11 @@ bing_verify:
# For external links add external: true # For external links add external: true
links: links:
- title: About - title: About
url: /about url: /about/
- title: Articles - title: Posts
url: /articles url: /posts/
- title: Theme Setup - title: Theme Setup
url: /theme-setup url: /theme-setup/
- title: Made Mistakes - title: Made Mistakes
url: http://mademistakes.com url: http://mademistakes.com
external: true external: true
@@ -47,7 +47,7 @@ pygments: true
markdown: kramdown markdown: kramdown
# https://github.com/mojombo/jekyll/wiki/Permalinks # https://github.com/mojombo/jekyll/wiki/Permalinks
permalink: /:categories/:title permalink: /:categories/:title/
kramdown: kramdown:
auto_ids: true auto_ids: true
@@ -64,4 +64,4 @@ kramdown:
coderay_css: class coderay_css: class
include: [".htaccess"] include: [".htaccess"]
exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "minimal-mistakes.sublime-project", "minimal-mistakes.sublime-workspace"] exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "*.sublime-project", "*.sublime-workspace", "test", "spec", "Gruntfile.js", "package.json", "node_modules"]
+11
View File
@@ -0,0 +1,11 @@
<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo"></a>
<h3>{{ site.owner.name }}</h3>
<p>{{ site.owner.bio }}</p>
{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" class="author-social" target="_blank"><i class="icon-twitter"></i> Twitter</a>{% endif %}
{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" class="author-social" target="_blank"><i class="icon-facebook"></i> Facebook</a>{% endif %}
{% if site.owner.google_plus %}<a href="{{ site.owner.google_plus }}" class="author-social" target="_blank"><i class="icon-google-plus"></i> Google+</a>{% endif %}
{% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>{% endif %}
{% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" class="author-social" target="_blank"><i class="icon-instagram"></i> Instagram</a>{% endif %}
{% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>{% endif %}
{% if site.owner.lastfm %}<a href="http://lastfm.com/user/{{ site.owner.lastfm }}" class="author-social" target="_blank"><i class="icon-lastfm"></i> Last.fm</a>{% endif %}
{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="icon-tumblr"></i> Tumblr</a>{% endif %}
+1
View File
@@ -0,0 +1 @@
<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
+1
View File
@@ -0,0 +1 @@
<span>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</span>
+26 -26
View File
@@ -2,33 +2,31 @@
<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title> <title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
<meta name="description" content="{{ page.description }}"> <meta name="description" content="{{ page.description }}">
<meta name="keywords" content="{{ page.tags | join: ', ' }}"> <meta name="keywords" content="{{ page.tags | join: ', ' }}">
<!-- Twitter Card and Open Graph meta --> {% if site.owner.twitter %}<!-- Twitter Cards -->
<meta name="twitter:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}"> {% if page.image.feature %}<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ page.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}"> <meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
<meta name="twitter:creator" content="@{{ site.owner.twitter }}"> {% else %}<meta name="twitter:card" content="summary">
{% if page.layout == 'photo' %} <meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">{% endif %}
<meta name="twitter:card" content="photo"> <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
{% if page.image %}<meta name="twitter:image:src" content="{{ site.url }}/images/{{ page.image.feature }}">{% endif %} <meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
{% else %} <meta name="twitter:creator" content="@{{ site.owner.twitter }}">{% endif %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image:src" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}"> <!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}">
{% endif %}
<meta property="og:locale" content="en_US"> <meta property="og:locale" content="en_US">
<meta property="og:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}"> <meta property="og:type" content="article">
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ page.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}"> <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}"> <meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:site_name" content="{{ site.title }}"> <meta property="og:site_name" content="{{ site.title }}">
<!-- Webmaster Tools verfication --> {% if site.google_verify %}<!-- Webmaster Tools verfication -->
<meta name="google-site-verification" content="{{ site.google_verify }}"> <meta name="google-site-verification" content="{{ site.google_verify }}">{% endif %}
<meta name="msvalidate.01" content="{{ site.bing_verify }}"> {% if site.bing_verify %}<meta name="msvalidate.01" content="{{ site.bing_verify }}">{% endif %}
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
<link rel="canonical" href="{{ canonical }}"> <link rel="canonical" href="{{ canonical }}">
<link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed"> <link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
<link rel="author" href="{{ site.owner.google_plus }}?rel=author"> {% if site.owner.google_plus %}<link rel="author" href="{{ site.owner.google_plus }}?rel=author">{% endif %}
<!-- http://t.co/dKP3o1e --> <!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
@@ -38,16 +36,18 @@
<!-- Google Webfonts --> <!-- Google Webfonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- For all browsers --> <!-- For all browsers -->
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css"> <link rel="stylesheet" href="{{ site.url }}/assets/css/main.min.css">
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="{{ site.url }}/assets/css/ie.css">
<![endif]-->
<meta http-equiv="cleartype" content="on"> <meta http-equiv="cleartype" content="on">
<!-- Load Modernizr --> <!-- HTML5 Shiv and Media Query Support -->
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script> <!--[if lt IE 9]>
<script src="{{ site.url }}/assets/js/vendor/html5shiv.min.js"></script>
<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
<![endif]-->
<!-- Modernizr -->
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
<!-- Icons --> <!-- Icons -->
<!-- 16x16 --> <!-- 16x16 -->
@@ -3,12 +3,11 @@
<a href="{{ site.url }}">{{ site.title }}</a> <a href="{{ site.url }}">{{ site.title }}</a>
</div><!-- /.site-name --> </div><!-- /.site-name -->
<div class="top-navigation"> <div class="top-navigation">
<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <nav role="navigation" id="site-nav" class="nav">
<ul> <ul>
{% for link in site.links %} {% for link in site.links %}
<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li> <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %} {% endfor %}
<li><i class="icon-feed"></i> <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed">Feed</a>
</ul> </ul>
</nav> </nav>
</div><!-- /.top-navigation --> </div><!-- /.top-navigation -->
@@ -1,6 +1,7 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ site.url }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="{{ site.url }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="{{ site.url }}/assets/js/main.min.js"></script> <script src="{{ site.url }}/assets/js/scripts.min.js"></script>
{% if site.google_analytics %}
<!-- Asynchronous Google Analytics snippet --> <!-- Asynchronous Google Analytics snippet -->
<script> <script>
var _gaq = _gaq || []; var _gaq = _gaq || [];
@@ -15,4 +16,5 @@
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); })();
</script> </script>
{% endif %}
-11
View File
@@ -1,11 +0,0 @@
<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo" width="100" height="100"></a>
<h4>{{ site.owner.name }}</h4>
<p>{{ site.owner.bio }}</p>
{% if site.owner.twitter %}<p style="text-indent:0;margin-top:1.5em;"><a href="http://twitter.com/{{ site.owner.twitter }}" target="_blank"><i class="icon-twitter"></i> Twitter</a></p>{% endif %}
{% if site.owner.facebook %}<p style="text-indent:0;"><a href="http://facebook.com/{{ site.owner.facebook }}" target="_blank"><i class="icon-facebook"></i> Facebook</a></p>{% endif %}
{% if site.owner.google_plus %}<p style="text-indent:0;"><a href="{{ site.owner.google_plus }}" target="_blank"><i class="icon-google-plus"></i> Google+</a></p>{% endif %}
{% if site.owner.linkedin %}<p style="text-indent:0;"><a href="http://linkedin.com/in/{{ site.owner.linkedin }}" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a></p>{% endif %}
{% if site.owner.instagram %}<p style="text-indent:0;"><a href="http://instagram.com/{{ site.owner.instagram }}" target="_blank"><i class="icon-instagram"></i> Instagram</a></p>{% endif %}
{% if site.owner.github %}<p style="text-indent:0;"><a href="http://github.com/{{ site.owner.github }}" target="_blank"><i class="icon-github"></i> Github</a></p>{% endif %}
{% if site.owner.lastfm %}<p style="text-indent:0;"><a href="http://lastfm.com/{{ site.owner.lastfm }}" target="_blank"><i class="icon-lastfm"></i> Last.fm</a></p>{% endif %}
{% if site.owner.tumblr %}<p style="text-indent:0;"><a href="http://{{ site.owner.tumblr }}.tumblr.com" target="_blank"><i class="icon-tumblr"></i> Tumblr</a></p>{% endif %}
-1
View File
@@ -1 +0,0 @@
<!--[if lt IE 9]><div class="chrome-frame alert alert-info"><strong>Your browser is really old!</strong> <a href="http://browsehappy.com/">Why not upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better enjoy this site?</div><![endif]-->
-1
View File
@@ -1 +0,0 @@
<h6>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</h6>
+17 -22
View File
@@ -4,46 +4,41 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="home" itemscope itemtype="http://schema.org/WebPage"> <body class="home">
{% include chrome-frame.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<div class="headline-wrap">
<h1>{{ page.title }}</h1>
{% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %}
</div><!--/ .headline-wrap -->
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
</div><!-- /.image-wrap --> {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
</div><!-- /.image-wrap -->{% endif %}
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="index">
<a href="{{ site.url}}/articles" class="btn btn-small pull-right">View all articles</a> <h3><a href="{{ site.url}}/articles/">Articles</a></h3>
<h3>Latest Articles</h3> {% for post in site.posts limit:5 %}
<hr /> <article>
{% for post in site.categories.articles limit:5 %} <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
<h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
<p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
</article> </article>
{% endfor %} {% endfor %}
</div><!-- /#index --> </div><!-- /#index -->
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>
+14 -15
View File
@@ -4,28 +4,27 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="page" itemscope itemtype="http://schema.org/WebPage"> <body class="page">
{% include chrome-frame.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage"> <div id="main" role="main">
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<article itemscope itemtype="http://schema.org/CreativeWork"> <article>
<div class="headline-wrap"> <h1>{{ page.title }}</h1>
<h1 itemprop="headline">{{ page.title }}</h1> <div class="article-wrap">
</div><!--/ .headline-wrap -->
<div class="article-wrap" itemprop="text">
{{ content }} {{ content }}
</div><!-- /.article-wrap --> </div><!-- /.article-wrap -->
</article> </article>
@@ -33,11 +32,11 @@
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>
+17 -21
View File
@@ -4,54 +4,50 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="articles" itemscope itemtype="http://schema.org/WebPage"> <body class="post-index">
{% include chrome-frame.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<div class="headline-wrap"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
<h1>{{ page.title }}</h1> {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
{% if page.tagline %}<h2 class="hidden-phone">{{ page.tagline }}</h2>{% endif %} </div><!-- /.image-wrap -->{% endif %}
</div><!--/ .headline-wrap -->
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
</div><!-- /.image-wrap -->
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="index">
<h1>{{ page.title }}</h1>
{% for post in site.posts %} {% for post in site.posts %}
{% unless post.next %} {% unless post.next %}
<h3>{{ post.date | date: '%Y' }}</h3> <h3>{{ post.date | date: '%Y' }}</h3>
<hr />
{% else %} {% else %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %} {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %} {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
{% if year != nyear %} {% if year != nyear %}
<h3>{{ post.date | date: '%Y' }}</h3> <h3>{{ post.date | date: '%Y' }}</h3>
<hr />
{% endif %} {% endif %}
{% endunless %} {% endunless %}
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <article>
<h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2> <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
<p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p> <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
</article> </article>
{% endfor %} {% endfor %}
</div><!-- /#index --> </div><!-- /#index -->
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>
+19 -18
View File
@@ -4,44 +4,45 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="article" itemscope itemtype="http://schema.org/WebPage"> <body class="post">
{% include chrome-frame.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="main" role="main">
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <article>
<div class="headline-wrap"> <div class="headline-wrap">
<h1 itemprop="headline">{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<h2>{{ page.tagline }}</h2> <h2>{{ page.tagline }}</h2>
</div><!--/ .headline-wrap --> </div><!--/ .headline-wrap -->
<div class="article-wrap" itemprop="text"> <div class="article-wrap">
{{ content }} {{ content }}
<hr /> <hr />
<footer role="contentinfo"> <footer role="contentinfo">
<div class="article-author-bottom"> <div class="article-author-bottom">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>.</p> <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <a href="{{ site.url }}/about" title="About {{ site.owner.name }}">{{ site.owner.name }}</a>.</p>
</footer> </footer>
</div><!-- /.article-wrap --> </div><!-- /.article-wrap -->
</article> </article>
</div><!-- /#main --> </div><!-- /#main -->
<div class="footer-wrap"> <div class="footer-wrap">
{% if site.related_posts.size %}<div class="related-articles"> {% if site.related_posts.size > 0 %}<div class="related-articles">
<h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/articles">View all articles</a>)</small></h4> <h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/posts/">View all posts</a>)</small></h4>
<ul> <ul>
{% for post in site.related_posts limit:3 %} {% for post in site.related_posts limit:3 %}
{% assign match = false %} {% assign match = false %}
@@ -58,11 +59,11 @@
<hr /> <hr />
</div><!-- /.related-articles -->{% endif %} </div><!-- /.related-articles -->{% endif %}
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>
+5 -10
View File
@@ -3,15 +3,16 @@ layout: post
title: Sample Post title: Sample Post
description: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more." description: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
modified: 2013-05-31 modified: 2013-05-31
category: articles
tags: [intro, beginner, jekyll, tutorial] tags: [intro, beginner, jekyll, tutorial]
image: image:
feature: texture-feature-05.jpg feature: texture-feature-05.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3>Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents
@@ -40,7 +41,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. 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) ![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. *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 +94,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. Make any link standout more when applying the `.btn` class.
<div markdown="0"><a href="#" class="btn">This is a button</a></div> <div markdown="0"><a href="#" class="btn">This is a button</a></div>
<div markdown="0"><a href="#" class="btn btn-inverse">This is an inverse button</a></div>
<div markdown="0"><a href="#" class="btn btn-small">This is small button</a></div>
<div markdown="0"><a href="#" class="btn btn-inverse btn-small">Small inverse button</a></div>
-1
View File
@@ -3,7 +3,6 @@ layout: post
title: "Testing Readability with a Bunch of Text" title: "Testing Readability with a Bunch of Text"
tagline: "A bunch of hipster ipsum for ya head." tagline: "A bunch of hipster ipsum for ya head."
description: "A ton of text to test readability." description: "A ton of text to test readability."
category: articles
tags: [sample post, readability, test] tags: [sample post, readability, test]
--- ---
-1
View File
@@ -2,7 +2,6 @@
layout: post layout: post
title: "A Post with Images" title: "A Post with Images"
description: "Examples and code for displaying images in posts." description: "Examples and code for displaying images in posts."
category: articles
tags: [sample post, images, test] tags: [sample post, images, test]
--- ---
@@ -3,10 +3,11 @@ layout: post
title: "Post with Large Feature Image and Text" title: "Post with Large Feature Image and Text"
tagline: "A bunch of hipster ipsum for ya head." tagline: "A bunch of hipster ipsum for ya head."
description: "Custom written post descriptions are the way to go... if you're not lazy." description: "Custom written post descriptions are the way to go... if you're not lazy."
category: articles
tags: [sample post, readability, test] tags: [sample post, readability, test]
image: image:
feature: texture-feature-04.jpg 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. 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.
+113
View File
@@ -0,0 +1,113 @@
---
layout: post
title: Syntax Highlighting Post
description: "Demo post displaying the various ways of highlighting code in Markdown."
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 %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% 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'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
{% endhighlight %}
### Standard Code Block
{% raw %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% 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 %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% 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'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
~~~
+12 -4
View File
@@ -1,21 +1,29 @@
--- ---
layout: page layout: page
permalink: /about/index.html permalink: /about/
title: About the Theme title: About the Theme
tagline: Minimal Mistakes, a Jekyll Theme tagline: Minimal Mistakes, a Jekyll Theme
tags: [about, Jekyll, theme, responsive] tags: [about, Jekyll, theme, responsive]
modified: 9-9-2013
image: image:
feature: texture-feature-02.jpg 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. Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com)[^1] 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.
## Minimal Mistakes is all about: ## Minimal Mistakes is all about:
* Responsive templates. Looking good on mobile, tablet, and desktop. * Responsive templates. Looking good on mobile, tablet, and desktop.
* Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers. * Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
* Minimal embellishments. Content first --- other widget nonsense never. * Minimal embellishments --- content first.
* Large feature images for posts and pages. * Large feature images for posts and pages.
* Author sidebar to pimp your bio, photo[^2], and social media links.
* Simple and clear permalink structure *(ie: domain.com/category/post-title)* * Simple and clear permalink structure *(ie: domain.com/category/post-title)*
<a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a> <a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a>
[^1]: Since open sourcing this theme I have released a couple other Jekyll themes. My website [Made Mistakes](http://mademistakes.com) is currently using a modified version of my [So Simple Theme](http://mmistakes.github.io/so-simple-theme/).
[^2]: Fancy avatars provided by [Brandon Mathis](http://brandonmathis.com/projects/fancy-avatars/demo/) under a [Creative Commons Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/).
-9
View File
@@ -1,9 +0,0 @@
---
layout: post-index
permalink: /articles/index.html
title: Articles
tagline: A List of Posts
tags: [blog, graphic design]
image:
feature: texture-feature-03.jpg
---
-265
View File
@@ -1,265 +0,0 @@
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%;}
+1
View File
File diff suppressed because one or more lines are too long
-379
View File
@@ -1,379 +0,0 @@
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){}
+1
View File
File diff suppressed because one or more lines are too long
+67
View File
@@ -0,0 +1,67 @@
/*! Responsive Menu */
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
// The function to change the class
var changeClass = function (r,className1,className2) {
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
if( regex.test(r.className) ) {
r.className = r.className.replace(regex,' '+className2+' ');
}
else{
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
}
return r.className;
};
// Creating our button in JS for smaller screens
var menuElements = document.getElementById('site-nav');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle lines-button x" aria-hidden="true"><span class="lines"></span>menu</button>');
// Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
changeClass(this, 'navtoogle active', 'navtoogle');
};
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
var mobileButton = document.getElementById('menutoggle'),
buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
changeClass(mobileButton, 'navtoogle active', 'navtoogle');
}
};
/*! Plugin options and other jQuery stuff */
// FitVids options
$(function() {
$("article").fitVids();
});
// Table of Contents toggle
$(function() {
$(".toc h3").click(function () {
$("#drawer").toggleClass("hidden");
});
});
// Add lightbox class to all image links
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
// Magnific-Popup options
$(document).ready(function() {
$('.image-popup').magnificPopup({
type: 'image',
tLoading: 'Loading image #%curr%...',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
},
removalDelay: 300, // Delay in milliseconds before popup is removed
// Class that is added to body when popup is open.
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade'
});
});
-1902
View File
File diff suppressed because it is too large Load Diff
-1
View File
File diff suppressed because one or more lines are too long
@@ -1,9 +1,9 @@
/*global jQuery */ /*global jQuery */
/*jshint multistr:true browser:true */ /*jshint multistr:true, browser:true */
/*! /*!
* FitVids 1.0 * FitVids 1.0
* *
* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/ * Released under the WTFPL license - http://sam.zoy.org/wtfpl/
* *
@@ -19,29 +19,20 @@
customSelector: null customSelector: null
}; };
var div = document.createElement('div'), if(!document.getElementById('fit-vids-style')) {
ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
div.className = 'fit-vids-style'; var div = document.createElement('div'),
div.innerHTML = '&shy;<style> \ ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0],
.fluid-width-video-wrapper { \ cssStyles = '&shy;<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>';
width: 100%; \
position: relative; \
padding: 0; \
} \
\
.fluid-width-video-wrapper iframe, \
.fluid-width-video-wrapper object, \
.fluid-width-video-wrapper embed { \
position: absolute; \
top: 0; \
left: 0; \
width: 100%; \
height: 100%; \
} \
</style>';
ref.parentNode.insertBefore(div,ref); div.className = 'fit-vids-style';
div.id = 'fit-vids-style';
div.style.display = 'none';
div.innerHTML = cssStyles;
ref.parentNode.insertBefore(div,ref);
}
if ( options ) { if ( options ) {
$.extend( settings, options ); $.extend( settings, options );
@@ -50,9 +41,9 @@
return this.each(function(){ return this.each(function(){
var selectors = [ var selectors = [
"iframe[src*='player.vimeo.com']", "iframe[src*='player.vimeo.com']",
"iframe[src*='www.youtube.com']", "iframe[src*='youtube.com']",
"iframe[src*='www.youtube-nocookie.com']", "iframe[src*='youtube-nocookie.com']",
"iframe[src*='www.kickstarter.com']", "iframe[src*='kickstarter.com'][src*='video.html']",
"object", "object",
"embed" "embed"
]; ];
@@ -62,6 +53,7 @@
} }
var $allVideos = $(this).find(selectors.join(',')); var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not("object object"); // SwfObj conflict patch
$allVideos.each(function(){ $allVideos.each(function(){
var $this = $(this); var $this = $(this);
@@ -78,4 +70,5 @@
}); });
}); });
}; };
})( jQuery ); // Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );
@@ -1,4 +1,4 @@
/*! Magnific Popup - v0.8.9 - 2013-06-04 /*! Magnific Popup - v0.9.3 - 2013-07-16
* http://dimsemenov.com/plugins/magnific-popup/ * http://dimsemenov.com/plugins/magnific-popup/
* Copyright (c) 2013 Dmitry Semenov; */ * Copyright (c) 2013 Dmitry Semenov; */
;(function($) { ;(function($) {
@@ -15,6 +15,7 @@
* Private static constants * Private static constants
*/ */
var CLOSE_EVENT = 'Close', var CLOSE_EVENT = 'Close',
BEFORE_CLOSE_EVENT = 'BeforeClose',
AFTER_CLOSE_EVENT = 'AfterClose', AFTER_CLOSE_EVENT = 'AfterClose',
BEFORE_APPEND_EVENT = 'BeforeAppend', BEFORE_APPEND_EVENT = 'BeforeAppend',
MARKUP_PARSE_EVENT = 'MarkupParse', MARKUP_PARSE_EVENT = 'MarkupParse',
@@ -76,7 +77,7 @@ var _mfpOn = function(name, f) {
} }
}, },
_setFocus = function() { _setFocus = function() {
(mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus(); (mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).trigger('focus');
}, },
_getCloseBtn = function(type) { _getCloseBtn = function(type) {
if(type !== _currPopupType || !mfp.currTemplate.closeBtn) { if(type !== _currPopupType || !mfp.currTemplate.closeBtn) {
@@ -116,13 +117,33 @@ var _mfpOn = function(name, f) {
// if click is outside the content // if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) { if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) {
if(closeOnBg) { if(closeOnBg) {
return true; // last check, if the clicked element is in DOM, (in case it's removed onclick)
if( $.contains(document, target) ) {
return true;
}
} }
} else if(closeOnContent) { } else if(closeOnContent) {
return true; return true;
} }
} }
return false;
},
// CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
supportsTransitions = function() {
var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
v = ['ms','O','Moz','Webkit']; // 'v' for vendor
if( s['transition'] !== undefined ) {
return true;
}
while( v.length ) {
if( v.pop() + 'Transition' in s ) {
return true;
}
}
return false; return false;
}; };
@@ -146,6 +167,8 @@ MagnificPopup.prototype = {
mfp.isLowIE = mfp.isIE7 || mfp.isIE8; mfp.isLowIE = mfp.isIE7 || mfp.isIE8;
mfp.isAndroid = (/android/gi).test(appVersion); mfp.isAndroid = (/android/gi).test(appVersion);
mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion); mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion);
mfp.supportsTransition = supportsTransitions();
// We disable fixed positioned lightbox on devices that don't handle it nicely. // We disable fixed positioned lightbox on devices that don't handle it nicely.
// If you know a better way of detecting this - let me know. // If you know a better way of detecting this - let me know.
mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) ); mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) );
@@ -193,7 +216,11 @@ MagnificPopup.prototype = {
mfp.types = []; mfp.types = [];
_wrapClasses = ''; _wrapClasses = '';
mfp.ev = data.mainEl || _document; if(data.mainEl && data.mainEl.length) {
mfp.ev = data.mainEl.eq(0);
} else {
mfp.ev = _document;
}
if(data.key) { if(data.key) {
if(!mfp.popupsCache[data.key]) { if(!mfp.popupsCache[data.key]) {
@@ -208,7 +235,13 @@ MagnificPopup.prototype = {
mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data ); mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data );
mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos; mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
if(mfp.st.modal) {
mfp.st.closeOnContentClick = false;
mfp.st.closeOnBgClick = false;
mfp.st.showCloseBtn = false;
mfp.st.enableEscapeKey = false;
}
// Building markup // Building markup
@@ -245,14 +278,16 @@ MagnificPopup.prototype = {
_mfpTrigger('BeforeOpen'); _mfpTrigger('BeforeOpen');
// Close button if(mfp.st.showCloseBtn) {
if(!mfp.st.closeBtnInside) { // Close button
mfp.wrap.append( _getCloseBtn() ); if(!mfp.st.closeBtnInside) {
} else { mfp.wrap.append( _getCloseBtn() );
_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) { } else {
values.close_replaceWith = _getCloseBtn(item.type); _mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
}); values.close_replaceWith = _getCloseBtn(item.type);
_wrapClasses += ' mfp-close-btn-in'; });
_wrapClasses += ' mfp-close-btn-in';
}
} }
if(mfp.st.alignTop) { if(mfp.st.alignTop) {
@@ -282,12 +317,14 @@ MagnificPopup.prototype = {
// Close on ESC key if(mfp.st.enableEscapeKey) {
_document.on('keyup' + EVENT_NS, function(e) { // Close on ESC key
if(e.keyCode === 27) { _document.on('keyup' + EVENT_NS, function(e) {
mfp.close(); if(e.keyCode === 27) {
} mfp.close();
}); }
});
}
_window.on('resize' + EVENT_NS, function() { _window.on('resize' + EVENT_NS, function() {
mfp.updateSize(); mfp.updateSize();
@@ -306,20 +343,20 @@ MagnificPopup.prototype = {
var windowHeight = mfp.wH = _window.height(); var windowHeight = mfp.wH = _window.height();
var bodyStyles = {}; var windowStyles = {};
if( mfp.fixedContentPos ) { if( mfp.fixedContentPos ) {
if(mfp._hasScrollBar(windowHeight)){ if(mfp._hasScrollBar(windowHeight)){
var s = mfp._getScrollbarSize(); var s = mfp._getScrollbarSize();
if(s) { if(s) {
bodyStyles.paddingRight = s; windowStyles.paddingRight = s;
} }
} }
} }
if(mfp.fixedContentPos) { if(mfp.fixedContentPos) {
if(!mfp.isIE7) { if(!mfp.isIE7) {
bodyStyles.overflow = 'hidden'; windowStyles.overflow = 'hidden';
} else { } else {
// ie7 double-scroll bug // ie7 double-scroll bug
$('body, html').css('overflow', 'hidden'); $('body, html').css('overflow', 'hidden');
@@ -343,7 +380,7 @@ MagnificPopup.prototype = {
// remove scrollbar, add padding e.t.c // remove scrollbar, add padding e.t.c
_body.css(bodyStyles); $('html').css(windowStyles);
// add everything to DOM // add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( document.body ); mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );
@@ -384,10 +421,11 @@ MagnificPopup.prototype = {
*/ */
close: function() { close: function() {
if(!mfp.isOpen) return; if(!mfp.isOpen) return;
_mfpTrigger(BEFORE_CLOSE_EVENT);
mfp.isOpen = false; mfp.isOpen = false;
// for CSS3 animation // for CSS3 animation
if(mfp.st.removalDelay && !mfp.isLowIE) { if(mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition ) {
mfp._addClassToMFP(REMOVING_CLASS); mfp._addClassToMFP(REMOVING_CLASS);
setTimeout(function() { setTimeout(function() {
mfp._close(); mfp._close();
@@ -416,13 +454,13 @@ MagnificPopup.prototype = {
mfp._removeClassFromMFP(classesToRemove); mfp._removeClassFromMFP(classesToRemove);
if(mfp.fixedContentPos) { if(mfp.fixedContentPos) {
var bodyStyles = {paddingRight: ''}; var windowStyles = {paddingRight: ''};
if(mfp.isIE7) { if(mfp.isIE7) {
$('body, html').css('overflow', ''); $('body, html').css('overflow', '');
} else { } else {
bodyStyles.overflow = ''; windowStyles.overflow = '';
} }
_body.css(bodyStyles); $('html').css(windowStyles);
} }
_document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS); _document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
@@ -434,14 +472,15 @@ MagnificPopup.prototype = {
mfp.container.attr('class', 'mfp-container'); mfp.container.attr('class', 'mfp-container');
// remove close button from target element // remove close button from target element
if(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true ) { if(mfp.st.showCloseBtn &&
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
if(mfp.currTemplate.closeBtn) if(mfp.currTemplate.closeBtn)
mfp.currTemplate.closeBtn.detach(); mfp.currTemplate.closeBtn.detach();
} }
if(mfp._lastFocusedEl) { if(mfp._lastFocusedEl) {
$(mfp._lastFocusedEl).focus(); // put tab focus back $(mfp._lastFocusedEl).trigger('focus'); // put tab focus back
} }
mfp.currItem = null; mfp.currItem = null;
mfp.content = null; mfp.content = null;
@@ -539,7 +578,8 @@ MagnificPopup.prototype = {
mfp.content = newContent; mfp.content = newContent;
if(newContent) { if(newContent) {
if(mfp.st.closeBtnInside && mfp.currTemplate[type] === true) { if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
mfp.currTemplate[type] === true) {
// if there is no markup, we just append close button element inside // if there is no markup, we just append close button element inside
if(!mfp.content.find('.mfp-close').length) { if(!mfp.content.find('.mfp-close').length) {
mfp.content.append(_getCloseBtn()); mfp.content.append(_getCloseBtn());
@@ -632,37 +672,41 @@ MagnificPopup.prototype = {
}, },
_openClick: function(e, el, options) { _openClick: function(e, el, options) {
var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick; var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
if( midClick || e.which !== 2 ) {
var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
if(disableOn) {
if($.isFunction(disableOn)) {
if( !disableOn.call(mfp) ) {
return true;
}
} else { // else it's number
if( _window.width() < disableOn ) {
return true;
}
}
}
if(e.type) {
e.preventDefault();
// This will prevent popup from closing if element is inside and popup is already opened if(!midClick && ( e.which === 2 || e.ctrlKey || e.metaKey ) ) {
if(mfp.isOpen) { return;
e.stopPropagation();
}
}
options.el = $(e.mfpEl);
if(options.delegate) {
options.items = el.find(options.delegate);
}
mfp.open(options);
} }
var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
if(disableOn) {
if($.isFunction(disableOn)) {
if( !disableOn.call(mfp) ) {
return true;
}
} else { // else it's number
if( _window.width() < disableOn ) {
return true;
}
}
}
if(e.type) {
e.preventDefault();
// This will prevent popup from closing if element is inside and popup is already opened
if(mfp.isOpen) {
e.stopPropagation();
}
}
options.el = $(e.mfpEl);
if(options.delegate) {
options.items = el.find(options.delegate);
}
mfp.open(options);
}, },
@@ -692,7 +736,7 @@ MagnificPopup.prototype = {
mfp.preloader.html(text); mfp.preloader.html(text);
mfp.preloader.find('a').click(function(e) { mfp.preloader.find('a').on('click', function(e) {
e.stopImmediatePropagation(); e.stopImmediatePropagation();
}); });
@@ -714,7 +758,7 @@ MagnificPopup.prototype = {
mfp.wrap.removeClass(cName); mfp.wrap.removeClass(cName);
}, },
_hasScrollBar: function(winHeight) { _hasScrollBar: function(winHeight) {
return ( (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) ) return ( (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) );
}, },
_parseMarkup: function(template, values, item) { _parseMarkup: function(template, values, item) {
var arr; var arr;
@@ -826,6 +870,12 @@ $.magnificPopup = {
closeBtnInside: true, closeBtnInside: true,
showCloseBtn: true,
enableEscapeKey: true,
modal: false,
alignTop: false, alignTop: false,
removalDelay: 0, removalDelay: 0,
@@ -1222,6 +1272,8 @@ $.magnificPopup.registerModule('image', {
item.hasSize = true; item.hasSize = true;
item.loaded = true; item.loaded = true;
_mfpTrigger('ImageLoadComplete');
} }
else { else {
@@ -1265,6 +1317,9 @@ $.magnificPopup.registerModule('image', {
if(el.is('img')) { if(el.is('img')) {
item.img = item.img.clone(); item.img = item.img.clone();
} }
if(item.img[0].naturalWidth > 0) {
item.hasSize = true;
}
} }
mfp._parseMarkup(template, { mfp._parseMarkup(template, {
@@ -1305,6 +1360,193 @@ $.magnificPopup.registerModule('image', {
/*>>image*/ /*>>image*/
/*>>zoom*/
var hasMozTransform,
getHasMozTransform = function() {
if(hasMozTransform === undefined) {
hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
}
return hasMozTransform;
};
$.magnificPopup.registerModule('zoom', {
options: {
enabled: false,
easing: 'ease-in-out',
duration: 300,
opener: function(element) {
return element.is('img') ? element : element.find('img');
}
},
proto: {
initZoom: function() {
var zoomSt = mfp.st.zoom,
ns = '.zoom';
if(!zoomSt.enabled || !mfp.supportsTransition) {
return;
}
var duration = zoomSt.duration,
getElToAnimate = function(image) {
var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'),
transition = 'all '+(zoomSt.duration/1000)+'s ' + zoomSt.easing,
cssObj = {
position: 'fixed',
zIndex: 9999,
left: 0,
top: 0,
'-webkit-backface-visibility': 'hidden'
},
t = 'transition';
cssObj['-webkit-'+t] = cssObj['-moz-'+t] = cssObj['-o-'+t] = cssObj[t] = transition;
newImg.css(cssObj);
return newImg;
},
showMainContent = function() {
mfp.content.css('visibility', 'visible');
},
openTimeout,
animatedImg;
_mfpOn('BuildControls'+ns, function() {
if(mfp._allowZoom()) {
clearTimeout(openTimeout);
mfp.content.css('visibility', 'hidden');
// Basically, all code below does is clones existing image, puts in on top of the current one and animated it
image = mfp._getItemToZoom();
if(!image) {
showMainContent();
return;
}
animatedImg = getElToAnimate(image);
animatedImg.css( mfp._getOffset() );
mfp.wrap.append(animatedImg);
openTimeout = setTimeout(function() {
animatedImg.css( mfp._getOffset( true ) );
openTimeout = setTimeout(function() {
showMainContent();
setTimeout(function() {
animatedImg.remove();
image = animatedImg = null;
_mfpTrigger('ZoomAnimationEnded');
}, 16); // avoid blink when switching images
}, duration); // this timeout equals animation duration
}, 16); // by adding this timeout we avoid short glitch at the beginning of animation
// Lots of timeouts...
}
});
_mfpOn(BEFORE_CLOSE_EVENT+ns, function() {
if(mfp._allowZoom()) {
clearTimeout(openTimeout);
mfp.st.removalDelay = duration;
if(!image) {
image = mfp._getItemToZoom();
if(!image) {
return;
}
animatedImg = getElToAnimate(image);
}
animatedImg.css( mfp._getOffset(true) );
mfp.wrap.append(animatedImg);
mfp.content.css('visibility', 'hidden');
setTimeout(function() {
animatedImg.css( mfp._getOffset() );
}, 16);
}
});
_mfpOn(CLOSE_EVENT+ns, function() {
if(mfp._allowZoom()) {
showMainContent();
if(animatedImg) {
animatedImg.remove();
}
}
});
},
_allowZoom: function() {
return mfp.currItem.type === 'image';
},
_getItemToZoom: function() {
if(mfp.currItem.hasSize) {
return mfp.currItem.img;
} else {
return false;
}
},
// Get element postion relative to viewport
_getOffset: function(isLarge) {
var el;
if(isLarge) {
el = mfp.currItem.img;
} else {
el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
}
var offset = el.offset();
var paddingTop = parseInt(el.css('padding-top'),10);
var paddingBottom = parseInt(el.css('padding-bottom'),10);
offset.top -= ( $(window).scrollTop() - paddingTop );
/*
Animating left + top + width/height looks glitchy in Firefox, but perfect in Chrome. And vice-versa.
*/
var obj = {
width: el.width(),
// fix Zepto height+padding issue
height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
};
// I hate to do this, but there is no another option
if( getHasMozTransform() ) {
obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
} else {
obj.left = offset.left;
obj.top = offset.top;
}
return obj;
}
}
});
/*>>zoom*/
/*>>iframe*/ /*>>iframe*/
var IFRAME_NS = 'iframe', var IFRAME_NS = 'iframe',
@@ -1582,6 +1824,7 @@ $.magnificPopup.registerModule('gallery', {
}).on('error.mfploader', function() { }).on('error.mfploader', function() {
item.hasSize = true; item.hasSize = true;
item.loadError = true; item.loadError = true;
_mfpTrigger('LazyLoadError', item);
}).attr('src', item.src); }).attr('src', item.src);
} }
+1
View File
File diff suppressed because one or more lines are too long
+8
View File
@@ -0,0 +1,8 @@
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
window.matchMedia=window.matchMedia||function(e,t){"use strict";var n,r=e.documentElement,i=r.firstElementChild||r.firstChild,s=e.createElement("body"),o=e.createElement("div");o.id="mq-test-1";o.style.cssText="position:absolute;top:-100em";s.style.background="none";s.appendChild(o);return function(e){o.innerHTML='&shy;<style media="'+e+'"> #mq-test-1 { width: 42px; }</style>';r.insertBefore(s,i);n=o.offsetWidth===42;r.removeChild(s);return{matches:n,media:e}}}(document);(function(e){"use strict";function x(){w(true)}var t={};e.respond=t;t.update=function(){};t.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(t.mediaQueriesSupported){return}var n=e.document,r=n.documentElement,i=[],s=[],o=[],u={},a=30,f=n.getElementsByTagName("head")[0]||r,l=n.getElementsByTagName("base")[0],c=f.getElementsByTagName("link"),h=[],p=function(){for(var t=0;t<c.length;t++){var n=c[t],r=n.href,i=n.media,s=n.rel&&n.rel.toLowerCase()==="stylesheet";if(!!r&&s&&!u[r]){if(n.styleSheet&&n.styleSheet.rawCssText){v(n.styleSheet.rawCssText,r,i);u[r]=true}else{if(!/^([a-zA-Z:]*\/\/)/.test(r)&&!l||r.replace(RegExp.$1,"").split("/")[0]===e.location.host){h.push({href:r,media:i})}}}}d()},d=function(){if(h.length){var t=h.shift();E(t.href,function(n){v(n,t.href,t.media);u[t.href]=true;e.setTimeout(function(){d()},0)})}},v=function(e,t,n){var r=e.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),o=r&&r.length||0;t=t.substring(0,t.lastIndexOf("/"));var u=function(e){return e.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+t+"$2$3")},a=!o&&n;if(t.length){t+="/"}if(a){o=1}for(var f=0;f<o;f++){var l,c,h,p;if(a){l=n;s.push(u(e))}else{l=r[f].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;s.push(RegExp.$2&&u(RegExp.$2))}h=l.split(",");p=h.length;for(var d=0;d<p;d++){c=h[d];i.push({media:c.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:s.length-1,hasquery:c.indexOf("(")>-1,minw:c.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:c.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}w()},m,g,y=function(){var e,t=n.createElement("div"),i=n.body,s=false;t.style.cssText="position:absolute;font-size:1em;width:1em";if(!i){i=s=n.createElement("body");i.style.background="none"}i.appendChild(t);r.insertBefore(i,r.firstChild);e=t.offsetWidth;if(s){r.removeChild(i)}else{i.removeChild(t)}e=b=parseFloat(e);return e},b,w=function(t){var u="clientWidth",l=r[u],h=n.compatMode==="CSS1Compat"&&l||n.body[u]||l,p={},d=c[c.length-1],v=(new Date).getTime();if(t&&m&&v-m<a){e.clearTimeout(g);g=e.setTimeout(w,a);return}else{m=v}for(var E in i){if(i.hasOwnProperty(E)){var S=i[E],x=S.minw,T=S.maxw,N=x===null,C=T===null,k="em";if(!!x){x=parseFloat(x)*(x.indexOf(k)>-1?b||y():1)}if(!!T){T=parseFloat(T)*(T.indexOf(k)>-1?b||y():1)}if(!S.hasquery||(!N||!C)&&(N||h>=x)&&(C||h<=T)){if(!p[S.media]){p[S.media]=[]}p[S.media].push(s[S.rules])}}}for(var L in o){if(o.hasOwnProperty(L)){if(o[L]&&o[L].parentNode===f){f.removeChild(o[L])}}}for(var A in p){if(p.hasOwnProperty(A)){var O=n.createElement("style"),M=p[A].join("\n");O.type="text/css";O.media=A;f.insertBefore(O,d.nextSibling);if(O.styleSheet){O.styleSheet.cssText=M}else{O.appendChild(n.createTextNode(M))}o.push(O)}}},E=function(e,t){var n=S();if(!n){return}n.open("GET",e,true);n.onreadystatechange=function(){if(n.readyState!==4||n.status!==200&&n.status!==304){return}t(n.responseText)};if(n.readyState===4){return}n.send(null)},S=function(){var t=false;try{t=new e.XMLHttpRequest}catch(n){t=new e.ActiveXObject("Microsoft.XMLHTTP")}return function(){return t}}();p();t.update=p;if(e.addEventListener){e.addEventListener("resize",x,false)}else if(e.attachEvent){e.attachEvent("onresize",x)}})(this)
-41
View File
@@ -1,41 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,1.5);
.prefix(12,2);
}
.top-navigation {
.grid(12,8);
}
.image-wrap {
&:after {
left: 33.333333333%;
}
.headline-wrap {
.prefix(12,1);
}
}
#main article {
.grid(12,4.5);
}
#index {
.grid(12,4.5);
}
.related-articles {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.footer-wrap footer {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
.article-author-top {
.grid(12,1.5);
.prefix(12,2);
}
// VENDOR-SPECIFIC ============================================
-6
View File
@@ -1,6 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
// VENDOR-SPECIFIC ============================================
-11
View File
@@ -1,11 +0,0 @@
// ROOT =======================================================
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.image-grid {
li {
width: 33.333333%;
}
}
// VENDOR-SPECIFIC ============================================
-70
View File
@@ -1,70 +0,0 @@
// ROOT =======================================================
html {
font-size: 95%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
.site-name {
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
.top-navigation {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
.image-wrap .headline-wrap,
.image-wrap:after {
left: 25%;
}
.image-wrap .headline-wrap {
margin-left: 0;
}
#main article {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
#index {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
.footer-wrap footer {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
.article-author-top {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
}
.article-author-bottom {
display: none;
}
.toc {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
position: fixed;
top: 120px;
right: 0;
.box-shadow(0 0 5px rgba(0,0,0,.50));
}
.image-grid {
li {
width: 25%;
}
}
.related-articles {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
// VENDOR-SPECIFIC ============================================
-15
View File
@@ -1,15 +0,0 @@
// ROOT =======================================================
html {
font-size: 100%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
/* Image Grid ============================================== */
.image-grid {
li {
width: 20%;
}
}
// VENDOR-SPECIFIC ============================================
-15
View File
@@ -1,15 +0,0 @@
// ROOT =======================================================
html {
font-size: 112.5%;
}
// TYPOGRAPHY =================================================
// TEXTURE ====================================================
// ELEMENTS ===================================================
// LAYOUT =====================================================
/* Image Grid ============================================== */
.image-grid {
li {
width: 16.666666666%;
}
}
// VENDOR-SPECIFIC ============================================
+7 -7
View File
@@ -1,14 +1,14 @@
.CodeRay { .CodeRay {
background-color: #efefef; background-color: #efefef;
font-family: @codefont; font-family: @code-font;
font-size: 80%; .font(12);
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} .rounded(4px);
pre {
.CodeRay pre { margin: 0px;
margin: 0px; padding: 1em;
padding: 1em; }
} }
div.CodeRay { } div.CodeRay { }
+59 -78
View File
@@ -1,94 +1,75 @@
hr { hr {
display: block; display: block;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
/* Figures and images ==================================== */ /* Figures and images ==================================== */
article img { article img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-width: 0; border-width: 0;
vertical-align: middle; vertical-align: middle;
-ms-interpolation-mode: bicubic; -ms-interpolation-mode: bicubic;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
.half { .half {
.container(); .container();
.clearfix(); .clearfix();
img { @media @480px {
.grid(12,6); img {
} .grid(12,6);
figcaption { }
.grid(12,12); figcaption {
} .grid(12,12);
}
}
} }
.third { .third {
.container(); .container();
.clearfix(); .clearfix();
img { @media @480px {
.grid(12,4); img {
} .grid(12,4);
figcaption { }
.grid(12,12); figcaption {
} .grid(12,12);
}
}
} }
/* Buttons =============================================== */ /* Buttons ============================================== */
.btn { .btn {
display: inline-block; display: inline-block;
*display: inline; margin-bottom: 20px;
/* IE7 inline-block hack */ padding: 8px 20px;
*zoom: 1; .font-rem(14);
padding: 12px 24px; background-color: @black;
margin-bottom: 2em; color: @white;
line-height: 1; border: 2px solid @black !important;
text-align: center; .rounded(4px);
text-transform: uppercase; &:visited {
vertical-align: middle; color: @white;
border: 4px double @textcolor; }
.rounded(50px); &:hover {
cursor: pointer; background-color: @white;
*margin-left: .3em; color: @black;
.transition(.4s linear); }
&:visited { &:active {
border: 4px double @linkcolorvisited; .translate(0, 2px);
} }
&:hover {
border: 4px double @linkcolorhover;
}
}
.btn:first-child {
*margin-left: 0;
}
.btn-inverse {
border: 4px double @white;
color: @white;
background-color: @black;
&:visited {
color: @white;
border-color: @white;
}
&:hover {
color: @white;
border-color: @white;
}
}
.btn-small {
font-size: 60%;
padding: 6px 12px;
} }
/* Well ================================================= */ /* Well ================================================= */
.well { .well {
min-height: 20px; min-height: 20px;
padding: 19px; padding: 19px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
.rounded(4px); .rounded(4px);
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05)); .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
} }
+1 -1
View File
@@ -40,7 +40,7 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: @basefont; font-family: @base-font;
.box-sizing(border-box); .box-sizing(border-box);
} }
label { label {
-39
View File
@@ -1,39 +0,0 @@
// ===========================================================
// Minimal Mistakes
// By: Michael Rose
// ===========================================================/
// ROOT =======================================================
/* CSS Normalize =========================================== */
@import "normalize.less";
/* Variables and mixins ==================================== */
@import "variables.less";
/* Site wide styles (html, body, global classes) =========== */
@import "site.less";
// TYPOGRAPHY =================================================
/* Typeplate.com typographic starter pack ================== */
@import "typeplate.less";
@import "typography.less";
// MIXINS =====================================================
@import "mixins.less";
@import "grid.less";
// ELEMENTS ===================================================
/* Figures, images, social media, other elements =========== */
@import "elements.less";
/* Standard form controls ================================== */
@import "forms.less";
// LAYOUT =====================================================
/* Page level layout styles */
@import "page.less";
// MODERNIZR ==================================================
// MEDIA QUERIES ==============================================
/* 480px wide ============================================== */
@import "480.less";
/* 600px wide ============================================== */
@import "600.less";
/* 768px wide ============================================== */
@import "768.less";
/* 992px wide ============================================== */
@import "992.less";
/* 1382px wide ============================================= */
@import "1382.less";
+2 -26
View File
@@ -11,11 +11,11 @@
/* Site wide styles (html, body, global classes) =========== */ /* Site wide styles (html, body, global classes) =========== */
@import "site.less"; @import "site.less";
// TYPOGRAPHY ================================================= // TYPOGRAPHY =================================================
/* Typeplate.com typographic starter pack ================== */
@import "typeplate.less";
@import "typography.less"; @import "typography.less";
/* Pygments Syntax highlighting ============================= */ /* Pygments Syntax highlighting ============================= */
@import "pygments.less"; @import "pygments.less";
// Coderay Syntax highlighting ===============================
@import "coderay.less";
// MIXINS ===================================================== // MIXINS =====================================================
@import "mixins.less"; @import "mixins.less";
@import "grid.less"; @import "grid.less";
@@ -36,28 +36,4 @@
/* Print =================================================== */ /* Print =================================================== */
@media print { @media print {
@import "print.less"; @import "print.less";
}
/* 480px wide ============================================== */
@media only screen and (min-width: 30em) {
@import "480.less";
}
/* 600px wide ============================================== */
@media only screen and (min-width: 37.5em) {
@import "600.less";
}
/* 768px wide ============================================== */
@media only screen and (min-width: 48em) {
@import "768.less";
}
/* 992px wide ============================================== */
@media only screen and (min-width: 62em) {
@import "992.less";
}
/* 1382px wide ============================================= */
@media only screen and (min-width: 86.375em) {
@import "1382.less";
}
/* 2x for retina displays ================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@import "2x.less";
} }
+132 -121
View File
@@ -1,76 +1,126 @@
// =========================================================== // UTILITY MIXINS
// --------------------------------------------------
// 320 and Up by Andy Clarke // Clearfix
// Version: 3.0 // --------------------
// URL: http://stuffandnonsense.co.uk/projects/320andup/ // For clearing floats like a boss h5bp.com/q
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 .clearfix {
// Modified by: Michael Rose *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 ===================================================== // Center-align a block level element
// TYPOGRAPHY =============================================== // ----------------------------------
.font-size(@font-size: 16){ .center-block() {
@rem: (@font-size / 10); display: block;
font-size : @font-size * 1px; margin-left: auto;
font-size : ~"@{rem}rem"; } margin-right: auto;
}
.lineheight(@font-size: 16){ // TYPOGRAPHY
@rem: (@font-size / 10); // --------------------------------------------------
line-height: @font-size * 1px;
line-height: ~"@{rem}rem"; } // 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() { .text-overflow() {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
// COLOR ==================================================== @indent-var: 0rem + (@doc-line-height / @doc-font-size);
// TEXTURE ==================================================
/* Gradients ============================================= */ // GRADIENTS
// --------------------------------------------------
.horizontal(@startColor : @white, @endColor : @lightergrey) { .horizontal(@startColor : @white, @endColor : @lightergrey) {
background-color: @endColor; background-color: @endColor;
background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 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 : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10 background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(left, @startColor, @endColor); // W3C background-image : linear-gradient(left, @startColor, @endColor); // W3C
background-repeat : repeat-x; } background-repeat : repeat-x; }
.vertical(@startColor : @white, @endColor: @lightergrey) { .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-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-color : @endColor;
background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10 background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(top, @startColor, @endColor); // W3C background-image : linear-gradient(top, @startColor, @endColor); // W3C
background-repeat : repeat-x; } background-repeat : repeat-x; }
.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) { .directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
background-color : @endColor; background-color : @endColor;
background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 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 : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image : linear-gradient(@deg, @startColor, @endColor); // W3C background-image : linear-gradient(@deg, @startColor, @endColor); // W3C
background-repeat : repeat-x; } 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) { .bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
border-top : solid 1px @top-color; border-top : solid 1px @top-color;
border-left : solid 1px @left-color; border-left : solid 1px @left-color;
border-right : solid 1px @right-color; border-right : solid 1px @right-color;
border-bottom : solid 1px @bottom-color; } border-bottom : solid 1px @bottom-color; }
/* .rounded(VALUE); ====================================== */ // ROUND CORNERS
// --------------------------------------------------
// .rounded(VALUE);
.rounded(@radius:4px) { .rounded(@radius:4px) {
-webkit-border-radius : @radius; -webkit-border-radius : @radius;
-moz-border-radius : @radius; -moz-border-radius : @radius;
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) { .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius : @topright; -webkit-border-top-right-radius : @topright;
-webkit-border-bottom-right-radius : @bottomright; -webkit-border-bottom-right-radius : @bottomright;
@@ -88,29 +138,32 @@ border-top-left-radius : @topleft;
-moz-background-clip : padding; -moz-background-clip : padding;
background-clip : padding-box; } 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)) { .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow : @shadow; -webkit-box-shadow : @shadow;
-moz-box-shadow : @shadow; -moz-box-shadow : @shadow;
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) { .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); -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); -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); } 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: 0 2px 3px rgba(0,0,0,.25)) {
text-shadow : @shadow; } text-shadow : @shadow; }
/* .opacity(VALUE); ======================================= */ // .opacity(VALUE);
.opacity(@opacity : .5) { .opacity(@opacity : .5) {
-webkit-opacity : @opacity; -webkit-opacity : @opacity;
-moz-opacity : @opacity; -moz-opacity : @opacity;
opacity : @opacity; } opacity : @opacity; }
/* .rotate(VALUEdeg); ===================================== */ // TRANSFORMATIONS
// --------------------------------------------------
// .rotate(VALUEdeg);
.rotate(@deg) { .rotate(@deg) {
-webkit-transform : rotate(@deg); -webkit-transform : rotate(@deg);
-moz-transform : rotate(@deg); -moz-transform : rotate(@deg);
@@ -118,7 +171,7 @@ opacity : @opacity; }
-o-transform : rotate(@deg); -o-transform : rotate(@deg);
transform : rotate(@deg); } transform : rotate(@deg); }
/* .scale(VALUE); ========================================= */ // .scale(VALUE);
.scale(@ratio) { .scale(@ratio) {
-webkit-transform : scale(@ratio); -webkit-transform : scale(@ratio);
-moz-transform : scale(@ratio); -moz-transform : scale(@ratio);
@@ -126,7 +179,7 @@ transform : rotate(@deg); }
-o-transform : scale(@ratio); -o-transform : scale(@ratio);
transform : scale(@ratio); } transform : scale(@ratio); }
/* .skew(VALUE, VALUE); =================================== */ // .skew(VALUE, VALUE);
.skew(@x: 0, @y: 0) { .skew(@x: 0, @y: 0) {
-webkit-transform : skew(@x, @y); -webkit-transform : skew(@x, @y);
-moz-transform : skew(@x, @y); -moz-transform : skew(@x, @y);
@@ -134,7 +187,7 @@ transform : scale(@ratio); }
-o-transform : skew(@x, @y); -o-transform : skew(@x, @y);
transform : skew(@x, @y); } transform : skew(@x, @y); }
/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ // .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
.transition(@transition) { .transition(@transition) {
-webkit-transition : @transition; -webkit-transition : @transition;
-moz-transition : @transition; -moz-transition : @transition;
@@ -142,7 +195,7 @@ transform : skew(@x, @y); }
-o-transition : @transition; -o-transition : @transition;
transition : @transition; } transition : @transition; }
/* .translate(VALUE, VALUE) =============================== */ // .translate(VALUE, VALUE)
.translate(@x: 0, @y: 0) { .translate(@x: 0, @y: 0) {
-webkit-transform : translate(@x, @y); -webkit-transform : translate(@x, @y);
-moz-transform : translate(@x, @y); -moz-transform : translate(@x, @y);
@@ -157,51 +210,46 @@ transform : translate(@x, @y); }
-o-transform : translate(@x, @y, @z); -o-transform : translate(@x, @y, @z);
transform : translate(@x, @y, @z); } transform : translate(@x, @y, @z); }
// ELEMENTS ================================================== .animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
/* .background-alpha(VALUE VALUE); ======================== */ -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-alpha(@color: @white, @alpha: 1) {
background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); } background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
/* .background-size(VALUE VALUE); ========================= */ // .background-size(VALUE VALUE);
.background-size(@size){ .background-size(@size){
-webkit-background-size : @size; -webkit-background-size : @size;
-moz-background-size : @size; -moz-background-size : @size;
-o-background-size : @size; -o-background-size : @size;
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) { .background-clip(@clip) {
-webkit-background-clip : @clip; -webkit-background-clip : @clip;
-moz-background-clip : @clip; -moz-background-clip : @clip;
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) { .box-sizing(@boxsize: border-box) {
-webkit-box-sizing : @boxsize; -webkit-box-sizing : @boxsize;
-moz-box-sizing : @boxsize; -moz-box-sizing : @boxsize;
-ms-box-sizing : @boxsize; -ms-box-sizing : @boxsize;
box-sizing : @boxsize; } box-sizing : @boxsize; }
/* Contain floats ========================================= */ // For image replacement
.clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
/* For image replacement ================================== */
.hide-text() { .hide-text() {
text-indent : 100%; text-indent : 100%;
white-space : nowrap; white-space : nowrap;
overflow : hidden; } overflow : hidden; }
/* Hide from visual and speaking browsers ================= */ // Hide from visual and speaking browsers
.hidden() { .hidden() {
display : none !important; display : none !important;
visibility : hidden; } visibility : hidden; }
@@ -210,23 +258,23 @@ visibility : hidden; }
visibility: hidden; visibility: hidden;
} }
/* Hide but maintain layout =============================== */ // Hide but maintain layout
.invisible() { .invisible() {
visibility : hidden; } visibility : hidden; }
/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ // .resize(VALUE) (none, both, horizontal, vertical, inherit)
.resize(@direction: both) { .resize(@direction: both) {
resize : @direction; resize : @direction;
overflow : auto; } overflow : auto; }
/* .userselect(VALUE) (all, element, none, text) ========== */ // .userselect(VALUE) (all, element, none, text)
.user-select(@select) { .user-select(@select) {
-webkit-user-select : @select; -webkit-user-select : @select;
-moz-user-select : @select; -moz-user-select : @select;
-o-user-select : @select; -o-user-select : @select;
user-select : @select; } user-select : @select; }
/* Hidden but available to speaking browsers ============== */ // Hidden but available to speaking browsers
.visuallyhidden() { .visuallyhidden() {
overflow : hidden; overflow : hidden;
position : absolute; position : absolute;
@@ -237,7 +285,7 @@ margin : -1px;
padding : 0; padding : 0;
border : 0; } border : 0; }
/* Make visuallyhidden focusable with a keyboard ========== */ // Make visuallyhidden focusable with a keyboard
.visuallyhidden.focusable:active, .visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { .visuallyhidden.focusable:focus {
position : static; position : static;
@@ -247,53 +295,16 @@ width : auto;
margin : 0; margin : 0;
overflow: visible; } 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 ==================================================== // MEDIA QUERIES
/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */ // --------------------------------------------------
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
-webkit-column-width : @colwidth; @480px: ~"only screen and (min-width: 30em)";
-webkit-column-count : @colcount; @600px: ~"only screen and (min-width: 37.5em)";
-webkit-column-gap : @colgap; @768px: ~"only screen and (min-width: 48em)";
-webkit-column-rule-color : @columnRuleColor; @992px: ~"only screen and (min-width: 62em)";
-webkit-column-rule-style : @columnRuleStyle; @1382px: ~"only screen and (min-width: 86.375em)";
-webkit-column-rule-width : @columnRuleWidth; @highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
-moz-column-width : @colwidth; ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
-moz-column-count : @colcount; ~"only screen and (min-resolution: 144dpi)",
-moz-column-gap : @colgap; ~"only screen and (min-resolution: 1.5dppx)";
-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; }
+2 -1
View File
@@ -171,7 +171,7 @@ samp {
*/ */
pre { pre {
white-space: pre-wrap; white-space: pre;
} }
/** /**
@@ -394,4 +394,5 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
margin-bottom: 1.5em; margin-bottom: 1.5em;
width: 100%; /* make full width */
} }
+403 -68
View File
@@ -1,47 +1,206 @@
html { body {
background-color: @bodycolor; background-color: @bodycolor;
font-family: @basefont; font-family: @base-font;
font-color: @textcolor; font-color: @textcolor;
font-size: 90%;
} }
.navigation-wrapper { .navigation-wrapper {
.container(); .container();
padding: 2em 0 3em; padding: 2em 0 0;
font-family: @baseheadingfont; font-family: @heading-font;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
.clearfix();
} }
.site-name { .site-name {
.container();
.grid(12,10); .grid(12,10);
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
margin-bottom: 1em; margin-bottom: 1em;
float: none;
display: block;
.font-rem(24);
@media @600px {
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
.font-rem(16);
}
@media @1382px {
.grid(12,1.5);
.prefix(12,2);
}
} }
.top-navigation { .top-navigation {
.container();
.grid(12,10); .grid(12,10);
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
margin-bottom: 1em; margin-bottom: 1em;
} float: none;
.top-navigation { display: block;
@media @600px {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,8);
}
ul { ul {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
clear: both;
list-style-type: none;
} }
li { li {
display: block;
list-style-type: none; list-style-type: none;
display: inline; border-bottom: 1px solid lighten(@black,80);
margin-right: 25px; border-bottom: 1px solid fade(@black,10);
.font-rem(16);
&:last-child {
border-bottom: 0 solid transparent;
}
@media @600px {
display: inline;
margin-right: 25px;
white-space: nowrap;
border-bottom: 0 solid transparent;
}
a { a {
display: block;
padding: 10px 0;
decoration: none; decoration: none;
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
.transition(all .2s); .transition(all .2s);
@media @600px {
display: inline;
padding: 0;
}
} }
} }
} }
// Navicon lines
@button-size: 1.5rem;
.line() {
display: inline-block;
width: @button-size;
height: @button-size/7;
// line color
background: @white;
border-radius: @button-size/14;
transition: .3s;
}
.lines-button {
padding: @button-size/4 @button-size/2;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: @button-size/7;
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}
.lines {
margin-right: 10px;
margin-bottom: @button-size/5;
// create middle line
.line();
position: relative;
// create the upper and lower lines as pseudo-elements of the middle line
&:before,
&:after {
.line();
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: @button-size/14 center;
transform-origin: @button-size/14 center;
}
&:before { top: @button-size/4; }
&:after { top: -@button-size/4; }
}
.lines-button:hover {
opacity: 1;
.lines {
&:before { top: @button-size/3.5; }
&:after { top: -@button-size/3.5; }
}
}
.lines-button.x.active .lines {
// hide the middle line
background: transparent;
// overlap the lines by setting both their top values to 0
&:before,
&:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: 0;
width: @button-size;
}
// rotate the lines to form the x shape
&:before {
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
&:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
}
}
// Style the toggle menu link and hide it
.nav .navtoogle {
.font-rem(18);
font-weight: normal;
background-color: @black;
color: @white;
border: none;
cursor: pointer;
@media @600px {
display: none;
}
}
.nav button {
border: none;
background: none;
}
.navtoogle i {
z-index:-1;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
}
// When JavaScript is disabled, we hide the toggle button
.no-js .nav .navtoggle {
display: none;
}
// When JavaScript is disabled, we show the menu
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
// When JavaScript is enabled, we hide the menu
.js .nav ul {
max-height: 0;
overflow: hidden;
@media @600px {
max-height: 30em;
}
}
// Displaying the menu when the user has clicked on the button
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-o-transition: max-height .4s;
-ms-transition: max-height .4s;
transition: max-height .4s;
}
#main { #main {
counter-reset: captions; counter-reset: captions;
.container(); .container();
@@ -54,6 +213,14 @@ html {
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
margin-bottom: 2em; margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,4.5);
}
} }
} }
#index { #index {
@@ -62,10 +229,27 @@ html {
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
margin-bottom: 2em; margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,4.5);
}
h3 {
margin: 0;
padding-bottom: .5em;
.font-rem(28);
border-bottom: 1px solid lighten(@black,70);
}
article { article {
h2 { h2 {
.delta(); margin-bottom: 4px;
margin-bottom: 0; .font-rem(20);
}
p {
.font-rem(14);
} }
p+p { p+p {
text-indent: 0; text-indent: 0;
@@ -85,6 +269,12 @@ html {
height: 0; height: 0;
border: 20px solid transparent; border: 20px solid transparent;
border-bottom-color: @bodycolor; border-bottom-color: @bodycolor;
@media @600px {
left: 25%;
}
@media @1382px {
left: 33.333333333%;
}
} }
img { img {
width: 100%; width: 100%;
@@ -95,37 +285,27 @@ html {
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
.prefix(12,1); .prefix(12,1);
@media @600px {
left: 25%;
margin-left: 0;
}
@media @1382px {
.prefix(12,1);
}
h1, h2 { h1, h2 {
color: @white; color: @white;
.text-shadow(0 1px 2px rgba(0,0,0,.25)); .text-shadow(0 1px 2px rgba(0,0,0,.25));
} }
} }
} }
.headline-wrap {
h1 {
.beta();
}
h2 {
.delta();
text-transform: uppercase;
}
}
.article-wrap {
h2 {
.gamma();
}
h3 {
.delta();
}
}
.byline { .byline {
clear: both; clear: both;
font-size: 80%; font-size: 80%;
} }
.article-author-top, .article-author-side,
.article-author-bottom { .article-author-bottom {
h4 { h3 {
margin-bottom: 0.5em; margin-bottom: 0;
} }
p { p {
font-size: 80%; font-size: 80%;
@@ -135,25 +315,121 @@ html {
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
} }
img.bio-photo { img.bio-photo {
width: 100px;
height: 100px;
.rounded(100px); .rounded(100px);
} }
} }
.article-author-top { .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-side {
display: none; display: none;
@media @600px {
display: block;
.grid(12,2);
.prefix(12,0.5);
.suffix(12,0.5);
h3,
.bio-photo,
p,
.author-social {
display: block;
max-width: 125px;
margin: auto;
}
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
p {
margin-bottom: 20px;
}
.author-social {
margin-bottom: 5px;
}
}
@media @992px {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo {
margin-left: 25px;
margin-right: 25px;
}
}
@media @1382px {
.grid(12,1.5);
.prefix(12,2);
}
} }
.article-author-bottom { .article-author-bottom {
margin-bottom: 1em;
@media @600px {
display: none;
}
.bio-photo { .bio-photo {
float: left; float: left;
margin-right: 25px; margin-right: 25px;
} }
.author-social {
display: inline-block;
margin-right: 5px;
}
@media @992px {
h3,
.bio-photo,
p,
.author-social {
max-width: 150px;
}
img.bio-photo {
margin-left: 25px;
margin-right: 25px;
}
}
}
.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 { .toc {
display: none; display: none;
font-size: 95%; font-size: 95%;
.opacity(0.7); @media @600px {
.transition(opacity 0.2s ease-in-out); display: block;
&:hover { .grid(12,2);
.opacity(1); .prefix(12,0.5);
.suffix(12,0.5);
position: absolute;
top: 5.5em;
right: 0;
background-color: @white;
} }
header { header {
background: lighten(@black, 10); background: lighten(@black, 10);
@@ -162,6 +438,8 @@ html {
margin: 0; margin: 0;
padding: 5px 10px; padding: 5px 10px;
color: @white; color: @white;
.font-rem(16);
text-transform: uppercase;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@@ -169,29 +447,31 @@ html {
ul { ul {
margin: 2px 0 0; margin: 2px 0 0;
padding: 0; padding: 0;
background: lighten(@black, 30);
line-height: 1; line-height: 1;
} }
li { li {
display: block; display: block;
margin: 0; margin: 0 0 1px 0;
padding: 0; padding: 0;
font-family: @baseheadingfont; font-family: @heading-font;
border-bottom: 1px solid darken(@white, 50); list-style-type: none;
&:last-child { &:last-child {
border-bottom: 0 solid transparent; border-bottom-width: 0;
} }
a, a:hover { a {
color: @white;
border-bottom: 0 solid transparent;
}
a {
padding: 10px; padding: 10px;
display: block; display: block;
color: @white;
border-bottom-width: 0;
background: lighten(@black, 30);
.opacity(0.7);
.transition(opacity 0.2s ease-in-out);
&:hover {
.opacity(1);
}
} }
ul { ul {
margin: 0; margin: 1px 0 0;
border-top: 1px solid darken(@white, 50);
} }
} }
} }
@@ -202,6 +482,18 @@ html {
padding: 0; padding: 0;
li { li {
.grid(12,6); .grid(12,6);
@media @480px {
width: 33.333333%;
}
@media @600px {
width: 25%;
}
@media @768px {
width: 20%;
}
@media @992px {
width: 16.666666666%;
}
} }
} }
.recent-grid { .recent-grid {
@@ -223,7 +515,7 @@ html {
} }
} }
.holder { .holder {
font-family: @baseheadingfont; font-family: @heading-font;
a { a {
cursor: pointer; cursor: pointer;
margin: 0 5px; margin: 0 5px;
@@ -257,44 +549,55 @@ html {
.container(); .container();
.clearfix(); .clearfix();
clear: both; clear: both;
margin-top: 1em;
padding-top: 2em;
padding-bottom: 3em; padding-bottom: 3em;
background-color: @black;
a, a,
a:active, a:active,
a:visited, a:visited,
p, p,
h4, h4,
h5, h5,
h6 { h6,
color: darken(@white, 25); span {
} .font-rem(14);
a {
border-bottom: 0 solid transparent;
&:hover {
color: @white;
border-bottom: 0 solid transparent;
}
} }
footer { footer {
.grid(12,10); .grid(12,10);
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
@media @600px {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
@media @1382px {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
} }
} }
.related-articles { .related-articles {
.grid(12,10); .grid(12,10);
.prefix(12,1); .prefix(12,1);
.suffix(12,1); .suffix(12,1);
margin-bottom: 2em;
@media @600px {
.grid(12,6);
.prefix(12,3);
.suffix(12,3);
}
@media @1382px {
.grid(12,4.5);
.prefix(12,4);
.suffix(12,3.5);
}
h4 { h4 {
.epsilon();
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0; margin-bottom: 0;
} }
li { li {
margin-bottom: 0; margin-bottom: 0;
color: @white;
} }
} }
.footer-icons { .footer-icons {
@@ -302,7 +605,6 @@ html {
display: inline-block; display: inline-block;
padding-right: 5px; padding-right: 5px;
a { a {
.delta();
color: lighten(@basecolor, 40%); color: lighten(@basecolor, 40%);
.transition(.4s linear); .transition(.4s linear);
&:hover { &:hover {
@@ -335,7 +637,10 @@ html {
} }
} }
} }
.chrome-frame {
// Browser Upgrade
// --------------------------------------------------
.browser-upgrade {
background: #000; background: #000;
text-align: center; text-align: center;
margin: 0 0 2em 0; margin: 0 0 2em 0;
@@ -350,4 +655,34 @@ html {
border-bottom: 1px solid @white; 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();
} }
+74 -73
View File
@@ -1,74 +1,75 @@
.highlight { .highlight {
background-color: #efefef; background-color: #efefef;
font-family: @codefont; font-family: @code-font;
font-size: 80%; .font(12);
color: #333332; color: #333332;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} .rounded(4px);
pre {
.highlight pre { position: relative;
margin: 0px; margin: 0;
padding: 1em; padding: 1em;
} }
.lineno { padding-right: 24px; color: lighten(#333332,50);}
.hll { background-color: #ffffcc } .hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */ .c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */ .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; font-weight: bold } /* Keyword */ .k { color: #000000; font-weight: bold } /* Keyword */
.o { color: #000000; font-weight: bold } /* Operator */ .o { color: #000000; font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */ .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */ .c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */ .ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */ .gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */ .gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */ .go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */ .gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */ .gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */ .gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */ .gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */ .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */ .m { color: #009999 } /* Literal.Number */
.s { color: #d01040 } /* Literal.String */ .s { color: #d01040 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */ .na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */ .nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */ .nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */ .no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */ .ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */ .ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */ .nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */ .nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */ .nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */ .nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */ .nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */ .ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */ .w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */ .mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */ .mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */ .mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */ .mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #d01040 } /* Literal.String.Backtick */ .sb { color: #d01040 } /* Literal.String.Backtick */
.sc { color: #d01040 } /* Literal.String.Char */ .sc { color: #d01040 } /* Literal.String.Char */
.sd { color: #d01040 } /* Literal.String.Doc */ .sd { color: #d01040 } /* Literal.String.Doc */
.s2 { color: #d01040 } /* Literal.String.Double */ .s2 { color: #d01040 } /* Literal.String.Double */
.se { color: #d01040 } /* Literal.String.Escape */ .se { color: #d01040 } /* Literal.String.Escape */
.sh { color: #d01040 } /* Literal.String.Heredoc */ .sh { color: #d01040 } /* Literal.String.Heredoc */
.si { color: #d01040 } /* Literal.String.Interpol */ .si { color: #d01040 } /* Literal.String.Interpol */
.sx { color: #d01040 } /* Literal.String.Other */ .sx { color: #d01040 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */ .sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #d01040 } /* Literal.String.Single */ .s1 { color: #d01040 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */ .ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */ .bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */ .vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */ .vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */ .vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */ .il { color: #009999 } /* Literal.Number.Integer.Long */
}
+10 -1
View File
@@ -18,7 +18,11 @@
float: left; float: left;
} }
.pull-right { .pull-right {
float:right; float: right;
}
.image-pull-right {
float: right;
margin-top: 0;
} }
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
@@ -38,4 +42,9 @@
li { li {
list-style-type: none; 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);
} }
-727
View File
@@ -1,727 +0,0 @@
/*!
+---------------------------------------------------------------------+
| _ _ _ |
| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ |
| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ |
| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ |
| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| |
| |___/ |_| |_| |
| |
| |
| URL: http://typeplate.com |
| VERSION: 1.0.1 |
| Github: https://github.com/typePlate/typeplate.github.com |
| AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) |
| LICENSE: Creative Commmons |
| http://creativecommons.org/licenses/by/3.0 |
| |
+---------------------------------------------------------------------+
*/
// ==========================================================================
//
// $V a r i a b l e s
//
// ==========================================================================
// $B a s e T y p e
// --------------------------------------------------------------------------
@weight: normal;
@line-height: 1.65;
@font-size: 112.5; // percentage value (16 * 112.5% = 18px)
@font-base: 16 * (@font-size/100); // converts our percentage to a pixel value
@measure: @font-base * @line-height;
@font-family: serif;
@font-family-sans: sans-serif;
//the serif boolean var can be redeclared from another stylesheet. However
//the var must be placed after your @import "typeplate.less";
@serif-boolean: true;
// $C o l o r
// --------------------------------------------------------------------------
@body-copy-color: @textcolor;
@heading-color: @textcolor;
// $A M P E R S A N D @font-face
// --------------------------------------------------------------------------
@amp-fontface-name: Ampersand;
@amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
@amp-fontface-fallback: local("Georgia");
// $A M P E R S A N D e l e m e n t
// --------------------------------------------------------------------------
// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
@amp-font-family: Verdana, sans-serif;
// $T y p e S c a l e
// --------------------------------------------------------------------------
@tera: 117; // 117 = 18 × 6.5
@giga: 90; // 90 = 18 × 5
@mega: 72; // 72 = 18 × 4
@alpha: 60; // 60 = 18 × 3.3333
@beta: 48; // 48 = 18 × 2.6667
@gamma: 36; // 36 = 18 × 2
@delta: 24; // 24 = 18 × 1.3333
@epsilon: 21; // 21 = 18 × 1.1667
@zeta: 18; // 18 = 18 × 1
// $T y p e S c a l e U n i t
// --------------------------------------------------------------------------
@type-scale-unit-value: rem;
// $T e x t I n d e n t a t i o n
// --------------------------------------------------------------------------
@indent-val: 1.5em;
// $S t a t s T a b
// --------------------------------------------------------------------------
@stats-font-size: 1.5rem;
@stats-list-margin: 0 0.625rem 0 0;
@stats-list-padding: 0 0.625rem 0 0;
@stats-item-font-size: 0.875rem;
@stats-item-margin: 0.125rem 0 0 0;
@stats-border-style: 0.125rem solid #ccc;
// ==========================================================================
//
// $F o n t f a c e s
//
// ==========================================================================
// $U N I C O D E - R A N G E A m p e r s a n d
// --------------------------------------------------------------------------
@font-face {
font-family: "@{amp-fontface-name}";
src: @amp-fontface-source;
unicode-range: ~"U+270C";
}
// Ampersand fallback font for unicode range
@font-face {
font-family: "@{amp-fontface-name}";
src: @amp-fontface-fallback;
unicode-range: ~"U+270C";
}
// ==========================================================================
//
// $F u n c t i o n s
//
// ==========================================================================
// $C o n t e x t C a l c u l a t o r
// --------------------------------------------------------------------------
// Less conversion: No function support
//.ems(@target, @context) {
// @return (@target/@context)#{em};
//}
// $M o d u l a r S c a l e
// --------------------------------------------------------------------------
// http://thesassway.com/projects/modular-scale
// Less conversion: No function support
//@function modular-scale(@scale, @base, @value) {
// // divide a given font-size by base font-size & return a relative em value
// @return (@scale/@base)#{@value};
//}
// Less conversion: No function support
//@function measure-margin(@scale, @measure, @value) {
// // divide 1 unit of measure by given font-size & return a relative em value
// @return (@measure/@scale)#{@value};
//}
// ==========================================================================
//
// $M i x i n s
//
// ==========================================================================
// $M o d u l a r S c a l e
// --------------------------------------------------------------------------
// @Typographic scale
.modular-scale (@scale, @base, @value, @measure:"") when (@measure = "") {
font-size: ~"@{scale}px";
@font: (@scale/@base) + @value;
font-size: ~"@{font}rem";
}
.modular-scale (@scale, @base, @value, @measure:"") when not (@measure = "") {
font-size: ~"@{scale}px";
@font: (@scale/@base) + @value;
font-size: ~"@{font}rem";
@margin: (@measure/@scale) + @value;
margin-bottom: ~"@{margin}rem";
}
// $B o d y C o p y
// --------------------------------------------------------------------------
.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when (@serif-boolean = true) {
font: @weight ~"@{font-size}%/@{line-height}" @font-family;
}
.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when not (@serif-boolean = true) {
font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans;
}
// $H y p h e n
// --------------------------------------------------------------------------
//http://trentwalton.com/2011/09/07/css-hyphenation
.css-hyphens (@val) {
// Accepted values: [ none | manual | auto ]
-webkit-hyphens: @val; // Safari 5.1 thru 6, iOS 4.2 thru 6
-moz-hyphens: @val; // Firefox 16 thru 20
-ms-hyphens: @val; // IE10
-o-hyphens: @val; // PRESTO...haha LOL
hyphens: @val; // W3C standard
}
// $S m a l l c a p s
// --------------------------------------------------------------------------
// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
// ISSUE#1 : https://github.com/zakkain/web-thang/issues/1
.smallcaps (@color, @font-weight) {
// depends on the font family.
// some font-families don't support small caps
// or don't provide them with their web font.
font-variant: small-caps;
font-weight: @font-weight;
text-transform: lowercase;
color: @color;
}
// $F o n t - S i z e - A d j u s t
// --------------------------------------------------------------------------
// correct x-height for fallback fonts: requires secret formula
// yet to be discovered. This is still wacky for support. Use
// wisely grasshopper.
.font-size-adjust (@adjust-value) {
// firefox 17+ only (as of Feb. 2013)
font-size-adjust: @adjust-value;
}
// $A m p e r s a n d
// --------------------------------------------------------------------------
.ampersand (@amp-font-family) {
font-family: @amp-font-family;
}
.ampersand-placeholder {
.ampersand(@amp-font-family);
}
// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided...
// @extend %ampersand-placeholder;
// $W o r d W r a p
// --------------------------------------------------------------------------
// Silent Sass Classes - A.K.A Placeholders
//
// normal: Indicates that lines may only break at normal word break points.
// break-word : Indicates that normally unbreakable words may be broken at
// arbitrary points if there are no otherwise acceptable break points in the line.
.breakword {
word-wrap: break-word;
}
.normal-wrap {
word-wrap: normal;
}
.inherit-wrap {
word-wrap: auto;
}
// $D r o p c a p s
// --------------------------------------------------------------------------
/**
* Dropcap Sass @include
* Use the following Sass @include with any selector you feel necessary.
*
@include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent);
*
* Extend this object into your custom stylesheet.
*
*/
// Include your '@include dropcap()' mixin and pass the following
// arguments below. Feel free to pass in arguments we've provided.
// At this time you cannot pass in font-family arguments but you're gonna
// change that anyway so why not just make that separately in your declaration.
.dropcap (@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent) {
&:first-letter {
float: @float;
margin: @margin;
padding: @padding;
font-size: @font-size;
font-family: @font-family;
line-height: @lineHeight;
text-indent: @text-indent;
background: @bg;
color: @color;
}
}
.drop-cap {
.dropcap;
}
// $D e f i n i t i o n L i s t
// --------------------------------------------------------------------------
// lining
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
//
// dictionary-style
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
.definition-list-style (@style) when (@style = lining) {
dt,
dd {
display: inline;
margin: 0;
}
dt,
dd {
& + dt {
&:before {
content: "\A";
white-space: pre;
}
}
}
dd {
& + dd {
&:before {
content: ", ";
}
}
&:before {
content: ": ";
margin-left: -0.2rem; //removes extra space between the dt and the colon
}
}
}
// dictionary-style
.definition-list-style (@style) when (@style = dictionary-style) {
dt {
display: inline;
counter-reset: definitions;
& + dt {
&:before {
content: ", ";
margin-left: -0.2rem; // removes extra space between the dt and the comma
}
}
}
dd {
display: block;
counter-increment: definitions;
&:before {
content: ~"counter(definitions, decimal)" ". ";
}
}
}
// ==========================================================================
//
// $T y p e l a t e S t y l i n g
//
// ==========================================================================
// $G l o b a l s
// --------------------------------------------------------------------------
html {
.base-type(@weight, @line-height, @font-size, @font-family, @serif-boolean);
}
body {
// Ala Trent Walton
// .css-hyphens (auto);
// normal-wrap: Indicates that lines may only break at normal word break points.
// breakword : Indicates that normally unbreakable words may be broken at ...
// arbitrary points if there are no otherwise acceptable break points in the line.
.normal-wrap;
color: @body-copy-color;
}
// $H e a d i n g s
// --------------------------------------------------------------------------
// styles for all headings, in the style of @csswizardry
.hN () {
// voodoo to enable ligatures and kerning
text-rendering: optimizeLegibility;
// this fixes huge spaces when a heading wraps onto two lines
line-height: 1;
margin-top: 0;
}
// for each size in the scale, create a class
.tera { .modular-scale(@tera, @font-base, @type-scale-unit-value, @measure); }
.giga { .modular-scale(@giga, @font-base, @type-scale-unit-value, @measure); }
.mega { .modular-scale(@mega, @font-base, @type-scale-unit-value, @measure); }
.alpha { .modular-scale(@alpha, @font-base, @type-scale-unit-value, @measure); }
.beta { .modular-scale(@beta, @font-base, @type-scale-unit-value, @measure); }
.gamma { .modular-scale(@gamma, @font-base, @type-scale-unit-value, @measure); }
.delta { .modular-scale(@delta, @font-base, @type-scale-unit-value, @measure); }
.epsilon { .modular-scale(@epsilon, @font-base, @type-scale-unit-value, @measure); }
.zeta { .modular-scale(@zeta, @font-base, @type-scale-unit-value, @measure); }
// associate h1-h6 tags with their appropriate greek heading
h1 {
.alpha;
.hN;
}
h2 {
.beta;
.hN;
}
h3 {
.gamma;
.hN;
}
h4 {
.delta;
.hN;
}
h5 {
.epsilon;
.hN;
}
h6 {
.zeta;
.hN;
}
// $ P a r a g r a p h s
// --------------------------------------------------------------------------
p {
margin: 0 0 @indent-val;
& + p {
//siblings indentation
text-indent: @indent-val;
margin-top: -@indent-val;
}
}
// $ H y p h e n s
// --------------------------------------------------------------------------
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation
abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
.css-hyphens (none);
}
// $C o d e b l o c k s
// --------------------------------------------------------------------------
// White Space Mixins
.white-space-pre-wrap () {
white-space: -moz-pre-wrap; // Firefox 1.0-2.0
white-space: pre-wrap; // Current Browsers
}
.white-space-pre () {
white-space: pre;
}
pre code {
.normal-wrap;
.white-space-pre-wrap;
}
pre {
.white-space-pre;
}
code {
.white-space-pre;
font-family: monospace;
}
// $ S m a l l c a p s
// --------------------------------------------------------------------------
/**
* Abbreviations Markup
*
<abbr title="hyper text markup language">HMTL</abbr>
*
* Extend this object into your markup.
*
*/
abbr {
.smallcaps(@textcolor, 400);
&:hover {
cursor: help;
}
}
// $ H e a d i n g s C o l o r
// --------------------------------------------------------------------------
h1,
h2,
h3,
h4,
h5,
h6 {
color: @heading-color;
}
// $ D e f i n i t i o n L i s t s
// --------------------------------------------------------------------------
/**
* Lining Definition Style Markup
*
<dl class="lining">
<dt><b></b></dt>
<dd></dd>
</dl>
*
* Extend this object into your markup.
*
*/
.lining {
.definition-list-style(lining);
}
/**
* Dictionary Definition Style Markup
*
<dl class="dictionary-style">
<dt><b></b></dt>
<dd></dd>
</dl>
*
* Extend this object into your markup.
*
*/
.dictionary-style {
.definition-list-style(dictionary-style);
}
// $S t a t s T a b
// --------------------------------------------------------------------------
/**
* Stats Tab Markup
*
<ul class="stats-tabs">
<li><a href="#">[value]<b>[name]</b></a></li>
</ul>
*
* Extend this object into your markup.
*
*/
.stats-tabs {
padding: 0;
li {
display: inline-block;
margin: @stats-list-margin;
padding: @stats-list-padding;
border-right: @stats-border-style;
&:last-child {
margin: 0;
padding: 0;
border: none;
}
a {
display: inline-block;
font-size: @stats-font-size;
font-weight: bold;
b {
display: block;
margin: @stats-item-margin;
font-size: @stats-item-font-size;
font-weight: normal;
}
}
}
}
// @Blockquote Cites
// --------------------------------------------------------------------------
/**
* Blockquote Markup
*
<blockquote cite="">
<p>&Prime;&Prime;</p>
<cite>
<small><a href=""></a></small>
</cite>
</blockquote>
*
* Extend this object into your markup.
*
*/
.cite-style(@display:block, @text-align:right, @font-size: .875em) {
display: @display;
font-size: @font-size;
text-align: @text-align;
}
.cite {
.cite-style;
}
// @Pull Quotes
// --------------------------------------------------------------------------
// http://24ways.org/2005/swooshy-curly-quotes-without-images
//
// http://todomvc.com - Thanks sindresorhus!
// https://github.com/typeplate/typeplate.github.com/issues/49
/**
* Pull Quotes Markup
*
<aside class="pull-quote">
<blockquote>
<p></p>
</blockquote>
</aside>
*
* Extend this object into your custom stylesheet.
*
*/
.pull-quotes(@font-size, @opacity) {
position: relative;
padding: (@font-size/@font-size);
&:before,
&:after {
height: (@font-size/@font-size);
opacity: @opacity;
position: absolute;
font-size: @font-size;
}
&:before {
content: '“';
top: 0em;
left: 0em;
}
&:after {
content: '”';
bottom: 0em;
right: 0em;
}
}
.pull-quote {
.pull-quotes(4em, .15);
}
// @Figures
// --------------------------------------------------------------------------
/**
* Figures Markup
*
<figure>
<figcaption>
<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
</figcaption>
</figure>
*
* Extend this object into your markup.
*
*/
// @Footnotes
// --------------------------------------------------------------------------
/**
* Footnote Markup : Replace 'X' with your unique number for each footnote
*
<article>
<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
<footer>
<ol class="foot-notes">
<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
</ol>
</footer>
</article>
*
* Extend this object into your markup.
*
*/
+119 -81
View File
@@ -1,25 +1,48 @@
/* Headings ============================================== */ // Body
h1, h2, h3, h4, h5, h6 { // --------------------------------------------------
font-family: @baseheadingfont; body {
font-weight: 700; font-family: @base-font;
} color: @text-color;
h6 {
font-weight: 400;
} }
/* 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 { a {
text-decoration: none; text-decoration: none;
color: @linkcolor; color: @link-color;
&:visited { &:visited {
color: @linkcolorvisited; color: lighten(@link-color, 20);
} }
&:hover { &:hover {
color: @linkcolorhover; color: darken(@link-color, 20);
} }
&:focus { &:focus {
outline: thin dotted; outline: thin dotted;
color: @linkcolorfocus; color: darken(@link-color, 20);
} }
&:hover, &:hover,
&:active { &:active {
@@ -27,88 +50,103 @@ a {
} }
} }
b, strong { // Figures
font-weight: 700; // --------------------------------------------------
}
/* Lists ============================================== */
ul {
li {
list-style-type: square
}
}
ol {
li {
list-style-type: upper-roman;
}
}
/* Add underline for main links ======================= */
p > a,
li > a,
em > a,
a > em,
footer a {
text-decoration: none;
border-bottom: 1px dotted lighten(@textcolor, 50%);
}
p > a:hover,
li > a:hover,
em > a:hover,
footer a:hover {
text-decoration: none;
border-bottom: 1px solid lighten(@textcolor, 50%);
}
/* Figure caption ===================================== */
figcaption { figcaption {
margin-top: (@indent-val / 2); padding-top: 10px;
line-height: 1.25; .font(14);
.zeta(); line-height: 1.3;
font-family: @baseheadingfont; color: lighten(@text-color, 10);
counter-increment: captions; }
&:before {
font-weight: 700; // Feature Image Caption
text-transform: uppercase; // --------------------------------------------------
content: "Figure " counter(captions) ": "; .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);
@media @600px {
.grid(12,9);
.prefix(12,0);
.suffix(12,0);
}
@media @1382px {
.grid(12,8.5);
}
a {
color: lighten(@text-color, 30);
} }
} }
/* Notice ============================================== */ // Note text
// --------------------------------------------------
.notice { .notice {
margin-top: 1.5em; margin-top: 1.5em;
padding: .5em 1em; padding: .5em 1em;
text-indent: 0; text-indent: 0;
font-size: 90%; .font-rem(14);
background-color: #ddd; background-color: @body-color;
border-left: 10px solid #ccc; border: 1px solid darken(@body-color,20);
.rounded(3px);
} }
/* Blockquote =========================================== */
// Blockquotes
// --------------------------------------------------
blockquote { blockquote {
margin-left: -28px;
padding-left: 20px;
border-left: 8px solid @border-color;
font-family: @alt-font;
font-style: italic; font-style: italic;
border-left: 10px solid #ccc; .font-rem(24);
margin-left: 0; }
padding-left: 1em;
border-left: 10px solid #ccc; // Footnotes
p+p { // --------------------------------------------------
text-indent: 0; .footnotes {
margin-top: 0; ol, li, p {
margin-bottom: 0;
.font-rem(14);
} }
} }
/* Footnotes ============================================= */
.footnotes { // Paragraphs
font-size: 90%; // --------------------------------------------------
p {
margin: 0 0 @indent-var;
& + p {
//siblings indentation
text-indent: @indent-var;
margin-top: -(@indent-var);
}
} }
/* Code ================================================== */
// Code
// --------------------------------------------------
tt, code, kbd, samp, pre { 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: #efefef;
.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);
}
+11 -4
View File
@@ -1,19 +1,26 @@
// TYPOGRAPHY ================================================ // TYPOGRAPHY ================================================
@basefont: 'PT Serif', serif; @doc-font-size: 16;
@baseheadingfont: 'PT Sans Narrow', sans-serif; @doc-line-height: 26;
@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; @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 ==================================================== // COLOR ====================================================
@bodycolor : #fff; @bodycolor : #fff;
@body-color: @bodycolor;
@textcolor : #333332; @textcolor : #333332;
@text-color : @textcolor;
@border-color: @text-color;
@basecolor : #343434; @basecolor : #343434;
@compcolor : spin(@basecolor, 180); @compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor; @bordercolor : @basecolor;
@white : #fff; @white : #fff;
@black : #000; @black : #111;
@accentcolor : @black; @accentcolor : @black;
/* Links ================================================= */ /* Links ================================================= */
@linkcolor : #343434; @linkcolor : #343434;
@link-color: @linkcolor;
@linkcolorhover : darken(@linkcolor, 10); @linkcolorhover : darken(@linkcolor, 10);
@linkcolorvisited : lighten(@linkcolorhover, 20); @linkcolorvisited : lighten(@linkcolorhover, 20);
@linkcolorfocus : darken(@linkcolorvisited, 10); @linkcolorfocus : darken(@linkcolorvisited, 10);
+2 -2
View File
@@ -5,7 +5,7 @@ layout: none
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"> <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title type="text">{{ site.title }}</title> <title type="text">{{ site.title }}</title>
<subtitle type="text">{{ site.tagline }}</subtitle> <subtitle type="text">{{ site.tagline }}</subtitle>
<generator uri="https://github.com/mojombo/jekyll">Jekyll</generator> <generator uri="https://github.com/jekyll/jekyll">Jekyll</generator>
<link rel="self" type="application/atom+xml" href="{{ site.url }}/feed.xml" /> <link rel="self" type="application/atom+xml" href="{{ site.url }}/feed.xml" />
<link rel="alternate" type="text/html" href="{{ site.url }}" /> <link rel="alternate" type="text/html" href="{{ site.url }}" />
<updated>{{ site.time | date_to_xmlschema }}</updated> <updated>{{ site.time | date_to_xmlschema }}</updated>
@@ -34,4 +34,4 @@ layout: none
&lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;</content> &lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;</content>
</entry> </entry>
{% endfor %} {% endfor %}
</feed> </feed>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 79 KiB

+2
View File
@@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi
tags: [Jekyll, theme, responsive, blog, template] tags: [Jekyll, theme, responsive, blog, template]
image: image:
feature: texture-feature-01.jpg feature: texture-feature-01.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---
+25
View File
@@ -0,0 +1,25 @@
{
"name": "minimal-mistakes-theme",
"author": "Michael Rose <michael@mademistakes.com>",
"homepage": "http://mmistakes.github.io/minima-mistakes/",
"repository": {
"type": "git",
"url": "git://github.com/mmistakes/minimal-mistakes.git"
},
"bugs": {
"url": "https://github.com/mmistakes/minimal-mistakes/issues"
},
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-watch": "~0.5.2",
"grunt-recess": "~0.3.5",
"grunt-contrib-imagemin": "~0.2.0",
"grunt-svgmin": "~0.2.0"
}
}
+7
View File
@@ -0,0 +1,7 @@
---
layout: post-index
permalink: /posts/
title: All Posts
tagline: A List of Posts
tags: [blog]
---
+116 -67
View File
@@ -1,16 +1,18 @@
--- ---
layout: page layout: page
permalink: /theme-setup/index.html permalink: /theme-setup/
title: Theme Setup title: Theme Setup
description: "Instructions on how to install and customize the Jekyll theme Minimal Mistakes." description: "Instructions on how to install and customize the Jekyll theme Minimal Mistakes."
tags: [Jekyll, theme, responsive] tags: [Jekyll, theme, responsive]
image: image:
feature: texture-feature-02.jpg feature: texture-feature-02.jpg
credit: Texture Lovers
creditlink: http://texturelovers.com
--- ---
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3 >Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents
@@ -20,53 +22,66 @@ image:
General notes and suggestions for customizing Minimal Mistakes. General notes and suggestions for customizing Minimal Mistakes.
## Basic Setup ## Basic Setup for a new Jekyll site
1. [Install Jekyll](http://jekyllrb.com) if you haven't already. 1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/) 2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
3. Make it your own and customize, customize, customize. 3. Clone the repo you just forked and rename it.
4. Edit `_config.yml` to personalize your site.
5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, assigning categories and tags, and other YAML data.
6. Read the documentation below for further customization pointers and documentation.
<a markdown="0" href="http://github.com/mmistakes/minimal-mistakes" class="btn">Minimal Mistakes on GitHub</a> <div markdown="0"><a href="https://github.com/mmistakes/minimal-mistakes/archive/master.zip" class="btn">Download the Theme</a></div>
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you don't want on your site.
{: .notice}
---
## Folder Structure
{% highlight text %} {% highlight text %}
minimal-mistakes/ minimal-mistakes/
├── _includes ├── _includes/
| ├── author-bio.html //bio stuff goes here | ├── _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 | ├── _footer.html #site footer
| ├── head.html //site head | ├── _head.html #site head
| ├── navigation.html //site top nav | ├── _navigation.html #site top nav
| └── scripts.html //jQuery, plugins, GA, etc. | └── _scripts.html #jQuery, plugins, GA, etc.
├── _layouts ├── _layouts/
| ├── home.html //homepage layout | ├── home.html #homepage layout
| ├── page.html //page layout | ├── page.html #page layout
| ├── post-index.html //post listing layout | ├── post-index.html #post index layout
| └── post.html //post layout | └── post.html #post layout
├── _posts ├── _posts/
├── assets ├── assets/
| ├── css //preprocessed less styles. good idea to minify | ├── css/ #preprocessed less styles
| ├── img //images and graphics used in css and js | ├── fonts/ #icon webfonts
| ├── js | ├── js/
| | ├── main.js //jQuery plugins and settings | | ├── _main.js #Main JavaScript file, plugin settings, etc
| | └── vendor //all 3rd party scripts | | ├── plugins #jQuery plugins
| └── less | | └── vendor/ #jQuery and Modernizr
├── images //images for posts and pages | └── less/
├── about.md //about page ├── images/ # images for posts and pages
├── articles.md //lists all posts from latest to oldest ├── about.md # about page
└── index.md //homepage. lists 5 most recent posts ├── posts.md # lists all posts from latest to oldest
└── index.md # homepage. lists 5 most recent posts
{% endhighlight %} {% endhighlight %}
---
## Customization ## Customization
### _config.yml ### _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 " }}}}`[^1] in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**...
#### Owner/Author Information #### Owner/Author Information
Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `author-bio.html` since it assumes it is located in `\images`. Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `_author-bio.html` since it assumes it is located in `/images`.
Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank and/or remove `<link rel="author" href="{{ site.owner.google_plus }}">` from `head.html`. Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank.
#### Google Analytics and Webmaster Tools #### Google Analytics and Webmaster Tools
@@ -80,11 +95,11 @@ Edit page/post titles and URLs to include in the site's navigation. For external
# sample top navigation links # sample top navigation links
links: links:
- title: About Page - title: About Page
url: /about url: /about/
- title: Articles - title: Posts
url: /articles url: /posts/
- title: Other Page - title: Other Page
url: /other-page url: /other-page/
- title: External Page - title: External Page
url: http://mademistakes.com url: http://mademistakes.com
external: true external: true
@@ -92,13 +107,25 @@ links:
### Adding Posts and Pages ### Adding Posts and Pages
There are two main content layouts: *post.html* (for posts) and *page.html* (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for text heavy blog posts (or articles). There are two main content layouts: *post.html* (for posts) and *page.html* (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for long form articles and blog posts.
There are two rake tasks that can be used to create a new post or page with all YAML Front Matter. Using either `rake new_post` or `rake new_page` will prompt you for a title and tags to classify them. Example below:
{% highlight bash %}
rake new_post
Enter a title for your post: My Awesome Post
Enter tags to classify your post (comma separated): web development, code
Creating new post: _posts/2014-02-10-my-awesome-post.md
{% endhighlight %}
There are a few configuration variables that can be changed in `Rakefile.rb`. By default posts and pages will be created in MarkDown using the `.md` extension.
#### Feature Images #### Feature Images
A good rule of thumb is to keep feature images[^2] nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 512 pixels will keep file size down with an acceptable resolution for most devices. On my personal site I use [Picturefill](https://github.com/scottjehl/picturefill) to serve the same image responsively in four different flavors (small, medium, large, and extra large). In the interest of keeping things simple with this theme I left that script out, but you can certainly [add it back in](https://github.com/mmistakes/made-mistakes#articles-and-pages) or give [Adaptive Images](http://adaptive-images.com/) a try. A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I'd suggest looking at the [Jekyll Picture Tag](https://github.com/scottjehl/picturefill) plugin[^2].
The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so. The two layouts make the assumption that the feature images live in the `images/` folder. To add a feature image to a post or page just include the filename in the front matter like so.
{% highlight yaml %} {% highlight yaml %}
image: image:
@@ -106,21 +133,43 @@ image:
thumb: thumbnail-image.jpg #keep it square 200x200 px is good thumb: thumbnail-image.jpg #keep it square 200x200 px is good
{% endhighlight %} {% 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 %}
#### Post Index Page
A [sample index page]({{ site.url }}/posts/) listing all posts grouped by the year they were published has been provided. The name can be customized to your liking by editing a few references. For example, to change **Posts** to **Writing** update the following:
* In `_config.yml` under `links:` rename the title and URL to the following:
{% highlight yaml %}
links:
- title: Writing
url: /writing/
{% endhighlight %}
* Rename `posts.md` to `writing.md` and update the YAML front matter to match the title and URL set in `_config.yml`
* Update the **View all posts** link in `post.html` layout found in `_layouts` to match title and URL set previously.
#### Thumbnails for OG and Twitter Cards #### 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. 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.
#### Table of Contents #### Table of Contents
Any article or page that you want a *table of contents* to render insert the following HTML in your post before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list. Any article or page that you want a *table of contents* to render insert the following HTML in your post before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list.
**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only shows on tablets and desktop viewports... **PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only appears on larger screens (tablet and desktop).
{: .notice} {: .notice}
{% highlight html %} {% highlight html %}
<section id="table-of-contents" class="toc"> <section id="table-of-contents" class="toc">
<header> <header>
<h3 class="delta">Contents</h3> <h3>Contents</h3>
</header> </header>
<div id="drawer" markdown="1"> <div id="drawer" markdown="1">
* Auto generated table of contents * Auto generated table of contents
@@ -139,33 +188,33 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
{% endhighlight %} {% endhighlight %}
## Further Customization ---
To make things easier I use LESS to build Minimal Mistakes' stylesheets. If you want to make some minor cosmetic alterations, take a look at `variables.less` in `assets/less/`. Changing some of the following variables can help make the theme your own. Just compile `main.less` and `ie.less` using your preprocessor of choice and off you go --- I like [CodeKit](http://incident57.com/codekit/) and [Prepros](http://alphapixels.com/prepros/). ## Theme Development
{% highlight css %} If you want to easily skin the themes' colors and fonts, take a look at `variables.less` in `assets/less/` and make the necessary changes to the color and font variables. To make development easier I setup a Grunt build script to compile/minify the LESS files into `main.min.css` and lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
// TYPOGRAPHY ================================================
@basefont: 'PT Serif', serif;
@baseheadingfont: 'PT Sans Narrow', sans-serif;
@codefont: Monaco, Courier New, monospace;
// COLOR ==================================================== {% highlight bash %}
@bodycolor : #ebebeb; npm install
@textcolor : #333332;
@basecolor : #343434;
@compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor;
@white : #fff;
@black : #000;
@accentcolor : @black;
/* Links ================================================= */
@linkcolor : #343434;
@linkcolorhover : darken(@linkcolor, 10);
@linkcolorvisited : lighten(@linkcolorhover, 20);
@linkcolorfocus : darken(@linkcolorvisited, 10);
{% endhighlight %} {% endhighlight %}
From the theme's root, use `grunt` to rebuild the CSS, concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt watch` in combination with `jekyll build --watch` to watch for updates to your LESS and JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
[^1]: Used to generate absolute urls in *sitemap.xml*, *feed.xml*, and for canonical urls in *head.html*. Don't include a trailing `/` in your base url ie: http://mademistakes.com. When developing locally remove or comment out this line so local css, js, and images are used. And if the command line isn't your thing (you're using Jekyll so it probably is), [CodeKit](http://incident57.com/codekit/) for Mac OS X and [Prepros](http://alphapixels.com/prepros/) for Windows are great alternatives.
[^2]: Feature images supplied by [Love Textures](http://www.lovetextures.com/) ---
## Questions?
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/minima-mistakes/issues/new). And if you make something cool with this theme feel free to let me know.
---
## License
This theme is free and open source software, distributed under the [GNU General Public License]({{ site.url }}/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.
[^1]: Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for canonical urls in `_head.html`. Don't include a trailing `/` in your base url ie: `http://mademistakes.com`. When developing locally remove or comment out this line so local .css, .js, and images are used.
[^2]: If you're using GitHub Pages to host your site be aware that plugins are disabled. So you'll need to build your site locally and then manually deploy if you want to use this sweet plugin.