jekyll-theme-lanyon 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.md +9 -0
- data/README.md +159 -0
- data/_includes/head.html +29 -0
- data/_includes/sidebar.html +38 -0
- data/_layouts/default.html +47 -0
- data/_layouts/home.html +32 -0
- data/_layouts/page.html +8 -0
- data/_layouts/post.html +25 -0
- data/assets/apple-touch-icon-precomposed.png +0 -0
- data/assets/css/lanyon.css +563 -0
- data/assets/css/poole.css +430 -0
- data/assets/css/syntax.css +65 -0
- data/assets/favicon.ico +0 -0
- metadata +101 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 238a382f0591202dfc4dc78f938d35dc0d9aa197
|
|
4
|
+
data.tar.gz: 6607761056d2d785e7b7d742eb14b9349a45233e
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: e1c67c3b7eb99efdc7a36147016579abca0ece196f35c577d9a68d05e61a605a7e0543a4f02637d78e3105bde001091e1f48aa7286de1e67a217464e41a5f2ea
|
|
7
|
+
data.tar.gz: bf733c71598bb260549d613c905210ba0370069249b0e246149296eb8d080d129aa6757f7d75f78e68ad5f1019eb26a43ac10c0ee454096ac03617597194c50a
|
data/LICENSE.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Released under MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2014 Mark Otto.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# Lanyon
|
|
2
|
+
|
|
3
|
+
Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Contents
|
|
10
|
+
|
|
11
|
+
- [Usage](#usage)
|
|
12
|
+
- [Install as a gem](#install-as-a-gem)
|
|
13
|
+
- [Options](#options)
|
|
14
|
+
- [Sidebar menu](#sidebar-menu)
|
|
15
|
+
- [Themes](#themes)
|
|
16
|
+
- [Reverse layout](#reverse-layout)
|
|
17
|
+
- [Development](#development)
|
|
18
|
+
- [Author](#author)
|
|
19
|
+
- [License](#license)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
Lanyon is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll.
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### Install as a gem
|
|
28
|
+
|
|
29
|
+
*Note*: Require Jekyll ~> 3.3
|
|
30
|
+
|
|
31
|
+
Add this line to your Jekyll site's Gemfile:
|
|
32
|
+
|
|
33
|
+
```ruby
|
|
34
|
+
gem "lanyon-theme"
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
And add this line to your Jekyll site:
|
|
38
|
+
|
|
39
|
+
```yaml
|
|
40
|
+
theme: lanyon-theme
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
And then execute:
|
|
44
|
+
|
|
45
|
+
```sh
|
|
46
|
+
$ bundle
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
To test this theme: run `bundle install` in the `example` folder, then run `bundle exec jekyll serve` and open `http://127.0.0.1:4000/` in your browser.
|
|
50
|
+
|
|
51
|
+
## Options
|
|
52
|
+
|
|
53
|
+
Lanyon includes some customizable options, typically applied via classes on the `<body>` element.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### Sidebar menu
|
|
57
|
+
|
|
58
|
+
Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/).
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
---
|
|
62
|
+
layout: page
|
|
63
|
+
title: About
|
|
64
|
+
---
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout.
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
### Themes
|
|
71
|
+
|
|
72
|
+
Lanyon ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
There are eight themes available at this time.
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
To use a theme, add any one of the available theme classes to the `<body>` element in the `default.html` layout, like so:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<body class="theme-base-08">
|
|
85
|
+
...
|
|
86
|
+
</body>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/lanyon/blob/master/public/css/lanyon.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### Reverse layout
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
Reverse the page orientation with a single class.
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<body class="layout-reverse">
|
|
101
|
+
...
|
|
102
|
+
</body>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
### Sidebar overlay instead of push
|
|
107
|
+
|
|
108
|
+
Make the sidebar overlap the viewport content with a single class:
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<body class="sidebar-overlay">
|
|
112
|
+
...
|
|
113
|
+
</body>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
This will keep the content stationary and slide in the sidebar over the side content. It also adds a `box-shadow` based outline to the toggle for contrast against backgrounds, as well as a `box-shadow` on the sidebar for depth.
|
|
117
|
+
|
|
118
|
+
It's also available for a reversed layout when you add both classes:
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<body class="layout-reverse sidebar-overlay">
|
|
122
|
+
...
|
|
123
|
+
</body>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Sidebar open on page load
|
|
127
|
+
|
|
128
|
+
Show an open sidebar on page load by modifying the `<input>` tag within the `sidebar.html` layout to add the `checked` boolean attribute:
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only:
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Development
|
|
141
|
+
|
|
142
|
+
Lanyon has two branches, but only one is used for active development.
|
|
143
|
+
|
|
144
|
+
- `master` for development. **All pull requests should be to submitted against `master`.**
|
|
145
|
+
- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
## Author
|
|
149
|
+
|
|
150
|
+
**Mark Otto**
|
|
151
|
+
- <https://github.com/mdo>
|
|
152
|
+
- <https://twitter.com/mdo>
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
## License
|
|
156
|
+
|
|
157
|
+
Open sourced under the [MIT license](LICENSE.md).
|
|
158
|
+
|
|
159
|
+
<3
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<link href="http://gmpg.org/xfn/11" rel="profile">
|
|
3
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
4
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
5
|
+
|
|
6
|
+
<!-- Enable responsiveness on mobile devices-->
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
8
|
+
|
|
9
|
+
<title>
|
|
10
|
+
{% if page.title == "Home" %}
|
|
11
|
+
{{ site.title }} · {{ site.tagline }}
|
|
12
|
+
{% else %}
|
|
13
|
+
{{ page.title }} · {{ site.title }}
|
|
14
|
+
{% endif %}
|
|
15
|
+
</title>
|
|
16
|
+
|
|
17
|
+
<!-- CSS -->
|
|
18
|
+
<link rel="stylesheet" href={{ "/assets/css/poole.css" | relative_url }}>
|
|
19
|
+
<link rel="stylesheet" href={{ "/assets/css/syntax.css" | relative_url }}>
|
|
20
|
+
<link rel="stylesheet" href={{ "/assets/css/lanyon.css" | relative_url }}>
|
|
21
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
|
|
22
|
+
|
|
23
|
+
<!-- Icons -->
|
|
24
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href={{ "/assets/apple-touch-icon-precomposed.png" | relative_url }}>
|
|
25
|
+
<link rel="shortcut icon" href={{ "/assets/favicon.ico" | relative_url }}>
|
|
26
|
+
|
|
27
|
+
<!-- RSS -->
|
|
28
|
+
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
|
|
29
|
+
</head>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
|
|
2
|
+
styles, `#sidebar-checkbox` for behavior. -->
|
|
3
|
+
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
|
|
4
|
+
|
|
5
|
+
<!-- Toggleable sidebar -->
|
|
6
|
+
<div class="sidebar" id="sidebar">
|
|
7
|
+
<div class="sidebar-item">
|
|
8
|
+
<p>{{ site.description }}</p>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<nav class="sidebar-nav">
|
|
12
|
+
<a class="sidebar-nav-item{% if page.url == site.baseurl %} active{% endif %}" href={{ "/" | relative_url }}>Home</a>
|
|
13
|
+
|
|
14
|
+
{% comment %}
|
|
15
|
+
The code below dynamically generates a sidebar nav of pages with
|
|
16
|
+
`layout: page` in the front-matter. See readme for usage.
|
|
17
|
+
{% endcomment %}
|
|
18
|
+
|
|
19
|
+
{% assign pages_list = site.pages | sort:"url" %}
|
|
20
|
+
{% for node in pages_list %}
|
|
21
|
+
{% if node.title != null %}
|
|
22
|
+
{% if node.layout == "page" %}
|
|
23
|
+
<a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="{{ node.url }}">{{ node.title }}</a>
|
|
24
|
+
{% endif %}
|
|
25
|
+
{% endif %}
|
|
26
|
+
{% endfor %}
|
|
27
|
+
|
|
28
|
+
<a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a>
|
|
29
|
+
<a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
|
|
30
|
+
<span class="sidebar-nav-item">Currently v{{ site.version }}</span>
|
|
31
|
+
</nav>
|
|
32
|
+
|
|
33
|
+
<div class="sidebar-item">
|
|
34
|
+
<p>
|
|
35
|
+
© {{ site.time | date: '%Y' }}. All rights reserved.
|
|
36
|
+
</p>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-us">
|
|
3
|
+
|
|
4
|
+
{% include head.html %}
|
|
5
|
+
|
|
6
|
+
<body>
|
|
7
|
+
|
|
8
|
+
{% include sidebar.html %}
|
|
9
|
+
|
|
10
|
+
<!-- Wrap is the content to shift when toggling the sidebar. We wrap the
|
|
11
|
+
content to avoid any CSS collisions with our real content. -->
|
|
12
|
+
<div class="wrap">
|
|
13
|
+
<div class="masthead">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<h3 class="masthead-title">
|
|
16
|
+
<a href={{ "/" | relative_url }} title="Home">{{ site.title }}</a>
|
|
17
|
+
<small>{{ site.tagline }}</small>
|
|
18
|
+
</h3>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<div class="container content">
|
|
23
|
+
{{ content }}
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
(function(document) {
|
|
31
|
+
var toggle = document.querySelector('.sidebar-toggle');
|
|
32
|
+
var sidebar = document.querySelector('#sidebar');
|
|
33
|
+
var checkbox = document.querySelector('#sidebar-checkbox');
|
|
34
|
+
|
|
35
|
+
document.addEventListener('click', function(e) {
|
|
36
|
+
var target = e.target;
|
|
37
|
+
|
|
38
|
+
if(!checkbox.checked ||
|
|
39
|
+
sidebar.contains(target) ||
|
|
40
|
+
(target === checkbox || target === toggle)) return;
|
|
41
|
+
|
|
42
|
+
checkbox.checked = false;
|
|
43
|
+
}, false);
|
|
44
|
+
})(document);
|
|
45
|
+
</script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
data/_layouts/home.html
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="posts">
|
|
6
|
+
{% for post in paginator.posts %}
|
|
7
|
+
<div class="post">
|
|
8
|
+
<h1 class="post-title">
|
|
9
|
+
<a href="{{ post.url | relative_url }}">
|
|
10
|
+
{{ post.title }}
|
|
11
|
+
</a>
|
|
12
|
+
</h1>
|
|
13
|
+
|
|
14
|
+
<span class="post-date">{{ post.date | date_to_string }}</span>
|
|
15
|
+
|
|
16
|
+
{{ post.content }}
|
|
17
|
+
</div>
|
|
18
|
+
{% endfor %}
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="pagination">
|
|
22
|
+
{% if paginator.next_page %}
|
|
23
|
+
<a class="pagination-item older" href="{{ paginator.next_page_path }}">Older</a>
|
|
24
|
+
{% else %}
|
|
25
|
+
<span class="pagination-item older">Older</span>
|
|
26
|
+
{% endif %}
|
|
27
|
+
{% if paginator.previous_page %}
|
|
28
|
+
<a class="pagination-item newer" href="{{ paginator.previous_page_path }}">Newer</a>
|
|
29
|
+
{% else %}
|
|
30
|
+
<span class="pagination-item newer">Newer</span>
|
|
31
|
+
{% endif %}
|
|
32
|
+
</div>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="post">
|
|
6
|
+
<h1 class="post-title">{{ page.title }}</h1>
|
|
7
|
+
<span class="post-date">{{ page.date | date_to_string }}</span>
|
|
8
|
+
{{ content }}
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div class="related">
|
|
12
|
+
<h2>Related Posts</h2>
|
|
13
|
+
<ul class="related-posts">
|
|
14
|
+
{% for post in site.related_posts limit:3 %}
|
|
15
|
+
<li>
|
|
16
|
+
<h3>
|
|
17
|
+
<a href="{{ post.url | relative_url }}">
|
|
18
|
+
{{ post.title }}
|
|
19
|
+
<small>{{ post.date | date_to_string }}</small>
|
|
20
|
+
</a>
|
|
21
|
+
</h3>
|
|
22
|
+
</li>
|
|
23
|
+
{% endfor %}
|
|
24
|
+
</ul>
|
|
25
|
+
</div>
|
|
Binary file
|
|
@@ -0,0 +1,563 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ___
|
|
3
|
+
* /\_ \
|
|
4
|
+
* \//\ \ __ ___ __ __ ___ ___
|
|
5
|
+
* \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\
|
|
6
|
+
* \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
|
|
7
|
+
* /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
|
|
8
|
+
* \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/
|
|
9
|
+
* /\___/
|
|
10
|
+
* \/__/
|
|
11
|
+
*
|
|
12
|
+
* Designed, built, and released under MIT license by @mdo. Learn more at
|
|
13
|
+
* https://github.com/poole/lanyon.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
/*
|
|
18
|
+
* Contents
|
|
19
|
+
*
|
|
20
|
+
* Global resets
|
|
21
|
+
* Masthead
|
|
22
|
+
* Sidebar
|
|
23
|
+
* Slide effect
|
|
24
|
+
* Posts and pages
|
|
25
|
+
* Pagination
|
|
26
|
+
* Reverse layout
|
|
27
|
+
* Themes
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
/*
|
|
32
|
+
* Global resets
|
|
33
|
+
*
|
|
34
|
+
* Update the foundational and global aspects of the page.
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
/* Prevent scroll on narrow devices */
|
|
38
|
+
html,
|
|
39
|
+
body {
|
|
40
|
+
overflow-x: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
html {
|
|
44
|
+
font-family: "PT Serif", Georgia, "Times New Roman", serif;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
h1, h2, h3, h4, h5, h6 {
|
|
48
|
+
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
|
49
|
+
font-weight: 400;
|
|
50
|
+
color: #313131;
|
|
51
|
+
letter-spacing: -.025rem;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
/*
|
|
56
|
+
* Wrapper
|
|
57
|
+
*
|
|
58
|
+
* The wrapper is used to position site content when the sidebar is toggled. We
|
|
59
|
+
* use an outter wrap to position the sidebar without interferring with the
|
|
60
|
+
* regular page content.
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
.wrap {
|
|
64
|
+
position: relative;
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
/*
|
|
70
|
+
* Container
|
|
71
|
+
*
|
|
72
|
+
* Center the page content.
|
|
73
|
+
*/
|
|
74
|
+
|
|
75
|
+
.container {
|
|
76
|
+
max-width: 28rem;
|
|
77
|
+
}
|
|
78
|
+
@media (min-width: 38em) {
|
|
79
|
+
.container {
|
|
80
|
+
max-width: 32rem;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
@media (min-width: 56em) {
|
|
84
|
+
.container {
|
|
85
|
+
max-width: 38rem;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
/*
|
|
91
|
+
* Masthead
|
|
92
|
+
*
|
|
93
|
+
* Super small header above the content for site name and short description.
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
.masthead {
|
|
97
|
+
padding-top: 1rem;
|
|
98
|
+
padding-bottom: 1rem;
|
|
99
|
+
margin-bottom: 3rem;
|
|
100
|
+
border-bottom: 1px solid #eee;
|
|
101
|
+
}
|
|
102
|
+
.masthead-title {
|
|
103
|
+
margin-top: 0;
|
|
104
|
+
margin-bottom: 0;
|
|
105
|
+
color: #505050;
|
|
106
|
+
}
|
|
107
|
+
.masthead-title a {
|
|
108
|
+
color: #505050;
|
|
109
|
+
}
|
|
110
|
+
.masthead-title small {
|
|
111
|
+
font-size: 75%;
|
|
112
|
+
font-weight: 400;
|
|
113
|
+
color: #c0c0c0;
|
|
114
|
+
letter-spacing: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media (max-width: 48em) {
|
|
118
|
+
.masthead-title {
|
|
119
|
+
text-align: center;
|
|
120
|
+
}
|
|
121
|
+
.masthead-title small {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
/*
|
|
128
|
+
* Sidebar
|
|
129
|
+
*
|
|
130
|
+
* The sidebar is the drawer, the item we are toggling with our handy hamburger
|
|
131
|
+
* button in the corner of the page.
|
|
132
|
+
*
|
|
133
|
+
* This particular sidebar implementation was inspired by Chris Coyier's
|
|
134
|
+
* "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
|
|
135
|
+
* comments by a reader. It modifies both implementations to continue using the
|
|
136
|
+
* checkbox (no change in URL means no polluted browser history), but this uses
|
|
137
|
+
* `position` for the menu to avoid some potential content reflow issues.
|
|
138
|
+
*
|
|
139
|
+
* Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
|
|
140
|
+
*/
|
|
141
|
+
|
|
142
|
+
/* Style and "hide" the sidebar */
|
|
143
|
+
.sidebar {
|
|
144
|
+
position: fixed;
|
|
145
|
+
top: 0;
|
|
146
|
+
bottom: 0;
|
|
147
|
+
left: -14rem;
|
|
148
|
+
width: 14rem;
|
|
149
|
+
visibility: hidden;
|
|
150
|
+
overflow-y: auto;
|
|
151
|
+
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
|
152
|
+
font-size: .875rem; /* 15px */
|
|
153
|
+
color: rgba(255,255,255,.6);
|
|
154
|
+
background-color: #202020;
|
|
155
|
+
-webkit-transition: all .3s ease-in-out;
|
|
156
|
+
transition: all .3s ease-in-out;
|
|
157
|
+
}
|
|
158
|
+
@media (min-width: 30em) {
|
|
159
|
+
.sidebar {
|
|
160
|
+
font-size: .75rem; /* 14px */
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Sidebar content */
|
|
165
|
+
.sidebar a {
|
|
166
|
+
font-weight: normal;
|
|
167
|
+
color: #fff;
|
|
168
|
+
}
|
|
169
|
+
.sidebar-item {
|
|
170
|
+
padding: 1rem;
|
|
171
|
+
}
|
|
172
|
+
.sidebar-item p:last-child {
|
|
173
|
+
margin-bottom: 0;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Sidebar nav */
|
|
177
|
+
.sidebar-nav {
|
|
178
|
+
border-bottom: 1px solid rgba(255,255,255,.1);
|
|
179
|
+
}
|
|
180
|
+
.sidebar-nav-item {
|
|
181
|
+
display: block;
|
|
182
|
+
padding: .5rem 1rem;
|
|
183
|
+
border-top: 1px solid rgba(255,255,255,.1);
|
|
184
|
+
}
|
|
185
|
+
.sidebar-nav-item.active,
|
|
186
|
+
a.sidebar-nav-item:hover,
|
|
187
|
+
a.sidebar-nav-item:focus {
|
|
188
|
+
text-decoration: none;
|
|
189
|
+
background-color: rgba(255,255,255,.1);
|
|
190
|
+
border-color: transparent;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@media (min-width: 48em) {
|
|
194
|
+
.sidebar-item {
|
|
195
|
+
padding: 1.5rem;
|
|
196
|
+
}
|
|
197
|
+
.sidebar-nav-item {
|
|
198
|
+
padding-left: 1.5rem;
|
|
199
|
+
padding-right: 1.5rem;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
|
|
204
|
+
.sidebar-checkbox {
|
|
205
|
+
position: absolute;
|
|
206
|
+
opacity: 0;
|
|
207
|
+
-webkit-user-select: none;
|
|
208
|
+
-moz-user-select: none;
|
|
209
|
+
user-select: none;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* Style the `label` that we use to target the `.sidebar-checkbox` */
|
|
213
|
+
.sidebar-toggle {
|
|
214
|
+
position: absolute;
|
|
215
|
+
top: .8rem;
|
|
216
|
+
left: 1rem;
|
|
217
|
+
display: block;
|
|
218
|
+
padding: .25rem .75rem;
|
|
219
|
+
color: #505050;
|
|
220
|
+
background-color: #fff;
|
|
221
|
+
border-radius: .25rem;
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.sidebar-toggle:before {
|
|
226
|
+
display: inline-block;
|
|
227
|
+
width: 1rem;
|
|
228
|
+
height: .75rem;
|
|
229
|
+
content: "";
|
|
230
|
+
background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
|
|
231
|
+
background-image: -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
|
|
232
|
+
background-image: -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
|
|
233
|
+
background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.sidebar-toggle:active,
|
|
237
|
+
#sidebar-checkbox:focus ~ .sidebar-toggle,
|
|
238
|
+
#sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
239
|
+
color: #fff;
|
|
240
|
+
background-color: #555;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.sidebar-toggle:active:before,
|
|
244
|
+
#sidebar-checkbox:focus ~ .sidebar-toggle:before,
|
|
245
|
+
#sidebar-checkbox:checked ~ .sidebar-toggle:before {
|
|
246
|
+
background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
|
|
247
|
+
background-image: -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
|
|
248
|
+
background-image: -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
|
|
249
|
+
background-image: linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
@media (min-width: 30.1em) {
|
|
253
|
+
.sidebar-toggle {
|
|
254
|
+
position: fixed;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@media print {
|
|
259
|
+
.sidebar-toggle {
|
|
260
|
+
display: none;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Slide effect
|
|
265
|
+
*
|
|
266
|
+
* Handle the sliding effects of the sidebar and content in one spot, seperate
|
|
267
|
+
* from the default styles.
|
|
268
|
+
*
|
|
269
|
+
* As an a heads up, we don't use `transform: translate3d()` here because when
|
|
270
|
+
* mixed with `position: fixed;` for the sidebar toggle, it creates a new
|
|
271
|
+
* containing block. Put simply, the fixed sidebar toggle behaves like
|
|
272
|
+
* `position: absolute;` when transformed.
|
|
273
|
+
*
|
|
274
|
+
* Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
|
|
275
|
+
*/
|
|
276
|
+
|
|
277
|
+
.wrap,
|
|
278
|
+
.sidebar,
|
|
279
|
+
.sidebar-toggle {
|
|
280
|
+
-webkit-backface-visibility: hidden;
|
|
281
|
+
-ms-backface-visibility: hidden;
|
|
282
|
+
backface-visibility: hidden;
|
|
283
|
+
}
|
|
284
|
+
.wrap,
|
|
285
|
+
.sidebar-toggle {
|
|
286
|
+
-webkit-transition: -webkit-transform .3s ease-in-out;
|
|
287
|
+
transition: transform .3s ease-in-out;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
#sidebar-checkbox:checked + .sidebar {
|
|
291
|
+
z-index: 10;
|
|
292
|
+
visibility: visible;
|
|
293
|
+
}
|
|
294
|
+
#sidebar-checkbox:checked ~ .sidebar,
|
|
295
|
+
#sidebar-checkbox:checked ~ .wrap,
|
|
296
|
+
#sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
297
|
+
-webkit-transform: translateX(14rem);
|
|
298
|
+
-ms-transform: translateX(14rem);
|
|
299
|
+
transform: translateX(14rem);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
/*
|
|
304
|
+
* Posts and pages
|
|
305
|
+
*
|
|
306
|
+
* Each post is wrapped in `.post` and is used on default and post layouts. Each
|
|
307
|
+
* page is wrapped in `.page` and is only used on the page layout.
|
|
308
|
+
*/
|
|
309
|
+
|
|
310
|
+
.page,
|
|
311
|
+
.post {
|
|
312
|
+
margin-bottom: 4em;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Blog post or page title */
|
|
316
|
+
.page-title,
|
|
317
|
+
.post-title,
|
|
318
|
+
.post-title a {
|
|
319
|
+
color: #303030;
|
|
320
|
+
}
|
|
321
|
+
.page-title,
|
|
322
|
+
.post-title {
|
|
323
|
+
margin-top: 0;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* Meta data line below post title */
|
|
327
|
+
.post-date {
|
|
328
|
+
display: block;
|
|
329
|
+
margin-top: -.5rem;
|
|
330
|
+
margin-bottom: 1rem;
|
|
331
|
+
color: #9a9a9a;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/* Related posts */
|
|
335
|
+
.related {
|
|
336
|
+
padding-top: 2rem;
|
|
337
|
+
padding-bottom: 2rem;
|
|
338
|
+
border-top: 1px solid #eee;
|
|
339
|
+
}
|
|
340
|
+
.related-posts {
|
|
341
|
+
padding-left: 0;
|
|
342
|
+
list-style: none;
|
|
343
|
+
}
|
|
344
|
+
.related-posts h3 {
|
|
345
|
+
margin-top: 0;
|
|
346
|
+
}
|
|
347
|
+
.related-posts li small {
|
|
348
|
+
font-size: 75%;
|
|
349
|
+
color: #999;
|
|
350
|
+
}
|
|
351
|
+
.related-posts li a:hover {
|
|
352
|
+
color: #268bd2;
|
|
353
|
+
text-decoration: none;
|
|
354
|
+
}
|
|
355
|
+
.related-posts li a:hover small {
|
|
356
|
+
color: inherit;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
/*
|
|
361
|
+
* Pagination
|
|
362
|
+
*
|
|
363
|
+
* Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
|
|
364
|
+
* there are no more previous or next posts to show.
|
|
365
|
+
*/
|
|
366
|
+
|
|
367
|
+
.pagination {
|
|
368
|
+
overflow: hidden; /* clearfix */
|
|
369
|
+
margin-left: -1rem;
|
|
370
|
+
margin-right: -1rem;
|
|
371
|
+
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
|
372
|
+
color: #ccc;
|
|
373
|
+
text-align: center;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/* Pagination items can be `span`s or `a`s */
|
|
377
|
+
.pagination-item {
|
|
378
|
+
display: block;
|
|
379
|
+
padding: 1rem;
|
|
380
|
+
border: 1px solid #eee;
|
|
381
|
+
}
|
|
382
|
+
.pagination-item:first-child {
|
|
383
|
+
margin-bottom: -1px;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Only provide a hover state for linked pagination items */
|
|
387
|
+
a.pagination-item:hover {
|
|
388
|
+
background-color: #f5f5f5;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
@media (min-width: 30em) {
|
|
392
|
+
.pagination {
|
|
393
|
+
margin: 3rem 0;
|
|
394
|
+
}
|
|
395
|
+
.pagination-item {
|
|
396
|
+
float: left;
|
|
397
|
+
width: 50%;
|
|
398
|
+
}
|
|
399
|
+
.pagination-item:first-child {
|
|
400
|
+
margin-bottom: 0;
|
|
401
|
+
border-top-left-radius: 4px;
|
|
402
|
+
border-bottom-left-radius: 4px;
|
|
403
|
+
}
|
|
404
|
+
.pagination-item:last-child {
|
|
405
|
+
margin-left: -1px;
|
|
406
|
+
border-top-right-radius: 4px;
|
|
407
|
+
border-bottom-right-radius: 4px;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
|
|
412
|
+
/*
|
|
413
|
+
* Reverse layout
|
|
414
|
+
*
|
|
415
|
+
* Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
|
|
416
|
+
* on the right side.
|
|
417
|
+
*/
|
|
418
|
+
|
|
419
|
+
.layout-reverse .sidebar {
|
|
420
|
+
left: auto;
|
|
421
|
+
right: -14rem;
|
|
422
|
+
}
|
|
423
|
+
.layout-reverse .sidebar-toggle {
|
|
424
|
+
left: auto;
|
|
425
|
+
right: 1rem;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
|
|
429
|
+
.layout-reverse #sidebar-checkbox:checked ~ .wrap,
|
|
430
|
+
.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
431
|
+
-webkit-transform: translateX(-14rem);
|
|
432
|
+
-ms-transform: translateX(-14rem);
|
|
433
|
+
transform: translateX(-14rem);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
/*
|
|
438
|
+
* Themes
|
|
439
|
+
*
|
|
440
|
+
* Apply custom color schemes by adding the appropriate class to the `body`.
|
|
441
|
+
* Based on colors from Base16: http://chriskempson.github.io/base16/#default.
|
|
442
|
+
*/
|
|
443
|
+
|
|
444
|
+
/* Red */
|
|
445
|
+
.theme-base-08 .sidebar,
|
|
446
|
+
.theme-base-08 .sidebar-toggle:active,
|
|
447
|
+
.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
448
|
+
background-color: #ac4142;
|
|
449
|
+
}
|
|
450
|
+
.theme-base-08 .container a,
|
|
451
|
+
.theme-base-08 .sidebar-toggle,
|
|
452
|
+
.theme-base-08 .related-posts li a:hover {
|
|
453
|
+
color: #ac4142;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/* Orange */
|
|
457
|
+
.theme-base-09 .sidebar,
|
|
458
|
+
.theme-base-09 .sidebar-toggle:active,
|
|
459
|
+
.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
460
|
+
background-color: #d28445;
|
|
461
|
+
}
|
|
462
|
+
.theme-base-09 .container a,
|
|
463
|
+
.theme-base-09 .sidebar-toggle,
|
|
464
|
+
.theme-base-09 .related-posts li a:hover {
|
|
465
|
+
color: #d28445;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Yellow */
|
|
469
|
+
.theme-base-0a .sidebar,
|
|
470
|
+
.theme-base-0a .sidebar-toggle:active,
|
|
471
|
+
.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
472
|
+
background-color: #f4bf75;
|
|
473
|
+
}
|
|
474
|
+
.theme-base-0a .container a,
|
|
475
|
+
.theme-base-0a .sidebar-toggle,
|
|
476
|
+
.theme-base-0a .related-posts li a:hover {
|
|
477
|
+
color: #f4bf75;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
/* Green */
|
|
481
|
+
.theme-base-0b .sidebar,
|
|
482
|
+
.theme-base-0b .sidebar-toggle:active,
|
|
483
|
+
.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
484
|
+
background-color: #90a959;
|
|
485
|
+
}
|
|
486
|
+
.theme-base-0b .container a,
|
|
487
|
+
.theme-base-0b .sidebar-toggle,
|
|
488
|
+
.theme-base-0b .related-posts li a:hover {
|
|
489
|
+
color: #90a959;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* Cyan */
|
|
493
|
+
.theme-base-0c .sidebar,
|
|
494
|
+
.theme-base-0c .sidebar-toggle:active,
|
|
495
|
+
.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
496
|
+
background-color: #75b5aa;
|
|
497
|
+
}
|
|
498
|
+
.theme-base-0c .container a,
|
|
499
|
+
.theme-base-0c .sidebar-toggle,
|
|
500
|
+
.theme-base-0c .related-posts li a:hover {
|
|
501
|
+
color: #75b5aa;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
/* Blue */
|
|
505
|
+
.theme-base-0d .sidebar,
|
|
506
|
+
.theme-base-0d .sidebar-toggle:active,
|
|
507
|
+
.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
508
|
+
background-color: #6a9fb5;
|
|
509
|
+
}
|
|
510
|
+
.theme-base-0d .container a,
|
|
511
|
+
.theme-base-0d .sidebar-toggle,
|
|
512
|
+
.theme-base-0d .related-posts li a:hover {
|
|
513
|
+
color: #6a9fb5;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* Magenta */
|
|
517
|
+
.theme-base-0e .sidebar,
|
|
518
|
+
.theme-base-0e .sidebar-toggle:active,
|
|
519
|
+
.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
520
|
+
background-color: #aa759f;
|
|
521
|
+
}
|
|
522
|
+
.theme-base-0e .container a,
|
|
523
|
+
.theme-base-0e .sidebar-toggle,
|
|
524
|
+
.theme-base-0e .related-posts li a:hover {
|
|
525
|
+
color: #aa759f;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
/* Brown */
|
|
529
|
+
.theme-base-0f .sidebar,
|
|
530
|
+
.theme-base-0f .sidebar-toggle:active,
|
|
531
|
+
.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
532
|
+
background-color: #8f5536;
|
|
533
|
+
}
|
|
534
|
+
.theme-base-0f .container a,
|
|
535
|
+
.theme-base-0f .sidebar-toggle,
|
|
536
|
+
.theme-base-0f .related-posts li a:hover {
|
|
537
|
+
color: #8f5536;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
|
|
541
|
+
/*
|
|
542
|
+
* Overlay sidebar
|
|
543
|
+
*
|
|
544
|
+
* Make the sidebar content overlay the viewport content instead of pushing it
|
|
545
|
+
* aside when toggled.
|
|
546
|
+
*/
|
|
547
|
+
|
|
548
|
+
.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
|
|
549
|
+
-webkit-transform: translateX(0);
|
|
550
|
+
-ms-transform: translateX(0);
|
|
551
|
+
transform: translateX(0);
|
|
552
|
+
}
|
|
553
|
+
.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
|
|
554
|
+
box-shadow: 0 0 0 .25rem #fff;
|
|
555
|
+
}
|
|
556
|
+
.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
|
|
557
|
+
box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* Only one tweak for a reverse layout */
|
|
561
|
+
.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
|
|
562
|
+
box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
|
|
563
|
+
}
|