push w simple theme

This commit is contained in:
Andrew Miller 2017-03-07 10:28:16 -06:00
parent 9cc677c2f7
commit 4af0b309c1
363 changed files with 30787 additions and 6433 deletions

View File

@ -1,51 +1,59 @@
# Site settings
title: Zcash Foundation
email: socrates1024@gmail.com
url: https://zcashfoundation.github.io/
description: "Zcash foundation"
meta_author: Andrew Miller
# Site wide configuration
# Google webmaster tools
google_verify:
title: Site Title
locale: en_US
description: Describe your website here.
logo: site-logo.png
search: true
url: http://localhost:4000
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Jekyll configuration
# Contact form:
# - static : pass through formspree.io to validate email sending
# - disqus : replace contact form by disqus thread
# - comment the line below if you want to stick with the default PHP contact form
contact: static
permalink: /:categories/:title/
markdown: kramdown
highlighter: rouge
sass:
sass_dir: _sass
style: compressed
gems:
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
# Color settings (hex-codes without the leading hash-tag)
color:
primary: 18bc9c #80B3FF
primary-rgb: "24,288,156" #"128,179,255"
secondary: 2c3e50 #FD6E8A
secondary-dark: 233140 #A2122F
kramdown:
input: GFM
auto_ids: true
footnote_nr: 1
entity_output: as_char
toc_levels: 1..2
enable_coderay: false
# Footer settings
footer:
copyright: Dr. Henry Jekyll
location: Location
social: Around the Web
credits: Credits
mathjax: true
# Social networks usernames (many more available: google-plus, flickr, dribbble, pinterest, instagram, tumblr, linkedin, etc.)
social:
- title: twitter
url: http://twitter.com/ZcashFoundation
- title: github
url: http://github.com/ZcashFoundation
include: [".htaccess"]
exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", ".less", "*.sublime-project", "*.sublime-workspace", "test", "spec", "Gruntfile.js", "package.json", "node_modules", "Gemfile", "Gemfile.lock", "LICENSE", "README.md", "vendor"]
# Postal address (add as many lines as necessary)
#address:
# - line: 3481 Melrose Place
# - line: Beverly Hills, CA 90210
# Credits content
credits: 'Freelancer is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.'
# Build settings
markdown: kramdown
permalink: pretty
# Site owner
owner:
name: Your Name
avatar: bio-photo.jpg
email: you@email.com
disqus-shortname:
twitter: #username
facebook: #username
github: #username
stackexchange: #http://stackoverflow.com/users/123456/username
linkedin: #username
instagram: #username
flickr: #username
tumblr: #username
pinterest: #username
weibo: #userid
google:
plus: #username
analytics:
verify:
ad-client:
ad-slot:
bing-verify:

20
_data/authors.yml Normal file
View File

@ -0,0 +1,20 @@
# Authors
billy_rick:
name: Billy Rick
web: http://thewhip.com
email: billy@rick.com
bio: "What do you want, jewels? I am a very extravagant man."
avatar: bio-photo-2.jpg
twitter: extravagantman
google:
plus: BillyRick
cornelius_fiddlebone:
name: Cornelius Fiddlebone
email: cornelius@thewhip.com
bio: "I ordered what?"
avatar: bio-photo.jpg
twitter: rhymeswithsackit
google:
plus: CorneliusFiddlebone

16
_data/navigation.yml Normal file
View File

@ -0,0 +1,16 @@
# Site navigation links
- title: About
url: /about/
- title: Articles
url: /articles/
- title: Blog
url: /blog/
- title: Theme Setup
url: /theme-setup/
- title: Search
url: /search/

View File

@ -1,24 +0,0 @@
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point! </p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>

11
_includes/ad-footer.html Normal file
View File

@ -0,0 +1,11 @@
<div class="google-ads" style="margin:10px 0;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 320x50 ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="{{ site.owner.google.ad-client }}"
data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><!-- /.google-ads -->

11
_includes/ad-sidebar.html Normal file
View File

@ -0,0 +1,11 @@
<div class="google-ads" style="margin-top:40px; text-align:center;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 160x600 ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="{{ site.owner.google.ad-client }}"
data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><!-- /.google-ads -->

View File

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

View File

@ -1,54 +0,0 @@
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

View File

@ -1,16 +0,0 @@
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div id="disqus_thread"></div><!-- /#disqus_thread -->
</div>
</div>
</div>
</section>

View File

@ -1,49 +0,0 @@
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form action="//formspree.io/you@email.com" method="POST" name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="_replyto" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div>
<input type="hidden" name="_subject" value="New submission!">
<input type="text" name="_gotcha" style="display:none" />
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

File diff suppressed because one or more lines are too long

View File

