Browse Source

Changed to the "Skinny Bones" theme

master
Kenneth Skovhede 9 years ago
parent
commit
43610c280b
  1. 9
      Gemfile
  2. 152
      Gemfile.lock
  3. 103
      Gruntfile.js
  4. 21
      LICENSE
  5. 17
      README.md
  6. 52
      _config.yml
  7. 7
      _data/footer.yml
  8. 40
      _data/messages.yml
  9. 26
      _data/navigation.yml
  10. 14
      _includes/advertising.html
  11. 13
      _includes/breadcrumbs.html
  12. 1
      _includes/browser-upgrade.html
  13. 15
      _includes/collection-pagination.html
  14. 14
      _includes/comments.html
  15. 15
      _includes/footer.html
  16. 8
      _includes/header.html
  17. 1
      _includes/image-credit.html
  18. 7
      _includes/landing.html
  19. 9
      _includes/latest-posts-grid.html
  20. 7
      _includes/latest-posts-list.html
  21. 17
      _includes/navigation-sliding.html
  22. 11
      _includes/navigation.html
  23. 19
      _includes/open-graph.html
  24. 11
      _includes/page-author.html
  25. 3
      _includes/page-meta.html
  26. 15
      _includes/pagination.html
  27. 7
      _includes/post-grid.html
  28. 13
      _includes/post-list-bullets.html
  29. 1
      _includes/post-list.html
  30. 3
      _includes/scroll-cue.html
  31. 5
      _includes/share-this.html
  32. 4
      _includes/toc.html
  33. 25
      _layouts/archive.html
  34. 35
      _layouts/article.html
  35. 48
      _layouts/default.html
  36. 34
      _layouts/media.html
  37. 41
      _sass/_animations.scss
  38. 41
      _sass/_badges.scss
  39. 396
      _sass/_base.scss
  40. 16
      _sass/_breadcrumbs.scss
  41. 50
      _sass/_bullets.scss
  42. 156
      _sass/_buttons.scss
  43. 14
      _sass/_footnotes.scss
  44. 15
      _sass/_grid-settings.scss
  45. 153
      _sass/_helpers.scss
  46. 351
      _sass/_layout.scss
  47. 130
      _sass/_menu-navicons.scss
  48. 94
      _sass/_mixins.scss
  49. 79
      _sass/_notices.scss
  50. 144
      _sass/_reset.scss
  51. 189
      _sass/_sliding-menu.scss
  52. 135
      _sass/_syntax.scss
  53. 45
      _sass/_tiles.scss
  54. 71
      _sass/_toc.scss
  55. 110
      _sass/_variables.scss
  56. 8
      _sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss
  57. 78
      _sass/vendor/bourbon/_bourbon.scss
  58. 374
      _sass/vendor/bourbon/addons/_button.scss
  59. 23
      _sass/vendor/bourbon/addons/_clearfix.scss
  60. 111
      _sass/vendor/bourbon/addons/_directional-values.scss
  61. 7
      _sass/vendor/bourbon/addons/_ellipsis.scss
  62. 5
      _sass/vendor/bourbon/addons/_font-family.scss
  63. 10
      _sass/vendor/bourbon/addons/_hide-text.scss
  64. 86
      _sass/vendor/bourbon/addons/_html5-input-types.scss
  65. 32
      _sass/vendor/bourbon/addons/_position.scss
  66. 45
      _sass/vendor/bourbon/addons/_prefixer.scss
  67. 31
      _sass/vendor/bourbon/addons/_retina-image.scss
  68. 16
      _sass/vendor/bourbon/addons/_size.scss
  69. 32
      _sass/vendor/bourbon/addons/_timing-functions.scss
  70. 83
      _sass/vendor/bourbon/addons/_triangle.scss
  71. 8
      _sass/vendor/bourbon/addons/_word-wrap.scss
  72. 52
      _sass/vendor/bourbon/css3/_animation.scss
  73. 3
      _sass/vendor/bourbon/css3/_appearance.scss
  74. 6
      _sass/vendor/bourbon/css3/_backface-visibility.scss
  75. 42
      _sass/vendor/bourbon/css3/_background-image.scss
  76. 55
      _sass/vendor/bourbon/css3/_background.scss
  77. 59
      _sass/vendor/bourbon/css3/_border-image.scss
  78. 22
      _sass/vendor/bourbon/css3/_border-radius.scss
  79. 4
      _sass/vendor/bourbon/css3/_box-sizing.scss
  80. 4
      _sass/vendor/bourbon/css3/_calc.scss
  81. 47
      _sass/vendor/bourbon/css3/_columns.scss
  82. 5
      _sass/vendor/bourbon/css3/_filter.scss
  83. 321
      _sass/vendor/bourbon/css3/_flex-box.scss
  84. 23
      _sass/vendor/bourbon/css3/_font-face.scss
  85. 10
      _sass/vendor/bourbon/css3/_font-feature-settings.scss
  86. 10
      _sass/vendor/bourbon/css3/_hidpi-media-query.scss
  87. 4
      _sass/vendor/bourbon/css3/_hyphens.scss
  88. 14
      _sass/vendor/bourbon/css3/_image-rendering.scss
  89. 35
      _sass/vendor/bourbon/css3/_keyframes.scss
  90. 38
      _sass/vendor/bourbon/css3/_linear-gradient.scss
  91. 8
      _sass/vendor/bourbon/css3/_perspective.scss
  92. 8
      _sass/vendor/bourbon/css3/_placeholder.scss
  93. 39
      _sass/vendor/bourbon/css3/_radial-gradient.scss
  94. 15
      _sass/vendor/bourbon/css3/_transform.scss
  95. 77
      _sass/vendor/bourbon/css3/_transition.scss
  96. 3
      _sass/vendor/bourbon/css3/_user-select.scss
  97. 11
      _sass/vendor/bourbon/functions/_assign.scss
  98. 13
      _sass/vendor/bourbon/functions/_color-lightness.scss
  99. 39
      _sass/vendor/bourbon/functions/_flex-grid.scss
  100. 3
      _sass/vendor/bourbon/functions/_golden-ratio.scss

9
Gemfile

@ -1,2 +1,7 @@
source 'https://rubygems.org' source "https://rubygems.org"
gem 'github-pages'
gem "github-pages"
gem "jekyll", "~> 3.0"
gem "jekyll-sitemap"
gem "jekyll-gist"
gem "octopress", "~> 3.0"

152
Gemfile.lock

@ -0,0 +1,152 @@
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
activesupport (4.2.6)
i18n (~> 0.7)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.3, >= 0.3.4)
tzinfo (~> 1.1)
addressable (2.4.0)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.10.0)
colorator (0.1)
ethon (0.8.1)
ffi (>= 1.3.0)
execjs (2.6.0)
faraday (0.9.2)
multipart-post (>= 1.2, < 3)
ffi (1.9.10)
gemoji (2.1.0)
github-pages (59)
RedCloth (= 4.2.9)
github-pages-health-check (= 1.1.0)
jekyll (= 3.0.3)
jekyll-coffeescript (= 1.0.1)
jekyll-feed (= 0.4.0)
jekyll-gist (= 1.4.0)
jekyll-github-metadata (= 1.8.0)
jekyll-mentions (= 1.0.1)
jekyll-paginate (= 1.1.0)
jekyll-redirect-from (= 0.9.1)
jekyll-sass-converter (= 1.3.0)
jekyll-seo-tag (= 1.3.2)
jekyll-sitemap (= 0.10.0)
jekyll-textile-converter (= 0.1.0)
jemoji (= 0.5.1)
kramdown (= 1.10.0)
liquid (= 3.0.6)
mercenary (~> 0.3)
rdiscount (= 2.1.8)
redcarpet (= 3.3.3)
rouge (= 1.10.1)
terminal-table (~> 1.4)
github-pages-health-check (1.1.0)
addressable (~> 2.3)
net-dns (~> 0.8)
octokit (~> 4.0)
public_suffix (~> 1.4)
typhoeus (~> 0.7)
html-pipeline (2.3.0)
activesupport (>= 2, < 5)
nokogiri (>= 1.4)
i18n (0.7.0)
jekyll (3.0.3)
colorator (~> 0.1)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.1)
kramdown (~> 1.3)
liquid (~> 3.0)
mercenary (~> 0.3.3)
rouge (~> 1.7)
safe_yaml (~> 1.0)
jekyll-coffeescript (1.0.1)
coffee-script (~> 2.2)
jekyll-feed (0.4.0)
jekyll-gist (1.4.0)
octokit (~> 4.2)
jekyll-github-metadata (1.8.0)
octokit (~> 4.0)
jekyll-mentions (1.0.1)
html-pipeline (~> 2.3)
jekyll (~> 3.0)
jekyll-paginate (1.1.0)
jekyll-redirect-from (0.9.1)
jekyll (>= 2.0)
jekyll-sass-converter (1.3.0)
sass (~> 3.2)
jekyll-seo-tag (1.3.2)
jekyll (~> 3.0)
jekyll-sitemap (0.10.0)
jekyll-textile-converter (0.1.0)
RedCloth (~> 4.0)
jekyll-watch (1.3.1)
listen (~> 3.0)
jemoji (0.5.1)
gemoji (~> 2.0)
html-pipeline (~> 2.2)
jekyll (>= 2.0)
json (1.8.3)
kramdown (1.10.0)
liquid (3.0.6)
listen (3.0.6)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9.7)
mercenary (0.3.5)
mini_portile2 (2.0.0)
minitest (5.8.4)
multipart-post (2.0.0)
net-dns (0.8.0)
nokogiri (1.6.7.2)
mini_portile2 (~> 2.0.0.rc2)
octokit (4.3.0)
sawyer (~> 0.7.0, >= 0.5.3)
octopress (3.0.11)
jekyll (>= 2.0)
mercenary (~> 0.3.2)
octopress-deploy
octopress-escape-code (~> 2.0)
octopress-hooks (~> 2.0)
redcarpet (~> 3.0)
titlecase
octopress-deploy (1.3.0)
colorator
octopress-escape-code (2.1.1)
jekyll (~> 3.0)
octopress-hooks (2.6.1)
jekyll (>= 2.0)
public_suffix (1.5.3)
rb-fsevent (0.9.7)
rb-inotify (0.9.7)
ffi (>= 0.5.0)
rdiscount (2.1.8)
redcarpet (3.3.3)
rouge (1.10.1)
safe_yaml (1.0.4)
sass (3.4.21)
sawyer (0.7.0)
addressable (>= 2.3.5, < 2.5)
faraday (~> 0.8, < 0.10)
terminal-table (1.5.2)
thread_safe (0.3.5)
titlecase (0.1.1)
typhoeus (0.8.0)
ethon (>= 0.8.0)
tzinfo (1.2.2)
thread_safe (~> 0.1)
PLATFORMS
ruby
DEPENDENCIES
github-pages
jekyll (~> 3.0)
jekyll-gist
jekyll-sitemap
octopress (~> 3.0)
BUNDLED WITH
1.11.2

103
Gruntfile.js

@ -0,0 +1,103 @@
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'js/*.js',
'!js/main.js'
]
},
watch: {
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint', 'uglify', 'surround'],
options: {
livereload: true
}
},
},
uglify: {
dist: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */',
compress: true,
beautify: false,
mangle: false
},
files: {
'js/main.js': [
'js/plugins/*.js',
'js/_*.js'
]
}
}
},
surround: {
src: 'js/main.js',
options: {
overwrite: true,
prepend: '---\n---',
},
},
imagemin: {
dist: {
options: {
optimizationLevel: 7,
progressive: true
},
files: [{
expand: true,
cwd: 'images/',
src: '{,*/}*.{png,jpg,jpeg}',
dest: 'images/'
}]
}
},
imgcompress: {
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/'
}]
}
},
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-imgcompress');
grunt.loadNpmTasks('grunt-surround');
// Register tasks
grunt.registerTask('scripts', ['watch', 'uglify']);
grunt.registerTask('images', ['newer:imgcompress', 'newer:svgmin']);
};

21
LICENSE

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014 Michael Rose
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
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 all
copies or substantial portions of the Software.
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.

17
README.md

