Merge branch 'release/v1.1.0' into develop
This commit is contained in:
commit
b86bf97cae
37 changed files with 5435 additions and 1794 deletions
11
README.md
11
README.md
|
@ -28,7 +28,7 @@ General notes and suggestions for customizing Minimal Mistakes.
|
||||||
minimal-mistakes/
|
minimal-mistakes/
|
||||||
├── _includes
|
├── _includes
|
||||||
| ├── author-bio.html //bio stuff goes here
|
| ├── author-bio.html //bio stuff goes here
|
||||||
| ├── chrome-frame.html //displays on IE8 and less
|
| ├── browser-upgrade.html //displays on IE8 and less
|
||||||
| ├── footer.html //site footer
|
| ├── footer.html //site footer
|
||||||
| ├── head.html //site head
|
| ├── head.html //site head
|
||||||
| ├── navigation.html //site top nav
|
| ├── navigation.html //site top nav
|
||||||
|
@ -112,6 +112,15 @@ image:
|
||||||
|
|
||||||
The large texture images used in *Minimal Mistakes* are from [Love Textures](http://lovetextures.com), probably a good idea to swap these out with your own photos...
|
The large texture images used in *Minimal Mistakes* are from [Love Textures](http://lovetextures.com), probably a good idea to swap these out with your own photos...
|
||||||
|
|
||||||
|
If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
image:
|
||||||
|
feature: feature-image-filename.jpg
|
||||||
|
credit: Michael Rose #name of the person or site you want to credit
|
||||||
|
creditlink: http://mademistakes.com #url to their site or licensing
|
||||||
|
```
|
||||||
|
|
||||||
#### Categories
|
#### Categories
|
||||||
|
|
||||||
In the sample `_posts` folder you may have noticed `category: articles` in the front matter. I like keeping all posts grouped in the same folder. If you decide to rename or add categories you will need to modify the permalink in `articles.md` along with the filename (if renaming).
|
In the sample `_posts` folder you may have noticed `category: articles` in the front matter. I like keeping all posts grouped in the same folder. If you decide to rename or add categories you will need to modify the permalink in `articles.md` along with the filename (if renaming).
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo" width="100" height="100"></a>
|
<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo"></a>
|
||||||
<h4>{{ site.owner.name }}</h4>
|
<h3>{{ site.owner.name }}</h3>
|
||||||
<p>{{ site.owner.bio }}</p>
|
<p>{{ site.owner.bio }}</p>
|
||||||
{% if site.owner.twitter %}<p style="text-indent:0;margin-top:1.5em;"><a href="http://twitter.com/{{ site.owner.twitter }}" target="_blank"><i class="icon-twitter"></i> Twitter</a></p>{% endif %}
|
{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" class="author-social" target="_blank"><i class="icon-twitter"></i> Twitter</a>{% endif %}
|
||||||
{% if site.owner.facebook %}<p style="text-indent:0;"><a href="http://facebook.com/{{ site.owner.facebook }}" target="_blank"><i class="icon-facebook"></i> Facebook</a></p>{% endif %}
|
{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" class="author-social" target="_blank"><i class="icon-facebook"></i> Facebook</a>{% endif %}
|
||||||
{% if site.owner.google_plus %}<p style="text-indent:0;"><a href="{{ site.owner.google_plus }}" target="_blank"><i class="icon-google-plus"></i> Google+</a></p>{% endif %}
|
{% if site.owner.google_plus %}<a href="{{ site.owner.google_plus }}" class="author-social" target="_blank"><i class="icon-google-plus"></i> Google+</a>{% endif %}
|
||||||
{% if site.owner.linkedin %}<p style="text-indent:0;"><a href="http://linkedin.com/in/{{ site.owner.linkedin }}" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a></p>{% endif %}
|
{% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>{% endif %}
|
||||||
{% if site.owner.instagram %}<p style="text-indent:0;"><a href="http://instagram.com/{{ site.owner.instagram }}" target="_blank"><i class="icon-instagram"></i> Instagram</a></p>{% endif %}
|
{% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" class="author-social" target="_blank"><i class="icon-instagram"></i> Instagram</a>{% endif %}
|
||||||
{% if site.owner.github %}<p style="text-indent:0;"><a href="http://github.com/{{ site.owner.github }}" target="_blank"><i class="icon-github"></i> Github</a></p>{% endif %}
|
{% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>{% endif %}
|
||||||
{% if site.owner.lastfm %}<p style="text-indent:0;"><a href="http://lastfm.com/{{ site.owner.lastfm }}" target="_blank"><i class="icon-lastfm"></i> Last.fm</a></p>{% endif %}
|
{% if site.owner.lastfm %}<a href="http://lastfm.com/{{ site.owner.lastfm }}" class="author-social" target="_blank"><i class="icon-lastfm"></i> Last.fm</a>{% endif %}
|
||||||
{% if site.owner.tumblr %}<p style="text-indent:0;"><a href="http://{{ site.owner.tumblr }}.tumblr.com" target="_blank"><i class="icon-tumblr"></i> Tumblr</a></p>{% endif %}
|
{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="icon-tumblr"></i> Tumblr</a>{% endif %}
|
1
_includes/browser-upgrade.html
Normal file
1
_includes/browser-upgrade.html
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
|
|
@ -1 +0,0 @@
|
||||||
<!--[if lt IE 9]><div class="chrome-frame alert alert-info"><strong>Your browser is really old!</strong> <a href="http://browsehappy.com/">Why not upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better enjoy this site?</div><![endif]-->
|
|
|
@ -1 +1 @@
|
||||||
<h6>© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</h6>
|
<span>© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</span>
|
||||||
|
|
|
@ -9,26 +9,21 @@
|
||||||
|
|
||||||
<body class="home" itemscope itemtype="http://schema.org/WebPage">
|
<body class="home" itemscope itemtype="http://schema.org/WebPage">
|
||||||
|
|
||||||
{% include chrome-frame.html %}
|
{% include browser-upgrade.html %}
|
||||||
|
|
||||||
{% include navigation.html %}
|
{% include navigation.html %}
|
||||||
|
|
||||||
<div class="image-wrap">
|
{% if page.image.feature %}<div class="image-wrap">
|
||||||
<div class="headline-wrap">
|
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||||
<h1>{{ page.title }}</h1>
|
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||||
{% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %}
|
</div><!-- /.image-wrap -->{% endif %}
|
||||||
</div><!--/ .headline-wrap -->
|
|
||||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
|
|
||||||
</div><!-- /.image-wrap -->
|
|
||||||
|
|
||||||
<div class="article-author-top">
|
<div class="article-author-top">
|
||||||
{% include author-bio.html %}
|
{% include author-bio.html %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
||||||
<a href="{{ site.url}}/articles" class="btn btn-small pull-right">View all articles</a>
|
<h3><a href="{{ site.url}}/articles">Articles</a></h3>
|
||||||
<h3>Latest Articles</h3>
|
|
||||||
<hr />
|
|
||||||
{% for post in site.categories.articles limit:5 %}
|
{% for post in site.categories.articles limit:5 %}
|
||||||
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
||||||
<h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
|
<h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
|
||||||
|
|
|
@ -9,12 +9,13 @@
|
||||||
|
|
||||||
<body class="page" itemscope itemtype="http://schema.org/WebPage">
|
<body class="page" itemscope itemtype="http://schema.org/WebPage">
|
||||||
|
|
||||||
{% include chrome-frame.html %}
|
{% include browser-upgrade.html %}
|
||||||
|
|
||||||
{% include navigation.html %}
|
{% include navigation.html %}
|
||||||
|
|
||||||
{% if page.image.feature %}<div class="image-wrap">
|
{% if page.image.feature %}<div class="image-wrap">
|
||||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||||
|
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||||
</div><!-- /.image-wrap -->{% endif %}
|
</div><!-- /.image-wrap -->{% endif %}
|
||||||
|
|
||||||
<div id="main" role="main" itemprop="mainContentOfPage">
|
<div id="main" role="main" itemprop="mainContentOfPage">
|
||||||
|
@ -22,9 +23,7 @@
|
||||||
{% include author-bio.html %}
|
{% include author-bio.html %}
|
||||||
</div>
|
</div>
|
||||||
<article itemscope itemtype="http://schema.org/CreativeWork">
|
<article itemscope itemtype="http://schema.org/CreativeWork">
|
||||||
<div class="headline-wrap">
|
<h1 itemprop="name">{{ page.title }}</h1>
|
||||||
<h1 itemprop="headline">{{ page.title }}</h1>
|
|
||||||
</div><!--/ .headline-wrap -->
|
|
||||||
<div class="article-wrap" itemprop="text">
|
<div class="article-wrap" itemprop="text">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div><!-- /.article-wrap -->
|
</div><!-- /.article-wrap -->
|
||||||
|
|
|
@ -9,33 +9,29 @@
|
||||||
|
|
||||||
<body class="articles" itemscope itemtype="http://schema.org/WebPage">
|
<body class="articles" itemscope itemtype="http://schema.org/WebPage">
|
||||||
|
|
||||||
{% include chrome-frame.html %}
|
{% include browser-upgrade.html %}
|
||||||
|
|
||||||
{% include navigation.html %}
|
{% include navigation.html %}
|
||||||
|
|
||||||
<div class="image-wrap">
|
{% if page.image.feature %}<div class="image-wrap">
|
||||||
<div class="headline-wrap">
|
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||||
<h1>{{ page.title }}</h1>
|
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||||
{% if page.tagline %}<h2 class="hidden-phone">{{ page.tagline }}</h2>{% endif %}
|
</div><!-- /.image-wrap -->{% endif %}
|
||||||
</div><!--/ .headline-wrap -->
|
|
||||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
|
|
||||||
</div><!-- /.image-wrap -->
|
|
||||||
|
|
||||||
<div class="article-author-top">
|
<div class="article-author-top">
|
||||||
{% include author-bio.html %}
|
{% include author-bio.html %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
||||||
|
<h1 itemprop="name">{{ page.title }}</h1>
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
{% unless post.next %}
|
{% unless post.next %}
|
||||||
<h3>{{ post.date | date: '%Y' }}</h3>
|
<h3>{{ post.date | date: '%Y' }}</h3>
|
||||||
<hr />
|
|
||||||
{% else %}
|
{% else %}
|
||||||
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
|
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
|
||||||
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
|
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
|
||||||
{% if year != nyear %}
|
{% if year != nyear %}
|
||||||
<h3>{{ post.date | date: '%Y' }}</h3>
|
<h3>{{ post.date | date: '%Y' }}</h3>
|
||||||
<hr />
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
||||||
|
|
|
@ -9,12 +9,13 @@
|
||||||
|
|
||||||
<body class="article" itemscope itemtype="http://schema.org/WebPage">
|
<body class="article" itemscope itemtype="http://schema.org/WebPage">
|
||||||
|
|
||||||
{% include chrome-frame.html %}
|
{% include browser-upgrade.html %}
|
||||||
|
|
||||||
{% include navigation.html %}
|
{% include navigation.html %}
|
||||||
|
|
||||||
{% if page.image.feature %}<div class="image-wrap">
|
{% if page.image.feature %}<div class="image-wrap">
|
||||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
|
||||||
|
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
|
||||||
</div><!-- /.image-wrap -->{% endif %}
|
</div><!-- /.image-wrap -->{% endif %}
|
||||||
|
|
||||||
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
|
||||||
|
@ -23,7 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
|
||||||
<div class="headline-wrap">
|
<div class="headline-wrap">
|
||||||
<h1 itemprop="headline">{{ page.title }}</h1>
|
<h1 itemprop="name">{{ page.title }}</h1>
|
||||||
<h2>{{ page.tagline }}</h2>
|
<h2>{{ page.tagline }}</h2>
|
||||||
</div><!--/ .headline-wrap -->
|
</div><!--/ .headline-wrap -->
|
||||||
<div class="article-wrap" itemprop="text">
|
<div class="article-wrap" itemprop="text">
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
</div><!-- /#main -->
|
</div><!-- /#main -->
|
||||||
|
|
||||||
<div class="footer-wrap">
|
<div class="footer-wrap">
|
||||||
{% if site.related_posts.size %}<div class="related-articles">
|
{% if site.related_posts.size > 0 %}<div class="related-articles">
|
||||||
<h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/articles">View all articles</a>)</small></h4>
|
<h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/articles">View all articles</a>)</small></h4>
|
||||||
<ul>
|
<ul>
|
||||||
{% for post in site.related_posts limit:3 %}
|
{% for post in site.related_posts limit:3 %}
|
||||||
|
|
|
@ -7,6 +7,8 @@ category: articles
|
||||||
tags: [intro, beginner, jekyll, tutorial]
|
tags: [intro, beginner, jekyll, tutorial]
|
||||||
image:
|
image:
|
||||||
feature: texture-feature-05.jpg
|
feature: texture-feature-05.jpg
|
||||||
|
credit: Texture Lovers
|
||||||
|
creditlink: http://texturelovers.com
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="table-of-contents" class="toc">
|
<section id="table-of-contents" class="toc">
|
||||||
|
@ -40,7 +42,7 @@ Below is just about everything you'll need to style in the theme. Check the sour
|
||||||
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
|
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
|
||||||
|
|
||||||
![Smithsonian Image]({{ site.url }}/images/3953273590_704e3899d5_m.jpg)
|
![Smithsonian Image]({{ site.url }}/images/3953273590_704e3899d5_m.jpg)
|
||||||
{: .pull-right}
|
{: .image-pull-right}
|
||||||
|
|
||||||
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
|
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
|
||||||
|
|
||||||
|
@ -94,9 +96,3 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
|
||||||
Make any link standout more when applying the `.btn` class.
|
Make any link standout more when applying the `.btn` class.
|
||||||
|
|
||||||
<div markdown="0"><a href="#" class="btn">This is a button</a></div>
|
<div markdown="0"><a href="#" class="btn">This is a button</a></div>
|
||||||
|
|
||||||
<div markdown="0"><a href="#" class="btn btn-inverse">This is an inverse button</a></div>
|
|
||||||
|
|
||||||
<div markdown="0"><a href="#" class="btn btn-small">This is small button</a></div>
|
|
||||||
|
|
||||||
<div markdown="0"><a href="#" class="btn btn-inverse btn-small">Small inverse button</a></div>
|
|
||||||
|
|
|
@ -7,6 +7,8 @@ category: articles
|
||||||
tags: [sample post, readability, test]
|
tags: [sample post, readability, test]
|
||||||
image:
|
image:
|
||||||
feature: texture-feature-04.jpg
|
feature: texture-feature-04.jpg
|
||||||
|
credit: Texture Lovers
|
||||||
|
creditlink: http://texturelovers.com
|
||||||
---
|
---
|
||||||
|
|
||||||
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
||||||
|
|
114
_posts/2013-08-16-code-highlighting-post.md
Normal file
114
_posts/2013-08-16-code-highlighting-post.md
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: Syntax Highlighting Post
|
||||||
|
description: "Demo post displaying the various ways of highlighting code in Markdown."
|
||||||
|
category: articles
|
||||||
|
tags: [sample post, code, highlighting]
|
||||||
|
---
|
||||||
|
|
||||||
|
[Syntax highlighting](http://en.wikipedia.org/wiki/Syntax_highlighting) is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.
|
||||||
|
|
||||||
|
### Pygments Code Blocks
|
||||||
|
|
||||||
|
To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
|
||||||
|
|
||||||
|
{% highlight css %}
|
||||||
|
#container {
|
||||||
|
float: left;
|
||||||
|
margin: 0 -240px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
Line numbering enabled:
|
||||||
|
|
||||||
|
{% highlight html linenos %}
|
||||||
|
{% raw %}
|
||||||
|
<nav class="pagination" role="navigation">
|
||||||
|
{% if page.previous %}
|
||||||
|
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.next %}
|
||||||
|
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav><!-- /.pagination -->
|
||||||
|
{% endraw %}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
{% highlight ruby %}
|
||||||
|
module Jekyll
|
||||||
|
class TagIndex < Page
|
||||||
|
def initialize(site, base, dir, tag)
|
||||||
|
@site = site
|
||||||
|
@base = base
|
||||||
|
@dir = dir
|
||||||
|
@name = 'index.html'
|
||||||
|
self.process(@name)
|
||||||
|
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
|
||||||
|
self.data['tag'] = tag
|
||||||
|
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
|
||||||
|
tag_title_suffix = site.config['tag_title_suffix'] || '–'
|
||||||
|
self.data['title'] = "#{tag_title_prefix}#{tag}"
|
||||||
|
self.data['description'] = "An archive of posts tagged #{tag}."
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
### Standard Code Block
|
||||||
|
|
||||||
|
{% raw %}
|
||||||
|
<nav class="pagination" role="navigation">
|
||||||
|
{% if page.previous %}
|
||||||
|
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.next %}
|
||||||
|
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav><!-- /.pagination -->
|
||||||
|
{% endraw %}
|
||||||
|
|
||||||
|
|
||||||
|
### Fenced Code Blocks
|
||||||
|
|
||||||
|
To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
|
||||||
|
|
||||||
|
~~~ css
|
||||||
|
#container {
|
||||||
|
float: left;
|
||||||
|
margin: 0 -240px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
~~~ html
|
||||||
|
{% raw %}<nav class="pagination" role="navigation">
|
||||||
|
{% if page.previous %}
|
||||||
|
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.next %}
|
||||||
|
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav><!-- /.pagination -->{% endraw %}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
~~~ ruby
|
||||||
|
module Jekyll
|
||||||
|
class TagIndex < Page
|
||||||
|
def initialize(site, base, dir, tag)
|
||||||
|
@site = site
|
||||||
|
@base = base
|
||||||
|
@dir = dir
|
||||||
|
@name = 'index.html'
|
||||||
|
self.process(@name)
|
||||||
|
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
|
||||||
|
self.data['tag'] = tag
|
||||||
|
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
|
||||||
|
tag_title_suffix = site.config['tag_title_suffix'] || '–'
|
||||||
|
self.data['title'] = "#{tag_title_prefix}#{tag}"
|
||||||
|
self.data['description'] = "An archive of posts tagged #{tag}."
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
~~~
|
2
about.md
2
about.md
|
@ -6,6 +6,8 @@ tagline: Minimal Mistakes, a Jekyll Theme
|
||||||
tags: [about, Jekyll, theme, responsive]
|
tags: [about, Jekyll, theme, responsive]
|
||||||
image:
|
image:
|
||||||
feature: texture-feature-02.jpg
|
feature: texture-feature-02.jpg
|
||||||
|
credit: Texture Lovers
|
||||||
|
creditlink: http://texturelovers.com
|
||||||
---
|
---
|
||||||
|
|
||||||
Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com) as a theme for others to hack and build on would be fun. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with large featured images and solid typography.
|
Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com) as a theme for others to hack and build on would be fun. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with large featured images and solid typography.
|
||||||
|
|
|
@ -4,6 +4,4 @@ permalink: /articles/index.html
|
||||||
title: Articles
|
title: Articles
|
||||||
tagline: A List of Posts
|
tagline: A List of Posts
|
||||||
tags: [blog, graphic design]
|
tags: [blog, graphic design]
|
||||||
image:
|
|
||||||
feature: texture-feature-03.jpg
|
|
||||||
---
|
---
|
1990
assets/css/ie.css
1990
assets/css/ie.css
File diff suppressed because it is too large
Load diff
3448
assets/css/main.css
3448
assets/css/main.css
File diff suppressed because it is too large
Load diff
|
@ -18,6 +18,9 @@
|
||||||
.prefix(12,1);
|
.prefix(12,1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.image-credit {
|
||||||
|
.grid(12,8.5);
|
||||||
|
}
|
||||||
#main article {
|
#main article {
|
||||||
.grid(12,4.5);
|
.grid(12,4.5);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,14 @@
|
||||||
// TEXTURE ====================================================
|
// TEXTURE ====================================================
|
||||||
// ELEMENTS ===================================================
|
// ELEMENTS ===================================================
|
||||||
// LAYOUT =====================================================
|
// LAYOUT =====================================================
|
||||||
|
.article-author-top,
|
||||||
|
.article-author-bottom {
|
||||||
|
.transition(all .2s ease);
|
||||||
|
.opacity(.7);
|
||||||
|
&:hover {
|
||||||
|
.opacity(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
.image-grid {
|
.image-grid {
|
||||||
li {
|
li {
|
||||||
width: 33.333333%;
|
width: 33.333333%;
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
// ROOT =======================================================
|
// ROOT =======================================================
|
||||||
html {
|
|
||||||
font-size: 95%;
|
|
||||||
}
|
|
||||||
// TYPOGRAPHY =================================================
|
// TYPOGRAPHY =================================================
|
||||||
// TEXTURE ====================================================
|
// TEXTURE ====================================================
|
||||||
// ELEMENTS ===================================================
|
// ELEMENTS ===================================================
|
||||||
|
@ -23,6 +20,11 @@ html {
|
||||||
.image-wrap .headline-wrap {
|
.image-wrap .headline-wrap {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
.image-credit {
|
||||||
|
.grid(12,9);
|
||||||
|
.prefix(12,0);
|
||||||
|
.suffix(12,0);
|
||||||
|
}
|
||||||
#main article {
|
#main article {
|
||||||
.grid(12,6);
|
.grid(12,6);
|
||||||
.prefix(12,0);
|
.prefix(12,0);
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
// ROOT =======================================================
|
// ROOT =======================================================
|
||||||
html {
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
// TYPOGRAPHY =================================================
|
// TYPOGRAPHY =================================================
|
||||||
// TEXTURE ====================================================
|
// TEXTURE ====================================================
|
||||||
// ELEMENTS ===================================================
|
// ELEMENTS ===================================================
|
||||||
|
|
|
@ -1,11 +1,16 @@
|
||||||
// ROOT =======================================================
|
// ROOT =======================================================
|
||||||
html {
|
|
||||||
font-size: 112.5%;
|
|
||||||
}
|
|
||||||
// TYPOGRAPHY =================================================
|
// TYPOGRAPHY =================================================
|
||||||
// TEXTURE ====================================================
|
// TEXTURE ====================================================
|
||||||
// ELEMENTS ===================================================
|
// ELEMENTS ===================================================
|
||||||
// LAYOUT =====================================================
|
// LAYOUT =====================================================
|
||||||
|
.article-author-top,
|
||||||
|
.article-author-bottom {
|
||||||
|
img.bio-photo {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
.rounded(150px);
|
||||||
|
}
|
||||||
|
}
|
||||||
/* Image Grid ============================================== */
|
/* Image Grid ============================================== */
|
||||||
.image-grid {
|
.image-grid {
|
||||||
li {
|
li {
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
.CodeRay {
|
.CodeRay {
|
||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
font-family: @codefont;
|
font-family: @code-font;
|
||||||
font-size: 80%;
|
.font(12);
|
||||||
color: #333332;
|
color: #333332;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
}
|
pre {
|
||||||
|
margin: 0px;
|
||||||
.CodeRay pre {
|
padding: 1em;
|
||||||
margin: 0px;
|
}
|
||||||
padding: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.CodeRay { }
|
div.CodeRay { }
|
||||||
|
|
|
@ -38,49 +38,26 @@ svg:not(:root) {
|
||||||
.grid(12,12);
|
.grid(12,12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Buttons =============================================== */
|
/* Buttons ============================================== */
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
*display: inline;
|
margin-bottom: 20px;
|
||||||
/* IE7 inline-block hack */
|
padding: 8px 20px;
|
||||||
*zoom: 1;
|
.font-rem(14);
|
||||||
padding: 12px 24px;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 4px double @textcolor;
|
|
||||||
.rounded(50px);
|
|
||||||
cursor: pointer;
|
|
||||||
*margin-left: .3em;
|
|
||||||
.transition(.4s linear);
|
|
||||||
&:visited {
|
|
||||||
border: 4px double @linkcolorvisited;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
border: 4px double @linkcolorhover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn:first-child {
|
|
||||||
*margin-left: 0;
|
|
||||||
}
|
|
||||||
.btn-inverse {
|
|
||||||
border: 4px double @white;
|
|
||||||
color: @white;
|
|
||||||
background-color: @black;
|
background-color: @black;
|
||||||
|
color: @white;
|
||||||
|
border: 2px solid @black !important;
|
||||||
|
.rounded(20px);
|
||||||
&:visited {
|
&:visited {
|
||||||
color: @white;
|
color: @white;
|
||||||
border-color: @white;
|
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @white;
|
background-color: @white;
|
||||||
border-color: @white;
|
color: @black;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
.translate(0, 2px);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.btn-small {
|
|
||||||
font-size: 60%;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
}
|
||||||
/* Well ================================================= */
|
/* Well ================================================= */
|
||||||
.well {
|
.well {
|
||||||
|
|
|
@ -40,7 +40,7 @@ input,
|
||||||
button,
|
button,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: @basefont;
|
font-family: @base-font;
|
||||||
.box-sizing(border-box);
|
.box-sizing(border-box);
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
|
|
|
@ -11,8 +11,6 @@
|
||||||
/* Site wide styles (html, body, global classes) =========== */
|
/* Site wide styles (html, body, global classes) =========== */
|
||||||
@import "site.less";
|
@import "site.less";
|
||||||
// TYPOGRAPHY =================================================
|
// TYPOGRAPHY =================================================
|
||||||
/* Typeplate.com typographic starter pack ================== */
|
|
||||||
@import "typeplate.less";
|
|
||||||
@import "typography.less";
|
@import "typography.less";
|
||||||
// MIXINS =====================================================
|
// MIXINS =====================================================
|
||||||
@import "mixins.less";
|
@import "mixins.less";
|
||||||
|
|
|
@ -11,11 +11,11 @@
|
||||||
/* Site wide styles (html, body, global classes) =========== */
|
/* Site wide styles (html, body, global classes) =========== */
|
||||||
@import "site.less";
|
@import "site.less";
|
||||||
// TYPOGRAPHY =================================================
|
// TYPOGRAPHY =================================================
|
||||||
/* Typeplate.com typographic starter pack ================== */
|
|
||||||
@import "typeplate.less";
|
|
||||||
@import "typography.less";
|
@import "typography.less";
|
||||||
/* Pygments Syntax highlighting ============================= */
|
/* Pygments Syntax highlighting ============================= */
|
||||||
@import "pygments.less";
|
@import "pygments.less";
|
||||||
|
// Coderay Syntax highlighting ===============================
|
||||||
|
@import "coderay.less";
|
||||||
// MIXINS =====================================================
|
// MIXINS =====================================================
|
||||||
@import "mixins.less";
|
@import "mixins.less";
|
||||||
@import "grid.less";
|
@import "grid.less";
|
||||||
|
|
|
@ -1,76 +1,126 @@
|
||||||
// ===========================================================
|
// UTILITY MIXINS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
// 320 and Up by Andy Clarke
|
// Clearfix
|
||||||
// Version: 3.0
|
// --------------------
|
||||||
// URL: http://stuffandnonsense.co.uk/projects/320andup/
|
// For clearing floats like a boss h5bp.com/q
|
||||||
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
|
.clearfix {
|
||||||
// Modified by: Michael Rose
|
*zoom: 1;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
// Fixes Opera/contenteditable bug:
|
||||||
|
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ===========================================================/
|
// Webkit-style focus
|
||||||
|
// --------------------
|
||||||
|
.tab-focus() {
|
||||||
|
// Default
|
||||||
|
outline: thin dotted #333;
|
||||||
|
// Webkit
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
// ROOT =====================================================
|
// Center-align a block level element
|
||||||
// TYPOGRAPHY ===============================================
|
// ----------------------------------
|
||||||
.font-size(@font-size: 16){
|
.center-block() {
|
||||||
@rem: (@font-size / 10);
|
display: block;
|
||||||
font-size : @font-size * 1px;
|
margin-left: auto;
|
||||||
font-size : ~"@{rem}rem"; }
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.lineheight(@font-size: 16){
|
// TYPOGRAPHY
|
||||||
@rem: (@font-size / 10);
|
// --------------------------------------------------
|
||||||
line-height: @font-size * 1px;
|
|
||||||
line-height: ~"@{rem}rem"; }
|
// Full-fat vertical rhythm
|
||||||
|
// ------------------------
|
||||||
|
.font-size(@size) {
|
||||||
|
font-size: 0px + @size;
|
||||||
|
font-size: 0rem + @size / @doc-font-size;
|
||||||
|
line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
|
||||||
|
margin-bottom: 0px + @doc-line-height;
|
||||||
|
margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just the REMs
|
||||||
|
// -------------
|
||||||
|
.font-rem(@size) {
|
||||||
|
font-size: 0px + @size;
|
||||||
|
font-size: 0rem + @size / @doc-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just font-size and line-height
|
||||||
|
// ------------------------------
|
||||||
|
.font(@size) {
|
||||||
|
font-size: 0px + @size;
|
||||||
|
font-size: 0rem + @size / @doc-font-size;
|
||||||
|
line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
|
||||||
|
}
|
||||||
|
|
||||||
.text-overflow() {
|
.text-overflow() {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
|
|
||||||
// COLOR ====================================================
|
@indent-var: 0rem + (@doc-line-height / @doc-font-size);
|
||||||
// TEXTURE ==================================================
|
|
||||||
/* Gradients ============================================= */
|
// GRADIENTS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
.horizontal(@startColor : @white, @endColor : @lightergrey) {
|
.horizontal(@startColor : @white, @endColor : @lightergrey) {
|
||||||
background-color: @endColor;
|
background-color: @endColor;
|
||||||
background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
background-image : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||||
background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
background-image : -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||||
background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
|
background-image : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
|
||||||
background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10
|
background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10
|
||||||
background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||||
background-image : linear-gradient(left, @startColor, @endColor); // W3C
|
background-image : linear-gradient(left, @startColor, @endColor); // W3C
|
||||||
background-repeat : repeat-x; }
|
background-repeat : repeat-x; }
|
||||||
|
|
||||||
.vertical(@startColor : @white, @endColor: @lightergrey) {
|
.vertical(@startColor : @white, @endColor: @lightergrey) {
|
||||||
background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
background-image : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||||
background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
background-image : -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||||
background-color : @endColor;
|
background-color : @endColor;
|
||||||
background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||||
background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10
|
||||||
background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
||||||
background-image : linear-gradient(top, @startColor, @endColor); // W3C
|
background-image : linear-gradient(top, @startColor, @endColor); // W3C
|
||||||
background-repeat : repeat-x; }
|
background-repeat : repeat-x; }
|
||||||
|
|
||||||
.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
|
.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
|
||||||
background-color : @endColor;
|
background-color : @endColor;
|
||||||
background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
|
background-image : -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
|
||||||
background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
|
background-image : -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
|
||||||
background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
background-image : -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||||
background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
|
background-image : -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
|
||||||
background-image : linear-gradient(@deg, @startColor, @endColor); // W3C
|
background-image : linear-gradient(@deg, @startColor, @endColor); // W3C
|
||||||
background-repeat : repeat-x; }
|
background-repeat : repeat-x; }
|
||||||
|
|
||||||
/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
|
// .bordered(COLOR, COLOR, COLOR, COLOR);
|
||||||
.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
|
.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
|
||||||
border-top : solid 1px @top-color;
|
border-top : solid 1px @top-color;
|
||||||
border-left : solid 1px @left-color;
|
border-left : solid 1px @left-color;
|
||||||
border-right : solid 1px @right-color;
|
border-right : solid 1px @right-color;
|
||||||
border-bottom : solid 1px @bottom-color; }
|
border-bottom : solid 1px @bottom-color; }
|
||||||
|
|
||||||
/* .rounded(VALUE); ====================================== */
|
// ROUND CORNERS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// .rounded(VALUE);
|
||||||
.rounded(@radius:4px) {
|
.rounded(@radius:4px) {
|
||||||
-webkit-border-radius : @radius;
|
-webkit-border-radius : @radius;
|
||||||
-moz-border-radius : @radius;
|
-moz-border-radius : @radius;
|
||||||
border-radius : @radius; }
|
border-radius : @radius; }
|
||||||
|
|
||||||
/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
|
// .border-radius(VALUE,VALUE,VALUE,VALUE);
|
||||||
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
|
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
|
||||||
-webkit-border-top-right-radius : @topright;
|
-webkit-border-top-right-radius : @topright;
|
||||||
-webkit-border-bottom-right-radius : @bottomright;
|
-webkit-border-bottom-right-radius : @bottomright;
|
||||||
|
@ -88,29 +138,32 @@ border-top-left-radius : @topleft;
|
||||||
-moz-background-clip : padding;
|
-moz-background-clip : padding;
|
||||||
background-clip : padding-box; }
|
background-clip : padding-box; }
|
||||||
|
|
||||||
/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
|
// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
|
||||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||||
-webkit-box-shadow : @shadow;
|
-webkit-box-shadow : @shadow;
|
||||||
-moz-box-shadow : @shadow;
|
-moz-box-shadow : @shadow;
|
||||||
box-shadow : @shadow; }
|
box-shadow : @shadow; }
|
||||||
|
|
||||||
/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */
|
// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
||||||
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
|
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
|
||||||
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||||
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||||
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }
|
box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }
|
||||||
|
|
||||||
/* .text-shadow(); ======================================== */
|
// .text-shadow();
|
||||||
.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
||||||
text-shadow : @shadow; }
|
text-shadow : @shadow; }
|
||||||
|
|
||||||
/* .opacity(VALUE); ======================================= */
|
// .opacity(VALUE);
|
||||||
.opacity(@opacity : .5) {
|
.opacity(@opacity : .5) {
|
||||||
-webkit-opacity : @opacity;
|
-webkit-opacity : @opacity;
|
||||||
-moz-opacity : @opacity;
|
-moz-opacity : @opacity;
|
||||||
opacity : @opacity; }
|
opacity : @opacity; }
|
||||||
|
|
||||||
/* .rotate(VALUEdeg); ===================================== */
|
// TRANSFORMATIONS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// .rotate(VALUEdeg);
|
||||||
.rotate(@deg) {
|
.rotate(@deg) {
|
||||||
-webkit-transform : rotate(@deg);
|
-webkit-transform : rotate(@deg);
|
||||||
-moz-transform : rotate(@deg);
|
-moz-transform : rotate(@deg);
|
||||||
|
@ -118,7 +171,7 @@ opacity : @opacity; }
|
||||||
-o-transform : rotate(@deg);
|
-o-transform : rotate(@deg);
|
||||||
transform : rotate(@deg); }
|
transform : rotate(@deg); }
|
||||||
|
|
||||||
/* .scale(VALUE); ========================================= */
|
// .scale(VALUE);
|
||||||
.scale(@ratio) {
|
.scale(@ratio) {
|
||||||
-webkit-transform : scale(@ratio);
|
-webkit-transform : scale(@ratio);
|
||||||
-moz-transform : scale(@ratio);
|
-moz-transform : scale(@ratio);
|
||||||
|
@ -126,7 +179,7 @@ transform : rotate(@deg); }
|
||||||
-o-transform : scale(@ratio);
|
-o-transform : scale(@ratio);
|
||||||
transform : scale(@ratio); }
|
transform : scale(@ratio); }
|
||||||
|
|
||||||
/* .skew(VALUE, VALUE); =================================== */
|
// .skew(VALUE, VALUE);
|
||||||
.skew(@x: 0, @y: 0) {
|
.skew(@x: 0, @y: 0) {
|
||||||
-webkit-transform : skew(@x, @y);
|
-webkit-transform : skew(@x, @y);
|
||||||
-moz-transform : skew(@x, @y);
|
-moz-transform : skew(@x, @y);
|
||||||
|
@ -134,7 +187,7 @@ transform : scale(@ratio); }
|
||||||
-o-transform : skew(@x, @y);
|
-o-transform : skew(@x, @y);
|
||||||
transform : skew(@x, @y); }
|
transform : skew(@x, @y); }
|
||||||
|
|
||||||
/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
|
// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
||||||
.transition(@transition) {
|
.transition(@transition) {
|
||||||
-webkit-transition : @transition;
|
-webkit-transition : @transition;
|
||||||
-moz-transition : @transition;
|
-moz-transition : @transition;
|
||||||
|
@ -142,7 +195,7 @@ transform : skew(@x, @y); }
|
||||||
-o-transition : @transition;
|
-o-transition : @transition;
|
||||||
transition : @transition; }
|
transition : @transition; }
|
||||||
|
|
||||||
/* .translate(VALUE, VALUE) =============================== */
|
// .translate(VALUE, VALUE)
|
||||||
.translate(@x: 0, @y: 0) {
|
.translate(@x: 0, @y: 0) {
|
||||||
-webkit-transform : translate(@x, @y);
|
-webkit-transform : translate(@x, @y);
|
||||||
-moz-transform : translate(@x, @y);
|
-moz-transform : translate(@x, @y);
|
||||||
|
@ -157,51 +210,46 @@ transform : translate(@x, @y); }
|
||||||
-o-transform : translate(@x, @y, @z);
|
-o-transform : translate(@x, @y, @z);
|
||||||
transform : translate(@x, @y, @z); }
|
transform : translate(@x, @y, @z); }
|
||||||
|
|
||||||
// ELEMENTS ==================================================
|
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
|
||||||
/* .background-alpha(VALUE VALUE); ======================== */
|
-webkit-animation: @name @duration @delay @ease;
|
||||||
|
-moz-animation: @name @duration @delay @ease;
|
||||||
|
-ms-animation: @name @duration @delay @ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// BACKGROUND
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// .background-alpha(VALUE VALUE);
|
||||||
.background-alpha(@color: @white, @alpha: 1) {
|
.background-alpha(@color: @white, @alpha: 1) {
|
||||||
background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
|
background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
|
||||||
|
|
||||||
/* .background-size(VALUE VALUE); ========================= */
|
// .background-size(VALUE VALUE);
|
||||||
.background-size(@size){
|
.background-size(@size){
|
||||||
-webkit-background-size : @size;
|
-webkit-background-size : @size;
|
||||||
-moz-background-size : @size;
|
-moz-background-size : @size;
|
||||||
-o-background-size : @size;
|
-o-background-size : @size;
|
||||||
background-size : @size; }
|
background-size : @size; }
|
||||||
|
|
||||||
/* .background-clip(VALUE); (border-box, padding-box, content-box) */
|
// .background-clip(VALUE); (border-box, padding-box, content-box)
|
||||||
.background-clip(@clip) {
|
.background-clip(@clip) {
|
||||||
-webkit-background-clip : @clip;
|
-webkit-background-clip : @clip;
|
||||||
-moz-background-clip : @clip;
|
-moz-background-clip : @clip;
|
||||||
background-clip : @clip; }
|
background-clip : @clip; }
|
||||||
|
|
||||||
/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
|
// .box-sizing(VALUE); (border-box, padding-box, content-box)
|
||||||
.box-sizing(@boxsize: border-box) {
|
.box-sizing(@boxsize: border-box) {
|
||||||
-webkit-box-sizing : @boxsize;
|
-webkit-box-sizing : @boxsize;
|
||||||
-moz-box-sizing : @boxsize;
|
-moz-box-sizing : @boxsize;
|
||||||
-ms-box-sizing : @boxsize;
|
-ms-box-sizing : @boxsize;
|
||||||
box-sizing : @boxsize; }
|
box-sizing : @boxsize; }
|
||||||
|
|
||||||
/* Contain floats ========================================= */
|
// For image replacement
|
||||||
.clearfix() {
|
|
||||||
*zoom:1;
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content:"";
|
|
||||||
display:table;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
clear:both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* For image replacement ================================== */
|
|
||||||
.hide-text() {
|
.hide-text() {
|
||||||
text-indent : 100%;
|
text-indent : 100%;
|
||||||
white-space : nowrap;
|
white-space : nowrap;
|
||||||
overflow : hidden; }
|
overflow : hidden; }
|
||||||
|
|
||||||
/* Hide from visual and speaking browsers ================= */
|
// Hide from visual and speaking browsers
|
||||||
.hidden() {
|
.hidden() {
|
||||||
display : none !important;
|
display : none !important;
|
||||||
visibility : hidden; }
|
visibility : hidden; }
|
||||||
|
@ -210,23 +258,23 @@ visibility : hidden; }
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide but maintain layout =============================== */
|
// Hide but maintain layout
|
||||||
.invisible() {
|
.invisible() {
|
||||||
visibility : hidden; }
|
visibility : hidden; }
|
||||||
|
|
||||||
/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
|
// .resize(VALUE) (none, both, horizontal, vertical, inherit)
|
||||||
.resize(@direction: both) {
|
.resize(@direction: both) {
|
||||||
resize : @direction;
|
resize : @direction;
|
||||||
overflow : auto; }
|
overflow : auto; }
|
||||||
|
|
||||||
/* .userselect(VALUE) (all, element, none, text) ========== */
|
// .userselect(VALUE) (all, element, none, text)
|
||||||
.user-select(@select) {
|
.user-select(@select) {
|
||||||
-webkit-user-select : @select;
|
-webkit-user-select : @select;
|
||||||
-moz-user-select : @select;
|
-moz-user-select : @select;
|
||||||
-o-user-select : @select;
|
-o-user-select : @select;
|
||||||
user-select : @select; }
|
user-select : @select; }
|
||||||
|
|
||||||
/* Hidden but available to speaking browsers ============== */
|
// Hidden but available to speaking browsers
|
||||||
.visuallyhidden() {
|
.visuallyhidden() {
|
||||||
overflow : hidden;
|
overflow : hidden;
|
||||||
position : absolute;
|
position : absolute;
|
||||||
|
@ -237,7 +285,7 @@ margin : -1px;
|
||||||
padding : 0;
|
padding : 0;
|
||||||
border : 0; }
|
border : 0; }
|
||||||
|
|
||||||
/* Make visuallyhidden focusable with a keyboard ========== */
|
// Make visuallyhidden focusable with a keyboard
|
||||||
.visuallyhidden.focusable:active,
|
.visuallyhidden.focusable:active,
|
||||||
.visuallyhidden.focusable:focus {
|
.visuallyhidden.focusable:focus {
|
||||||
position : static;
|
position : static;
|
||||||
|
@ -246,54 +294,3 @@ height : auto;
|
||||||
width : auto;
|
width : auto;
|
||||||
margin : 0;
|
margin : 0;
|
||||||
overflow: visible; }
|
overflow: visible; }
|
||||||
|
|
||||||
/* Responsive visibility utilities =================================== */
|
|
||||||
/* For desktops =========================================== */
|
|
||||||
.visible-phone { display: none !important; }
|
|
||||||
.visible-tablet { display: none !important; }
|
|
||||||
.visible-desktop { } // Don't set initially
|
|
||||||
.hidden-phone { }
|
|
||||||
.hidden-tablet { }
|
|
||||||
.hidden-desktop { display: none !important; }
|
|
||||||
/* Mobile phones only =====================================*/
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
// Show
|
|
||||||
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
|
|
||||||
// Hide
|
|
||||||
.hidden-phone { display: none !important; }
|
|
||||||
// Hide everything else
|
|
||||||
.hidden-desktop { display: inherit !important; }
|
|
||||||
.visible-desktop { display: none !important; }
|
|
||||||
}
|
|
||||||
/* Tablets & small desktops only ========================== */
|
|
||||||
@media (min-width: 768px) and (max-width: 979px) {
|
|
||||||
// Show
|
|
||||||
.visible-tablet { display: inherit !important; }
|
|
||||||
// Hide
|
|
||||||
.hidden-tablet { display: none !important; }
|
|
||||||
// Hide everything else
|
|
||||||
.hidden-desktop { display: inherit !important; }
|
|
||||||
.visible-desktop { display: none !important ; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// LAYOUT ====================================================
|
|
||||||
/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */
|
|
||||||
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
|
|
||||||
-webkit-column-width : @colwidth;
|
|
||||||
-webkit-column-count : @colcount;
|
|
||||||
-webkit-column-gap : @colgap;
|
|
||||||
-webkit-column-rule-color : @columnRuleColor;
|
|
||||||
-webkit-column-rule-style : @columnRuleStyle;
|
|
||||||
-webkit-column-rule-width : @columnRuleWidth;
|
|
||||||
-moz-column-width : @colwidth;
|
|
||||||
-moz-column-count : @colcount;
|
|
||||||
-moz-column-gap : @colgap;
|
|
||||||
-moz-column-rule-color : @columnRuleColor;
|
|
||||||
-moz-column-rule-style : @columnRuleStyle;
|
|
||||||
-moz-column-rule-width : @columnRuleWidth;
|
|
||||||
column-width : @colwidth;
|
|
||||||
column-count : @colcount;
|
|
||||||
column-gap : @colgap;
|
|
||||||
column-rule-color : @columnRuleColor;
|
|
||||||
column-rule-style : @columnRuleStyle;
|
|
||||||
column-rule-width : @columnRuleWidth; }
|
|
2
assets/less/normalize.less
vendored
2
assets/less/normalize.less
vendored
|
@ -171,7 +171,7 @@ samp {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
white-space: pre-wrap;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
html {
|
body {
|
||||||
background-color: @bodycolor;
|
background-color: @bodycolor;
|
||||||
font-family: @basefont;
|
font-family: @base-font;
|
||||||
font-color: @textcolor;
|
font-color: @textcolor;
|
||||||
font-size: 90%;
|
|
||||||
}
|
}
|
||||||
.navigation-wrapper {
|
.navigation-wrapper {
|
||||||
.container();
|
.container();
|
||||||
padding: 2em 0 3em;
|
padding: 2em 0 3em;
|
||||||
font-family: @baseheadingfont;
|
font-family: @heading-font;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
@ -62,10 +61,16 @@ html {
|
||||||
.prefix(12,1);
|
.prefix(12,1);
|
||||||
.suffix(12,1);
|
.suffix(12,1);
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: .5em;
|
||||||
|
.font-rem(28);
|
||||||
|
border-bottom: 1px solid lighten(@black,70);
|
||||||
|
}
|
||||||
article {
|
article {
|
||||||
h2 {
|
h2 {
|
||||||
.delta();
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
.font-rem(24);
|
||||||
}
|
}
|
||||||
p+p {
|
p+p {
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
|
@ -101,31 +106,14 @@ html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.headline-wrap {
|
|
||||||
h1 {
|
|
||||||
.beta();
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
.delta();
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article-wrap {
|
|
||||||
h2 {
|
|
||||||
.gamma();
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
.delta();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.byline {
|
.byline {
|
||||||
clear: both;
|
clear: both;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
.article-author-top,
|
.article-author-top,
|
||||||
.article-author-bottom {
|
.article-author-bottom {
|
||||||
h4 {
|
h3 {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
|
@ -135,17 +123,54 @@ html {
|
||||||
border-bottom: 0 solid transparent;
|
border-bottom: 0 solid transparent;
|
||||||
}
|
}
|
||||||
img.bio-photo {
|
img.bio-photo {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
.rounded(100px);
|
.rounded(100px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.author-social {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
.font-rem(14);
|
||||||
|
color: @black;
|
||||||
|
&:visited {
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.scale(1.1);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
.translate(0, 2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
.article-author-top {
|
.article-author-top {
|
||||||
display: none;
|
display: none;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.article-author-bottom {
|
.article-author-bottom {
|
||||||
|
margin-bottom: 1em;
|
||||||
.bio-photo {
|
.bio-photo {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
}
|
}
|
||||||
|
.author-social {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-wrap {
|
||||||
|
// Dotted line underlines for links
|
||||||
|
p > a,
|
||||||
|
li > a {
|
||||||
|
border-bottom: 1px dotted lighten(@link-color, 50);
|
||||||
|
&:hover {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p > a.reversefootnote,
|
||||||
|
li > a.reversefootnote {
|
||||||
|
border-bottom-width: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.toc {
|
.toc {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -176,7 +201,7 @@ html {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: @baseheadingfont;
|
font-family: @heading-font;
|
||||||
border-bottom: 1px solid darken(@white, 50);
|
border-bottom: 1px solid darken(@white, 50);
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: 0 solid transparent;
|
border-bottom: 0 solid transparent;
|
||||||
|
@ -223,7 +248,7 @@ html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.holder {
|
.holder {
|
||||||
font-family: @baseheadingfont;
|
font-family: @heading-font;
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
@ -267,9 +292,13 @@ html {
|
||||||
p,
|
p,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6,
|
||||||
|
span {
|
||||||
color: darken(@white, 25);
|
color: darken(@white, 25);
|
||||||
}
|
}
|
||||||
|
span {
|
||||||
|
.font-rem(14);
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
border-bottom: 0 solid transparent;
|
border-bottom: 0 solid transparent;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -287,8 +316,9 @@ html {
|
||||||
.grid(12,10);
|
.grid(12,10);
|
||||||
.prefix(12,1);
|
.prefix(12,1);
|
||||||
.suffix(12,1);
|
.suffix(12,1);
|
||||||
|
margin-bottom: 2em;
|
||||||
h4 {
|
h4 {
|
||||||
.epsilon();
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
@ -302,7 +332,6 @@ html {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
a {
|
a {
|
||||||
.delta();
|
|
||||||
color: lighten(@basecolor, 40%);
|
color: lighten(@basecolor, 40%);
|
||||||
.transition(.4s linear);
|
.transition(.4s linear);
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -335,7 +364,10 @@ html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chrome-frame {
|
|
||||||
|
// Browser Upgrade
|
||||||
|
// --------------------------------------------------
|
||||||
|
.browser-upgrade {
|
||||||
background: #000;
|
background: #000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 2em 0;
|
margin: 0 0 2em 0;
|
||||||
|
@ -351,3 +383,33 @@ html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Google Search
|
||||||
|
// --------------------------------------------------
|
||||||
|
#goog-fixurl {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#goog-wm-qt {
|
||||||
|
width: auto;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
display: inline-block;
|
||||||
|
.font-rem(14);
|
||||||
|
background-color: @white;
|
||||||
|
color: @black;
|
||||||
|
border-width: 2px !important;
|
||||||
|
border-style: solid !important;
|
||||||
|
border-color: lighten(@black,50);
|
||||||
|
.rounded(3px);
|
||||||
|
}
|
||||||
|
#goog-wm-sb {
|
||||||
|
.btn();
|
||||||
|
}
|
|
@ -1,74 +1,74 @@
|
||||||
.highlight {
|
.highlight {
|
||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
font-family: @codefont;
|
font-family: @code-font;
|
||||||
font-size: 80%;
|
.font(12);
|
||||||
color: #333332;
|
color: #333332;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight pre {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hll { background-color: #ffffcc }
|
|
||||||
.c { color: #999988; font-style: italic } /* Comment */
|
|
||||||
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
|
||||||
.k { color: #000000; font-weight: bold } /* Keyword */
|
|
||||||
.o { color: #000000; font-weight: bold } /* Operator */
|
|
||||||
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
|
||||||
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
|
||||||
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
|
||||||
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
|
||||||
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
|
||||||
.ge { color: #000000; font-style: italic } /* Generic.Emph */
|
|
||||||
.gr { color: #aa0000 } /* Generic.Error */
|
|
||||||
.gh { color: #999999 } /* Generic.Heading */
|
|
||||||
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
|
||||||
.go { color: #888888 } /* Generic.Output */
|
|
||||||
.gp { color: #555555 } /* Generic.Prompt */
|
|
||||||
.gs { font-weight: bold } /* Generic.Strong */
|
|
||||||
.gu { color: #aaaaaa } /* Generic.Subheading */
|
|
||||||
.gt { color: #aa0000 } /* Generic.Traceback */
|
|
||||||
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
|
||||||
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
|
||||||
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
|
||||||
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
|
||||||
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
|
||||||
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
|
||||||
.m { color: #009999 } /* Literal.Number */
|
|
||||||
.s { color: #d01040 } /* Literal.String */
|
|
||||||
.na { color: #008080 } /* Name.Attribute */
|
|
||||||
.nb { color: #0086B3 } /* Name.Builtin */
|
|
||||||
.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
||||||
.no { color: #008080 } /* Name.Constant */
|
|
||||||
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
|
||||||
.ni { color: #800080 } /* Name.Entity */
|
|
||||||
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
|
||||||
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
|
||||||
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
|
||||||
.nn { color: #555555 } /* Name.Namespace */
|
|
||||||
.nt { color: #000080 } /* Name.Tag */
|
|
||||||
.nv { color: #008080 } /* Name.Variable */
|
|
||||||
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
|
||||||
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
||||||
.mf { color: #009999 } /* Literal.Number.Float */
|
|
||||||
.mh { color: #009999 } /* Literal.Number.Hex */
|
|
||||||
.mi { color: #009999 } /* Literal.Number.Integer */
|
|
||||||
.mo { color: #009999 } /* Literal.Number.Oct */
|
|
||||||
.sb { color: #d01040 } /* Literal.String.Backtick */
|
|
||||||
.sc { color: #d01040 } /* Literal.String.Char */
|
|
||||||
.sd { color: #d01040 } /* Literal.String.Doc */
|
|
||||||
.s2 { color: #d01040 } /* Literal.String.Double */
|
|
||||||
.se { color: #d01040 } /* Literal.String.Escape */
|
|
||||||
.sh { color: #d01040 } /* Literal.String.Heredoc */
|
|
||||||
.si { color: #d01040 } /* Literal.String.Interpol */
|
|
||||||
.sx { color: #d01040 } /* Literal.String.Other */
|
|
||||||
.sr { color: #009926 } /* Literal.String.Regex */
|
|
||||||
.s1 { color: #d01040 } /* Literal.String.Single */
|
|
||||||
.ss { color: #990073 } /* Literal.String.Symbol */
|
|
||||||
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
||||||
.vc { color: #008080 } /* Name.Variable.Class */
|
|
||||||
.vg { color: #008080 } /* Name.Variable.Global */
|
|
||||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
|
||||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
|
@ -18,7 +18,11 @@
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.pull-right {
|
.pull-right {
|
||||||
float:right;
|
float: right;
|
||||||
|
}
|
||||||
|
.image-pull-right {
|
||||||
|
float: right;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.clearfix {
|
.clearfix {
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
|
@ -39,3 +43,8 @@
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Global Transition ==================================== */
|
||||||
|
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
||||||
|
.transition(all .2s ease);
|
||||||
|
}
|
|
@ -1,727 +0,0 @@
|
||||||
/*!
|
|
||||||
+---------------------------------------------------------------------+
|
|
||||||
| _ _ _ |
|
|
||||||
| | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ |
|
|
||||||
| | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ |
|
|
||||||
| | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ |
|
|
||||||
| \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| |
|
|
||||||
| |___/ |_| |_| |
|
|
||||||
| |
|
|
||||||
| |
|
|
||||||
| URL: http://typeplate.com |
|
|
||||||
| VERSION: 1.0.1 |
|
|
||||||
| Github: https://github.com/typePlate/typeplate.github.com |
|
|
||||||
| AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) |
|
|
||||||
| LICENSE: Creative Commmons |
|
|
||||||
| http://creativecommons.org/licenses/by/3.0 |
|
|
||||||
| |
|
|
||||||
+---------------------------------------------------------------------+
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
//
|
|
||||||
// $V a r i a b l e s
|
|
||||||
//
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
|
|
||||||
// $B a s e T y p e
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@weight: normal;
|
|
||||||
@line-height: 1.65;
|
|
||||||
@font-size: 112.5; // percentage value (16 * 112.5% = 18px)
|
|
||||||
@font-base: 16 * (@font-size/100); // converts our percentage to a pixel value
|
|
||||||
@measure: @font-base * @line-height;
|
|
||||||
@font-family: serif;
|
|
||||||
@font-family-sans: sans-serif;
|
|
||||||
|
|
||||||
//the serif boolean var can be redeclared from another stylesheet. However
|
|
||||||
//the var must be placed after your @import "typeplate.less";
|
|
||||||
@serif-boolean: true;
|
|
||||||
|
|
||||||
|
|
||||||
// $C o l o r
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@body-copy-color: @textcolor;
|
|
||||||
@heading-color: @textcolor;
|
|
||||||
|
|
||||||
|
|
||||||
// $A M P E R S A N D @font-face
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@amp-fontface-name: Ampersand;
|
|
||||||
@amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
|
|
||||||
@amp-fontface-fallback: local("Georgia");
|
|
||||||
|
|
||||||
|
|
||||||
// $A M P E R S A N D e l e m e n t
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Allows for our ampersand element to have differing
|
|
||||||
// font-family from the ampersand unicode font-family.
|
|
||||||
@amp-font-family: Verdana, sans-serif;
|
|
||||||
|
|
||||||
|
|
||||||
// $T y p e S c a l e
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@tera: 117; // 117 = 18 × 6.5
|
|
||||||
@giga: 90; // 90 = 18 × 5
|
|
||||||
@mega: 72; // 72 = 18 × 4
|
|
||||||
@alpha: 60; // 60 = 18 × 3.3333
|
|
||||||
@beta: 48; // 48 = 18 × 2.6667
|
|
||||||
@gamma: 36; // 36 = 18 × 2
|
|
||||||
@delta: 24; // 24 = 18 × 1.3333
|
|
||||||
@epsilon: 21; // 21 = 18 × 1.1667
|
|
||||||
@zeta: 18; // 18 = 18 × 1
|
|
||||||
|
|
||||||
|
|
||||||
// $T y p e S c a l e U n i t
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@type-scale-unit-value: rem;
|
|
||||||
|
|
||||||
|
|
||||||
// $T e x t I n d e n t a t i o n
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@indent-val: 1.5em;
|
|
||||||
|
|
||||||
|
|
||||||
// $S t a t s T a b
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@stats-font-size: 1.5rem;
|
|
||||||
@stats-list-margin: 0 0.625rem 0 0;
|
|
||||||
@stats-list-padding: 0 0.625rem 0 0;
|
|
||||||
@stats-item-font-size: 0.875rem;
|
|
||||||
@stats-item-margin: 0.125rem 0 0 0;
|
|
||||||
@stats-border-style: 0.125rem solid #ccc;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
//
|
|
||||||
// $F o n t f a c e s
|
|
||||||
//
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
|
|
||||||
// $U N I C O D E - R A N G E A m p e r s a n d
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "@{amp-fontface-name}";
|
|
||||||
src: @amp-fontface-source;
|
|
||||||
unicode-range: ~"U+270C";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ampersand fallback font for unicode range
|
|
||||||
@font-face {
|
|
||||||
font-family: "@{amp-fontface-name}";
|
|
||||||
src: @amp-fontface-fallback;
|
|
||||||
unicode-range: ~"U+270C";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
//
|
|
||||||
// $F u n c t i o n s
|
|
||||||
//
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
|
|
||||||
// $C o n t e x t C a l c u l a t o r
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Less conversion: No function support
|
|
||||||
//.ems(@target, @context) {
|
|
||||||
// @return (@target/@context)#{em};
|
|
||||||
//}
|
|
||||||
|
|
||||||
|
|
||||||
// $M o d u l a r S c a l e
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// http://thesassway.com/projects/modular-scale
|
|
||||||
|
|
||||||
// Less conversion: No function support
|
|
||||||
//@function modular-scale(@scale, @base, @value) {
|
|
||||||
// // divide a given font-size by base font-size & return a relative em value
|
|
||||||
// @return (@scale/@base)#{@value};
|
|
||||||
//}
|
|
||||||
|
|
||||||
// Less conversion: No function support
|
|
||||||
//@function measure-margin(@scale, @measure, @value) {
|
|
||||||
// // divide 1 unit of measure by given font-size & return a relative em value
|
|
||||||
// @return (@measure/@scale)#{@value};
|
|
||||||
//}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
//
|
|
||||||
// $M i x i n s
|
|
||||||
//
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
|
|
||||||
// $M o d u l a r S c a l e
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// @Typographic scale
|
|
||||||
.modular-scale (@scale, @base, @value, @measure:"") when (@measure = "") {
|
|
||||||
font-size: ~"@{scale}px";
|
|
||||||
@font: (@scale/@base) + @value;
|
|
||||||
font-size: ~"@{font}rem";
|
|
||||||
}
|
|
||||||
.modular-scale (@scale, @base, @value, @measure:"") when not (@measure = "") {
|
|
||||||
font-size: ~"@{scale}px";
|
|
||||||
@font: (@scale/@base) + @value;
|
|
||||||
font-size: ~"@{font}rem";
|
|
||||||
@margin: (@measure/@scale) + @value;
|
|
||||||
margin-bottom: ~"@{margin}rem";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $B o d y C o p y
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when (@serif-boolean = true) {
|
|
||||||
font: @weight ~"@{font-size}%/@{line-height}" @font-family;
|
|
||||||
}
|
|
||||||
.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when not (@serif-boolean = true) {
|
|
||||||
font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $H y p h e n
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
//http://trentwalton.com/2011/09/07/css-hyphenation
|
|
||||||
|
|
||||||
.css-hyphens (@val) {
|
|
||||||
// Accepted values: [ none | manual | auto ]
|
|
||||||
-webkit-hyphens: @val; // Safari 5.1 thru 6, iOS 4.2 thru 6
|
|
||||||
-moz-hyphens: @val; // Firefox 16 thru 20
|
|
||||||
-ms-hyphens: @val; // IE10
|
|
||||||
-o-hyphens: @val; // PRESTO...haha LOL
|
|
||||||
hyphens: @val; // W3C standard
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $S m a l l c a p s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
|
|
||||||
// ISSUE#1 : https://github.com/zakkain/web-thang/issues/1
|
|
||||||
|
|
||||||
.smallcaps (@color, @font-weight) {
|
|
||||||
// depends on the font family.
|
|
||||||
// some font-families don't support small caps
|
|
||||||
// or don't provide them with their web font.
|
|
||||||
font-variant: small-caps;
|
|
||||||
font-weight: @font-weight;
|
|
||||||
text-transform: lowercase;
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $F o n t - S i z e - A d j u s t
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// correct x-height for fallback fonts: requires secret formula
|
|
||||||
// yet to be discovered. This is still wacky for support. Use
|
|
||||||
// wisely grasshopper.
|
|
||||||
|
|
||||||
.font-size-adjust (@adjust-value) {
|
|
||||||
// firefox 17+ only (as of Feb. 2013)
|
|
||||||
font-size-adjust: @adjust-value;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $A m p e r s a n d
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
.ampersand (@amp-font-family) {
|
|
||||||
font-family: @amp-font-family;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ampersand-placeholder {
|
|
||||||
.ampersand(@amp-font-family);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call your ampersand on any element you wish from another stylesheet
|
|
||||||
// using this Sass extend we've provided...
|
|
||||||
// @extend %ampersand-placeholder;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// $W o r d W r a p
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// Silent Sass Classes - A.K.A Placeholders
|
|
||||||
//
|
|
||||||
// normal: Indicates that lines may only break at normal word break points.
|
|
||||||
// break-word : Indicates that normally unbreakable words may be broken at
|
|
||||||
// arbitrary points if there are no otherwise acceptable break points in the line.
|
|
||||||
|
|
||||||
.breakword {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.normal-wrap {
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inherit-wrap {
|
|
||||||
word-wrap: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $D r o p c a p s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
/**
|
|
||||||
* Dropcap Sass @include
|
|
||||||
* Use the following Sass @include with any selector you feel necessary.
|
|
||||||
*
|
|
||||||
@include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent);
|
|
||||||
*
|
|
||||||
* Extend this object into your custom stylesheet.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Include your '@include dropcap()' mixin and pass the following
|
|
||||||
// arguments below. Feel free to pass in arguments we've provided.
|
|
||||||
// At this time you cannot pass in font-family arguments but you're gonna
|
|
||||||
// change that anyway so why not just make that separately in your declaration.
|
|
||||||
.dropcap (@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent) {
|
|
||||||
&:first-letter {
|
|
||||||
float: @float;
|
|
||||||
margin: @margin;
|
|
||||||
padding: @padding;
|
|
||||||
font-size: @font-size;
|
|
||||||
font-family: @font-family;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
text-indent: @text-indent;
|
|
||||||
background: @bg;
|
|
||||||
color: @color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-cap {
|
|
||||||
.dropcap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// $D e f i n i t i o n L i s t
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// lining
|
|
||||||
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
|
|
||||||
//
|
|
||||||
// dictionary-style
|
|
||||||
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
|
|
||||||
|
|
||||||
.definition-list-style (@style) when (@style = lining) {
|
|
||||||
dt,
|
|
||||||
dd {
|
|
||||||
display: inline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
dt,
|
|
||||||
dd {
|
|
||||||
& + dt {
|
|
||||||
&:before {
|
|
||||||
content: "\A";
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
& + dd {
|
|
||||||
&:before {
|
|
||||||
content: ", ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: ": ";
|
|
||||||
margin-left: -0.2rem; //removes extra space between the dt and the colon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// dictionary-style
|
|
||||||
.definition-list-style (@style) when (@style = dictionary-style) {
|
|
||||||
dt {
|
|
||||||
display: inline;
|
|
||||||
counter-reset: definitions;
|
|
||||||
& + dt {
|
|
||||||
&:before {
|
|
||||||
content: ", ";
|
|
||||||
margin-left: -0.2rem; // removes extra space between the dt and the comma
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
display: block;
|
|
||||||
counter-increment: definitions;
|
|
||||||
&:before {
|
|
||||||
content: ~"counter(definitions, decimal)" ". ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
//
|
|
||||||
// $T y p e l a t e S t y l i n g
|
|
||||||
//
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
|
|
||||||
// $G l o b a l s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
html {
|
|
||||||
.base-type(@weight, @line-height, @font-size, @font-family, @serif-boolean);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
// Ala Trent Walton
|
|
||||||
// .css-hyphens (auto);
|
|
||||||
|
|
||||||
// normal-wrap: Indicates that lines may only break at normal word break points.
|
|
||||||
// breakword : Indicates that normally unbreakable words may be broken at ...
|
|
||||||
// arbitrary points if there are no otherwise acceptable break points in the line.
|
|
||||||
.normal-wrap;
|
|
||||||
color: @body-copy-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $H e a d i n g s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// styles for all headings, in the style of @csswizardry
|
|
||||||
.hN () {
|
|
||||||
// voodoo to enable ligatures and kerning
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
// this fixes huge spaces when a heading wraps onto two lines
|
|
||||||
line-height: 1;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// for each size in the scale, create a class
|
|
||||||
.tera { .modular-scale(@tera, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.giga { .modular-scale(@giga, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.mega { .modular-scale(@mega, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.alpha { .modular-scale(@alpha, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.beta { .modular-scale(@beta, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.gamma { .modular-scale(@gamma, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.delta { .modular-scale(@delta, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.epsilon { .modular-scale(@epsilon, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
.zeta { .modular-scale(@zeta, @font-base, @type-scale-unit-value, @measure); }
|
|
||||||
|
|
||||||
// associate h1-h6 tags with their appropriate greek heading
|
|
||||||
h1 {
|
|
||||||
.alpha;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
.beta;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
.gamma;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
.delta;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
.epsilon;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
.zeta;
|
|
||||||
.hN;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $ P a r a g r a p h s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 @indent-val;
|
|
||||||
& + p {
|
|
||||||
//siblings indentation
|
|
||||||
text-indent: @indent-val;
|
|
||||||
margin-top: -@indent-val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $ H y p h e n s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation
|
|
||||||
|
|
||||||
abbr,
|
|
||||||
acronym,
|
|
||||||
blockquote,
|
|
||||||
code,
|
|
||||||
dir,
|
|
||||||
kbd,
|
|
||||||
listing,
|
|
||||||
plaintext,
|
|
||||||
q,
|
|
||||||
samp,
|
|
||||||
tt,
|
|
||||||
var,
|
|
||||||
xmp {
|
|
||||||
.css-hyphens (none);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $C o d e b l o c k s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// White Space Mixins
|
|
||||||
.white-space-pre-wrap () {
|
|
||||||
white-space: -moz-pre-wrap; // Firefox 1.0-2.0
|
|
||||||
white-space: pre-wrap; // Current Browsers
|
|
||||||
}
|
|
||||||
.white-space-pre () {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
.normal-wrap;
|
|
||||||
.white-space-pre-wrap;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
.white-space-pre;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
.white-space-pre;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $ S m a l l c a p s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Abbreviations Markup
|
|
||||||
*
|
|
||||||
<abbr title="hyper text markup language">HMTL</abbr>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
abbr {
|
|
||||||
.smallcaps(@textcolor, 400);
|
|
||||||
&:hover {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $ H e a d i n g s C o l o r
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
color: @heading-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $ D e f i n i t i o n L i s t s
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Lining Definition Style Markup
|
|
||||||
*
|
|
||||||
<dl class="lining">
|
|
||||||
<dt><b></b></dt>
|
|
||||||
<dd></dd>
|
|
||||||
</dl>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
.lining {
|
|
||||||
.definition-list-style(lining);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dictionary Definition Style Markup
|
|
||||||
*
|
|
||||||
<dl class="dictionary-style">
|
|
||||||
<dt><b></b></dt>
|
|
||||||
<dd></dd>
|
|
||||||
</dl>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
.dictionary-style {
|
|
||||||
.definition-list-style(dictionary-style);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// $S t a t s T a b
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stats Tab Markup
|
|
||||||
*
|
|
||||||
<ul class="stats-tabs">
|
|
||||||
<li><a href="#">[value]<b>[name]</b></a></li>
|
|
||||||
</ul>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
.stats-tabs {
|
|
||||||
padding: 0;
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: @stats-list-margin;
|
|
||||||
padding: @stats-list-padding;
|
|
||||||
border-right: @stats-border-style;
|
|
||||||
&:last-child {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: @stats-font-size;
|
|
||||||
font-weight: bold;
|
|
||||||
b {
|
|
||||||
display: block;
|
|
||||||
margin: @stats-item-margin;
|
|
||||||
font-size: @stats-item-font-size;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// @Blockquote Cites
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
/**
|
|
||||||
* Blockquote Markup
|
|
||||||
*
|
|
||||||
<blockquote cite="">
|
|
||||||
<p>″″</p>
|
|
||||||
<cite>
|
|
||||||
<small><a href=""></a></small>
|
|
||||||
</cite>
|
|
||||||
</blockquote>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
.cite-style(@display:block, @text-align:right, @font-size: .875em) {
|
|
||||||
display: @display;
|
|
||||||
font-size: @font-size;
|
|
||||||
text-align: @text-align;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cite {
|
|
||||||
.cite-style;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// @Pull Quotes
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
// http://24ways.org/2005/swooshy-curly-quotes-without-images
|
|
||||||
//
|
|
||||||
// http://todomvc.com - Thanks sindresorhus!
|
|
||||||
// https://github.com/typeplate/typeplate.github.com/issues/49
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Pull Quotes Markup
|
|
||||||
*
|
|
||||||
<aside class="pull-quote">
|
|
||||||
<blockquote>
|
|
||||||
<p></p>
|
|
||||||
</blockquote>
|
|
||||||
</aside>
|
|
||||||
*
|
|
||||||
* Extend this object into your custom stylesheet.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
.pull-quotes(@font-size, @opacity) {
|
|
||||||
position: relative;
|
|
||||||
padding: (@font-size/@font-size);
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
height: (@font-size/@font-size);
|
|
||||||
opacity: @opacity;
|
|
||||||
position: absolute;
|
|
||||||
font-size: @font-size;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: '“';
|
|
||||||
top: 0em;
|
|
||||||
left: 0em;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
content: '”';
|
|
||||||
bottom: 0em;
|
|
||||||
right: 0em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-quote {
|
|
||||||
.pull-quotes(4em, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// @Figures
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Figures Markup
|
|
||||||
*
|
|
||||||
<figure>
|
|
||||||
<figcaption>
|
|
||||||
<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// @Footnotes
|
|
||||||
// --------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Footnote Markup : Replace 'X' with your unique number for each footnote
|
|
||||||
*
|
|
||||||
<article>
|
|
||||||
<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
|
|
||||||
<footer>
|
|
||||||
<ol class="foot-notes">
|
|
||||||
<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
|
|
||||||
</ol>
|
|
||||||
</footer>
|
|
||||||
</article>
|
|
||||||
*
|
|
||||||
* Extend this object into your markup.
|
|
||||||
*
|
|
||||||
*/
|
|
|
@ -1,25 +1,48 @@
|
||||||
/* Headings ============================================== */
|
// Body
|
||||||
h1, h2, h3, h4, h5, h6 {
|
// --------------------------------------------------
|
||||||
font-family: @baseheadingfont;
|
body {
|
||||||
font-weight: 700;
|
font-family: @base-font;
|
||||||
}
|
color: @text-color;
|
||||||
h6 {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links ================================================= */
|
// Headings
|
||||||
|
// --------------------------------------------------
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: @heading-font;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
.font-size(32)
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
.font-size(28)
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
.font-size(24)
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
.font-size(18)
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
.font-size(16)
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
.font-size(14);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links
|
||||||
|
// --------------------------------------------------
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: @linkcolor;
|
color: @link-color;
|
||||||
&:visited {
|
&:visited {
|
||||||
color: @linkcolorvisited;
|
color: lighten(@link-color, 20);
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @linkcolorhover;
|
color: darken(@link-color, 20);
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
color: @linkcolorfocus;
|
color: darken(@link-color, 20);
|
||||||
}
|
}
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
|
@ -27,88 +50,94 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
b, strong {
|
// Figures
|
||||||
font-weight: 700;
|
// --------------------------------------------------
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists ============================================== */
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
list-style-type: square
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
li {
|
|
||||||
list-style-type: upper-roman;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add underline for main links ======================= */
|
|
||||||
p > a,
|
|
||||||
li > a,
|
|
||||||
em > a,
|
|
||||||
a > em,
|
|
||||||
footer a {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px dotted lighten(@textcolor, 50%);
|
|
||||||
}
|
|
||||||
p > a:hover,
|
|
||||||
li > a:hover,
|
|
||||||
em > a:hover,
|
|
||||||
footer a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid lighten(@textcolor, 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Figure caption ===================================== */
|
|
||||||
figcaption {
|
figcaption {
|
||||||
margin-top: (@indent-val / 2);
|
padding-top: 10px;
|
||||||
line-height: 1.25;
|
.font(14);
|
||||||
.zeta();
|
line-height: 1.3;
|
||||||
font-family: @baseheadingfont;
|
color: lighten(@text-color, 10);
|
||||||
counter-increment: captions;
|
}
|
||||||
&:before {
|
|
||||||
font-weight: 700;
|
// Feature Image Caption
|
||||||
text-transform: uppercase;
|
// --------------------------------------------------
|
||||||
content: "Figure " counter(captions) ": ";
|
.image-credit {
|
||||||
|
.grid(12,10);
|
||||||
|
.prefix(12,1);
|
||||||
|
.suffix(12,1);
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
.font(12);
|
||||||
|
line-height: 1.3;
|
||||||
|
font-style: italic;
|
||||||
|
color: lighten(@text-color, 30);
|
||||||
|
a {
|
||||||
|
color: lighten(@text-color, 30);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Notice ============================================== */
|
// Note text
|
||||||
|
// --------------------------------------------------
|
||||||
.notice {
|
.notice {
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
font-size: 90%;
|
.font-rem(14);
|
||||||
background-color: #ddd;
|
background-color: @body-color;
|
||||||
border-left: 10px solid #ccc;
|
border: 1px solid darken(@body-color,20);
|
||||||
}
|
|
||||||
/* Blockquote =========================================== */
|
|
||||||
blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
border-left: 10px solid #ccc;
|
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 1em;
|
|
||||||
border-left: 10px solid #ccc;
|
|
||||||
p+p {
|
|
||||||
text-indent: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Footnotes ============================================= */
|
|
||||||
.footnotes {
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
/* Code ================================================== */
|
|
||||||
tt, code, kbd, samp, pre {
|
|
||||||
font-family: @codefont;
|
|
||||||
}
|
|
||||||
p code {
|
|
||||||
font-size: 80%;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0 5px;
|
|
||||||
border: 1px solid lighten(@black, 90);
|
|
||||||
background-color: lighten(@black, 95);
|
|
||||||
.rounded(3px);
|
.rounded(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Blockquotes
|
||||||
|
// --------------------------------------------------
|
||||||
|
blockquote {
|
||||||
|
margin-left: -28px;
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 8px solid @border-color;
|
||||||
|
font-family: @alt-font;
|
||||||
|
font-style: italic;
|
||||||
|
.font-rem(24);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footnotes
|
||||||
|
// --------------------------------------------------
|
||||||
|
.footnotes {
|
||||||
|
ol, li, p {
|
||||||
|
.font-size(14);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Paragraphs
|
||||||
|
// --------------------------------------------------
|
||||||
|
p {
|
||||||
|
margin: 0 0 @indent-var;
|
||||||
|
& + p {
|
||||||
|
//siblings indentation
|
||||||
|
text-indent: @indent-var;
|
||||||
|
margin-top: -(@indent-var);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code
|
||||||
|
// --------------------------------------------------
|
||||||
|
tt, code, kbd, samp, pre {
|
||||||
|
font-family: @code-font;
|
||||||
|
}
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
code {
|
||||||
|
.font-rem(12);
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border: 1px solid lighten(@black, 90);
|
||||||
|
background-color: lighten(@black, 95);
|
||||||
|
.rounded(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
.font-rem(12);
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
|
@ -1,19 +1,26 @@
|
||||||
// TYPOGRAPHY ================================================
|
// TYPOGRAPHY ================================================
|
||||||
@basefont: 'PT Serif', serif;
|
@doc-font-size: 16;
|
||||||
@baseheadingfont: 'PT Sans Narrow', sans-serif;
|
@doc-line-height: 26;
|
||||||
@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
|
@base-font: 'PT Serif', serif;
|
||||||
|
@heading-font: 'PT Sans Narrow', sans-serif;
|
||||||
|
@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
|
||||||
|
@alt-font: @base-font;
|
||||||
|
|
||||||
// COLOR ====================================================
|
// COLOR ====================================================
|
||||||
@bodycolor : #fff;
|
@bodycolor : #fff;
|
||||||
|
@body-color: @bodycolor;
|
||||||
@textcolor : #333332;
|
@textcolor : #333332;
|
||||||
|
@text-color : @textcolor;
|
||||||
|
@border-color: @text-color;
|
||||||
@basecolor : #343434;
|
@basecolor : #343434;
|
||||||
@compcolor : spin(@basecolor, 180);
|
@compcolor : spin(@basecolor, 180);
|
||||||
@bordercolor : @basecolor;
|
@bordercolor : @basecolor;
|
||||||
@white : #fff;
|
@white : #fff;
|
||||||
@black : #000;
|
@black : #111;
|
||||||
@accentcolor : @black;
|
@accentcolor : @black;
|
||||||
/* Links ================================================= */
|
/* Links ================================================= */
|
||||||
@linkcolor : #343434;
|
@linkcolor : #343434;
|
||||||
|
@link-color: @linkcolor;
|
||||||
@linkcolorhover : darken(@linkcolor, 10);
|
@linkcolorhover : darken(@linkcolor, 10);
|
||||||
@linkcolorvisited : lighten(@linkcolorhover, 20);
|
@linkcolorvisited : lighten(@linkcolorhover, 20);
|
||||||
@linkcolorfocus : darken(@linkcolorvisited, 10);
|
@linkcolorfocus : darken(@linkcolorvisited, 10);
|
Binary file not shown.
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
2
index.md
2
index.md
|
@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi
|
||||||
tags: [Jekyll, theme, responsive, blog, template]
|
tags: [Jekyll, theme, responsive, blog, template]
|
||||||
image:
|
image:
|
||||||
feature: texture-feature-01.jpg
|
feature: texture-feature-01.jpg
|
||||||
|
credit: Texture Lovers
|
||||||
|
creditlink: http://texturelovers.com
|
||||||
---
|
---
|
|
@ -6,6 +6,8 @@ description: "Instructions on how to install and customize the Jekyll theme Mini
|
||||||
tags: [Jekyll, theme, responsive]
|
tags: [Jekyll, theme, responsive]
|
||||||
image:
|
image:
|
||||||
feature: texture-feature-02.jpg
|
feature: texture-feature-02.jpg
|
||||||
|
credit: Texture Lovers
|
||||||
|
creditlink: http://texturelovers.com
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="table-of-contents" class="toc">
|
<section id="table-of-contents" class="toc">
|
||||||
|
@ -32,7 +34,7 @@ General notes and suggestions for customizing Minimal Mistakes.
|
||||||
minimal-mistakes/
|
minimal-mistakes/
|
||||||
├── _includes
|
├── _includes
|
||||||
| ├── author-bio.html //bio stuff goes here
|
| ├── author-bio.html //bio stuff goes here
|
||||||
| ├── chrome-frame.html //displays on IE8 and less
|
| ├── browser-upgrade.html //displays on IE8 and less
|
||||||
| ├── footer.html //site footer
|
| ├── footer.html //site footer
|
||||||
| ├── head.html //site head
|
| ├── head.html //site head
|
||||||
| ├── navigation.html //site top nav
|
| ├── navigation.html //site top nav
|
||||||
|
@ -60,7 +62,7 @@ minimal-mistakes/
|
||||||
|
|
||||||
### _config.yml
|
### _config.yml
|
||||||
|
|
||||||
Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ site.url }}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**...
|
Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ "{{ site.url " }}}}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**...
|
||||||
|
|
||||||
#### Owner/Author Information
|
#### Owner/Author Information
|
||||||
|
|
||||||
|
@ -106,6 +108,15 @@ image:
|
||||||
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
|
||||||
|
|
||||||
|
{% highlight yaml %}
|
||||||
|
image:
|
||||||
|
feature: feature-image-filename.jpg
|
||||||
|
credit: Michael Rose #name of the person or site you want to credit
|
||||||
|
creditlink: http://mademistakes.com #url to their site or licensing
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
#### Thumbnails for OG and Twitter Cards
|
#### Thumbnails for OG and Twitter Cards
|
||||||
|
|
||||||
Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
||||||
|
|
Loading…
Reference in a new issue