@ -1,456 +0,0 @@
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
p {
font-size: 20px;
}
p.small {
font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
outline: 0;
color: #{{ site.color.primary }};
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
hr.star-light,
hr.star-primary {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 5px;
text-align: center;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-light:after {
color: #fff;
background-color: #{{ site.color.primary }};
}
hr.star-primary {
border-color: #{{ site.color.secondary }};
}
hr.star-primary:after {
color: #{{ site.color.secondary }};
background-color: #fff;
}
.img-centered {
margin: 0 auto;
}
header {
text-align: center;
color: #fff;
background: #{{ site.color.primary }};
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header img {
display: block;
margin: 0 auto 20px;
}
header .intro-text .name {
display: block;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 2em;
font-weight: 700;
}
header .intro-text .skills {
font-size: 1.25em;
font-weight: 300;
}
@media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 100px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
@media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
section {
padding: 100px 0;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: #{{ site.color.primary }};
}
@media(max-width:767px) {
section {
padding: 75px 0;
}
section.first {
padding-top: 75px;
}
}
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#portfolio .portfolio-item .portfolio-link .caption {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba({{ site.color.primary-rgb }},.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media(min-width:767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.btn-outline {
margin-top: 15px;
border: solid 2px #fff;
font-size: 20px;
color: #fff;
background: 0 0;
transition: all .3s ease-in-out;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
border: solid 2px #fff;
color: #{{ site.color.primary }};
background: #fff;
}
.floating-label-form-group {
position: relative;
margin-bottom: 0;
padding-bottom: .5em;
border-bottom: 1px solid #eee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: 0 0;
box-shadow: none!important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease,opacity .3s ease;
-moz-transition: top .3s ease,opacity .3s ease;
-ms-transition: top .3s ease,opacity .3s ease;
transition: top .3s ease,opacity .3s ease;
}
.floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eee;
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #{{ site.color.primary }};
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eee;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #{{ site.color.secondary }};
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #{{ site.color.secondary-dark }};
}
.btn-social {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #fff;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 45px;
}
.btn:focus,
.btn:active,
.btn.active {
outline: 0;
}
.scroll-top {
z-index: 1049;
position: fixed;
right: 2%;
bottom: 2%;
width: 50px;
height: 50px;
}
.scroll-top .btn {
width: 50px;
height: 50px;
border-radius: 100%;
font-size: 20px;
line-height: 28px;
}
.scroll-top .btn:focus {
outline: 0;
}
.portfolio-modal .modal-content {
padding: 100px 0;
min-height: 100%;
border: 0;
border-radius: 0;
text-align: center;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.portfolio-modal .modal-content h2 {
margin: 0;
font-size: 3em;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .modal-content .item-details {
margin: 30px 0;
}
.portfolio-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: .3;
}
.portfolio-modal .close-modal .lr {
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
background-color: #{{ site.color.secondary }};
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
z-index: 1052;
width: 1px;
height: 75px;
background-color: #{{ site.color.secondary }};
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.navbar-nav>.active>a {
background-color: #{{ site.color.secondary-dark }} !important;
}
/* Fix modal mouse wheel issues */
/* https://github.com/twbs/bootstrap/issues/16297 */
.modal.fade.in {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}

View File

@ -0,0 +1,23 @@
{% if site.owner.disqus-shortname %}
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{{ site.owner.disqus-shortname }}'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'https://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
{% endif %}

View File

@ -0,0 +1 @@
&lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title | xml_escape }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;

View File

@ -1,47 +1,17 @@
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>{{ site.footer.location }}</h3>
<p>
{% for adress in site.address %}
{{ adress.line }} <br>
{% endfor %}
</p>
</div>
<div class="footer-col col-md-4">
<h3>{{ site.footer.social }}</h3>
<ul class="list-inline">
{% for network in site.social %}
<li>
<a href="{{ network.url }}" class="btn-social btn-outline"><i class="fa fa-fw fa-{{ network.title }}"></i></a>
</li>
{% endfor %}
</ul>
</div>
<div class="footer-col col-md-4">
<h3>{{ site.footer.credits }}</h3>
<p>{{ site.credits }}</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright &copy; {{ site.footer.copyright }} 20{{ site.time | date: '%y' }}
</div>
</div>
</div>
</div>
</footer>
{% if site.owner.google.ad-client and site.owner.google.ad-slot %}{% include ad-footer.html %}{% endif %}
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<span>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="https://mademistakes.com/work/so-simple-jekyll-theme/" rel="nofollow">So Simple Theme</a>.</span>
<div class="social-icons">
{% if site.owner.twitter %}<a href="https://twitter.com/{{ site.owner.twitter }}" title="{{ site.owner.name}} on Twitter" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>{% endif %}
{% if site.owner.facebook %}<a href="https://facebook.com/{{ site.owner.facebook }}" title="{{ site.owner.name}} on Facebook" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>{% endif %}
{% if site.owner.google.plus %}<a href="https://plus.google.com/+{{ site.owner.google.plus }}" title="{{ site.owner.name}} on Google+" target="_blank"><i class="fa fa-google-plus-square fa-2x"></i></a>{% endif %}
{% if site.owner.linkedin %}<a href="https://linkedin.com/in/{{ site.owner.linkedin }}" title="{{ site.owner.name}} on LinkedIn" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>{% endif %}
{% if site.owner.stackexchange %}<a href="{{ site.owner.stackexchange }}" title="{{ site.owner.name}} on StackExchange" target="_blank"><i class="fa fa-stack-exchange fa-2x"></i></a>{% endif %}
{% if site.owner.instagram %}<a href="https://instagram.com/{{ site.owner.instagram }}" title="{{ site.owner.name}} on Instagram" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>{% endif %}
{% if site.owner.flickr %}<a href="https://www.flickr.com/photos/{{ site.owner.flickr }}" title="{{ site.owner.name}} on Flickr" target="_blank"><i class="fa fa-flickr fa-2x"></i></a>{% endif %}
{% if site.owner.github %}<a href="https://github.com/{{ site.owner.github }}" title="{{ site.owner.name}} on Github" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>{% endif %}
{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" title="{{ site.owner.name}} on Tumblr" target="_blank"><i class="fa fa-tumblr-square fa-2x"></i></a>{% endif %}
{% if site.owner.pinterest %}<a href="https://www.pinterest.com/{{ site.owner.pinterest }}/" title="{{ site.owner.name}} on Pinterest" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>{% endif %}
{% if site.owner.weibo %}<a href="https://www.weibo.com/u/{{ site.owner.weibo }}/" title="{{ site.owner.name}} on Weibo" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>{% endif %}
<a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="fa fa-rss-square fa-2x"></i></a>
</div><!-- /.social-icons -->

View File

@ -1,31 +1,57 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="{{ site.description }}">
{% if site.meta_author %}<meta name="author" content="{{ site.meta_author }}">{% endif %}
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">
<meta charset="utf-8">
<title>{% if page.title %}{{ page.title }} &#8211; {% 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 %}
<!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="{{ "/style.css" }}">
{% include open-graph.html %}
<!-- Google verification -->
{% if site.google_verify %}<meta name="google-site-verification" content="{{ site.google_verify }}">{% endif %}
{% if site.owner.google.verify %}<!-- Webmaster Tools verfication -->
<meta name="google-site-verification" content="{{ site.owner.google.verify }}">{% endif %}
{% if site.owner.bing-verify %}<meta name="msvalidate.01" content="{{ site.owner.bing-verify }}">{% endif %}
<!-- Bing Verification -->
{% if site.bing_verify %}<meta name="msvalidate.01" content="{{ site.bing_verify }}">{% endif %}
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
<link rel="canonical" href="{{ canonical }}">
<link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
<!-- Custom Fonts -->
<link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" }}">
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- https://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- For all browsers -->
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
<!-- Webfonts -->
<script src="https://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9;source-code-pro:n4,n7;volkhov.js"></script>
<meta http-equiv="cleartype" content="on">
<!-- HTML5 Shiv and Media Query Support -->
<!--[if lt IE 9]>
<script src="{{ site.url }}/assets/js/vendor/html5shiv.min.js"></script>
<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
<![endif]-->
<!-- Modernizr -->
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
{% if site.mathjax == true %}
<!-- MathJax -->
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{% endif %}
<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="{{ site.url }}/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="{{ site.url }}/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.url }}/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.url }}/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.url }}/images/apple-touch-icon-144x144-precomposed.png">

View File

@ -1,14 +0,0 @@
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<span class="name">{{ site.title }}</span>
<hr class="star-light">
</div>
</div>
</div>
</div>
</header>

View File

@ -1,26 +0,0 @@
<!-- jQuery Version 1.11.0 -->
<script src="{{ "/js/jquery-1.11.0.js" }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ "/js/bootstrap.min.js" }}"></script>
<!-- Plugin JavaScript -->
<script src="{{ "/js/jquery.easing.min.js" }}"></script>
<script src="{{ "/js/classie.js" }}"></script>
<script src="{{ "/js/cbpAnimatedHeader.js" }}"></script>
<!-- Contact Form JavaScript -->
<script src="{{ "/js/jqBootstrapValidation.js" }}"></script>
{% if site.contact == "static" %}
<script src="{{ "/js/contact_me_static.js" }}"></script>
{% else %}
<script src="{{ "/js/contact_me.js" }}"></script>
{% endif %}
<!-- Custom Theme JavaScript -->
<script src="{{ "/js/freelancer.js" }}"></script>
{% if site.contact == "disqus" %}
<!-- Disqus Stuff -->
{% include js_disqus.html %}
{% endif %}