@ -0,0 +1,17 @@
# Skinny Bones Jekyll Starter
Just a little something I'm using to jump start a site refresh. I like to think of it as a starter for building your own Jekyll site. I purposely keep the styling minimal and bare to make it easier to add your own flare and markup.
I'm currently using a variation of it on my personal website [Made Mistakes](http://mademistakes.com) with some modifications. To learn more about how to use the theme and install it check out the [Skinny Bones demo](http://mmistakes.github.io/skinny-bones-jekyll/) (*work in progress*).
![screenshot of Skinny Bones](http://mmistakes.github.io/skinny-bones-jekyll/images/skinny-bones-theme-feature.jpg)
---
## Notable Features
* Jekyll 3.x and GitHub Pages compatible.
* Stylesheet built using Sass.
* Data files for easier customization of the site navigation/footer and for supporting multiple authors.
* Optional Disqus comments, table of contents, social sharing links, and Google AdSense ads.
* And more.

52
_config.yml

@ -0,0 +1,52 @@
# Site wide configuration
title: Duplicati
description: Store securely encrypted backups on cloud storage services!
logo: # 120x120 px default image used for Twitter summary card
teaser: # 400x250 px default teaser image used in image archive grid
locale: en
url:
# Jekyll configuration
markdown: kramdown
sass:
sass_dir: _sass
style: compressed
permalink: /:categories/:title/
kramdown:
toc_levels: 1..2
highlighter: rouge
# Octopress configuration
# Default extensions
post_ext: md
page_ext: md
# Found in _templates/
post_layout: article
page_layout: article
# Format titles with titlecase?
titlecase: true
# Site owner
owner:
name: The Duplicati Team
email: opensource@duplicati.com
twitter:
google:
ad-client:
ad-slot:
bio:
avatar: bio-photo.jpg # 160x160 px image for author byline
disqus-shortname:
exclude: ["lib", "config.rb", ".sass-cache", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "*.sublime-project", "*.sublime-workspace", "Gemfile", "Gemfile.lock", "README.md", "LICENSE", "node_modules", "Gruntfile.js", "package.json"]
gems: ['jekyll-gist', 'jekyll-sitemap']

7
_data/footer.yml

@ -0,0 +1,7 @@
# Footer navigation links
- title: GitHub page
url: https://github.com/duplicati/duplicati
- title: Facebook page
url: https://facebook.com/pages/duplicati

40
_data/messages.yml

@ -0,0 +1,40 @@
# Messages for localization
# see description here: https://tuananh.org/2014/08/13/localization-with-jekyll/
locales:
# English translation
# -------------------
en: &DEFAULT_EN
overview: "Overview"
toc: "Table of Contents"
written_by: "Written by"
updated: "Updated"
share: "Share on"
en_US:
<<: *DEFAULT_EN # use English translation for en_US
en_UK:
<<: *DEFAULT_EN # use English translation for en_UK
# German translation
# -------------------
de: &DEFAULT_DE
<<: *DEFAULT_EN # load English values as default
overview: "&Uuml;bersicht"
toc: "Inhalt"
written_by: "Verfasst von"
updated: "Zuletzt aktualisiert:"
share: ""
de_DE:
<<: *DEFAULT_DE # use German translation for de_DE
# French translation (TODO)
# -------------------
fr: &DEFAULT_FR
<<: *DEFAULT_EN # load English values as default
overview: "Aperçu"
toc: "Table des matières"
written_by: "Écrit par"
updated: "Mis à jour"
share: "Partager sur"
fr_FR:
<<: *DEFAULT_FR # use French translation for fr_FR

26
_data/navigation.yml

@ -0,0 +1,26 @@
# Site navigation links
- title: Home
url: /
excerpt:
image:
- title: News
url: /articles
excerpt: All the news
image:
- title: Guides
url: /articles
excerpt: Quickstart guides
image:
- title: Download
url: https://github.com/duplicati/duplicati/releases
excerpt: Get a build of Duplicati
image:
- title: Source code
url: https://github.com/duplicati/duplicati
excerpt: Look at Duplicati source code and collaborate on GitHub
image:

14
_includes/advertising.html

@ -0,0 +1,14 @@
<style>
.responsive-ads { width: 300px; height: 200px; }
@media(min-width: 520px) { .responsive-ads { width: 468px; height: 60px; } }
@media(min-width: 768px) { .responsive-ads { width: 160px; height: 600px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive-ads"
style="display:inline-block"
data-ad-client="{{ site.owner.google.ad-client }}"
data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

13
_includes/breadcrumbs.html

@ -0,0 +1,13 @@
{% if page.categories and page.categories != empty %}
<nav class="breadcrumbs">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{ site.url }}" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{ site.url }}/{{ page.categories | first }}/" itemprop="url">
<span itemprop="title">{{ page.categories | first | replace: '-',' ' | capitalize }}</span>
</a>
</span>
</nav><!-- /.breadcrumbs -->
{% endif %}

1
_includes/browser-upgrade.html

@ -0,0 +1 @@
<!--[if lt IE 9]><div class="upgrade notice-warning"><strong>Your browser is quite old!</strong> Why not <a href="http://whatbrowser.org/">upgrade to a newer one</a> to better enjoy this site?</div><![endif]-->

15
_includes/collection-pagination.html

@ -0,0 +1,15 @@
<nav class="pagination">
{% capture collection_name %}{{ include.collection }}{% endcapture %}
{% for post in site.[collection_name] %}
{% if post.url == page.url %}
{% assign post_index0 = forloop.index0 %}
{% assign post_index1 = forloop.index %}
{% endif %}
{% endfor %}
{% for post in site.[collection_name] %}
{% if post_index0 == forloop.index %}{% assign next_post = post %}{% endif %}
{% if post_index1 == forloop.index0 %}{% assign prev_post = post %}{% endif %}
{% endfor %}
{% if prev_post %}<a class="prev" href="{{ site.url }}{{ prev_post.url }}">{{ prev_post.title }}</a>{% endif %}
{% if next_post %}<a class="next" href="{{ site.url }}{{ next_post.url }}">{{ next_post.title }}</a>{% endif %}
</nav>

14
_includes/comments.html

@ -0,0 +1,14 @@
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{{ site.owner.disqus-shortname }}';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

15
_includes/footer.html

@ -0,0 +1,15 @@
<footer role="contentinfo" id="site-footer">
<nav role="navigation" class="menu bottom-menu">
<ul class="menu-item">
{% for link in site.data.footer %}
{% if link.url contains 'http' %}
{% assign domain = '' %}
{% else %}
{% assign domain = site.url %}
{% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</nav><!-- /.bottom-menu -->
<p class="copyright">&#169; {{ site.time | date: '%Y' }} <a href="{{ site.url }}">{{ site.title }}</a> powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> + <a href="http://mmistakes.github.io/skinny-bones-jekyll/" rel="nofollow">Skinny Bones</a>.</p>
</footer>

8
_includes/header.html

@ -0,0 +1,8 @@
<header id="masthead">
<div class="inner-wrap">
<a href="{{ site.url }}/" class="site-title">{{ site.title }}</a>
<nav role="navigation" class="menu top-menu">
{% include navigation.html %}
</nav>
</div><!-- /.inner-wrap -->
</header><!-- /.masthead -->

1
_includes/image-credit.html

@ -0,0 +1 @@
<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}" itemprop="citation">{{ page.image.credit }}</a></div><!-- /.image-credit -->

7
_includes/landing.html

@ -0,0 +1,7 @@
<div class="page-lead" style="background-image:url(//mmistakes.github.io/skinny-bones-jekyll/images/wood-texture-1600x800.jpg)">
<div class="wrap page-lead-content">
<h1>{{ site.title }}</h1>
<h2>{{ site.description }}</h2>
<a href="//github.com/duplicati/duplicati/releases" class="btn-inverse">Download</a> &nbsp; or &nbsp; <a href="https://github.com/duplicati/duplicati" class="btn-inverse">View on GitHub</a>
</div><!-- /.page-lead-content -->
</div>

9
_includes/latest-posts-grid.html

@ -0,0 +1,9 @@
<div class="archive-wrap">
<h3>Latest {{ page.categories | first | replace: '-',' ' | capitalize }}</h3>
<ul class="th-grid">
{% capture category_name %}{{ page.categories | first }}{% endcapture %}
{% for post in site.categories.[category_name] limit:4 %}
<li><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}"><img src="{{ site.url }}/images/{{ post.image.thumb }}" alt=""></a></li>
{% endfor %}
</ul>
</div><!-- /.archive-wrap -->

7
_includes/latest-posts-list.html

@ -0,0 +1,7 @@
<h3>Latest {{ page.categories | first | replace: '-',' ' | capitalize }}</h3>
<ul>
{% capture category_name %}{{ page.categories | first }}{% endcapture %}
{% for post in site.categories.[category_name] limit:3 %}
<li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

17
_includes/navigation-sliding.html

@ -0,0 +1,17 @@
<nav role="navigation" id="js-menu" class="sliding-menu-content">
<h5>{{ site.title }} <span>{{ site.data.messages.locales[site.locale].toc }}</span></h5>
<ul class="menu-item">
{% for link in site.data.navigation %}<li>
<a href="{{ site.url }}{{ link.url }}">
{% if link.image %}<img src="{{ site.url }}/images/{{ link.image }}" alt="teaser" class="teaser">{% endif %}
<div class="title">{{ link.title }}</div>
{% if link.excerpt %}<p class="excerpt">{{ link.excerpt }}</p>{% endif %}
</a>
</li>{% endfor %}
</ul>
</nav>
<button type="button" id="js-menu-trigger" class="sliding-menu-button lines-button x2" role="button" aria-label="Toggle Navigation">
<span class="nav-lines"></span>
</button>
<div id="js-menu-screen" class="menu-screen"></div>

11
_includes/navigation.html

@ -0,0 +1,11 @@
<ul class="menu-item">
<li class="home"><a href="/">{{ site.title }}</a></li>
{% for link in site.data.navigation %}
{% if link.url contains 'http' %}
{% assign domain = '' %}
{% else %}
{% assign domain = site.url %}
{% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>

19
_includes/open-graph.html

@ -0,0 +1,19 @@
<!-- Twitter Cards -->
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
{% if page.excerpt %}<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">{% endif %}
{% if site.owner.twitter %}<meta name="twitter:site" content="@{{ site.owner.twitter }}">{% endif %}
{% if author.twitter %}<meta name="twitter:creator" content="@{{ author.twitter }}">{% endif %}
{% if page.image.feature %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
{% else %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">
{% endif %}
<!-- Open Graph -->
<meta property="og:locale" content="{{ site.locale }}">
<meta property="og:type" content="article">
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
{% if page.excerpt %}<meta property="og:description" content="{{ page.excerpt | strip_html }}">{% endif %}
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<meta property="og:site_name" content="{{ site.title }}">

11
_includes/page-author.html

@ -0,0 +1,11 @@
{% if page.author %}
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
{% endif %}
<div class="author-image">
<img src="{{ site.url }}/images/{{ author.avatar }}" alt="{{ author.name }}">
</div><!-- ./author-image -->
<div class="author-content">
<h3 class="author-name" >{{ site.data.messages.locales[site.locale].written_by }} {% if author.web %}<a href="{{ author.web }}" itemprop="author">{{ author.name }}</a>{% else %}<span itemprop="author">{{ author.name }}</span>{% endif %}</h3>
<p class="author-bio">{{ author.bio }}</p>
</div><!-- ./author-content -->

3
_includes/page-meta.html

@ -0,0 +1,3 @@
{% if page.date %}<div class="page-meta">
<p>{{ site.data.messages.locales[site.locale].updated }} {% if page.modified %}<time datetime="{{ page.modified | date: "%Y-%m-%dT%H:%M:%SZ" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% else %}<time datetime="{{ page.date | date: "%Y-%m-%dT%H:%M:%SZ" }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time></p>{% endif %}
</div><!-- /.page-meta -->{% endif %}

15
_includes/pagination.html

@ -0,0 +1,15 @@
<nav class="pagination">
{% capture category_name %}{{ page.categories | first }}{% endcapture %}
{% for post in site.categories.[category_name] %}
{% if post.url == page.url %}
{% assign post_index0 = forloop.index0 %}
{% assign post_index1 = forloop.index %}
{% endif %}
{% endfor %}
{% for post in site.categories.[category_name] %}
{% if post_index0 == forloop.index %}{% assign next_post = post %}{% endif %}
{% if post_index1 == forloop.index0 %}{% assign prev_post = post %}{% endif %}
{% endfor %}
{% if prev_post %}<a class="prev" href="{{ site.url }}{{ prev_post.url }}">{{ prev_post.title }}</a>{% endif %}
{% if next_post %}<a class="next" href="{{ site.url }}{{ next_post.url }}">{{ next_post.title }}</a>{% endif %}
</nav>

7
_includes/post-grid.html

@ -0,0 +1,7 @@
<article class="tile" itemscope itemtype="http://schema.org/Article">
<a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}" class="post-teaser">{% if post.image.teaser %}<img src="{{ site.url }}/images/{{ post.image.teaser }}" alt="teaser" itemprop="image">
{% else %}<img src="{{ site.url }}/images/{{ site.teaser }}" alt="teaser" itemprop="image">{% endif %}</a>
{% if post.date %}<p class="entry-date date published"><time datetime="{{ post.date | date: "%Y-%m-%d" }}" itemprop="datePublished">{{ post.date | date: "%B %d, %Y" }}</time></p>{% endif %}
<h2 class="post-title" itemprop="name"><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h2>
<p class="post-excerpt" itemprop="description">{{ post.excerpt | strip_html | truncate: 160 }}</p>
</article><!-- /.tile -->

13
_includes/post-list-bullets.html

@ -0,0 +1,13 @@
<div class="bullets">
{% for post in site.posts %}
<div class="bullet three-col-bullet">
<div class="bullet-icon">
<a href="{{ site.url }}{{ post.url }}"><img src="{{ site.url }}/images/{{ post.image.teaser }}" alt=""></a>
</div><!-- /.bullet-icon -->
<div class="bullet-content">
<h2><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h2>
<p>{{ post.excerpt | remove: '<p>' | remove: '</p>'}}</p>
</div><!-- /.bullet-content -->
</div><!-- /.bullet -->
{% endfor %}
</div><!-- /.bullets -->

1
_includes/post-list.html

@ -0,0 +1 @@
<li>{% if post.date %}<span>{{ post.date | date: "%B %d, %Y" }}</span> &raquo; {% endif %}<a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></li>

3
_includes/scroll-cue.html

@ -0,0 +1,3 @@
<div id="scroll-cue" onclick="$('html,body').animate({scrollTop: $('#content').offset().top}, 1000)">Scroll
<svg class="hang" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><g></g><path d="M24.773 13.701c-0.651 0.669-7.512 7.205-7.512 7.205-0.349 0.357-0.805 0.534-1.261 0.534-0.458 0-0.914-0.178-1.261-0.534 0 0-6.861-6.536-7.514-7.205-0.651-0.669-0.696-1.87 0-2.586 0.698-0.714 1.669-0.77 2.522 0l6.253 5.997 6.251-5.995c0.854-0.77 1.827-0.714 2.522 0 0.698 0.714 0.654 1.917 0 2.584z" fill="#ffffff" /></svg>
</div>

5
_includes/share-this.html

@ -0,0 +1,5 @@
<div class="inline-btn">
<a class="btn-social twitter" href="https://twitter.com/intent/tweet?text={{ page.title | escape | replace:' ','%20' }}&amp;url={{ page.url | replace:'index.html','' | prepend: site.url }}&amp;via={{ site.owner.twitter }}" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> {{ site.data.messages.locales[site.locale].share }} Twitter</a>
<a class="btn-social facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | replace:'index.html','' | prepend: site.url }}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> {{ site.data.messages.locales[site.locale].share }} Facebook</a>
<a class="btn-social google-plus" href="https://plus.google.com/share?url={{ page.url | replace:'index.html','' | prepend: site.url }}" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i> {{ site.data.messages.locales[site.locale].share }} Google+</a>
</div><!-- /.share-this -->

4
_includes/toc.html

@ -0,0 +1,4 @@
<nav class="toc" markdown="1">
* Auto generated table of contents
{:toc}
</nav>

25
_layouts/archive.html

@ -0,0 +1,25 @@
---
layout: default
---
<div id="main" role="main">
<div class="wrap">
{% if page.image.feature %}
<div class="page-feature">
<div class="page-image">
<img src="{{ site.url }}/images/{{ page.image.feature }}" class="page-feature-image" alt="{{ page.title }}">
{% if page.image.credit %}{% include image-credit.html %}{% endif %}
</div><!-- /.page-image -->
</div><!-- /.page-feature -->
{% endif %}
<div class="page-title">
<h1>{{ page.title }}</h1>
{% if page.excerpt %}<h2>{{ page.excerpt }}</h2>{% endif %}
</div>
<div class="archive-wrap">
<div class="page-content">
{{ content }}
</div><!-- /.page-content -->
</div class="archive-wrap"><!-- /.archive-wrap -->
</div><!-- /.wrap -->
</div><!-- /#main -->

35
_layouts/article.html

@ -0,0 +1,35 @@
---
layout: default
---
<div id="main" role="main">
<article class="wrap" itemscope itemtype="http://schema.org/Article">
{% if page.image.feature %}
<div class="page-feature">
<div class="page-image">
<img src="{{ site.url }}/images/{{ page.image.feature }}" class="page-feature-image" alt="{{ page.title }}" itemprop="image">
{% if page.image.credit %}{% include image-credit.html %}{% endif %}
</div><!-- /.page-image -->
</div><!-- /.page-feature -->
{% endif %}
{% include breadcrumbs.html %}
<div class="page-title">
<h1>{{ page.title }}</h1>
</div>
<div class="inner-wrap">
<div id="content" class="page-content" itemprop="articleBody">
{{ content }}
<hr />
<footer class="page-footer">
{% if page.categories %}{% include page-author.html %}{% endif %}
{% if page.share != false %}{% include share-this.html %}{% endif %}
{% include page-meta.html %}
</footer><!-- /.footer -->
<aside>
{% if page.comments == true %}{% include comments.html %}{% endif %}
</aside>
</div><!-- /.content -->
</div><!-- /.inner-wrap -->
{% if page.ads == true %}<div class="ads">{% include advertising.html %}</div><!-- /.ads -->{% endif %}
</article><!-- ./wrap -->
</div><!-- /#main -->

48
_layouts/default.html

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% if page.title %}{{ page.title }} • {% endif %}{{ site.title }}</title>
{% if page.excerpt %}<meta name="description" content="{{ page.excerpt | strip_html }}">{% endif %}
{% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
{% if page.author %}
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
{% endif %}
{% include open-graph.html %}
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link href="{{ site.url }}/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Atom Feed">
<link href="{{ site.url }}/sitemap.xml" type="application/xml" rel="sitemap" title="Sitemap">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="{{ site.url }}/css/main.css">
<!-- HTML5 Shiv and Media Query Support for IE -->
<!--[if lt IE 9]>
<script src="{{ site.url }}/js/vendor/html5shiv.min.js"></script>
<script src="{{ site.url }}/js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body id="js-body">
{% include browser-upgrade.html %}
{% include header.html %}
{% include navigation-sliding.html %}
{% include landing.html %}
<div id="page-wrapper">
{{ content }}
{% include footer.html %}
</div>
<script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>
<script src="{{ site.url }}/js/main.js"></script>
</body>
</html>

34
_layouts/media.html

@ -0,0 +1,34 @@
---
layout: default
---
<div id="main" role="main">
<article class="wrap" itemscope itemtype="http://schema.org/Article">
{% if page.image.feature %}
<div class="page-feature">
<div class="page-image">
<img src="{{ site.url }}/images/{{ page.image.feature }}" class="page-feature-image" alt="{{ page.title }}" itemprop="image">
{% if page.image.credit %}{% include image-credit.html %}{% endif %}
</div><!-- /.page-image -->
</div><!-- /.page-feature -->
{% endif %}
{% include breadcrumbs.html %}
<div class="page-title">
<h1>{{ page.title }}</h1>
</div>
<div class="inner-wrap">
<div id="content" class="page-content" itemprop="articleBody">
{{ content }}
<hr />
<footer class="page-footer">
{% if page.share != false %}{% include share-this.html %}{% endif %}
{% include page-meta.html %}
</footer><!-- /.footer -->
<aside>
{% if page.comments == true %}{% include comments.html %}{% endif %}
</aside>
</div><!-- /.content -->
</div><!-- /.inner-wrap -->
{% if page.ads == true %}<div class="ads">{% include advertising.html %}</div><!-- /.ads -->{% endif %}
</article><!-- /.wrap -->
</div><!-- /#main -->

41
_sass/_animations.scss

@ -0,0 +1,41 @@
/* ==========================================================================
Animations
========================================================================== */
/*
Wiggle animation
========================================================================== */
@include keyframes(wiggle) {
25%, 50%, 75%, 100% { @include transform-origin(top center); }
25% { @include transform(rotate(8deg)); }
50% { @include transform(rotate(-4deg)); }
75% { @include transform(rotate(2deg)); }
100% { @include transform(rotate(0deg)); }
}
/*
Pop animation
========================================================================== */
@include keyframes(pop) {
50% { @include transform(scale(1.1)); }
100% { @include transform(scale(1)); }
}
/*
Hang animation
========================================================================== */
@include keyframes(hang) {
50% { @include transform(translateY(-3px)); }
100% { @include transform(translateY(-6px)); }
}
.hang {
display: inline-block;
@include animation-name(hang);
@include animation-duration(0.5s);
@include animation-timing-function(linear);
@include animation-iteration-count(infinite);
@include animation-direction(alternate);
}

41
_sass/_badges.scss

@ -0,0 +1,41 @@
/* ==========================================================================
Badges
========================================================================== */
.badge {
display: inline-block;
background: $badge-background;
border-radius: 2em;
color: $badge-font-color;
font-family: $alt-font;
@include font-size(12,no);
font-weight: 600;
line-height: 1;
padding: .25em 1em;
text-align: center;
&.inverse {
background: $white;
color: $text-color;
}
&.info {
background: $badge-info-color;
color: $white;
}
&.danger {
background: $badge-danger-color;
color: $white;
}
&.warning {
background: $badge-warning-color;
color: darken($badge-warning-color, 60);
}
&.success {
background: $badge-success-color;
color: darken($badge-success-color, 60);
}
}

396
_sass/_base.scss

@ -0,0 +1,396 @@
/* ==========================================================================
Base
========================================================================== */
/*
Typography
========================================================================== */
body {
font-family: $base-font;
color: $text-color;
@include font-size(16);
}
p {
@include font-size(18,yes,28);
}
li {
@include font-size(16,12,24);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: $heading-font;
text-rendering: optimizeLegibility; // Fix the character spacing for headings
}
h1 {
@include font-size(36);
}
h2 {
@include font-size(32);
}
h3 {
@include font-size(28);
}
h4 {
@include font-size(24);
}
h5 {
@include font-size(20);
}
h6 {
@include font-size(18);
}
/* Underlined text */
u,
ins {
text-decoration: none;
border-bottom: 1px solid $text-color;
}
/* Links */
a {
color: $link-color;
&:hover {
color: darken($link-color, 20);
}
&:focus {
@extend %tab-focus;
}
&:hover,
&:active {
outline: 0;
}
}
/* Quoted text */
blockquote {
padding-left: $gutter;
padding-right: $gutter;
border-left: 6px solid $info-color;
p {
font-family: $alt-font;
@include font-size(24);
}
cite {
font-family: $base-font;
font-weight: 700;
font-style: normal;
@include font-size(18);
}
}
// Code
tt, code, kbd, samp, pre {
font-family: $code-font;
}
pre {
overflow-x: auto; // add scrollbars to wide code blocks
}
p code,
li code {
@include font-size(16,no);
color: $text-color;
white-space: nowrap;
margin: 0 2px;
padding: 0 5px;
border: 1px solid $border-color;
background-color: lighten($primary-color, 95);
border-radius: $border-radius;
}
/*
Media and embeds
========================================================================== */
/* Figures and images */
figure {
margin-left: -1 * $gutter;
margin-right: -1 * $gutter;
// full width figures on small screens
@include media($small) {
margin-left: 0;
margin-right: 0;
position: relative;
}
@include clearfix;
img,
.fluid-width-video-wrapper,
.palette {
margin-bottom: (0px + $doc-line-height) / 2;
// margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2;
}
a {
img {
/* Image hover animation */
@include transition(box-shadow 0.3s);
&:hover {
box-shadow: 0 0 10px rgba($black, .20);
}
}
}
&.half {
@include outer-container;
@include media($small) {
a,
> img {
@include span-columns(6);
@include omega(2n);
}
figcaption {
clear: left;
}
}
}
&.third {
@include outer-container;
@include media($small) {
a,
> img {
@include span-columns(4);
@include omega(3n);
}
figcaption {
clear: left;
}
}
}
}
/* Figure captions */
figcaption {
padding-left: $gutter;
padding-right: $gutter;
@include media($small) {
padding-left: 0;
padding-right: 0;
}
font-family: $alt-font;
@include font-size(14,yes);
color: $caption-color;
clear: both;
a {
color: $caption-color;
text-decoration: none;
border-bottom: 1px dotted $caption-color;
&:hover {
border-bottom-style: solid;
}
}
}
.half,
.third {
& figcaption { /* Remove caption indents */
padding-left: 0;
padding-right: 0;
}
}
/* Fix IE9 SVG bug */
svg:not(:root) {
overflow: hidden;
}
/*
Tables
========================================================================== */
table {
border-collapse: collapse;
margin: ((0px + $doc-line-height) / 2) 0;
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
width: 100%;
}
tbody {
tr:hover > td, tr:hover > th {
background-color: $table-hover-color;
}
}
thead {
tr:first-child td {
border-bottom: 2px solid $table-border-color;
}
}
th {
padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
font-family: $alt-font;
font-weight: bold;
text-align: left;
background-color: $table-header-color;
border-bottom: 1px solid darken($border-color, 15%);
}
td {
border-bottom: 1px solid $border-color;
padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
}
tr, td, th {
vertical-align: middle;
}
/*
Horizontal rules
========================================================================== */
hr {
display: block;
position: relative;
margin: 0px + (2 * $doc-line-height) 0;
margin: 0rem + ((2 * $doc-line-height) / $doc-font-size) 0;
padding: 0;
height: 5px;
border: 0;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2 * $column;
height: 1px;
background: $border-color;
}
}
/*
Forms
========================================================================== */
fieldset {
background: lighten($border-color, 10);
border: 1px solid $border-color;
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
padding: $gutter;
border-radius: $border-radius;
}
input,
label,
select {
display: block;
@include font-size($form-font-size,no);
}
label {
font-weight: bold;
font-family: $alt-font;
margin-bottom: (0px + $doc-line-height) / 4;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 4;
&.required:after {
content: "*";
}
abbr {
display: none;
}
}
textarea,
#{$all-text-inputs},
select,
select[multiple=multiple] {
@include box-sizing(border-box);
@include transition(border-color);
background-color: white;
border-radius: $form-border-radius;
border: 1px solid $form-border-color;
box-shadow: $form-box-shadow;
font-family: $form-font-family;
font-size: $form-font-size;
margin-bottom: (0px + $doc-line-height) / 2;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2;
padding: ((0px + $doc-line-height) / 3) ((0px + $doc-line-height) / 3);
padding: ((0rem + ($doc-line-height / $doc-font-size)) / 3) ((0rem + ($doc-line-height / $doc-font-size)) / 3);
width: 100%;
&:hover {
border-color: $form-border-color-hover;
}
&:focus {
border-color: $form-border-color-focus;
box-shadow: $form-box-shadow-focus;
outline: none;
}
}
textarea {
resize: vertical;
}
input[type="search"] {
@include appearance(none);
}
input[type="checkbox"], input[type="radio"] {
display: inline;
margin-right: (0px + $doc-line-height) / 4;
margin-right: (0rem + ($doc-line-height / $doc-font-size)) / 4;
}
input[type="file"] {
width: 100%;
}
select {
width: auto;
max-width: 100%;
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
form button,
input[type="submit"] {
@extend .btn;
@include appearance(none);
cursor: pointer;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
/*
Navigation lists
========================================================================== */
/**
* Removes margins, padding, and bullet points from navigation lists
*
* Example usage:
* <nav>
* <ul>
* <li><a href="#link-1">Link 1</a></li>
* <li><a href="#link-2">Link 2</a></li>
* <li><a href="#link-3">Link 3</a></li>
* </ul>
* </nav>
*/
nav {
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
}
/*
Global animation transition
========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, .highlight {
@include transition (color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out);
}

16
_sass/_breadcrumbs.scss

@ -0,0 +1,16 @@
/* ==========================================================================
Breadcrumb navigation
========================================================================== */
.breadcrumbs {
@include row;
margin-top: $gutter;
@include font-size(10,no);
a {
display: inline-block;
font-family: $alt-font;
font-weight: 700;
text-align: left;
text-transform: uppercase;
}
}

50
_sass/_bullets.scss

@ -0,0 +1,50 @@
/* ==========================================================================
Visual bullets (image + text)
========================================================================== */
.bullets {
$icon-bullet-size: $column;
overflow: auto;
// change ".three-col-bullet" class to this for two bullet layout
.two-col-bullet {
@include media($large) {
@include span-columns(6);
@include omega(2n);
}
}
.three-col-bullet {
@include media($large) {
@include span-columns(4);
@include omega(3n);
}
}
// change ".three-col-bullet" class to this for four bullet layout
.four-col-bullet {
@include media($large) {
@include span-columns(3);
@include omega(4n);
}
}
.bullet-icon {
float: left;
background: $base-color;
padding: $icon-bullet-size /4;
border-radius: 50%;
width: $icon-bullet-size * 1.25;
height: $icon-bullet-size * 1.25;
}
.bullet-content {
margin-left: $icon-bullet-size * 1.4;
margin-bottom: 2em;
}
h2 {
margin-top: 0;
@include font-size(20,no);
display: inline-block;
}
p {
@include font-size(14);
}
}

156
_sass/_buttons.scss

@ -0,0 +1,156 @@
/* ==========================================================================
Buttons
========================================================================== */
/*
Default button .btn
========================================================================== */
.btn {
display: inline-block;
padding: 8px 20px;
@include font-size(14);
font-family: $alt-font;
background-color: $primary-color;
color: $white;
text-decoration: none;
border: 0 !important;
border-radius: 10 * $border-radius;
@include transition(background 0.2s, border 0.2s);
&:hover {
color: $white;
background-color: lighten($primary-color, 10);
}
&:active {
// move button slightly on click
@include transform(translateY(1px));
}
}
/*
Inverse button .btn-inverse
========================================================================== */
.btn-inverse {
@extend .btn;
background-color: $white;
color: $text-color;
&:visited,
&:active {
color: $text-color;
}
&:hover {
color: $white;
background-color: $text-color;
}
}
/*
Info button .btn-info
========================================================================== */
.btn-info {
@extend .btn;
background-color: $info-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($info-color, 10);
}
}
/*
Warning button .btn-warning
========================================================================== */
.btn-warning {
@extend .btn;
background-color: $warning-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($warning-color ,10);
}
}
/*
Success button .btn-success
========================================================================== */
.btn-success {
@extend .btn;
background-color: $success-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color:lighten($success-color, 10);
}
}
/*
Danger button .btn-danger
========================================================================== */
.btn-danger {
@extend .btn;
background-color: $danger-color;
color: $white;
&:visited {
color: $white;
}
&:hover {
background-color: lighten($danger-color, 10);
}
}
/*
Social media buttons
========================================================================== */
.btn-social {
$social:
(facebook, $facebook-color),
(flickr, $flickr-color),
(foursquare, $foursquare-color),
(google-plus, $google-plus-color),
(instagram, $instagram-color),
(linkedin, $linkedin-color),
(pinterest, $pinterest-color),
(rss, $rss-color),
(tumblr, $tumblr-color),
(twitter, $twitter-color),
(vimeo, $vimeo-color),
(youtube, $youtube-color);
@extend .btn-inverse;
color: $text-color !important;
&:visited,
&:active {
color: $text-color;
}
border: 1px solid $border-color !important;
@each $socialnetwork, $color in $social {
i.fa-#{$socialnetwork} {
color: $color;
}
}
&:hover {
color: $white !important;
}
@each $socialnetwork, $color in $social {
&.#{$socialnetwork}:hover {
background: $color;
border-color: $color;
@each $socialnetwork, $color in $social {
i.fa-#{$socialnetwork} {
color: $white;
}
}
}
}
}

