jekyll-theme-hydeout 3.7.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +168 -167
- data/_includes/sidebar-icon-links.html +3 -3
- data/_sass/hydeout/_base.scss +1 -1
- data/_sass/hydeout/_layout.scss +301 -306
- data/_sass/hydeout/_variables.scss +6 -1
- metadata +16 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8ede74be147a0b99c886b90309f4361e690e9cfa
|
|
4
|
+
data.tar.gz: '028cc1a510c0a274481943f31c2b84b40460f226'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dd0f4f5752f3ba7866dd8a40530f06fb273065c2e2b27f51de019f86ee5ab2b16507a5c3d5ac5a334d1cb5fa43a5eaed4c2e756895e79dd91238cebd420d0a62
|
|
7
|
+
data.tar.gz: 5a4d3728150d4a6a1158673b706069073d4c394f115f851e9ccf365f352fc7c6dc743013d19fc91f44df8dca5ba264e3289e5dfe078aa66565017f6f7371ffe9
|
data/README.md
CHANGED
|
@@ -1,167 +1,168 @@
|
|
|
1
|
-
# Hydeout
|
|
2
|
-
|
|
3
|
-
Hydeout updates the original [Hyde](https://github.com/poole/hyde)
|
|
4
|
-
theme for [Jekyll](http://jekyllrb.com) 3.x and adds new functionality.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<img alt="Mobile home page" src="/_screenshots/2.png?raw=true" width="300px" />
|
|
8
|
-
<img alt="Mobile post page" src="/_screenshots/3.png?raw=true" width="300px" />
|
|
9
|
-
|
|
10
|
-
### Usage
|
|
11
|
-
|
|
12
|
-
Hydeout is available as the `jekyll-theme-hydeout` Ruby Gem.
|
|
13
|
-
Add `gem "jekyll-theme-hydeout", "~> 3.4"` to your Gemfile and run
|
|
14
|
-
`bundle install`.
|
|
15
|
-
|
|
16
|
-
If you're installing on Github pages, you may also have to add
|
|
17
|
-
`remote_theme: fongandrew/hydeout` to your `_config.yml`. [See the Github
|
|
18
|
-
instructions for more details.](https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/)
|
|
19
|
-
|
|
20
|
-
Hydeout uses pagination, so if you have an `index.md`, you'll need to swap
|
|
21
|
-
it with an `index.html` that uses the `index` layout:
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
---
|
|
25
|
-
layout: index
|
|
26
|
-
title: Home
|
|
27
|
-
---
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
You'll also need to add a setting to `_config.yml` telling Jekyll how many posts
|
|
31
|
-
to include per page (e.g. `paginate: 5`).
|
|
32
|
-
|
|
33
|
-
### Keep It Simple
|
|
34
|
-
|
|
35
|
-
In keeping with the original Hyde theme, Hydeout aims to keep the overall
|
|
36
|
-
design lightweight and plugin-free. JavaScript is currently limited only
|
|
37
|
-
to Disqus and Google Analytics (and is only loaded if you provide configuration
|
|
38
|
-
variables).
|
|
39
|
-
|
|
40
|
-
Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
|
|
41
|
-
the CSS degrades into a single column layout.
|
|
42
|
-
|
|
43
|
-
### Customization
|
|
44
|
-
|
|
45
|
-
Hydeout replaces Hyde's class-based theming with the use
|
|
46
|
-
of the following SASS variables:
|
|
47
|
-
|
|
48
|
-
```scss
|
|
49
|
-
$sidebar-bg-color: #202020 !default;
|
|
50
|
-
$sidebar-
|
|
51
|
-
$
|
|
52
|
-
$
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
$
|
|
65
|
-
$
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
1
|
+
# Hydeout
|
|
2
|
+
|
|
3
|
+
Hydeout updates the original [Hyde](https://github.com/poole/hyde)
|
|
4
|
+
theme for [Jekyll](http://jekyllrb.com) 3.x and adds new functionality.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<img alt="Mobile home page" src="/_screenshots/2.png?raw=true" width="300px" />
|
|
8
|
+
<img alt="Mobile post page" src="/_screenshots/3.png?raw=true" width="300px" />
|
|
9
|
+
|
|
10
|
+
### Usage
|
|
11
|
+
|
|
12
|
+
Hydeout is available as the `jekyll-theme-hydeout` Ruby Gem.
|
|
13
|
+
Add `gem "jekyll-theme-hydeout", "~> 3.4"` to your Gemfile and run
|
|
14
|
+
`bundle install`.
|
|
15
|
+
|
|
16
|
+
If you're installing on Github pages, you may also have to add
|
|
17
|
+
`remote_theme: fongandrew/hydeout` to your `_config.yml`. [See the Github
|
|
18
|
+
instructions for more details.](https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/)
|
|
19
|
+
|
|
20
|
+
Hydeout uses pagination, so if you have an `index.md`, you'll need to swap
|
|
21
|
+
it with an `index.html` that uses the `index` layout:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
---
|
|
25
|
+
layout: index
|
|
26
|
+
title: Home
|
|
27
|
+
---
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
You'll also need to add a setting to `_config.yml` telling Jekyll how many posts
|
|
31
|
+
to include per page (e.g. `paginate: 5`).
|
|
32
|
+
|
|
33
|
+
### Keep It Simple
|
|
34
|
+
|
|
35
|
+
In keeping with the original Hyde theme, Hydeout aims to keep the overall
|
|
36
|
+
design lightweight and plugin-free. JavaScript is currently limited only
|
|
37
|
+
to Disqus and Google Analytics (and is only loaded if you provide configuration
|
|
38
|
+
variables).
|
|
39
|
+
|
|
40
|
+
Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
|
|
41
|
+
the CSS degrades into a single column layout.
|
|
42
|
+
|
|
43
|
+
### Customization
|
|
44
|
+
|
|
45
|
+
Hydeout replaces Hyde's class-based theming with the use
|
|
46
|
+
of the following SASS variables:
|
|
47
|
+
|
|
48
|
+
```scss
|
|
49
|
+
$sidebar-bg-color: #202020 !default;
|
|
50
|
+
$sidebar-fg-color: white !default;
|
|
51
|
+
$sidebar-sticky: true !default;
|
|
52
|
+
$layout-reverse: false !default;
|
|
53
|
+
$link-color: #268bd2 !default;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
To override these variables, create your own `assets/css/main.scss` file.
|
|
57
|
+
Define your own variables, then import in Hydeout's SCSS, like so:
|
|
58
|
+
|
|
59
|
+
```scss
|
|
60
|
+
---
|
|
61
|
+
# Jekyll needs front matter for SCSS files
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
$sidebar-bg-color: #ac4142;
|
|
65
|
+
$link-color: #ac4142;
|
|
66
|
+
$sidebar-sticky: false;
|
|
67
|
+
@import "hydeout";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
See the [_variables](_sass/hydeout/_variables.scss) file for other variables
|
|
71
|
+
you can override.
|
|
72
|
+
|
|
73
|
+
You can see the full set of partials you can replace in the
|
|
74
|
+
[`_includes`](_includes) folder, but there are a few worth noting:
|
|
75
|
+
|
|
76
|
+
* `_includes/copyright.html` - Insert your own copyright here.
|
|
77
|
+
|
|
78
|
+
* `_includes/custom-head.html` - Insert custom head tags (e.g. to load your
|
|
79
|
+
own stylesheets)
|
|
80
|
+
|
|
81
|
+
* `_includes/custom-foot.html` - Insert custom elements at the end of the
|
|
82
|
+
body (e.g. for custom JS)
|
|
83
|
+
|
|
84
|
+
* `_includes/custom-nav-links.html` - Additional nav links to insert at the
|
|
85
|
+
end of the list of links in the sidebar.
|
|
86
|
+
|
|
87
|
+
Pro-tip: The `nav`s in the sidebar are flexboxes. Use the `order` property
|
|
88
|
+
to order your links.
|
|
89
|
+
|
|
90
|
+
* `_includes/custom-icon-links.html`- Additional icon links to insert at the
|
|
91
|
+
end of the icon links at the bottom of the sidebar. You can use the `order`
|
|
92
|
+
property to re-order.
|
|
93
|
+
|
|
94
|
+
* `_includes/favicons.html` - Replace references to `favicon.ico` and
|
|
95
|
+
`favicon.png` with your own favicons references.
|
|
96
|
+
|
|
97
|
+
* `_includes/font-includes.html` - The Abril Fatface font used for the site
|
|
98
|
+
title is loaded here. If you're overriding that font in the CSS, be sure
|
|
99
|
+
to also remove the font load reference here.
|
|
100
|
+
|
|
101
|
+
### New Features
|
|
102
|
+
|
|
103
|
+
* Hydeout adds a new tags page (accessible in the sidebar). Just create a
|
|
104
|
+
new page with the tags layout:
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
---
|
|
108
|
+
layout: tags
|
|
109
|
+
title: Tags
|
|
110
|
+
---
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
* Hydeout adds a new "category" layout for dedicated category pages.
|
|
114
|
+
Category pages are automatically added to the sidebar. All other pages
|
|
115
|
+
must have `sidebar_link: true` in their front matter to show up in
|
|
116
|
+
the sidebar. To create a category page, use the `category` layout"
|
|
117
|
+
|
|
118
|
+
```
|
|
119
|
+
---
|
|
120
|
+
layout: category
|
|
121
|
+
title: My Category
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
Description of "My Category"
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
* You can control how pages are sorted by using the `sidebar_sort_order`
|
|
128
|
+
parameter in the front matter. This works for both category and non-category
|
|
129
|
+
pages, although non-category pages will always come first. Take a look at
|
|
130
|
+
[`_includes/sidebar-nav-links.html`](./_includes/sidebar-nav-links.html) if
|
|
131
|
+
you want to customize this behavior.
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
---
|
|
135
|
+
layout: page
|
|
136
|
+
title: My page
|
|
137
|
+
sidebar_sort_order: 123
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
Some content.
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
* A simple redirect-to-Google search is available. Just create a page with
|
|
144
|
+
the `search` layout.
|
|
145
|
+
|
|
146
|
+
```
|
|
147
|
+
---
|
|
148
|
+
layout: search
|
|
149
|
+
title: Google Search
|
|
150
|
+
---
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
* Disqus integration is ready out of the box. Just add the following to
|
|
154
|
+
your config file:
|
|
155
|
+
|
|
156
|
+
```yaml
|
|
157
|
+
disqus:
|
|
158
|
+
shortname: my-disqus-shortname
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
If you don't want Disqus or want to use something else, override
|
|
162
|
+
`comments.html`.
|
|
163
|
+
|
|
164
|
+
* For Google Analytics support, define a `google_analytics` variable with
|
|
165
|
+
your property ID in your config file.
|
|
166
|
+
|
|
167
|
+
There's also a bunch of minor tweaks and adjustments throughout the
|
|
168
|
+
theme. Hope this works for you!
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<nav id="sidebar-icon-links">
|
|
2
|
-
{% if site.
|
|
2
|
+
{% if site.hydeout.repo %}
|
|
3
3
|
<a id="github-link"
|
|
4
4
|
class="icon" title="Github Project" aria-label="Github Project"
|
|
5
|
-
href="{{ site.
|
|
5
|
+
href="{{ site.hydeout.repo }}">
|
|
6
6
|
{% include svg/github.svg %}
|
|
7
7
|
</a>
|
|
8
8
|
<a id="github-download-link"
|
|
9
9
|
class="icon" title="Download" aria-label="Download"
|
|
10
|
-
href="{{ site.
|
|
10
|
+
href="{{ site.hydeout.repo }}/archive/v{{ site.hydeout.version }}.zip">
|
|
11
11
|
{% include svg/download.svg %}
|
|
12
12
|
</a>
|
|
13
13
|
{% endif %}
|
data/_sass/hydeout/_base.scss
CHANGED
|
@@ -79,7 +79,7 @@ tbody tr:nth-child(odd) th {
|
|
|
79
79
|
background-color: $gray-1;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
input[type="text"], input[type="search"], input[type="submit"], button {
|
|
82
|
+
input[type="text"], input[type="email"], input[type="search"], input[type="submit"], button {
|
|
83
83
|
padding: $padding-v $padding-h;
|
|
84
84
|
border: 1px solid $border-color;
|
|
85
85
|
border-radius: $border-radius;
|
data/_sass/hydeout/_layout.scss
CHANGED
|
@@ -1,306 +1,301 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Layout
|
|
3
|
-
|
|
4
|
-
Styles for managing the structural hierarchy of the site.
|
|
5
|
-
Hydeout features the large colored sidebar from Hyde that houses the
|
|
6
|
-
site name, intro, and "footer" content. Sidebar is on top of content on
|
|
7
|
-
mobile and expands into sidebar on larger width displays.
|
|
8
|
-
|
|
9
|
-
Sidebar CSS assumes HTML looks like this for post pages:
|
|
10
|
-
|
|
11
|
-
body
|
|
12
|
-
> #sidebar
|
|
13
|
-
> header (primary sidebar content -- i.e. title)
|
|
14
|
-
> h1 (home page only, otherwise div or span)
|
|
15
|
-
> secondary nav content we may want to hide on certain pages
|
|
16
|
-
> .container
|
|
17
|
-
> h1 (non-home page)
|
|
18
|
-
> .content
|
|
19
|
-
|
|
20
|
-
Basic approach is to color in body, make sidebar background transparent,
|
|
21
|
-
and then fill in the .container or .content elements depending on how far
|
|
22
|
-
we want the sidebar or header to stretch.
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
body {
|
|
26
|
-
color:
|
|
27
|
-
background-color: $sidebar-bg-color;
|
|
28
|
-
background-image: linear-gradient(
|
|
29
|
-
to bottom,
|
|
30
|
-
lighten($sidebar-bg-color, 7%),
|
|
31
|
-
darken($sidebar-bg-color, 7%));
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
min-width: 100vw;
|
|
35
|
-
min-height: 100vh;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
#sidebar {
|
|
39
|
-
flex: 0 0 auto;
|
|
40
|
-
padding: $section-spacing;
|
|
41
|
-
|
|
42
|
-
.site-title {
|
|
43
|
-
font-family: "Abril Fatface", serif;
|
|
44
|
-
font-weight: normal;
|
|
45
|
-
font-size: $large-font-size;
|
|
46
|
-
|
|
47
|
-
margin-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
flex-flow:
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
#sidebar nav >
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
.container {
|
|
303
|
-
order: -1;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
Layout
|
|
3
|
+
|
|
4
|
+
Styles for managing the structural hierarchy of the site.
|
|
5
|
+
Hydeout features the large colored sidebar from Hyde that houses the
|
|
6
|
+
site name, intro, and "footer" content. Sidebar is on top of content on
|
|
7
|
+
mobile and expands into sidebar on larger width displays.
|
|
8
|
+
|
|
9
|
+
Sidebar CSS assumes HTML looks like this for post pages:
|
|
10
|
+
|
|
11
|
+
body
|
|
12
|
+
> #sidebar
|
|
13
|
+
> header (primary sidebar content -- i.e. title)
|
|
14
|
+
> h1 (home page only, otherwise div or span)
|
|
15
|
+
> secondary nav content we may want to hide on certain pages
|
|
16
|
+
> .container
|
|
17
|
+
> h1 (non-home page)
|
|
18
|
+
> .content
|
|
19
|
+
|
|
20
|
+
Basic approach is to color in body, make sidebar background transparent,
|
|
21
|
+
and then fill in the .container or .content elements depending on how far
|
|
22
|
+
we want the sidebar or header to stretch.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
color: $sidebar-text-color;
|
|
27
|
+
background-color: $sidebar-bg-color;
|
|
28
|
+
background-image: linear-gradient(
|
|
29
|
+
to bottom,
|
|
30
|
+
lighten($sidebar-bg-color, 7%),
|
|
31
|
+
darken($sidebar-bg-color, 7%));
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
min-width: 100vw;
|
|
35
|
+
min-height: 100vh;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
#sidebar {
|
|
39
|
+
flex: 0 0 auto;
|
|
40
|
+
padding: $section-spacing;
|
|
41
|
+
|
|
42
|
+
.site-title {
|
|
43
|
+
font-family: "Abril Fatface", serif;
|
|
44
|
+
font-weight: normal;
|
|
45
|
+
font-size: $large-font-size;
|
|
46
|
+
margin-top: 0;
|
|
47
|
+
margin-bottom: $heading-spacing;
|
|
48
|
+
|
|
49
|
+
.back-arrow { margin-right: 0.5rem; }
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Container is flexbox as well -- we want content div to stretch and fill
|
|
54
|
+
.container {
|
|
55
|
+
flex: 1 1 auto;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
|
|
59
|
+
> .content {
|
|
60
|
+
flex-grow: 1;
|
|
61
|
+
padding-bottom: $section-spacing * 2;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.content {
|
|
66
|
+
background: $body-bg;
|
|
67
|
+
color: $body-color;
|
|
68
|
+
padding: $section-spacing;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
/* -----------------------------------------------------------
|
|
73
|
+
Mobile view
|
|
74
|
+
----------------------------------------------------------- */
|
|
75
|
+
|
|
76
|
+
// Hide secondary nav content in sidebar
|
|
77
|
+
// Hide lead paragraph in sidebar
|
|
78
|
+
#sidebar {
|
|
79
|
+
header ~ *, header ~ nav, p.lead {
|
|
80
|
+
display: none;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Make header elements blend into sidebar / background
|
|
85
|
+
.container > header {
|
|
86
|
+
color: $sidebar-title-color;
|
|
87
|
+
background: transparent;
|
|
88
|
+
margin: ($heading-spacing - $section-spacing)
|
|
89
|
+
$section-spacing
|
|
90
|
+
$section-spacing;
|
|
91
|
+
|
|
92
|
+
h1, h2 {
|
|
93
|
+
color: inherit;
|
|
94
|
+
|
|
95
|
+
&:last-child {
|
|
96
|
+
margin-bottom: 0;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
/* -----------------------------------------------------------
|
|
103
|
+
Mobile view for home page)
|
|
104
|
+
----------------------------------------------------------- */
|
|
105
|
+
|
|
106
|
+
.home #sidebar {
|
|
107
|
+
|
|
108
|
+
// Center sidebar content
|
|
109
|
+
text-align: center;
|
|
110
|
+
|
|
111
|
+
// Bigger title
|
|
112
|
+
.site-title {
|
|
113
|
+
font-size: 3.25rem;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Show secondary nav content + lead
|
|
117
|
+
header ~ *, p.lead {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
header {
|
|
122
|
+
~ nav {
|
|
123
|
+
display: flex;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Slightly more bottom padding to compensate for heading not match 100% of
|
|
128
|
+
// line-height on top
|
|
129
|
+
> *:last-child {
|
|
130
|
+
margin-bottom: 0.5rem;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
/* -----------------------------------------------------------
|
|
136
|
+
Tablet / Desktop view
|
|
137
|
+
----------------------------------------------------------- */
|
|
138
|
+
|
|
139
|
+
@media (min-width: $large-breakpoint) {
|
|
140
|
+
body {
|
|
141
|
+
flex-direction: row;
|
|
142
|
+
height: 100vh;
|
|
143
|
+
overflow-y: auto;
|
|
144
|
+
-webkit-overflow-scrolling: touch;
|
|
145
|
+
> * {
|
|
146
|
+
max-height: 100vh;
|
|
147
|
+
overflow-y: auto;
|
|
148
|
+
-webkit-overflow-scrolling: touch;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Undo mobile CSS */
|
|
153
|
+
|
|
154
|
+
#sidebar, .home #sidebar {
|
|
155
|
+
width: $sidebar-width;
|
|
156
|
+
text-align: left;
|
|
157
|
+
|
|
158
|
+
> *:last-child {
|
|
159
|
+
margin-bottom: 0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
#sidebar {
|
|
164
|
+
.site-title {
|
|
165
|
+
font-size: 3.25rem;
|
|
166
|
+
.back-arrow { display: none; }
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
p.lead, header ~ * {
|
|
170
|
+
display: block;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
header ~ nav {
|
|
174
|
+
display: flex;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.index #sidebar { margin-bottom: 0; }
|
|
179
|
+
|
|
180
|
+
// Make entire container background white to contrast against sidebar
|
|
181
|
+
.container {
|
|
182
|
+
background: $body-bg;
|
|
183
|
+
color: $body-color;
|
|
184
|
+
padding: $section-spacing * 2
|
|
185
|
+
$section-spacing * 2
|
|
186
|
+
0;
|
|
187
|
+
height: 100vh;
|
|
188
|
+
|
|
189
|
+
> header {
|
|
190
|
+
color: $heading-color;
|
|
191
|
+
margin: 0;
|
|
192
|
+
h1, h2 {
|
|
193
|
+
color: inherit;
|
|
194
|
+
|
|
195
|
+
&:last-child {
|
|
196
|
+
margin-bottom: $heading-spacing;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
> * {
|
|
202
|
+
max-width: 38rem;
|
|
203
|
+
padding: 0;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
/* -----------------------------------------------------------
|
|
210
|
+
Sidebar links + nav
|
|
211
|
+
----------------------------------------------------------- */
|
|
212
|
+
|
|
213
|
+
#sidebar a {
|
|
214
|
+
color: $sidebar-link-color;
|
|
215
|
+
|
|
216
|
+
svg {
|
|
217
|
+
fill: $sidebar-icon-color;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&:hover, &:focus, &.active {
|
|
221
|
+
svg { fill: $sidebar-icon-color; }
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
&:hover, &:focus {
|
|
225
|
+
text-decoration: underline;
|
|
226
|
+
&.icon {
|
|
227
|
+
text-decoration: none;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&.active {
|
|
232
|
+
font-weight: bold;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
#sidebar .site-title {
|
|
237
|
+
color: $sidebar-title-color;
|
|
238
|
+
a { color: inherit; }
|
|
239
|
+
}
|
|
240
|
+
#sidebar nav {
|
|
241
|
+
display: flex;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
#sidebar-nav-links {
|
|
245
|
+
flex-flow: column nowrap;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
#sidebar-icon-links {
|
|
249
|
+
max-width: 100%;
|
|
250
|
+
flex-flow: row wrap;
|
|
251
|
+
justify-content: center;
|
|
252
|
+
margin-top: 1rem;
|
|
253
|
+
|
|
254
|
+
@media (min-width: $large-breakpoint) {
|
|
255
|
+
margin-left: -0.25em;
|
|
256
|
+
justify-content: flex-start;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
#sidebar nav > * {
|
|
261
|
+
display: block;
|
|
262
|
+
line-height: 1.75;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
#sidebar nav > .icon {
|
|
266
|
+
font-size: 1.5rem;
|
|
267
|
+
display: inline-block;
|
|
268
|
+
margin: 0 0.25em;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
/* -----------------------------------------------------------
|
|
273
|
+
Sticky sidebar
|
|
274
|
+
|
|
275
|
+
Set $sidebar-stick variable to affix sidebar contents to the
|
|
276
|
+
bottom of the sidebar in tablets and up.
|
|
277
|
+
----------------------------------------------------------- */
|
|
278
|
+
|
|
279
|
+
@if $sidebar-sticky {
|
|
280
|
+
@media (min-width: $large-breakpoint) {
|
|
281
|
+
body {
|
|
282
|
+
align-items: flex-end;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
/* -----------------------------------------------------------
|
|
289
|
+
Reverse layout
|
|
290
|
+
|
|
291
|
+
Flip the orientation of the page by placing the `#sidebar`
|
|
292
|
+
on the right.
|
|
293
|
+
----------------------------------------------------------- */
|
|
294
|
+
|
|
295
|
+
@if $layout-reverse {
|
|
296
|
+
@media (min-width: $large-breakpoint) {
|
|
297
|
+
.container {
|
|
298
|
+
order: -1;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
@@ -46,6 +46,11 @@ $code-color: #bf616a !default;
|
|
|
46
46
|
|
|
47
47
|
// Hyde theming
|
|
48
48
|
$sidebar-bg-color: #202020 !default;
|
|
49
|
-
$sidebar-
|
|
49
|
+
$sidebar-fg-color: white !default;
|
|
50
50
|
$sidebar-sticky: true !default;
|
|
51
51
|
$layout-reverse: false !default;
|
|
52
|
+
|
|
53
|
+
$sidebar-title-color: $sidebar-fg-color !default;
|
|
54
|
+
$sidebar-link-color: $sidebar-fg-color !default;
|
|
55
|
+
$sidebar-text-color: rgba($sidebar-fg-color, 0.75) !default;
|
|
56
|
+
$sidebar-icon-color: rgba($sidebar-fg-color, 0.85) !default;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-hydeout
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 4.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Andrew Fong
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-
|
|
11
|
+
date: 2018-09-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -80,6 +80,20 @@ dependencies:
|
|
|
80
80
|
- - "~>"
|
|
81
81
|
- !ruby/object:Gem::Version
|
|
82
82
|
version: '1.12'
|
|
83
|
+
- !ruby/object:Gem::Dependency
|
|
84
|
+
name: wdm
|
|
85
|
+
requirement: !ruby/object:Gem::Requirement
|
|
86
|
+
requirements:
|
|
87
|
+
- - "~>"
|
|
88
|
+
- !ruby/object:Gem::Version
|
|
89
|
+
version: '0.1'
|
|
90
|
+
type: :development
|
|
91
|
+
prerelease: false
|
|
92
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
93
|
+
requirements:
|
|
94
|
+
- - "~>"
|
|
95
|
+
- !ruby/object:Gem::Version
|
|
96
|
+
version: '0.1'
|
|
83
97
|
description:
|
|
84
98
|
email:
|
|
85
99
|
- id@andrewfong.com
|