View File

@ -1,21 +0,0 @@
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{{ site.disqus_shortname }}'; // required: replace example with your forum 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.getElementById('disqus_thread').appendChild(dsq);
})();
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
document.getElementById('disqus_thread').appendChild(s);
}());
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

View File

@ -1,40 +0,0 @@
<!-- Portfolio Modals -->
{% for post in site.posts %}
<div class="portfolio-modal modal fade" id="portfolioModal-{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>{{ post.title }}</h2>
<hr class="star-primary">
<img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
<p>{{ post.description }}</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://startbootstrap.com">{{ post.client }}</a>
</strong>
</li>
<li>Date:
<strong><a href="http://startbootstrap.com">{{ post.project-date }}</a>
</strong>
</li>
<li>Service:
<strong><a href="http://startbootstrap.com">{{ post.category }}</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

View File

@ -1,35 +0,0 @@
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">{{ site.title }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

35
_includes/navigation.html Normal file
View File

@ -0,0 +1,35 @@
<div class="navigation-wrapper">
<nav role="navigation" id="site-nav" class="animated drop">
<ul>
{% 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>
</nav>
</div><!-- /.navigation-wrapper -->
{% include browser-upgrade.html %}
{% if page.image.feature %}<header class="masthead">
{% if site.logo != null %}
<div class="wrap">
<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInDown"></a>
</div>
{% endif %}
</header><!-- /.masthead -->
{% else %}<header class="masthead">
<div class="wrap">
{% if site.logo != null %}
<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInDown"></a>
{% endif %}
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
</div>
</header><!-- /.masthead -->{% endif %}
<div class="js-menu-screen menu-screen"></div>

19
_includes/open-graph.html Normal file
View File

@ -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 }}">

View File

@ -1,26 +0,0 @@
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Portfolio</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
{% for post in site.posts %}
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal-{{ post.modal-id }}" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/boardmembers/{{ post.img }}" class="img-responsive" alt="{{ post.alt }}">
</a>
</div>
{% endfor %}
</div>
</div>
</section>

25
_includes/scripts.html Normal file
View File

@ -0,0 +1,25 @@
<script type="text/javascript">
var BASE_URL = '{{ site.url }}';
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ site.url }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="{{ site.url }}/assets/js/scripts.min.js"></script>
{% if site.owner.google.analytics %}
<!-- Asynchronous Google Analytics snippet -->
<script>
var _gaq = _gaq || [];
var pluginUrl =
'https://www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', '{{ site.owner.google.analytics }}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{% endif %}

View File

@ -0,0 +1,10 @@
<span class="social-share-twitter">
<a href="https://twitter.com/intent/tweet?hashtags={{ page.tags | join: ',' | remove: ' ' }}&amp;text={{ page.title | escape | replace:' ','%20' }}&amp;url={{ site.url }}{{ page.url }}{% if author.twitter %}&amp;via={{ author.twitter }}{% endif %}" title="Share on Twitter" itemprop="Twitter"><i class="fa fa-twitter-square"></i> Tweet</a>
</span>
<span class="social-share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="fa fa-facebook-square"></i> Like</a>
</span>
<span class="social-share-googleplus">
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="fa fa-google-plus-square"></i> +1</a>
</span>
<!-- /.social-share -->

View File

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<body id="page-top" class="index">
{% include nav.html %}
{% include header.html %}
{% include about.html %}
{% include portfolio_grid.html %}
<!-- {% if site.contact == "static" %} -->
<!-- {% include contact_static.html %} -->
<!-- {% elsif site.contact == "disqus" %} -->
<!-- {% include contact_disqus.html %} -->
<!-- {% else %} -->
<!-- {% include contact.html %} -->
<!-- {% endif %} -->
{% include footer.html %}
{% include modals.html %}
{% include js.html %}
</body>
</html>

37
_layouts/page.html Normal file
View File

@ -0,0 +1,37 @@
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
{% include head.html %}
</head>
<body id="page">
{% include navigation.html %}
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
<div class="entry-wrapper">
<header class="entry-header">
<h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %}</h1>
</header>
<div class="entry-content">
{{ content }}
</div><!-- /.entry-content -->
</div><!-- /.entry-wrapper -->
</article>
</div><!-- /#main -->
<div class="footer-wrapper">
<footer role="contentinfo" class="entry-wrapper">
{% include footer.html %}
</footer>
</div><!-- /.footer-wrapper -->
{% include scripts.html %}
</body>
</html>

72
_layouts/post.html Normal file
View File

@ -0,0 +1,72 @@
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
{% include head.html %}
</head>
<body id="post">
{% include navigation.html %}
<div id="main" role="main">
<article class="hentry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Image credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
<div class="entry-wrapper">
<header class="entry-header">
<ul class="entry-tags">
{% for tag in page.tags %}<li><a href="{{ site.url }}/tags/#{{ tag }}" title="Pages tagged {{ tag }}">{{ tag }}</a></li>{% endfor %}
</ul>
{% if page.link %}
<h1 class="entry-title"><a href="{{ page.link }}">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %} <span class="link-arrow">&rarr;</span></a></h1>
{% else %}
<h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %}</h1>
{% endif %}
</header>
<footer class="entry-meta">
{% if page.author %}
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
{% endif %}
{% if author.avatar contains 'http' %}
<img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"></a>
{% elsif author.avatar %}
<img src="{{ site.url }}/images/{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"></a>
{% endif %}
<span class="author vcard">By <span class="fn">{{ author.name }}</span></span>
<span class="entry-date date published"><time datetime="{{ page.date | date_to_xmlschema }}"><i class="fa fa-calendar-o"></i> {{ page.date | date: "%B %d, %Y" }}</time></span>
{% if page.modified %}<span class="entry-date date modified"><time datetime="{{ page.modified }}"><i class="fa fa-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
{% if site.owner.disqus-shortname and page.comments or site.comments %}<span class="entry-comments"><i class="fa fa-comment-o"></i> <a href="#disqus_thread">Comment</a></span>{% endif %}
{% if page.share %}{% include social-share.html %}{% endif %}
{% if page.ads == true %}{% include ad-sidebar.html %}<!-- /.google-ads -->{% endif %}
</footer>
<div class="entry-content">
{{ content }}
{% if site.owner.disqus-shortname and page.comments or site.comments %}
<div id="disqus_thread"></div><!-- /#disqus_thread -->
{% include disqus-comments.html %}
{% endif %}
</div><!-- /.entry-content -->
</div><!-- /.entry-wrapper -->
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next</a>
{% endif %}
</nav><!-- /.pagination -->
</article>
</div><!-- /#main -->
<div class="footer-wrapper">
<footer role="contentinfo" class="entry-wrapper">
{% include footer.html %}
</footer>
</div><!-- /.footer-wrapper -->
{% include scripts.html %}
</body>
</html>

View File