14
_sass/_footnotes.scss

@ -0,0 +1,14 @@
/* ==========================================================================
Footnotes
========================================================================== */
.footnotes {
font-family: $alt-font;
p, li {
@include font-size(12,no);
}
&:before {
content: 'Footnotes:';
font-weight: 700;
}
}

15
_sass/_grid-settings.scss

@ -0,0 +1,15 @@
/* ==========================================================================
Grid settings for Neat
========================================================================== */
@import "vendor/neat/neat-helpers";
// Change the grid settings
$visual_grid: false;
// Define your breakpoints
$short: new-breakpoint(max-height em(700) 12);
$micro: new-breakpoint(min-width em(240) max-width em(480) 12);
$small: new-breakpoint(min-width em(600) 12);
$medium: new-breakpoint(min-width em(900) 12);
$large: new-breakpoint(min-width em(1280) 12);

153
_sass/_helpers.scss

@ -0,0 +1,153 @@
/* ==========================================================================
Helpers and Utility Classes
========================================================================== */
.wrap {
@include outer-container;
}
.come-in {
@include transform(translateY(20px));
@include animation(pop 0.5s ease forwards);
}
.already-visible {
@include transform(translateY(0));
@include animation(none);
}
/*
Hide
========================================================================== */
.hidden,
.load {
display: none;
}
/*
No scrollbars
========================================================================== */
.no-scroll {
overflow: hidden;
}
/*
Inline button(s) wrapper
========================================================================== */
.inline-btn {
@include clearfix;
a, btn {
display: inline-block;
margin-right: $gutter / 2;
&:last-child {
margin-right: 0;
}
}
}
/*
Shorten measure of text to improve readability
========================================================================== */
@include media($medium) {
.shorten {
width: percentage(8/12);
}
}
/*
Center align text
========================================================================== */
.center {
text-align: center;
}
/*
Align image to the right
========================================================================== */
.image-right {
display: block;
margin-left: auto;
margin-right: auto;
@include media($medium) {
float: right;
margin-left: $gutter;
}
}
/*
Thumbnail grid (default)
========================================================================== */
.th-grid {
@include row($direction: LTR);
@include clearfix;
margin: 0;
padding: 0;
li {
list-style: none;
@include span-columns(3);
@include omega(4n);
margin-bottom: flex-gutter($grid-columns);
}
a {
img {
// Image hover animation
&:hover {
@include animation(pop .3s 0 linear);
box-shadow: 0 0 10px rgba($black, .20);
}
}
}
}
/*
Thumbnail grid (oversized)
========================================================================== */
.th-grid-full {
@include clearfix;
margin: 0;
padding: 0;
@include media($large) {
margin-right: -29em; // magic number ugh
}
@at-root {
.archive-wrap & {
margin-right: 0;
}
}
li {
list-style: none;
margin-bottom: flex-gutter($grid-columns);
@include media($micro) {
@include span-columns(3);
@include omega(4n);
}
@media screen and (min-width: em(480)) and (max-width: em(999)) {
@include span-columns(3);
@include omega(4n);
}
@include media($large) {
float: left;
width: 6.575em;
margin-right: .25em; // magic number ugh
margin-bottom: .25em; // magic number ugh
@include omega(9n);
}
}
a {
img {
// Image hover animation
&:hover {
@include animation(pop .3s 0 linear);
box-shadow: 0 0 10px rgba($black, .20);
}
}
}
}

351
_sass/_layout.scss

@ -0,0 +1,351 @@
/* ==========================================================================
Page layout
========================================================================== */
/*
Masthead
========================================================================== */
#masthead {
padding: $gutter;
z-index: 5;
@include transform(translate(0,0));
@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
&.slide {
@include transform(translate(-1600px,0));
}
.inner-wrap {
@include outer-container;
}
}
.site-title {
@include row;
@include media($large) {
@include span-columns(4);
}
padding: (.25 * $masthead-height) 0; // fourth the height to center vertically
height: $masthead-height;
text-decoration: none;
color: $black;
font-family: $alt-font;
font-weight: 700;
@include font-size(20,no);
line-height: .5 * $masthead-height; // half the height to center vertically
text-transform: uppercase;
}
/*
Menus
========================================================================== */
.menu {
li {
float: left;
&:last-child a {
@include media($medium) {
margin-right: 0; // remove spacing from last menu link
}
}
a {
// line hover effect
position: relative;
display: block;
margin-right: $gutter;
padding: (.25 * $masthead-height) 0 (.25 * $masthead-height) ;
height: $masthead-height;
font-family: $alt-font;
&:before,
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 2px;
@include transition(width 0.3s);
}
&:before {
width: 100%;
background: transparent;
}
&:after {
width: 0;
background: $black;
}
&:active:after,
&:hover:after {
width: 100%;
}
}
}
}
/* Top menu navigation */
.top-menu {
display: none;
position: relative;
@include media($medium) {
@include span-columns(12);
}
@include media($large) {
@include span-columns(7);
ul {
position: absolute;
right: 0;
}
}
.home,
.sub-menu-item {
display: none;
}
li {
a {
font-weight: 700;
@include font-size(16,no);
line-height: .5 * $masthead-height; // half the height to center vertically
color: $black;
text-transform: uppercase;
}
}
}
/* Bottom menu navigation */
.bottom-menu {
@include clearfix;
font-weight: 700;
a {
color: lighten($black,60);
}
}
/*
Page wrapper
========================================================================== */
#page-wrapper {
padding: 0 $gutter; // add white space for smaller screens
@include size(100% 100%);
-webkit-overflow-scrolling: touch;
z-index: 2;
@include transform(translate(0,0));
@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
&.slide {
@include transform(translate(-60rem,0));
}
}
/*
Main content
========================================================================== */
#main {
.inner-wrap {
@include media($medium) {
@include span-columns(9);
}
}
.page-title {
@include fill-parent;
}
@at-root {
.page-content {
@include fill-parent;
// larger font for intro paragraph
> p {
&:first-child {
@include font-size(20,yes,30);
}
}
// cleaner underlines for links
a { text-decoration: none; }
p a,
li a {
border-bottom: 1px dotted lighten($link-color, 50);
&:hover {
border-bottom-style: solid;
}
}
p > a.reversefootnote {
border-bottom-width: 0;
}
.toc li > a {
border-bottom-width: 0;
}
.page-footer,
.pagination {
@include fill-parent;
}
.page-meta {
p{
@include font-size(14,no);
font-family: $alt-font;
color: lighten($black,60);
}
}
}
}
@at-root {
.archive-wrap {
@include fill-parent;
.page-content {
@include reset-all;
@include fill-parent;
}
}
}
/* advertisements */
.ads {
position: relative;
text-align: center;
margin-top: $gutter;
margin-left: -$gutter;
margin-right: -$gutter;
padding: 10px 0 20px;
background: lighten($border-color,5);
@include media($medium) {
@include span-columns(3);
margin-left: 0;
margin-right: 0;
}
&:after {
content: 'Advertisement';
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
display: block;
@include font-size(9,no);
font-family: $alt-font;
}
ins {
border-width: 0;
}
}
}
// page lead
.page-lead {
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
text-align: center;
color: $white;
@include media($large) {
background-size: cover;
}
}
.page-lead-content {
padding: 1em;
@include media($medium) {
padding: 2em;
}
@include media($large) {
padding: 3em;
}
h1 {
@include font-size(48);
@include media($medium) {
@include font-size(60);
}
@include media($large) {
@include font-size(72);
}
}
h2 {
@include font-size(20);
@include media($medium) {
@include font-size(24);
}
@include media($large) {
@include font-size(32);
}
}
}
// page header
.page-feature {
@include fill-parent;
// expand image to cover full width of header
img {
width: 100%;
}
}
// make image flush with edges on small screens
.page-image {
position: relative;
margin-left: -1 * $gutter;
margin-right: -1 * $gutter;
// feature image caption
.image-credit {
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
padding: 10px 15px;
background-color: rgba($black,.5);
color: $white;
font-family: $alt-font;
@include font-size(12,no);
text-align: right;
z-index: 10;
a {
color: $white;
text-decoration: none;
}
}
}
/*
Page footer
========================================================================== */
.page-footer {
position: relative;
}
/* Author block */
.author-image {
position: absolute;
left: 0;
img {
width: 80px;
height: 80px;
border-radius: $border-radius;
}
}
.author-content {
word-wrap: break-word;
padding-left: 100px; //avatar width + 20px padding
min-height: 80px; //mirrors avatar height
}
.author-name {
@include font-size(20,no);
}
.author-bio {
margin-top: 0;
@include font-size(16);
}
/*
Site footer
========================================================================== */
#site-footer {
@include outer-container;
margin-top: (3 * (0px + $doc-line-height));
margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size)));
padding-bottom: $gutter;
font-family: $alt-font;
/* Copyright text */
.copyright {
@include font-size(12);
color: lighten($black,60);
a {
color: lighten($black,60);
text-decoration: none;
}
}
}