@ -1,2 +0,0 @@
{% include css/bootstrap.min.css %}
{% include css/main.css %}

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 6
date: 2014-07-15
img: zcash.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 5
date: 2014-07-14
img: safe.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 4
date: 2014-07-15
img: game.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 3
date: 2014-07-16
img: circus.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 2
date: 2014-07-17
img: cake.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -1,12 +0,0 @@
---
layout: default
modal-id: 1
date: 2014-07-18
img: cabin.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
---

View File

@ -0,0 +1,96 @@
---
layout: post
title: Sample Post
excerpt: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
modified: 2016-06-01T14:17:25-04:00
categories: articles
tags: [sample-post]
image:
feature: so-simple-sample-image-1.jpg
credit: WeGraphics
creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
comments: true
share: true
---
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
### Body text
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
![Smithsonian Image]({{ site.url }}/images/3953273590_704e3899d5_m.jpg)
{: .pull-right}
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times <cite>(Thats a citation)</cite>. <u>Underline</u>. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
HTML and <abbr title="cascading stylesheets">CSS<abbr> are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
### Blockquotes
> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
## List Types
### Ordered Lists
1. Item one
1. sub item one
2. sub item two
3. sub item three
2. Item two
### Unordered Lists
* Item one
* Item two
* Item three
## Tables
| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
|----
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
|=====
| Foot1 | Foot2 | Foot3 |
{: .table}
## Code Snippets
Syntax highlighting via Rouge
```css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
```
Non Rouge code example
<div id="awesome">
<p>This is great isn't it?</p>
</div>
## Buttons
Make any link standout more when applying the `.btn` class.
<div markdown="0"><a href="#" class="btn">This is a button</a></div>

View File

@ -0,0 +1,50 @@
---
layout: post
title: "Testing Readability with a Bunch of Text"
excerpt: "A ton of text to test readability."
categories: articles
tags: [sample-post, readability, test, intro]
image:
feature: so-simple-sample-image-2.jpg
credit: WeGraphics
creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
comments: true
share: true
---
Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
## Cupidatat 90's lo-fi authentic try-hard
In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
* Sartorial hoodie
* Labore viral forage
* Tote bag selvage
* DIY exercitation et id ugh tumblr church-key
Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
## Forage occaecat cardigan qui
Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
## Hoodie Duis
Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
### Thundercats Ho!
Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.

View File

@ -0,0 +1,68 @@
---
layout: post
title: "A Post with Images"
excerpt: "Examples and code for displaying images in posts."
categories: articles
tags: [sample-post, images, test]
comments: true
share: true
modified: 2016-06-01T14:17:50-04:00
---
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.
## Figures (for images or video)
### One Up
<figure>
<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg" alt="image"></a>
<figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>
</figure>
### Two Up
Apply the `half` class like so to display two images side by side that share the same caption.
```html
<figure class="half">
<img src="/images/image-filename-1.jpg" alt="image">
<img src="/images/image-filename-2.jpg" alt="image">
<figcaption>Caption describing these two images.</figcaption>
</figure>
```
And you'll get something that looks like this:
<figure class="half">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<img src="http://placehold.it/600x300.jpg" alt="image">
<img src="http://placehold.it/600x300.jpg" alt="image">
<figcaption>Two images.</figcaption>
</figure>
### Three Up
Apply the `third` class like so to display three images side by side that share the same caption.
```html
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<figcaption>Caption describing these three images.</figcaption>
</figure>
```
And you'll get something that looks like this:
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<figcaption>Three images.</figcaption>
</figure>

View File

@ -0,0 +1,51 @@
---
layout: post
title: "Post with Large Feature Image and Text"
excerpt: "Custom written post descriptions are the way to go... if you're not lazy."
categories: articles
tags: [sample-post, readability]
modified: 2013-06-30
image:
feature: so-simple-sample-image-3.jpg
credit: WeGraphics
creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
comments: true
share: true
---
This is a sample post with a large feature image up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
## Cupidatat 90's lo-fi authentic try-hard
In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
* Sartorial hoodie
* Labore viral forage
* Tote bag selvage
* DIY exercitation et id ugh tumblr church-key
Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
## Forage occaecat cardigan qui
Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
## Hoodie Duis
Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
### Thundercats Ho!
Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.

View File

@ -0,0 +1,22 @@
---
layout: post
title: "A Post with a Video"
excerpt: "Custom written post descriptions are the way to go... if you're not lazy."
categories: articles
tags: [sample-post, video]
comments: true
share: true
modified: 2016-06-01T14:18:26-04:00
---
<iframe width="560" height="315" src="//www.youtube.com/embed/pdSp4Y4GOQs" frameborder="0"> </iframe>
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
```html
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
```
And here's a Vimeo embed for testing purposes.
<iframe src="//player.vimeo.com/video/98146708?title=0&amp;byline=0" width="500" height="281" frameborder="0"> </iframe>

View File

@ -0,0 +1,10 @@
---
layout: post
title: "Sample Link Post"
excerpt: "Example and code for using link posts."
categories: articles
tags: [sample-post, link-post]
link: http://mademistakes.com
---
So Simple Theme now supports **link posts**, made famous by John Gruber. To activate just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done.

View File

@ -0,0 +1,118 @@
---
layout: post
title: Syntax Highlighting Post
excerpt: "Demo post displaying the various ways of highlighting code in Markdown."
categories: articles
tags: [sample-post, code, highlighting]
image:
feature: so-simple-sample-image-5.jpg
credit: WeGraphics
creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
comments: true
share: true
modified: 2016-06-01T14:11:53-04:00
---
Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
### Highlighted Code Blocks
To modify styling and highlight colors edit `/_sass/_syntax.scss`.
```css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
```
```html
{% raw %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% endraw %}
```
```ruby
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
self.data['tag'] = tag
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
```
### Standard Code Block
{% raw %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% endraw %}
### Fenced Code Blocks
~~~ css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
~~~
~~~ html
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
~~~
~~~ ruby
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
self.data['tag'] = tag
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
~~~

View File

@ -0,0 +1,50 @@
---
layout: post
title: "Override Author Byline Test Post"
excerpt: "An article to test overriding the default site author."
categories: articles
tags: [sample-post, readability, test]
author: billy_rick
comments: true
share: true
modified: 2016-06-01T14:18:57-04:00
image:
feature: so-simple-sample-image-7.jpg
credit: WeGraphics
creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
---
For those of you who may have content written by multiple authors on your site you can now assign different authors to each post if desired.
Previously the theme used a global author for the entire site and those attributes would be used in all bylines, social networking links, Twitter Card attribution, and Google Authorship. These `owner` variables were defined in `config.yml`
Start by modifying or creating a new `authors.yml` file in the `_data` folder and add your authors using the following format.
```yaml
# Authors
billy_rick:
name: Billy Rick
web: http://thewhip.com
email: billy@rick.com
bio: "What do you want, jewels? I am a very extravagant man."
avatar: bio-photo-2.jpg
twitter: extravagantman
google:
plus: BillyRick
cornelius_fiddlebone:
name: Cornelius Fiddlebone
email: cornelius@thewhip.com
bio: "I ordered what?"
avatar: bio-photo.jpg
twitter: rhymeswithsackit
google:
plus: CorneliusFiddlebone
```
To assign Billy Rick as an author for our post. You'd add the following YAML front matter to a post:
```yaml
author: billy_rick
```