130
_sass/_menu-navicons.scss

@ -0,0 +1,130 @@
/* ==========================================================================
ANIMATED 3 LINE NAVICONS
https://github.com/SaraSoueidan/navicon-transformicons
========================================================================== */
/* Common to all three-liners */
@mixin line {
display: inline-block;
width: $button-size;
height: $button-size/7;
background: $white;
transition: $transition;
}
.nav-lines {
@include line;
position: relative;
&:before, &:after {
@include line;
position: absolute;
left:0;
content: '';
transform-origin: $button-size/14 center;
}
&:before {
top: $button-size/4;
}
&:after {
top: -$button-size/4;
}
}
.lines-button:hover {
.nav-lines {
&:before {
top: $button-size/3.5;
}
&:after {
top: -$button-size/3.5;
}
}
}
/* For both the arrow up and left icons */
.lines-button.arrow.close {
.nav-lines {
&:before,
&:after {
top: 0;
width: $button-size/1.8;
}
&:before {
transform: rotate3d(0,0,1,40deg);
}
&:after {
transform: rotate3d(0,0,1,-40deg);
}
}
}
/* Arrow up only: just rotate by 90degrees */
.lines-button.arrow-up.close {
transform: scale3d(.8,.8,.8) rotate3d(0, 0, 1,90deg);
}
/* Three-lines to minus only */
.lines-button.minus.close {
.nav-lines {
&:before, &:after {
transform: none;
top: 0;
width: $button-size;
}
}
}
/* Three-lines to x */
.lines-button.x.close{
.nav-lines {
background: transparent;
&:before, &:after{
transform-origin: 50% 50%;
top: 0;
width: $button-size;
}
&:before{
transform: rotate3d(0,0,1,45deg);
}
&:after{
transform: rotate3d(0,0,1,-45deg);
}
}
}
/* Three-lines to x method 2 */
.lines-button.x2 {
.nav-lines {
transition: background .3s .5s ease;
&:before, &:after {
/* set transform origin */
transform-origin: 50% 50%;
transition: top .3s .6s ease, -webkit-transform .3s ease;
transition: top .3s .6s ease, transform .3s ease;
}
}
}
.lines-button.x2.close {
.nav-lines {
transition: background .3s 0s ease;
background: transparent;
&:before, &:after {
transition: top .3s ease, -webkit-transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
transition: top .3s ease, transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
top: 0;
width: $button-size;
}
&:before {
transform: rotate3d(0,0,1,45deg);
}
&:after {
transform: rotate3d(0,0,1,-45deg);
}
}
}

94
_sass/_mixins.scss

@ -0,0 +1,94 @@
// MIXINS
// --------------------------------------------------
%tab-focus {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Typography
// --------------------------------------------------
/* Vertical Rhythm
https://github.com/sturobson/Sassifaction
In this mixin you can specify the font size in PX and
it will calculate the REM based on your $doc-font-size
& $doc-line-height variables.
@include font-size(24);
It will also create a bottom margin based on the
$doc-font-size & $doc-line-height variables unless you
specify that it shouldn't have one.
@include font-size(24, no);
Or if you want to specify a different bottom margin to
be generated.
@include font-size(24,32);
This mixin also generates a pixel-less line height by
default unless you specify that you either don't want
one where I'd suggest declaring 1 within the mixin.
@include font-size(24, yes, 1);
There's also the option to specify a different line-height
for it to generate to, where you would specify the
line-height in (effectively) it's pixel value.
@include font-size(24, yes, 40);
*/
@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
// generates the font-size in REMs with a PX fallback
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
// line-height functions
////////////////////////
// if you a line-height is specified in the mixin
@if $line-height != $doc-line-height and $line-height != 1 {
line-height: ceil($size / $line-height) * ($line-height / $size);
}
// if $line-height == 1
// because, typing 1 is quicker than 16
@else if $line-height == 1 {
line-height: 1;
}
// normal $line-height
// if the line-height is left.
@else {
line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
}
// margin-bottom functions
//////////////////////////
// if no is bottom margin is required
@if $margin == no {
margin-bottom: 0;
}
// if a specific bottom margin is required
@else if $margin != yes and $margin != no {
margin-bottom: 0px + $margin;
margin-bottom: 0rem + ($margin / $doc-font-size);
}
// if you're keeping the vertical rhythm with the margin
@else {
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
}

79
_sass/_notices.scss

@ -0,0 +1,79 @@
/* ==========================================================================
Notices
========================================================================== */
/*
Default notice .notice
========================================================================== */
@mixin notice($notice-color) {
position: relative;
padding: 1.5em;
font-family: $alt-font;
@include font-size(14,39);
color: $white;
background-color: $notice-color;
border-radius: $border-radius;
a {
color: $white;
border-bottom: 1px dotted $white;
}
}
.notice {
@include notice($primary-color);
}
/*
Inverse notice .notice-inverse
========================================================================== */
.notice-inverse {
@include notice($white);
color: $text-color;
a {
color: $text-color;
}
}
/*
Info notice .notice-info
========================================================================== */
.notice-info {
@include notice($info-color);
}
/*
Warning notice .notice-warning
========================================================================== */
.notice-warning {
@include notice($warning-color);
}
/*
Success notice .notice-success
========================================================================== */
.notice-success {
@include notice($success-color);
}
/*
Danger notice .notice-danger
========================================================================== */
.notice-danger {
@include notice($danger-color);
}
/*
Browser upgrade notice
========================================================================== */
.upgrade {
text-align: center;
a {
text-decoration: none;
}
}

144
_sass/_reset.scss

@ -0,0 +1,144 @@
/* ==========================================================================
Style resets
Adapted from http://github.com/necolas/normalize.css
========================================================================== */
// Apply a natural box layout model to all elements
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
// Remove margin
body { margin: 0; }
// Display HTML5 elements in IE6-9 and FF3
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
audio:not([controls]) {
display: none;
}
// Base font settings
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Apply focus state
a:focus {
@extend %tab-focus;
}
// Remove outline
a:hover,
a:active {
outline: 0;
}
// Prevent sub and sup affecting line-height in all browsers
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Normalize blockquotes
blockquote {
margin: 0;
}
// Img border in a's and image quality
img {
// Responsive images (ensure images don't scale beyond their parents)
max-width: 100%; // Part 1: Set a maximum relative to the parent
width: auto\9; // IE7-8 need help adjusting responsive images
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
// Prevent max-width from affecting Google Maps
#map_canvas img,
.google-maps img {
max-width: none;
}
// Consistent form font size in all browsers, margin changes, misc
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
button,
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
input[type="search"] { // Appearance in Safari/Chrome
@include box-sizing(content-box);
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}

189
_sass/_sliding-menu.scss

@ -0,0 +1,189 @@
/* ==========================================================================
OFF CANVAS SLIDING MENU
Based on code by Diego Eis
http://tableless.com.br/fazendo-um-slide-menu-mobile-sem-plugin/
========================================================================== */
/* Slider */
.slide {
transform: translateX(-100%);
@include media($medium) {
transform: translateX(em(-600));
}
@include media($large) {
transform: translateX(em(-900));
}
}
/*
Sliding menu button
========================================================================== */
.sliding-menu-button {
position: fixed;
transform: translateZ(0);
backface-visibility: hidden; /* fix scroll jank */
top: $gutter;
right: $gutter;
display: block;
width: $button-size * 2;
height: $button-size * 2;
background: $primary-color;
outline: 0;
padding: 0;
border: 2.5px solid transparent;
cursor: pointer;
z-index: 20;
box-sizing: border-box;
&:hover {
background: $black;
}
transition: $sliding-menu-animation;
&.slide {
background: $danger-color;
transform: translateX(0); /* don't slide close button on small screens only */
@include media($medium) {
transform: translateX(em(-600)); /* reset slide position */
}
@include media($large) {
transform: translateX(em(-900)); /* reset slide position */
}
}
}
/*
Sliding content
========================================================================== */
.sliding-menu-content {
position: fixed;
top: 0;
right: 0;
padding: em(22) 0;
visibility: hidden;
backface-visibility: hidden;
text-align: left;
@include size(100% 100%);
@include media($small) {
width: em(600);
}
@include media($large) {
width: em(900);
}
transform: translateX(100%);
transition: $sliding-menu-animation;
background: $sliding-menu-background;
z-index: 20;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
&.is-visible {
visibility: visible;
transform: translateX(0);
}
h5 {
margin: 0 20% 0 10%;
@include media($large) {
margin-right: 20%;
}
color: $white;
@include font-size(14);
@include media($small) {
@include font-size(16);
}
span {
display: block;
@include font-size(32,no,1);
@include media($small) {
@include font-size(48,no,1);
}
font-family: $base-font;
text-transform: uppercase;
font-weight: 400;
}
}
ul {
margin: 0 10%;
@include media($large) {
margin-right: 20%;
}
}
ul,
li {
list-style: none;
}
li {
display: block;
position: relative;
padding-bottom: 1em;
min-height: 70px;
@include media($small) {
min-height: 100px;
}
}
.menu-item {
a {
display: block;
color: $white;
text-decoration: none;
}
.teaser {
position: absolute;
left: 0;
margin-bottom: 0;
width: 50px;
border: 2px solid $white;
margin-bottom: ($gutter / 2);
opacity: 0.6;
@include media($small) {
width: 150px;
}
}
a:hover .teaser {
opacity: 1;
}
.title {
display: block;
margin-left: 60px;
font-family: $alt-font;
@include font-size(24,no);
font-weight: 700;
@include media($small) {
margin-left: 170px;
@include font-size(32,no);
}
}
.excerpt {
margin-top: 0;
margin-left: 60px;
@include font-size(14,no);
@include media($small) {
margin-left: 170px;
@include font-size(16,no);
}
}
}
.sub-menu-item > li a {
display: block;
color: $white;
font-style: italic;
}
.menu-item .home a {
@include font-size(32);
}
}
/* Dim content when off canvas nav slides in */
.menu-screen {
@include position(fixed, 0 0 0 0);
visibility: hidden;
z-index: 4;
&.is-visible {
visibility: visible;
&:hover {
cursor: pointer;
}
}
}

135
_sass/_syntax.scss

@ -0,0 +1,135 @@
/* ==========================================================================
Syntax highlighting and formatting
========================================================================== */
pre.highlight {
padding: 1em;
}
/*
Pygments.rb and Rouge
========================================================================== */
.linenos,
.code {
padding: 0;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
}
.linenodiv {
@include font-size(16);
}
.highlight {
overflow-x: auto;
@include font-size(16);
border: 1px solid darken($body-color, 5);
border-radius: $border-radius;
pre {
position: relative;
margin: 0;
padding: 1em;
}
&:hover {
border: 1px solid $form-border-color-hover;
}
}
.highlighttable {
tr:hover>td,
tr:hover>th {
background: transparent
}
}
.hll { background-color: #ffffcc }
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { color: #000000; font-weight: bold } // Keyword
.o { color: #000000; font-weight: bold } // Operator
.c { color: #999988; font-style: italic } // Comment
.cm { color: #999988; font-style: italic } // Comment.Multiline
.cp { color: #999999; font-weight: bold; font-style: italic } // Comment.Preproc
.c1 { color: #999988; font-style: italic } // Comment.Single
.cs { color: #999999; font-weight: bold; font-style: italic } // Comment.Special
.gd { color: #000000; background-color: #ffdddd } // Generic.Deleted
.ge { color: #000000; font-style: italic } // Generic.Emph
.gr { color: #aa0000 } // Generic.Error
.gh { color: #999999 } // Generic.Heading
.gi { color: #000000; background-color: #ddffdd } // Generic.Inserted
.go { color: #888888 } // Generic.Output
.gp { color: #555555 } // Generic.Prompt
.gs { font-weight: bold } // Generic.Strong
.gu { color: #aaaaaa } // Generic.Subheading
.gt { color: #aa0000 } // Generic.Traceback
.kc { color: #000000; font-weight: bold } // Keyword.Constant
.kd { color: #000000; font-weight: bold } // Keyword.Declaration
.kn { color: #000000; font-weight: bold } // Keyword.Namespace
.kp { color: #000000; font-weight: bold } // Keyword.Pseudo
.kr { color: #000000; font-weight: bold } // Keyword.Reserved
.kt { color: #445588; font-weight: bold } // Keyword.Type
.m { color: #009999 } // Literal.Number
.mf { color: #009999 } // Literal.Number.Float
.mh { color: #009999 } // Literal.Number.Hex
.mi { color: #009999 } // Literal.Number.Integer
.mo { color: #009999 } // Literal.Number.Oct
.il { color: #009999 } // Literal.Number.Integer.Long
.s { color: #d01040 } // Literal.String
.sb { color: #d01040 } // Literal.String.Backtick
.sc { color: #d01040 } // Literal.String.Char
.sd { color: #d01040 } // Literal.String.Doc
.s2 { color: #d01040 } // Literal.String.Double
.se { color: #d01040 } // Literal.String.Escape
.sh { color: #d01040 } // Literal.String.Heredoc
.si { color: #d01040 } // Literal.String.Interpol
.sx { color: #d01040 } // Literal.String.Other
.sr { color: #009926 } // Literal.String.Regex
.s1 { color: #d01040 } // Literal.String.Single
.ss { color: #990073 } // Literal.String.Symbol
.na { color: #008080 } // Name.Attribute
.nb { color: #0086B3 } // Name.Builtin
.nc { color: #445588; font-weight: bold } // Name.Class
.no { color: #008080 } // Name.Constant
.nd { color: #3c5d5d; font-weight: bold } // Name.Decorator
.ni { color: #800080 } // Name.Entity
.ne { color: #990000; font-weight: bold } // Name.Exception
.nf { color: #990000; font-weight: bold } // Name.Function
.nl { color: #990000; font-weight: bold } // Name.Label
.nn { color: #555555 } // Name.Namespace
.nt { color: #000080 } // Name.Tag
.bp { color: #999999 } // Name.Builtin.Pseudo
.nv { color: #008080 } // Name.Variable
.vc { color: #008080 } // Name.Variable.Class
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.ow { color: #000000; font-weight: bold } // Operator.Word
.w { color: #bbbbbb } // Text.Whitespace
/*
GitHub Gists
========================================================================== */
//Remove extra padding
.gist table {
margin-top:0px;
}
//Remove hover effect
.gist tbody
{
tr:hover > td, tr:hover > th {
background-color:transparent;
};
background-color:white; //Background color white
}

45
_sass/_tiles.scss

@ -0,0 +1,45 @@
/* ==========================================================================
Tiles
========================================================================== */
.tile {
@include outer-container;
margin-bottom: $gutter;
@include media($micro) {
@include fill-parent;
}
@include media(new-breakpoint(min-width em(480) 12)) {
@include span-columns(3);
@include omega(4n);
}
.entry-date {
@include font-size(16,no);
color: lighten($text-color,25);
}
.post-title {
@include font-size(18,no);
}
.post-excerpt {
@include font-size(16);
}
.post-teaser {
position: relative;
display: block;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($base-color,0);
pointer-events: none;
@include transition(background 0.3s);
}
&:hover {
&:after {
background: rgba($base-color,0.2);
}
}
}
}

71
_sass/_toc.scss

@ -0,0 +1,71 @@
/* ==========================================================================
Table of contents
========================================================================== */
/*
Page table of contents
========================================================================== */
.toc {
margin-left: -1 * $gutter;
margin-right: -1 * $gutter;
@include media($medium) {
margin-left: 0;
margin-right: 0;
}
font-family: $alt-font;
ul {
margin-top: $gutter;
margin-bottom: $gutter;
border: 1px solid $border-color;
@include media($medium) {
border-radius: $border-radius;
}
}
li {
@include font-size(14,no,16);
@include media($small) {
@include font-size(16,no,18);
}
border-bottom: 1px solid $border-color;
> a {
display: block;
padding: 7px 1.618rem;
color: $text-color;
border-left: 2px solid transparent;
&:hover,
&:focus {
background: mix($white, $border-color, 5%);
}
}
}
h6 {
margin: 0;
padding: 7px 1.618rem;
background: $table-stripe-color;
&:hover {
background: mix($white, $border-color, 5%);
}
a {
color: $text-color;
}
}
}
/*
1/4 wide table of contents to be used as a sidebar (left aligned)
========================================================================== */
.toc-left {
@include span-columns(12);
@include media($medium) {
@include span-columns(4);
}
margin-left: 0;
ul {
margin-top: 0;
@include media($small) {
margin-bottom: 0.5 * $gutter;
}
}
}

110
_sass/_variables.scss

@ -0,0 +1,110 @@
/* ==========================================================================
SCSS Variables
========================================================================== */
/*
Typography variables
========================================================================== */
$base-font : Georgia,Times,"Times New Roman",serif;
$heading-font : "Helvetica Neue","Segoe UI",Arial,sans-serif;
$caption-font : $base-font;
$code-font : monospace;
$alt-font : $heading-font;
$doc-font-size : 16;
$doc-line-height : 24;
$border-radius : 3px;
/*
Color variables
========================================================================== */
$white : #fff;
$black : #000;
$body-color : #ebebeb;
$text-color : #313130;
$caption-color : mix($white, $text-color, 25%);
$base-color : #343434;
$comp-color : complement($base-color);
$border-color : #ddd;
$link-color : #222;
$primary-color : $black;
$success-color : #2ecc71;
$warning-color : #f1c40f;
$danger-color : #e74c3c;
$info-color : #3498db;
$table-border-color : $border-color;
$table-border : 1px solid $table-border-color;
$table-background : $body-color;
$table-header-color : lighten($table-background, 10);
$table-hover-color : darken($table-background, 2);
$table-stripe-color : darken($table-background, 4);
$table-stripe-color-hover : darken($table-stripe-color, 5);
$facebook-color : #3b5998;
$flickr-color : #ff0084;
$foursquare-color : #0cbadf;
$google-plus-color : #dd4b39;
$instagram-color : #4e433c;
$linkedin-color : #4875b4;
$pinterest-color : #cb2027;
$rss-color : #fa9b39;
$tumblr-color : #2c4762;
$twitter-color : #55acee;
$vimeo-color : #1ab7ea;
$youtube-color : #ff3333;
/*
Form variables
========================================================================== */
$form-border-color : $border-color;
$form-border-color-hover : darken($border-color, 10);
$form-border-color-focus : $primary-color;
$form-border-radius : $border-radius;
$form-box-shadow : inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
$form-box-shadow-focus : $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
$form-font-family : $base-font;
$form-font-size : $doc-font-size;
/*
Sliding menu navigation variables
========================================================================== */
$sliding-menu-border-color : $black;
$sliding-menu-background : $black;
$sliding-menu-color : $white;
$sliding-menu-background-hover : $black;
$sliding-menu-color-hover : $white;
$sliding-menu-border : 1px solid $sliding-menu-border-color;
$button-size : 30px;
$transition : 0.3s; // increase this to see the transformations in slow-motion
$sliding-menu-animation : all 500ms cubic-bezier(.86,.01,.77,.78);
/*
Badge variables
========================================================================== */
$badge-background : $primary-color;
$badge-dark-color : $black;
$badge-danger-color : $danger-color;
$badge-info-color : $info-color;
$badge-warning-color : $warning-color;
$badge-success-color : $success-color;
$badge-font-color : $white;
/*
Masthead variables
========================================================================== */
$masthead-height: $button-size * 2;

8
_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss

@ -0,0 +1,8 @@
//************************************************************************//
// These mixins/functions are deprecated
// They will be removed in the next MAJOR version release
//************************************************************************//
@mixin inline-block {
display: inline-block;
@warn "inline-block mixin is deprecated and will be removed in the next major version release";
}

78
_sass/vendor/bourbon/_bourbon.scss

@ -0,0 +1,78 @@
// Settings
@import "settings/prefixer";
@import "settings/px-to-em";
// Custom Helpers
@import "helpers/convert-units";
@import "helpers/gradient-positions-parser";
@import "helpers/is-num";
@import "helpers/linear-angle-parser";
@import "helpers/linear-gradient-parser";
@import "helpers/linear-positions-parser";
@import "helpers/linear-side-corner-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@import "helpers/radial-gradient-parser";
@import "helpers/render-gradients";
@import "helpers/shape-size-stripper";
@import "helpers/str-to-num";
// Custom Functions
@import "functions/assign";
@import "functions/color-lightness";
@import "functions/flex-grid";
@import "functions/golden-ratio";
@import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/px-to-em";
@import "functions/px-to-rem";
@import "functions/strip-units";
@import "functions/tint-shade";
@import "functions/transition-property-name";
@import "functions/unpack";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/backface-visibility";
@import "css3/background";
@import "css3/background-image";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-sizing";
@import "css3/calc";
@import "css3/columns";
@import "css3/filter";
@import "css3/flex-box";
@import "css3/font-face";
@import "css3/font-feature-settings";
@import "css3/hyphens";
@import "css3/hidpi-media-query";
@import "css3/image-rendering";
@import "css3/keyframes";
@import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
@import "css3/placeholder";
// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/directional-values";
@import "addons/ellipsis";
@import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/timing-functions";
@import "addons/triangle";
@import "addons/word-wrap";
// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";

374
_sass/vendor/bourbon/addons/_button.scss

@ -0,0 +1,374 @@
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
@if type-of($style) == string and type-of($base-color) == color {
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == string and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: #4294f0;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == color {
$base-color: $style;
$style: simple;
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: $style;
$style: simple;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == number {
$padding: $base-color;
$text-size: $style;
$base-color: #4294f0;
$style: simple;
@if $padding == #4294f0 {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
// Selector Style Button
//************************************************************************//
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
// Grayscale button
@if $type == simple and $b-color == grayscale($b-color) {
@include simple($b-color, true, $t-size, $pad);
}
@if $type == shiny and $b-color == grayscale($b-color) {
@include shiny($b-color, true, $t-size, $pad);
}
@if $type == pill and $b-color == grayscale($b-color) {
@include pill($b-color, true, $t-size, $pad);
}
@if $type == flat and $b-color == grayscale($b-color) {
@include flat($b-color, true, $t-size, $pad);
}
// Colored button
@if $type == simple {
@include simple($b-color, false, $t-size, $pad);
}
@else if $type == shiny {
@include shiny($b-color, false, $t-size, $pad);
}
@else if $type == pill {
@include pill($b-color, false, $t-size, $pad);
}
@else if $type == flat {
@include flat($b-color, false, $t-size, $pad);
}
}
// Simple Button
//************************************************************************//
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
}
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
@if $grayscale == true {
$border-active: grayscale($border-active);
$inset-shadow-active: grayscale($inset-shadow-active);
}
border: 1px solid $border-active;
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
}
}
// Shiny Button
//************************************************************************//
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$border-bottom: grayscale($border-bottom);
$fourth-stop: grayscale($fourth-stop);
$inset-shadow: grayscale($inset-shadow);
$second-stop: grayscale($second-stop);
$text-shadow: grayscale($text-shadow);
$third-stop: grayscale($third-stop);
}
border: 1px solid $border;
border-bottom: 1px solid $border-bottom;
border-radius: 5px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
@if $grayscale == true {
$first-stop-hover: grayscale($first-stop-hover);
$second-stop-hover: grayscale($second-stop-hover);
$third-stop-hover: grayscale($third-stop-hover);
$fourth-stop-hover: grayscale($fourth-stop-hover);
}
cursor: pointer;
@include linear-gradient(top, $first-stop-hover 0%,
$second-stop-hover 50%,
$third-stop-hover 50%,
$fourth-stop-hover 100%);
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
$inset-shadow-active: grayscale($inset-shadow-active);
}
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
}
}
// Pill Button
//************************************************************************//
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
border-radius: 16px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
$text-shadow-hover: grayscale($text-shadow-hover);
}
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
text-shadow: 0 -1px 1px $text-shadow-hover;
background-clip: padding-box;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
@if $grayscale == true {
$active-color: grayscale($active-color);
$border-active: grayscale($border-active);
$border-bottom-active: grayscale($border-bottom-active);
$inset-shadow-active: grayscale($inset-shadow-active);
$text-shadow-active: grayscale($text-shadow-active);
}
background: $active-color;
border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active;
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
// Flat Button
//************************************************************************//
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
}
background-color: $base-color;
border-radius: 3px;
border: none;
color: $color;
display: inline-block;
font-size: inherit;
font-weight: bold;
padding: 7px 18px;
text-decoration: none;
background-clip: padding-box;
&:hover:not(:disabled){
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
}
background-color: $base-color-hover;
cursor: pointer;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
@if $grayscale == true {
$base-color-active: grayscale($base-color-active);
}
background-color: $base-color-active;
cursor: pointer;
}
}

23
_sass/vendor/bourbon/addons/_clearfix.scss

@ -0,0 +1,23 @@
// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
//
// Example usage:
//
// // Contain all floats within .wrapper
// .wrapper {
// @include clearfix;
// .content,
// .sidebar {
// float : left;
// }
// }
@mixin clearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
// Acknowledgements
// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)

111
_sass/vendor/bourbon/addons/_directional-values.scss

@ -0,0 +1,111 @@
// directional-property mixins are shorthands
// for writing properties like the following
//
// @include margin(null 0 10px);
// ------
// margin-right: 0;
// margin-bottom: 10px;
// margin-left: 0;
//
// - or -
//
// @include border-style(dotted null);
// ------
// border-top-style: dotted;
// border-bottom-style: dotted;
//
// ------
//
// Note: You can also use false instead of null
@function collapse-directionals($vals) {
$output: null;
$A: nth( $vals, 1 );
$B: if( length($vals) < 2, $A, nth($vals, 2));
$C: if( length($vals) < 3, $A, nth($vals, 3));
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
@if $A == 0 { $A: 0 }
@if $B == 0 { $B: 0 }
@if $C == 0 { $C: 0 }
@if $D == 0 { $D: 0 }
@if $A == $B and $A == $C and $A == $D { $output: $A }
@else if $A == $C and $B == $D { $output: $A $B }
@else if $B == $D { $output: $A $B $C }
@else { $output: $A $B $C $D }
@return $output;
}
@function contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}
@mixin directional-property($pre, $suf, $vals) {
// Property Names
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
@if length($vals) == 1 {
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
} @else {
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
}
// prop: top/bottom right/left
@if length($vals) == 2 {
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right/left bottom
} @else if length($vals) == 3 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right bottom left
} @else if length($vals) == 4 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
}
// prop: top/right/bottom/left
} @else {
#{$all}: $vals;
}
}
@mixin margin($vals...) {
@include directional-property(margin, false, $vals...);
}
@mixin padding($vals...) {
@include directional-property(padding, false, $vals...);
}
@mixin border-style($vals...) {
@include directional-property(border, style, $vals...);
}
@mixin border-color($vals...) {
@include directional-property(border, color, $vals...);
}
@mixin border-width($vals...) {
@include directional-property(border, width, $vals...);
}

7
_sass/vendor/bourbon/addons/_ellipsis.scss

@ -0,0 +1,7 @@
@mixin ellipsis($width: 100%) {
display: inline-block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

5
_sass/vendor/bourbon/addons/_font-family.scss

@ -0,0 +1,5 @@
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$verdana: Verdana, Geneva, sans-serif;

10
_sass/vendor/bourbon/addons/_hide-text.scss

@ -0,0 +1,10 @@
@mixin hide-text {
overflow: hidden;
&:before {
content: "";
display: block;
width: 0;
height: 100%;
}
}

86
_sass/vendor/bourbon/addons/_html5-input-types.scss

@ -0,0 +1,86 @@
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
// Bare inputs
//************************************************************************//
$all-text-inputs: assign-inputs($inputs-list);
// Hover Pseudo-class
//************************************************************************//
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
// You must use interpolation on the variable:
// #{$all-text-inputs}
// #{$all-text-inputs-hover}
// #{$all-text-inputs-focus}
// Example
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
//************************************************************************//
// Generate a variable ($all-button-inputs) with a list of all html5
// input types that have a button-based input, excluding button.
//************************************************************************//
$inputs-button-list: 'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
// Bare inputs
//************************************************************************//
$all-button-inputs: assign-inputs($inputs-button-list);
// Hover Pseudo-class
//************************************************************************//
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
// Active Pseudo-class
//************************************************************************//
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
// You must use interpolation on the variable:
// #{$all-button-inputs}
// #{$all-button-inputs-hover}
// #{$all-button-inputs-focus}
// #{$all-button-inputs-active}
// Example
//************************************************************************//
// #{$all-button-inputs}, button {
// border: 1px solid red;
// }

32
_sass/vendor/bourbon/addons/_position.scss

@ -0,0 +1,32 @@
@mixin position ($position: relative, $coordinates: null null null null) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$coordinates: unpack($coordinates);
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
position: $position;
@if ($top and $top == auto) or (type-of($top) == number) {
top: $top;
}
@if ($right and $right == auto) or (type-of($right) == number) {
right: $right;
}
@if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
bottom: $bottom;
}
@if ($left and $left == auto) or (type-of($left) == number) {
left: $left;
}
}

45
_sass/vendor/bourbon/addons/_prefixer.scss

@ -0,0 +1,45 @@
//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
// Variables located in /settings/_prefixer.scss
@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
}
@else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
}
@else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
}
@else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
}
@else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin disable-prefix-for-all() {
$prefix-for-webkit: false !global;
$prefix-for-mozilla: false !global;
$prefix-for-microsoft: false !global;
$prefix-for-opera: false !global;
$prefix-for-spec: false !global;
}

31
_sass/vendor/bourbon/addons/_retina-image.scss

@ -0,0 +1,31 @@
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}.#{$extension}");
}
@include hidpi {
@if $asset-pipeline {
@if $retina-filename {
background-image: image-url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
@else {
@if $retina-filename {
background-image: url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
background-size: $background-size;
}
}

16
_sass/vendor/bourbon/addons/_size.scss

@ -0,0 +1,16 @@
@mixin size($size) {
$height: nth($size, 1);
$width: $height;
@if length($size) > 1 {
$height: nth($size, 2);
}
@if $height == auto or (type-of($height) == number and not unitless($height)) {
height: $height;
}
@if $width == auto or (type-of($height) == number and not unitless($width)) {
width: $width;
}
}

32
_sass/vendor/bourbon/addons/_timing-functions.scss

@ -0,0 +1,32 @@
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);

83
_sass/vendor/bourbon/addons/_triangle.scss

@ -0,0 +1,83 @@
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
$width: nth($size, 1);
$height: nth($size, length($size));
$foreground-color: nth($color, 1);
$background-color: if(length($color) == 2, nth($color, 2), transparent);
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
$width: $width / 2;
$height: if(length($size) > 1, $height, $height/2);
@if $direction == up {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-bottom: $height solid $foreground-color;
} @else if $direction == right {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
} @else if $direction == down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
} @else if $direction == left {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
}
}
@else if ($direction == up-right) or ($direction == up-left) {
border-top: $height solid $foreground-color;
@if $direction == up-right {
border-left: $width solid $background-color;
} @else if $direction == up-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $height solid $foreground-color;
@if $direction == down-right {
border-left: $width solid $background-color;
} @else if $direction == down-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == inset-up) {
border-width: $height $width;
border-style: solid;
border-color: $background-color $background-color $foreground-color;
}
@else if ($direction == inset-down) {
border-width: $height $width;
border-style: solid;
border-color: $foreground-color $background-color $background-color;
}
@else if ($direction == inset-right) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $background-color $background-color $foreground-color;
}
@else if ($direction == inset-left) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $foreground-color $background-color $background-color;
}
}

8
_sass/vendor/bourbon/addons/_word-wrap.scss

@ -0,0 +1,8 @@
@mixin word-wrap($wrap: break-word) {
word-wrap: $wrap;
@if $wrap == break-word {
overflow-wrap: break-word;
word-break: break-all;
}
}

52
_sass/vendor/bourbon/css3/_animation.scss

@ -0,0 +1,52 @@
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
@mixin animation ($animations...) {
@include prefixer(animation, $animations, webkit moz spec);
}
// Individual Animation Properties
@mixin animation-name ($names...) {
@include prefixer(animation-name, $names, webkit moz spec);
}
@mixin animation-duration ($times...) {
@include prefixer(animation-duration, $times, webkit moz spec);
}
@mixin animation-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
@include prefixer(animation-timing-function, $motions, webkit moz spec);
}
@mixin animation-iteration-count ($values...) {
// infinite | <number>
@include prefixer(animation-iteration-count, $values, webkit moz spec);
}
@mixin animation-direction ($directions...) {
// normal | alternate
@include prefixer(animation-direction, $directions, webkit moz spec);
}
@mixin animation-play-state ($states...) {
// running | paused
@include prefixer(animation-play-state, $states, webkit moz spec);
}
@mixin animation-delay ($times...) {
@include prefixer(animation-delay, $times, webkit moz spec);
}
@mixin animation-fill-mode ($modes...) {
// none | forwards | backwards | both
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
}

3
_sass/vendor/bourbon/css3/_appearance.scss

@ -0,0 +1,3 @@
@mixin appearance ($value) {
@include prefixer(appearance, $value, webkit moz ms o spec);
}

6
_sass/vendor/bourbon/css3/_backface-visibility.scss

@ -0,0 +1,6 @@
//************************************************************************//
// Backface-visibility mixin
//************************************************************************//
@mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec);
}

42
_sass/vendor/bourbon/css3/_background-image.scss

@ -0,0 +1,42 @@
//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//
@mixin background-image($images...) {
$webkit-images: ();
$spec-images: ();
@each $image in $images {
$webkit-image: ();
$spec-image: ();
@if (type-of($image) == string) {
$url-str: str-slice($image, 0, 3);
$gradient-type: str-slice($image, 0, 6);
@if $url-str == "url" {
$webkit-image: $image;
$spec-image: $image;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
}
$webkit-images: append($webkit-images, $webkit-image, comma);
$spec-images: append($spec-images, $spec-image, comma);
}
background-image: $webkit-images;
background-image: $spec-images;
}

55
_sass/vendor/bourbon/css3/_background.scss

@ -0,0 +1,55 @@
//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//
@mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
@each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
@if $background-type == string or list {
$background-str: if($background-type == list, nth($background, 1), $background);
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
@if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
}
background: $webkit-backgrounds;
background: $spec-backgrounds;
}

59
_sass/vendor/bourbon/css3/_border-image.scss

@ -0,0 +1,59 @@
@mixin border-image($borders...) {
$webkit-borders: ();
$spec-borders: ();
@each $border in $borders {
$webkit-border: ();
$spec-border: ();
$border-type: type-of($border);
@if $border-type == string or list {
$border-str: if($border-type == list, nth($border, 1), $border);
$url-str: str-slice($border-str, 0, 3);
$gradient-type: str-slice($border-str, 0, 6);
@if $url-str == "url" {
$webkit-border: $border;
$spec-border: $border;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
$webkit-borders: append($webkit-borders, $webkit-border, comma);
$spec-borders: append($spec-borders, $spec-border, comma);
}
-webkit-border-image: $webkit-borders;
border-image: $spec-borders;
border-style: solid;
}
//Examples:
// @include border-image(url("image.png"));
// @include border-image(url("image.png") 20 stretch);
// @include border-image(linear-gradient(45deg, orange, yellow));
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));

22
_sass/vendor/bourbon/css3/_border-radius.scss

@ -0,0 +1,22 @@
//************************************************************************//
// Shorthand Border-radius mixins
//************************************************************************//
@mixin border-top-radius($radii) {
@include prefixer(border-top-left-radius, $radii, spec);
@include prefixer(border-top-right-radius, $radii, spec);
}
@mixin border-bottom-radius($radii) {
@include prefixer(border-bottom-left-radius, $radii, spec);
@include prefixer(border-bottom-right-radius, $radii, spec);
}
@mixin border-left-radius($radii) {
@include prefixer(border-top-left-radius, $radii, spec);
@include prefixer(border-bottom-left-radius, $radii, spec);
}
@mixin border-right-radius($radii) {
@include prefixer(border-top-right-radius, $radii, spec);
@include prefixer(border-bottom-right-radius, $radii, spec);
}

4
_sass/vendor/bourbon/css3/_box-sizing.scss

@ -0,0 +1,4 @@
@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box, webkit moz spec);
}

4
_sass/vendor/bourbon/css3/_calc.scss

@ -0,0 +1,4 @@
@mixin calc($property, $value) {
#{$property}: -webkit-calc(#{$value});
#{$property}: calc(#{$value});
}

47
_sass/vendor/bourbon/css3/_columns.scss

@ -0,0 +1,47 @@
@mixin columns($arg: auto) {
// <column-count> || <column-width>
@include prefixer(columns, $arg, webkit moz spec);
}
@mixin column-count($int: auto) {
// auto || integer
@include prefixer(column-count, $int, webkit moz spec);
}
@mixin column-gap($length: normal) {
// normal || length
@include prefixer(column-gap, $length, webkit moz spec);
}
@mixin column-fill($arg: auto) {
// auto || length
@include prefixer(column-fill, $arg, webkit moz spec);
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg, webkit moz spec);
}
@mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color, webkit moz spec);
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style, webkit moz spec);
}
@mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width, webkit moz spec);
}
@mixin column-span($arg: none) {
// none || all
@include prefixer(column-span, $arg, webkit moz spec);
}
@mixin column-width($length: auto) {
// auto || length
@include prefixer(column-width, $length, webkit moz spec);
}

5
_sass/vendor/bourbon/css3/_filter.scss

@ -0,0 +1,5 @@
@mixin filter($function: none) {
// <filter-function> [<filter-function]* | none
@include prefixer(filter, $function, webkit spec);
}

321
_sass/vendor/bourbon/css3/_flex-box.scss

@ -0,0 +1,321 @@
// CSS3 Flexible Box Model and property defaults
// Custom shorthand notation for flexbox
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
@include display-box;
@include box-orient($orient);
@include box-pack($pack);
@include box-align($align);
}
@mixin display-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox; // IE 10
display: box;
}
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient, webkit moz spec);
}
@mixin box-pack($pack: start) {
// start|end|center|justify
@include prefixer(box-pack, $pack, webkit moz spec);
-ms-flex-pack: $pack; // IE 10
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
@include prefixer(box-align, $align, webkit moz spec);
-ms-flex-align: $align; // IE 10
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
@include prefixer(box-direction, $direction, webkit moz spec);
-ms-flex-direction: $direction; // IE 10
}
@mixin box-lines($lines: single) {
// single|multiple
@include prefixer(box-lines, $lines, webkit moz spec);
}
@mixin box-ordinal-group($int: 1) {
@include prefixer(box-ordinal-group, $int, webkit moz spec);
-ms-flex-order: $int; // IE 10
}
@mixin box-flex($value: 0.0) {
@include prefixer(box-flex, $value, webkit moz spec);
-ms-flex: $value; // IE 10
}
@mixin box-flex-group($int: 1) {
@include prefixer(box-flex-group, $int, webkit moz spec);
}
// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.
// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
@mixin display($value) {
// flex | inline-flex
@if $value == "flex" {
// 2009
display: -webkit-box;
display: -moz-box;
display: box;
// 2012
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // 2011 (IE 10)
display: flex;
}
@elseif $value == "inline-flex" {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@else {
display: $value;
}
}
// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
@mixin flex($value) {
// Grab flex-grow for older browsers.
$flex-grow: nth($value, 1);
// 2009
@include prefixer(box-flex, $flex-grow, webkit moz spec);
// 2011 (IE 10), 2012
@include prefixer(flex, $value, webkit moz ms spec);
}
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
// - box-direction (normal | reverse)
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
@mixin flex-direction($value: row) {
// Alt values.
$value-2009: $value;
$value-2011: $value;
$direction: "normal";
@if $value == row {
$value-2009: horizontal;
}
@elseif $value == "row-reverse" {
$value-2009: horizontal;
$direction: reverse;
}
@elseif $value == column {
$value-2009: vertical;
}
@elseif $value == "column-reverse" {
$value-2009: vertical;
$direction: reverse;
}
// 2009
@include prefixer(box-orient, $value-2009, webkit moz spec);
@if $direction == "reverse" {
@include prefixer(box-direction, $direction, webkit moz spec);
}
// 2012
@include prefixer(flex-direction, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-direction: $value;
}
// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
@mixin flex-wrap($value: nowrap) {
// Alt values.
$alt-value: $value;
@if $value == nowrap {
$alt-value: single;
}
@elseif $value == wrap {
$alt-value: multiple;
}
@elseif $value == "wrap-reverse" {
$alt-value: multiple;
}
@include prefixer(box-lines, $alt-value, webkit moz spec);
@include prefixer(flex-wrap, $value, webkit moz ms spec);
}
// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
@mixin flex-flow($value) {
@include prefixer(flex-flow, $value, webkit moz spec);
}
// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
@mixin order($int: 0) {
// 2009
@include prefixer(box-ordinal-group, $int, webkit moz spec);
// 2012
@include prefixer(order, $int, webkit moz spec);
// 2011 (IE 10)
-ms-flex-order: $int;
}
// 2012 - flex-grow (number)
@mixin flex-grow($number: 0) {
@include prefixer(flex-grow, $number, webkit moz spec);
-ms-flex-positive: $number;
}
// 2012 - flex-shrink (number)
@mixin flex-shrink($number: 1) {
@include prefixer(flex-shrink, $number, webkit moz spec);
-ms-flex-negative: $number;
}
// 2012 - flex-basis (number)
@mixin flex-basis($width: auto) {
@include prefixer(flex-basis, $width, webkit moz spec);
-ms-flex-preferred-size: $width;
}
// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
@mixin justify-content ($value: flex-start) {
// Alt values.
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
}
@elseif $value == "flex-end" {
$alt-value: end;
}
@elseif $value == "space-between" {
$alt-value: justify;
}
@elseif $value == "space-around" {
$alt-value: center;
}
// 2009
@include prefixer(box-pack, $alt-value, webkit moz spec);
// 2012
@include prefixer(justify-content, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-pack: $alt-value;
}
// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
@mixin align-items($value: stretch) {
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
}
@elseif $value == "flex-end" {
$alt-value: end;
}
// 2009
@include prefixer(box-align, $alt-value, webkit moz spec);
// 2012
@include prefixer(align-items, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-align: $alt-value;
}
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
@mixin align-self($value: auto) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
}
@elseif $value == "flex-end" {
$value-2011: end;
}
// 2012
@include prefixer(align-self, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-item-align: $value-2011;
}
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
@mixin align-content($value: stretch) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
}
@elseif $value == "flex-end" {
$value-2011: end;
}
@elseif $value == "space-between" {
$value-2011: justify;
}
@elseif $value == "space-around" {
$value-2011: distribute;
}
// 2012
@include prefixer(align-content, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-line-pack: $value-2011;
}

23
_sass/vendor/bourbon/css3/_font-face.scss

@ -0,0 +1,23 @@
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
@font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
@if $asset-pipeline == true {
src: font-url('#{$file-path}.eot');
src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
font-url('#{$file-path}.woff') format('woff'),
font-url('#{$file-path}.ttf') format('truetype'),
font-url('#{$file-path}.svg##{$font-family}') format('svg');
} @else {
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
}

10
_sass/vendor/bourbon/css3/_font-feature-settings.scss

@ -0,0 +1,10 @@
// Font feature settings mixin and property default.
// Examples: @include font-feature-settings("liga");
// @include font-feature-settings("lnum" false);
// @include font-feature-settings("pnum" 1, "kern" 0);
// @include font-feature-settings("ss01", "ss02");
@mixin font-feature-settings($settings...) {
@if length($settings) == 0 { $settings: none; }
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
}

10
_sass/vendor/bourbon/css3/_hidpi-media-query.scss

@ -0,0 +1,10 @@
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
@mixin hidpi($ratio: 1.3) {
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: #{round($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
@content;
}
}

4
_sass/vendor/bourbon/css3/_hyphens.scss

@ -0,0 +1,4 @@
@mixin hyphens($hyphenation: none) {
// none | manual | auto
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
}

14
_sass/vendor/bourbon/css3/_image-rendering.scss

@ -0,0 +1,14 @@
@mixin image-rendering ($mode:auto) {
@if ($mode == crisp-edges) {
-ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@else {
image-rendering: $mode;
}
}

35
_sass/vendor/bourbon/css3/_keyframes.scss

@ -0,0 +1,35 @@
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name) {
$original-prefix-for-webkit: $prefix-for-webkit;
$original-prefix-for-mozilla: $prefix-for-mozilla;
$original-prefix-for-microsoft: $prefix-for-microsoft;
$original-prefix-for-opera: $prefix-for-opera;
$original-prefix-for-spec: $prefix-for-spec;
@if $original-prefix-for-webkit {
@include disable-prefix-for-all();
$prefix-for-webkit: true !global;
@-webkit-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-mozilla {
@include disable-prefix-for-all();
$prefix-for-mozilla: true !global;
@-moz-keyframes #{$name} {
@content;
}
}
$prefix-for-webkit: $original-prefix-for-webkit !global;
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
$prefix-for-opera: $original-prefix-for-opera !global;
$prefix-for-spec: $original-prefix-for-spec !global;
@if $original-prefix-for-spec {
@keyframes #{$name} {
@content;
}
}
}

38
_sass/vendor/bourbon/css3/_linear-gradient.scss

@ -0,0 +1,38 @@
@mixin linear-gradient($pos, $G1, $G2: null,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}

8
_sass/vendor/bourbon/css3/_perspective.scss

@ -0,0 +1,8 @@
@mixin perspective($depth: none) {
// none | <length>
@include prefixer(perspective, $depth, webkit moz spec);
}
@mixin perspective-origin($value: 50% 50%) {
@include prefixer(perspective-origin, $value, webkit moz spec);
}

8
_sass/vendor/bourbon/css3/_placeholder.scss

@ -0,0 +1,8 @@
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}

39
_sass/vendor/bourbon/css3/_radial-gradient.scss

@ -0,0 +1,39 @@
// Requires Sass 3.1+
@mixin radial-gradient($G1, $G2,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
$pos: null,
$shape-size: null,
$fallback: null) {
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
$G1: nth($data, 1);
$G2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
// Strip deprecated cover/contain for spec
$shape-size-spec: _shape-size-stripper($shape-size);
// Set $G1 as the default fallback color
$first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
// Add Commas and spaces
$shape-size: if($shape-size, '#{$shape-size}, ', null);
$pos: if($pos, '#{$pos}, ', null);
$pos-spec: if($pos, 'at #{$pos}', null);
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
background-color: $fallback-color;
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
}

15
_sass/vendor/bourbon/css3/_transform.scss

@ -0,0 +1,15 @@
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
}
@mixin transform-style ($style: flat) {
@include prefixer(transform-style, $style, webkit moz ms o spec);
}

77
_sass/vendor/bourbon/css3/_transition.scss

@ -0,0 +1,77 @@
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);
@mixin transition ($properties...) {
// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
$moz: ();
$spec: ();
// Create lists for vendor-prefixed transform
@each $list in $properties {
@if nth($list, 1) == "transform" {
$needs-prefixes: true;
$list1: -webkit-transform;
$list2: -moz-transform;
$list3: ();
@each $var in $list {
$list3: join($list3, $var);
@if $var != "transform" {
$list1: join($list1, $var);
$list2: join($list2, $var);
}
}
$webkit: append($webkit, $list1);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
}
// Create lists for non-prefixed transition properties
@else {
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
}
}
@if $needs-prefixes {
-webkit-transition: $webkit;
-moz-transition: $moz;
transition: $spec;
}
@else {
@if length($properties) >= 1 {
@include prefixer(transition, $properties, webkit moz spec);
}
@else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec);
}
}
}
@mixin transition-property ($properties...) {
-webkit-transition-property: transition-property-names($properties, 'webkit');
-moz-transition-property: transition-property-names($properties, 'moz');
transition-property: transition-property-names($properties, false);
}
@mixin transition-duration ($times...) {
@include prefixer(transition-duration, $times, webkit moz spec);
}
@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, webkit moz spec);
}
@mixin transition-delay ($times...) {
@include prefixer(transition-delay, $times, webkit moz spec);
}

3
_sass/vendor/bourbon/css3/_user-select.scss

@ -0,0 +1,3 @@
@mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit moz ms spec);
}

11
_sass/vendor/bourbon/functions/_assign.scss

@ -0,0 +1,11 @@
@function assign-inputs($inputs, $pseudo: null) {
$list : ();
@each $input in $inputs {
$input: unquote($input);
$input: if($pseudo, $input + ":" + $pseudo, $input);
$list: append($list, $input, comma);
}
@return $list;
}

13
_sass/vendor/bourbon/functions/_color-lightness.scss

@ -0,0 +1,13 @@
// Programatically determines whether a color is light or dark
// Returns a boolean
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
@function is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1.0));
$-local-green: green(rgba($hex-color, 1.0));
$-local-blue: blue(rgba($hex-color, 1.0));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > .6;
}

39
_sass/vendor/bourbon/functions/_flex-grid.scss

@ -0,0 +1,39 @@
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
//
// The calculation presumes that your column structure will be missing the last gutter:
//
// -- column -- gutter -- column -- gutter -- column
//
// $fg-column: 60px; // Column Width
// $fg-gutter: 25px; // Gutter Width
// $fg-max-columns: 12; // Total Columns For Main Container
//
// div {
// width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
//
// p {
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// float: left;
// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
// }
//
// blockquote {
// float: left;
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// }
// }

3
_sass/vendor/bourbon/functions/_golden-ratio.scss

@ -0,0 +1,3 @@
@function golden-ratio($value, $increment) {
@return modular-scale($value, $increment, $golden)
}

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save