View File

@ -0,0 +1,34 @@
---
layout: post
title: "Hello World"
modified:
categories: blog
excerpt:
tags: []
image:
feature:
date: 2014-08-08T15:39:55-04:00
modified: 2016-06-01T14:19:19-04:00
---
You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
## Sample Heading
### Sample Heading 2
Jekyll also offers powerful support for code snippets:
```ruby
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
```
Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll]: http://jekyllrb.com

View File

@ -0,0 +1,32 @@
---
layout: post
title: "MathJax Example"
modified:
categories: blog
excerpt:
tags: []
image:
feature:
date: 2015-08-10T08:08:50-04:00
---
[MathJax](http://www.mathjax.org/) is a simple way of including Tex/LaTex/MathML based mathematics in HTML webpages. To get up and running you need to include the MathJax script in the header of your github pages page, and then write some maths. For LaTex, there are two delimiters you need to know about, one for block or displayed mathematics `\[ ... \]`, and the other for inline mathematics `\( ... \)`.
## Usage
To enable MathJax support be sure Kramdown is your Markdown flavor of choice and MathJax is set to true in your `_config.yml` file.
```yaml
markdown: kramdown
mathjax: true
```
```
Here is an example MathJax inline rendering \\( 1/x^{2} \\), and here is a block rendering:
\\[ \frac{1}{n^{2}} \\]
```
Here is an example MathJax inline rendering \\( 1/x^{2} \\), and here is a block rendering:
\\[ \frac{1}{n^{2}} \\]
The only thing to look out for is the escaping of the backslash when using markdown, so the delimiters become `\\[ ... \\]` and `\\( ... \\)` for inline and block maths respectively.

338
_sass/_animations.scss Normal file
View File

@ -0,0 +1,338 @@
/* ==========================================================================
Animations
========================================================================== */
/* add .animated class to elements you wish to animate
* along with the type of animation (eg: <div class="animated fadeIn"></div>)
*/
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
0% {opacity: 0;} 100% {opacity: 1;}
}
/*
Fade-in animation .fadeIn
========================================================================== */
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
/*
Fade-in down animation .fadeInDown
========================================================================== */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/*
Fade-in down big animation .fadeInDownBig
========================================================================== */
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDownBig {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
-moz-animation-name: fadeInDownBig;
-o-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
/*
Bounce-in animation .bounceIn
========================================================================== */
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
/*
Bounce-in down animation .bounceInDown
========================================================================== */
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
/*
Drop animation .drop
========================================================================== */
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(-500px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes drop {
0% {
-moz-transform: translateY(-500px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes drop {
0% {
-o-transform: translateY(-500px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes drop {
0% {
transform: translateY(-500px);
}
100% {
transform: translateY(0);
}
}
.drop {
-webkit-animation-name: drop;
-moz-animation-name: drop;
-o-animation-name: drop;
animation-name: drop;
}

88
_sass/_archives.scss Normal file
View File

@ -0,0 +1,88 @@
/* ==========================================================================
Archive pages
========================================================================== */
/*
Post archive
========================================================================== */
.post-list {
margin: 0;
padding: 0;
list-style-type: none;
li {
padding: 8px 0;
border-bottom: 1px solid lighten($black,80);
border-bottom: 1px solid rgba($black,.10);
@include font-size(18,no);
@include clearfix;
> a {
border-bottom-width: 0; /* remove underlines from items in post indexes */
}
}
a > span {
float: right;
}
.entry-date {
@include font-size(14,no);
text-transform: uppercase;
display: none;
@include media($medium) {
display: inline;
}
}
/* post excerpt */
.excerpt {
display: block;
float: none;
@include font-size(14, no, 16);
@include media($medium) {
width: 70%;
}
@include media($large) {
width: 60%;
}
}
}
/*
Tag archive
========================================================================== */
.tag-box {
list-style: none;
margin: 0;
padding: 4px 0;
overflow: hidden;
@include clearfix;
&.inline li {
float: left;
@include font-size(14);
line-height: 2.5;
}
a {
padding: 4px 6px;
margin: 2px;
background-color: lighten($black, 90);
@include rounded(4px);
text-decoration: none;
span {
vertical-align: super;
@include font-size(10);
}
}
}

232
_sass/_base.scss Normal file
View File

@ -0,0 +1,232 @@
/* ==========================================================================
Base elements
========================================================================== */
/*
Selections
========================================================================== */
::-moz-selection {
background-color: lighten($base-color, 65%);
color: $base-color;
text-shadow: none;
}
::selection {
background-color: lighten($base-color, 65%);
color: $base-color;
text-shadow: none;
}
/*
Body
========================================================================== */
body {
margin: 0;
padding: 0;
width: 100%;
font-family: $base-font;
color: $text-color;
background-color: $body-color;
border-top: 5px solid $black;
}
/*
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 {
text-decoration: none;
color: $link-color;
&:visited {
color: lighten($link-color, 20);
}
&:hover {
color: darken($link-color, 20);
}
&:focus {
outline: thin dotted;
color: darken($link-color, 20);
}
&:hover,
&:active {
outline: 0;
}
}
/*
Horizontal rules
========================================================================== */
hr {
display: block;
margin: 1em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
/*
Figures and Images
========================================================================== */
figure {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
@include clearfix;
img {
margin-bottom: 10px;
}
a {
img {
@include transform(translateY(0));
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
opacity: 0.7;
&:hover {
@include transform(translateY(-5px));
@include box-shadow(0 0 10px rgba($black, .20));
opacity: 1;
}
}
}
}
svg:not(:root) {
overflow: hidden;
}
// Figure captions
figcaption {
padding-top: 10px;
@include font-size(14);
line-height: 1.3;
color: lighten($text-color, 10);
}
// Tables
// --------------------------------------------------
table {
width: 100%;
}
// Blockquotes
// --------------------------------------------------
blockquote {
font-family: $alt-font;
font-style: italic;
@include font-size(16);
padding-left: 20px;
border-left: 8px solid $black;
}
// Code
// --------------------------------------------------
tt, code, kbd, samp, pre {
font-family: $code-font;
}
p,
li {
code {
@include font-size(14);
font-family: $code-font;
white-space: nowrap;
margin: 0 2px;
padding: 0 5px;
border: 1px solid lighten($black, 90);
background-color: lighten($black, 95);
@include rounded(3px);
}
}
pre {
@include font-size(14);
overflow-x: auto;
}
// Global Transition
// ---------------------------------------------------
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
@include transition(all 0.2s ease);
}

41
_sass/_buttons.scss Normal file
View File

@ -0,0 +1,41 @@
/* ==========================================================================
Buttons
========================================================================== */
/*
Default button
========================================================================== */
.btn {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
@include font-size(14);
background-color: $black;
color: $white;
border: 2px solid $black !important;
border-radius: $border-radius;
&:visited {
color: $white;
}
&:hover {
background-color: $white;
color: $black;
}
}
/*
Close button
========================================================================== */
.close-btn {
position: absolute;
top: 0;
right: 0;
z-index: 1;
background-color: transparent;
border: 0 solid transparent;
color: $white;
}

33
_sass/_footer.scss Normal file
View File

@ -0,0 +1,33 @@
/* ==========================================================================
Site footer
========================================================================== */
.footer-wrapper {
@include clearfix;
margin: 2em auto;
text-align: center;
font-family: $alt-font;
@include font-size(14);
font-style: italic;
color: lighten($text-color,20);
a {
color: lighten($text-color,20);
}
}
/*
Social media icons
========================================================================== */
.social-icons {
margin: 1em 0 2em;
a {
padding: 4px 8px;
&:hover {
color: $black;
}
}
}

8
_sass/_footnotes.scss Normal file
View File

@ -0,0 +1,8 @@
/* ==========================================================================
Footnotes (class generated by Kramdown)
========================================================================== */
.footnotes {
@include font-size(14);
font-family: $base-font;
}

292
_sass/_forms.scss Normal file
View File

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

View File

@ -0,0 +1,9 @@
@import "vendor/neat/neat-helpers";
// Change the grid settings
$visual_grid: false;
$max-width: em(960);
// Define your breakpoints
$medium: new-breakpoint(min-width em(768) 12);
$large: new-breakpoint(min-width em(1000) 12);

123
_sass/_helpers.scss Normal file
View File

@ -0,0 +1,123 @@
/* ==========================================================================
Helpers and Utility Classes
========================================================================== */
.wrap {
margin: 0 auto;
}
/*
Typography
========================================================================== */
/* capitalize all letters */
.all-caps {
text-transform: uppercase;
}
/* center text */
.center {
text-align: center;
}
/* remove bullets from list items */
/**
* <ul class="unstyled-list">
* <li>Item 1</li>
* <li>Item 2</li>
* </ul>
*/
.unstyled-list {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
/*
Image alignment
========================================================================== */
/* float left */
.pull-left {
float: left;
padding-right: $gutter;
}
/* float right */
.pull-right {
float: right;
padding-left: $gutter;
}
/*
Image layout in <figure>
========================================================================== */
figure {
/* 2 images in a row. should be of equal height/width to maintain layout */
&.half {
@include media($large) {
img {
width: 47.5%;
float: left;
margin-right: 2.5%;
margin-bottom: 2.5%;
}
figcaption {
clear: left;
}
}
}
/* 3 images in a row. should be of equal height/width to maintain layout */
&.third {
@include media($large) {
img {
width: 30.8%;
float: left;
margin-right: 2.5%;
margin-bottom: 2.5%;
}
figcaption {
clear: left;
}
}
}
}
/*
No scrollbars
========================================================================== */
.no-scroll {
overflow: hidden;
}
/*
Link arrow (used in link post titles)
========================================================================== */
.link-arrow {
font-weight: 100;
text-decoration: underline;
font-style: normal;
}

89
_sass/_masthead.scss Normal file
View File

@ -0,0 +1,89 @@
/* ==========================================================================
Masthead
========================================================================== */
.masthead {
margin-top: 40px;
@include clearfix;
@include media($medium) {
margin-top: 0;
}
.wrap {
text-align: center;
max-width: em(440);
padding-right: 20px;
padding-left: 20px;
@include media($medium) {
max-width: em(728);
padding-right: 60px;
padding-left: 60px;
}
@include media($large) {
max-width: em(960);
}
}
}
/*
Site logo
========================================================================== */
.site-logo {
img {
width: 100px;
height: 100px;
@include animation-duration(1s);
@include animation-delay(.05s);
border: 4px solid $white;
@include rounded(100px); /* crops in a circle */
@include media($medium) {
width: 150px;
height: 150px;
@include rounded(150px); /* crops in a circle */
}
@include media($large) {
width: 200px;
height: 200px;
@include rounded(200px); /* crops in a circle */
}
}
}
/*
Site title/name
========================================================================== */
.site-title {
margin-bottom: 0;
@include animation-duration(1s);
@include animation-delay(.75s);
a {
color: $black;
}
}
/*
Site description text
========================================================================== */
.site-description {
margin-top: 0;
font-family: $alt-font;
@include font-size(16);
font-weight: 400;
font-style: italic;
@include animation-duration(1s);
@include animation-delay(1s);
@include media($medium) {
@include font-size(20);
}
}

197
_sass/_mixins.scss Normal file
View File

@ -0,0 +1,197 @@
// UTILITY MIXINS
// --------------------------------------------------
// Webkit-style focus
// --------------------
@mixin tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
// ----------------------------------
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
// 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);
}
}
// ROUND CORNERS
// --------------------------------------------------
// @include rounded(VALUE);
@mixin rounded($radius:4px) {
border-radius : $radius; }
// @include border-radius(VALUE,VALUE,VALUE,VALUE);
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
border-top-right-radius : $topright;
border-bottom-right-radius : $bottomright;
border-bottom-left-radius : $bottomleft;
border-top-left-radius : $topleft;
background-clip : padding-box; }
// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow : $shadow;
-moz-box-shadow : $shadow;
box-shadow : $shadow; }
// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
// @include text-shadow();
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
text-shadow : $shadow; }
// @include opacity(VALUE);
@mixin opacity($opacity : .5) {
opacity : $opacity; }
// For image replacement
@mixin hide-text() {
text-indent : 100%;
white-space : nowrap;
overflow : hidden; }
// Hide from visual and speaking browsers
@mixin hidden() {
display : none !important;
visibility : hidden; }
.hidden {
display: none;
visibility: hidden;
}
// Hide but maintain layout
@mixin invisible() {
visibility : hidden; }
// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
@mixin resize($direction: both) {
resize : $direction;
overflow : auto; }
// @include userselect(VALUE) (all, element, none, text)
@mixin user-select($select) {
-webkit-user-select : $select;
-moz-user-select : $select;
-o-user-select : $select;
user-select : $select; }
// Hidden but available to speaking browsers
@mixin visuallyhidden() {
overflow : hidden;
position : absolute;
clip : rect(0 0 0 0);
height : 1px;
width : 1px;
margin : -1px;
padding : 0;
border : 0; }

116
_sass/_navigation.scss Normal file
View File

@ -0,0 +1,116 @@
/* ==========================================================================
Top navigation
========================================================================== */
.navigation-wrapper {
text-align: center;
@include clearfix;
ul {
display: inline-block;
width: 100%;
vertical-align: top;
margin: 0 0 50px;
padding: 4px 20px;
background-color: $black;
@include media($medium) {
width: auto;
@include rounded(0 0 10px 10px);
}
@include clearfix;
}
li {
display: block;
float: left;
list-style: none;
text-align: center;
@include font-size(24,no);
text-transform: uppercase;
color: $white;
@include media($medium) {
@include font-size(14,no);
}
a:hover {
@include box-shadow($shadow: inset 0 0 1px $white);
}
}
a {
display: block;
margin-bottom: 10px;
padding: 12px 20px;
@include media($medium) {
margin-bottom: 0;
padding: 6px 10px;
}
color: $white;
@include rounded(4px);
&:hover {
background-color: lighten($black, 10);
}
}
}
/*
Responsive navigation toggle
========================================================================== */
#site-nav {
display: none;
z-index: 5;
@include media($medium) {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
&.closed {
@include media($medium) {
display: block;
}
}
&.opened {
display: block;
max-height: 100%;
li {
float: none;
@include media($medium) {
float: left;
}
}
}
}
/* display when JavaScript is disabled */
.no-js #site-nav {
display: block;
}
#nav-toggle {
z-index: 20;
display: block;
vertical-align: top;
margin: 0;
padding: 6px 20px;
background-color: $black;
height: 44px;
@include rounded(0);
@include media($medium) {
display: none;
}
}

26
_sass/_notices.scss Normal file
View File

@ -0,0 +1,26 @@
/* ==========================================================================
Notices
========================================================================== */
/*
Default notice
========================================================================== */
.notice {
margin-top: 1.5em;
padding: .5em 1em;
text-indent: 0;
@include font-size(16);
background-color: lighten($black, 95);
border: 1px solid lighten($black, 90);
@include rounded(4px);
}
/*
Browser upgrade notice
========================================================================== */
.upgrade {
padding: 10px;
text-align: center;
}

349
_sass/_page.scss Normal file
View File

@ -0,0 +1,349 @@
/* ==========================================================================
Page/post layout and styling
========================================================================== */
/*
Main content
========================================================================== */
#main {
@include clearfix;
}
.entry,
.hentry {
@include clearfix;
border-bottom: 1px solid lighten($black,80);
border-bottom: 1px solid rgba($black,.10);
}
/* feature image */
.entry-feature-image {
margin: 20px 0 0;
width: 100%;
@include media($medium) {
margin-top: -75px; /* move up to be overlapped by site logo */
}
@include media($large) {
margin-top: -145px; /* move up further to be overlapped by site logo */
}
}
/* page header */
.entry-header {
@include fill-parent;
}
/* tag listing in page header */
.entry-tags {
margin: 2em 0 0;
padding: 0;
text-transform: uppercase;
@include font-size(16);
font-weight: 600;
a {
color: $text-color;
padding: 0 5px;
}
li {
display: inline-block;
margin-bottom: 0;
&:before {
content: "\2022";
}
&:first-child {
&:before {
content: "";
}
a {
padding-left: 0;
}
}
}
}
/* page title */
span + .entry-title {
margin-top: 0;
}
.entry-title {
font-family: $alt-font;
font-style: italic;
@include font-size(36,yes,36);
font-weight: 400;
line-height: 1;
letter-spacing: -3px;
a {
color: $black;
text-decoration: underline;
}
@include media($medium) {
@include font-size(52,yes,54);
}
@include media($large) {
@include font-size(68,yes,72);
}
}
/* page/post wrapper */
.entry-wrapper {
@include outer-container;
margin-top: 0;
margin-bottom: 3em;
padding-right: $gutter;
padding-left: $gutter;
}
/* page/post meta content (date, author, etc) */
.entry-meta {
@include span-columns(12);
text-transform: uppercase;
@include font-size(14);
a {
color: $text-color;
}
@include media($large) {
@include span-columns(2.5);
}
& > span {
padding: 0 20px 10px 0;
display: inline-block;
@include media($large) {
display: block;
padding: 8px 0;
border-bottom: 1px solid lighten($black,80);
border-bottom: 1px solid rgba($black,.10);
}
}
}
/* author avatar (circular) */
.bio-photo {
display: none;
@include media($large) {
display: block;
width: 150px;
height: 150px;
margin-bottom: 10px;
@include rounded(150px);
@include clearfix;
}
}
/* feature image credit */
.image-credit {
margin: 0 auto;
max-width: 440px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
text-align: right;
@include font-size(12, no);
line-height: 1.3;
color: lighten($text-color, 30);
@include clearfix();
@include media($medium) {
max-width: 760px;
padding-right: 60px;
padding-left: 60px;
@include font-size(14, no);
}
@include media($large) {
max-width: 960px;
}
a {
color: lighten($text-color, 30);
}
}
/* main content block */
.entry-content {
@include span-columns(12);
p:first-child {
margin-top: 0;
}
@include media($large) {
@include span-columns(9.5);
}
/* nice link underlines */
p > a,
li > a {
border-bottom: 1px dotted lighten($link-color, 50);
&:hover {
border-bottom-style: solid;
}
}
}
/*
Disqus
========================================================================== */
#disqus_thread {
margin-top: 2em;
}
/*
Pagination
========================================================================== */
.pagination {
margin-top: 2em;
text-align: center;
}
/*
Overrides
========================================================================== */
/* adjust width for lack of meta/author column */
#home,
#page {
.entry-wrapper {
max-width: em(760);
}
.entry-title {
text-align: center;
max-width: 100%;
}
.entry-content {
@include span-columns(12);
}
}
/*
Kramdown generated table of contents
========================================================================== */
#markdown-toc {
font-family: $alt-font;
margin-top: $gutter;
margin-bottom: $gutter;
padding-left: 0;
border: 1px solid $border-color;
border-radius: $border-radius;
ul {
list-style-type: none;
padding-left: 0;
}
li {
@include font-size(16,no,18);
border-bottom: 1px solid $border-color;
list-style-type: none;
}
h6 {
margin: 0;
padding: (.25 * $gutter) (.5 * $gutter);
background: $table-stripe-color;
}
a {
display: block;
padding: (.25 * $gutter) (.5 * $gutter);
border-left: 2px solid transparent;
border-bottom: 0 solid transparent;
&:hover,
&:focus {
background: lighten($border-color,5);
}
}
}
/*
Tables
========================================================================== */
/** For nicer looking tables apply the .table class
* Example:
* <table class="table">
* <tr>
* <td>cell1</td>
* <td>cell2</td>
* <td>cell3</td>
* </tr>
* </table>
*/
.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;
@include font-size(18);
}
tr, td, th {
vertical-align: middle;
}
}

150
_sass/_reset.scss Normal file
View File

@ -0,0 +1,150 @@
// 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
}

42
_sass/_search.scss Normal file
View File

@ -0,0 +1,42 @@
/* ==========================================================================
Search
========================================================================== */
.search-wrapper {
@include outer-container;
margin-top: 0;
padding-right: $gutter;
padding-left: $gutter;
height: 1px;
}
/*
Google search form
========================================================================== */
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
padding: 8px 10px;
@include font-size(14);
border-width: 2px;
border-radius: $border-radius;
}
/* button */
#goog-wm-sb {
@extend .btn;
}

231
_sass/_syntax.scss Normal file
View File

@ -0,0 +1,231 @@
/* ==========================================================================
Syntax highlighting and formatting
========================================================================== */
pre.highlight {
padding: 1em;
}
/*
Pygments.rb and Rouge
========================================================================== */
.highlight {
background-color: #efefef;
font-family: $code-font;
color: #333332;
margin-bottom: 1.5em;
@include rounded($border-radius);
pre {
position: relative;
margin: 0;
padding: 1em;
}
.lineno { padding-right: 24px; color: lighten(#333332,50);}
.hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; font-weight: bold } /* Keyword */
.o { color: #000000; font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #d01040 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #d01040 } /* Literal.String.Backtick */
.sc { color: #d01040 } /* Literal.String.Char */
.sd { color: #d01040 } /* Literal.String.Doc */
.s2 { color: #d01040 } /* Literal.String.Double */
.se { color: #d01040 } /* Literal.String.Escape */
.sh { color: #d01040 } /* Literal.String.Heredoc */
.si { color: #d01040 } /* Literal.String.Interpol */
.sx { color: #d01040 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #d01040 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */
}
/*
Coderay
========================================================================== */
.CodeRay {
background-color: #efefef;
font-family: $code-font;
@include font-size(12);
color: #333332;
margin-bottom: 1.5em;
@include rounded(4px);
pre {
margin: 0px;
padding: 1em;
}
}
div.CodeRay {}
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
table.CodeRay td {
padding: 1em 0.5em;
vertical-align: top;
}
ol.CodeRay { font-size: 10pt }
ol.CodeRay li { white-space: pre }
.CodeRay {
.line-numbers,
.no {
background-color: #ececec;
color: #aaa;
text-align: right;
}
.line-numbers a {
color: #aaa;
}
.line-numbers tt { font-weight: bold }
.line-numbers .highlighted { color: red }
.line { display: block; float: left; width: 100%; }
span.line-numbers { padding: 0 24px 0 4px }
.code { width: 100% }
.code pre { overflow: auto }
.debug { color: white !important; background: blue !important; }
.annotation { color: #007 }
.attribute-name { color: #f08 }
.attribute-value { color: #700 }
.binary { color: #509; font-weight: bold }
.comment { color: #998; font-style: italic;}
.char { color: #04d }
.char .content { color: #04d }
.char .delimiter { color: #039 }
.class { color: #458; font-weight: bold }
.complex { color: #a08; font-weight: bold }
.constant { color: teal; }
.color { color: #0a0 }
.class-variable { color: #369 }
.decorator { color: #b0b; }
.definition { color: #099; font-weight: bold }
.directive { color: #088; font-weight: bold }
.delimiter { color: black }
.doc { color: #970 }
.doctype { color: #34b }
.doc-string { color: #d42; font-weight: bold }
.escape { color: #666; font-weight: bold }
.entity { color: #800; font-weight: bold }
.error { color: #f00; background-color: #faa }
.exception { color: #c00; font-weight: bold }
.filename { color: #099; }
.function { color: #900; font-weight: bold }
.global-variable { color: teal; font-weight: bold }
.hex { color: #058; font-weight: bold }
.integer { color: #099; }
.include { color: #b44; font-weight: bold }
.inline { color: black }
.inline .inline { background: #ccc }
.inline .inline .inline { background: #bbb }
.inline .inline-delimiter { color: #d14; }
.inline-delimiter { color: #d14; }
.important { color: #f00; }
.interpreted { color: #b2b; font-weight: bold }
.instance-variable { color: teal }
.label { color: #970; font-weight: bold }
.local-variable { color: #963 }
.octal { color: #40e; font-weight: bold }
.operator { }
.predefined-constant { font-weight: bold }
.predefined { color: #369; font-weight: bold }
.preprocessor { color: #579; }
.pseudo-class { color: #00c; font-weight: bold }
.predefined-type { color: #074; font-weight: bold }
.reserved,
.keyword { color: #000; font-weight: bold }
.key { color: #808; }
.key .delimiter { color: #606; }
.key .char { color: #80f; }
.value { color: #088; }
.regexp { background-color: #fff0ff }
.regexp .content { color: #808 }
.regexp .delimiter { color: #404 }
.regexp .modifier { color: #c2c }
.regexp .function { color: #404; font-weight: bold }
.string { color: #d20; }
.string .string { }
.string .string .string { background-color: #ffd0d0 }
.string .content { color: #d14; }
.string .char { color: #d14; }
.string .delimiter { color: #d14; }
.shell { color: #d14 }
.shell .content { }
.shell .delimiter { color: #d14 }
.symbol { color: #990073 }
.symbol .content { color: #a60 }
.symbol .delimiter { color: #630 }
.tag { color: #070 }
.tag-special { color: #d70; font-weight: bold }
.type { color: #339; font-weight: bold }
.variable { color: #036 }
.insert { background: #afa; }
.delete { background: #faa; }
.change { color: #aaf; background: #007; }
.head { color: #f8f; background: #505 }
.insert .insert { color: #080; font-weight: bold }
.delete .delete { color: #800; font-weight: bold }
.change .change { color: #66f; }
.head .head { color: #f4f; }
}

46
_sass/_variables.scss Normal file
View File

@ -0,0 +1,46 @@
// TYPOGRAPHY ================================================
$base-font : 'source-sans-pro', sans-serif;
$heading-font : $base-font;
$caption-font : $base-font;
$code-font : 'source-code-pro', monospace;
$alt-font : 'volkhov', serif;
$doc-font-size : 16;
$doc-line-height : 24;
$border-radius : 3px;
// set-up the body font-size / line-height
body {
margin-top: 0px + $doc-line-height;
font-size: 0px + $doc-font-size;
}
// COLORS =====================================================
$body-color : #fff;
$text-color : #222;
$base-color : #343434;
$comp-color : adjust-hue($base-color, 180);
$border-color : #ddd;
$white : #fff;
$black : #000;
$accent-color : $black;
$link-color : #222;
$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);
// MEDIA QUERIES ==============================================
$micro : "only screen and (min-width: 30em)";
$small : "only screen and (min-width: 37.5em)";
$medium : "only screen and (min-width: 48em)";
$large : "only screen and (min-width: 62em)";
$x-large : "only screen and (min-width: 86.375em)";

11
_sass/_wells.scss Normal file
View File

@ -0,0 +1,11 @@
/* ==========================================================================
Wells
========================================================================== */
/* Used to call out text in a subtle manner */
.well {
padding: 20px;
border: 1px solid $comp-color;
@include rounded(4px);
}

View File

@ -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 vendored Normal file
View File

@ -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 vendored Normal file
View File

@ -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;
}
}

View File

@ -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)

View File

@ -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...);
}

View File

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

View File

@ -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;

View File

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

View File

@ -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;
// }

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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 vendored Normal file
View File

@ -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;
}
}

View File

@ -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);

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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);
}

View File

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

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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));

View File

@ -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);
}

View File

@ -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 vendored Normal file
View File

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

47
_sass/vendor/bourbon/css3/_columns.scss vendored Normal file
View File

@ -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);
}

View File

@ -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 vendored Normal file
View File

@ -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;
}

View File

@ -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');
}
}
}

View File

@ -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);
}

View File

@ -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;
}
}

View File

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

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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})");
}

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