jekyll-theme-hydeout 3.7.0 → 3.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.md +0 -0
  3. data/README.md +167 -163
  4. data/_includes/category-links.html +0 -0
  5. data/_includes/comments.html +0 -0
  6. data/_includes/copyright.html +0 -0
  7. data/_includes/custom-foot.html +0 -0
  8. data/_includes/custom-head.html +0 -0
  9. data/_includes/custom-icon-links.html +0 -0
  10. data/_includes/custom-nav-links.html +0 -0
  11. data/_includes/disqus.html +0 -0
  12. data/_includes/favicons.html +0 -0
  13. data/_includes/font-includes.html +0 -0
  14. data/_includes/google-analytics.html +0 -0
  15. data/_includes/head.html +0 -0
  16. data/_includes/page-links.html +0 -0
  17. data/_includes/pagination-newer.html +0 -0
  18. data/_includes/pagination-older.html +0 -0
  19. data/_includes/post-meta.html +0 -0
  20. data/_includes/post-tags.html +0 -0
  21. data/_includes/related_posts.html +0 -0
  22. data/_includes/search-form.html +0 -0
  23. data/_includes/sidebar-icon-links.html +0 -0
  24. data/_includes/sidebar-nav-links.html +0 -0
  25. data/_includes/sidebar.html +0 -0
  26. data/_includes/svg/back-arrow.svg +0 -0
  27. data/_includes/svg/download.svg +0 -0
  28. data/_includes/svg/feed.svg +0 -0
  29. data/_includes/svg/github.svg +0 -0
  30. data/_includes/svg/search.svg +0 -0
  31. data/_includes/svg/tags.svg +0 -0
  32. data/_includes/tags-list.html +0 -0
  33. data/_layouts/category.html +0 -0
  34. data/_layouts/default.html +0 -0
  35. data/_layouts/index.html +0 -0
  36. data/_layouts/page.html +0 -0
  37. data/_layouts/post.html +0 -0
  38. data/_layouts/search.html +0 -0
  39. data/_layouts/tags.html +0 -0
  40. data/_sass/hydeout.scss +0 -0
  41. data/_sass/hydeout/_base.scss +0 -0
  42. data/_sass/hydeout/_code.scss +0 -0
  43. data/_sass/hydeout/_layout.scss +306 -298
  44. data/_sass/hydeout/_masthead.scss +0 -0
  45. data/_sass/hydeout/_message.scss +0 -0
  46. data/_sass/hydeout/_pagination.scss +0 -0
  47. data/_sass/hydeout/_posts.scss +0 -0
  48. data/_sass/hydeout/_search.scss +0 -0
  49. data/_sass/hydeout/_syntax.scss +0 -0
  50. data/_sass/hydeout/_tags.scss +0 -0
  51. data/_sass/hydeout/_type.scss +0 -0
  52. data/_sass/hydeout/_variables.scss +0 -0
  53. data/assets/css/main.scss +0 -0
  54. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 19684fabd8b8f17b1a35ad048fb68dd7d0a9b7e7
4
- data.tar.gz: 1d3fb2fff14537e5195ae7174d36e75cc40dd3c7
3
+ metadata.gz: c8b6186e8fc0867a2364926d9242887c10f5b8f3
4
+ data.tar.gz: b67f562ffa575888c0cbd5918948e4fbd767a46c
5
5
  SHA512:
6
- metadata.gz: 11f693116901653e7621c4ab8b6b4ffdb1e11c87d9f5dc2138ab9092f4078fea631c09d58e4811f7c8a57d57e3050b1aeb89590c8df4b8b312a3e12f0ea1ad12
7
- data.tar.gz: 1dcb46959a14523f3fcc6eb7f6387138e6dd551061f39ec26a6fce81321443e31d5d0ab6bd11883c652becbe36c4ded9c30031afca1cf78025d7e4d089a43ff7
6
+ metadata.gz: 5f8fdc3d6f8963fd1d4fb285f15582fc2a18ee26bd42a05da0854792393c36aed5b15c85225b7a94580bcacdf319364fb7702ab40cc84e32962f4a6daaccf485
7
+ data.tar.gz: 36ae8c142eaa2df9dbf072199b371fc5bab5c7869684e2733d0ce7cb88eea02a5539716b77c550949c4b9b44d926070fbe50e206edf6e9f0b18f196db6cc53ef
data/LICENSE.md CHANGED
File without changes
data/README.md CHANGED
@@ -1,163 +1,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
- ![Desktop](/_screenshots/1.png?raw=true)
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
- Hydeout uses pagination, so if you have an `index.md`, you'll need to swap
17
- it with an `index.html` that uses the `index` layout:
18
-
19
- ```
20
- ---
21
- layout: index
22
- title: Home
23
- ---
24
- ```
25
-
26
- You'll also need to add a setting to `config.yml` telling Jekyll how many posts
27
- to include per page (e.g. `paginate: 5`).
28
-
29
- ### Keep It Simple
30
-
31
- In keeping with the original Hyde theme, Hydeout aims to keep the overall
32
- design lightweight and plugin-free. JavaScript is currently limited only
33
- to Disqus and Google Analytics (and is only loaded if you provide configuration
34
- variables).
35
-
36
- Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available,
37
- the CSS degrades into a single column layout.
38
-
39
- ### Customization
40
-
41
- Hydeout replaces Hyde's class-based theming with the use
42
- of the following SASS variables:
43
-
44
- ```scss
45
- $sidebar-bg-color: #202020 !default;
46
- $sidebar-sticky: true !default;
47
- $layout-reverse: false !default;
48
- $link-color: #268bd2 !default;
49
- ```
50
-
51
- To override these variables, create your own `assets/css/main.scss` file.
52
- Define your own variables, then import in Hydeout's SCSS, like so:
53
-
54
- ```scss
55
- ---
56
- # Jekyll needs front matter for SCSS files
57
- ---
58
-
59
- $sidebar-bg-color: #ac4142;
60
- $link-color: #ac4142;
61
- $sidebar-sticky: false;
62
- @import "hydeout";
63
- ```
64
-
65
- See the [_variables](_sass/hydeout/_variables.scss) file for other variables
66
- you can override.
67
-
68
- You can see the full set of partials you can replace in the
69
- [`_includes`](_includes) folder, but there are a few worth noting:
70
-
71
- * `_includes/copyright.html` - Insert your own copyright here.
72
-
73
- * `_includes/custom-head.html` - Insert custom head tags (e.g. to load your
74
- own stylesheets)
75
-
76
- * `_includes/custom-foot.html` - Insert custom elements at the end of the
77
- body (e.g. for custom JS)
78
-
79
- * `_includes/custom-nav-links.html` - Additional nav links to insert at the
80
- end of the list of links in the sidebar.
81
-
82
- Pro-tip: The `nav`s in the sidebar are flexboxes. Use the `order` property
83
- to order your links.
84
-
85
- * `_includes/custom-icon-links.html`- Additional icon links to insert at the
86
- end of the icon links at the bottom of the sidebar. You can use the `order`
87
- property to re-order.
88
-
89
- * `_includes/favicons.html` - Replace references to `favicon.ico` and
90
- `favicon.png` with your own favicons references.
91
-
92
- * `_includes/font-includes.html` - The Abril Fatface font used for the site
93
- title is loaded here. If you're overriding that font in the CSS, be sure
94
- to also remove the font load reference here.
95
-
96
- ### New Features
97
-
98
- * Hydeout adds a new tags page (accessible in the sidebar). Just create a
99
- new page with the tags layout:
100
-
101
- ```
102
- ---
103
- layout: tags
104
- title: Tags
105
- ---
106
- ```
107
-
108
- * Hydeout adds a new "category" layout for dedicated category pages.
109
- Category pages are automatically added to the sidebar. All other pages
110
- must have `sidebar_link: true` in their front matter to show up in
111
- the sidebar. To create a category page, use the `category` layout"
112
-
113
- ```
114
- ---
115
- layout: category
116
- title: My Category
117
- ---
118
-
119
- Description of "My Category"
120
- ```
121
-
122
- * You can control how pages are sorted by using the `sidebar_sort_order`
123
- parameter in the front matter. This works for both category and non-category
124
- pages, although non-category pages will always come first. Take a look at
125
- [`_includes/sidebar-nav-links.html`](./_includes/sidebar-nav-links.html) if
126
- you want to customize this behavior.
127
-
128
- ```
129
- ---
130
- layout: page
131
- title: My page
132
- sort_order: 123
133
- ---
134
-
135
- Some content.
136
- ```
137
-
138
- * A simple redirect-to-Google search is available. Just create a page with
139
- the `search` layout.
140
-
141
- ```
142
- ---
143
- layout: search
144
- title: Google Search
145
- ---
146
- ```
147
-
148
- * Disqus integration is ready out of the box. Just add the following to
149
- your config file:
150
-
151
- ```yaml
152
- disqus:
153
- shortname: my-disqus-shortname
154
- ```
155
-
156
- If you don't want Disqus or want to use something else, override
157
- `comments.html`.
158
-
159
- * For Google Analytics support, define a `google_analytics` variable with
160
- your property ID in your config file.
161
-
162
- There's also a bunch of minor tweaks and adjustments throughout the
163
- theme. Hope this works for you!
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
+ ![Desktop](/_screenshots/1.png?raw=true)
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-sticky: true !default;
51
+ $layout-reverse: false !default;
52
+ $link-color: #268bd2 !default;
53
+ ```
54
+
55
+ To override these variables, create your own `assets/css/main.scss` file.
56
+ Define your own variables, then import in Hydeout's SCSS, like so:
57
+
58
+ ```scss
59
+ ---
60
+ # Jekyll needs front matter for SCSS files
61
+ ---
62
+
63
+ $sidebar-bg-color: #ac4142;
64
+ $link-color: #ac4142;
65
+ $sidebar-sticky: false;
66
+ @import "hydeout";
67
+ ```
68
+
69
+ See the [_variables](_sass/hydeout/_variables.scss) file for other variables
70
+ you can override.
71
+
72
+ You can see the full set of partials you can replace in the
73
+ [`_includes`](_includes) folder, but there are a few worth noting:
74
+
75
+ * `_includes/copyright.html` - Insert your own copyright here.
76
+
77
+ * `_includes/custom-head.html` - Insert custom head tags (e.g. to load your
78
+ own stylesheets)
79
+
80
+ * `_includes/custom-foot.html` - Insert custom elements at the end of the
81
+ body (e.g. for custom JS)
82
+
83
+ * `_includes/custom-nav-links.html` - Additional nav links to insert at the
84
+ end of the list of links in the sidebar.
85
+
86
+ Pro-tip: The `nav`s in the sidebar are flexboxes. Use the `order` property
87
+ to order your links.
88
+
89
+ * `_includes/custom-icon-links.html`- Additional icon links to insert at the
90
+ end of the icon links at the bottom of the sidebar. You can use the `order`
91
+ property to re-order.
92
+
93
+ * `_includes/favicons.html` - Replace references to `favicon.ico` and
94
+ `favicon.png` with your own favicons references.
95
+
96
+ * `_includes/font-includes.html` - The Abril Fatface font used for the site
97
+ title is loaded here. If you're overriding that font in the CSS, be sure
98
+ to also remove the font load reference here.
99
+
100
+ ### New Features
101
+
102
+ * Hydeout adds a new tags page (accessible in the sidebar). Just create a
103
+ new page with the tags layout:
104
+
105
+ ```
106
+ ---
107
+ layout: tags
108
+ title: Tags
109
+ ---
110
+ ```
111
+
112
+ * Hydeout adds a new "category" layout for dedicated category pages.
113
+ Category pages are automatically added to the sidebar. All other pages
114
+ must have `sidebar_link: true` in their front matter to show up in
115
+ the sidebar. To create a category page, use the `category` layout"
116
+
117
+ ```
118
+ ---
119
+ layout: category
120
+ title: My Category
121
+ ---
122
+
123
+ Description of "My Category"
124
+ ```
125
+
126
+ * You can control how pages are sorted by using the `sidebar_sort_order`
127
+ parameter in the front matter. This works for both category and non-category
128
+ pages, although non-category pages will always come first. Take a look at
129
+ [`_includes/sidebar-nav-links.html`](./_includes/sidebar-nav-links.html) if
130
+ you want to customize this behavior.
131
+
132
+ ```
133
+ ---
134
+ layout: page
135
+ title: My page
136
+ sidebar_sort_order: 123
137
+ ---
138
+
139
+ Some content.
140
+ ```
141
+
142
+ * A simple redirect-to-Google search is available. Just create a page with
143
+ the `search` layout.
144
+
145
+ ```
146
+ ---
147
+ layout: search
148
+ title: Google Search
149
+ ---
150
+ ```
151
+
152
+ * Disqus integration is ready out of the box. Just add the following to
153
+ your config file:
154
+
155
+ ```yaml
156
+ disqus:
157
+ shortname: my-disqus-shortname
158
+ ```
159
+
160
+ If you don't want Disqus or want to use something else, override
161
+ `comments.html`.
162
+
163
+ * For Google Analytics support, define a `google_analytics` variable with
164
+ your property ID in your config file.
165
+
166
+ There's also a bunch of minor tweaks and adjustments throughout the
167
+ theme. Hope this works for you!
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -1,298 +1,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: rgba(255,255,255,.75);
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
- color: rgba(255,255,255,.75);
47
- margin-top: 0;
48
- margin-bottom: $heading-spacing;
49
-
50
- a {
51
- color: inherit;
52
- &:hover { color: $sidebar-title-color; }
53
- }
54
-
55
- .back-arrow { margin-right: 0.5rem; }
56
- }
57
- }
58
-
59
- // Container is flexbox as well -- we want content div to stretch and fill
60
- .container {
61
- flex: 1 1 auto;
62
- display: flex;
63
- flex-direction: column;
64
-
65
- > .content {
66
- flex-grow: 1;
67
- }
68
- }
69
-
70
- .content {
71
- background: $body-bg;
72
- color: $body-color;
73
- padding: $section-spacing;
74
- }
75
-
76
-
77
- /* -----------------------------------------------------------
78
- Mobile view
79
- ----------------------------------------------------------- */
80
-
81
- // Hide secondary nav content in sidebar
82
- // Hide lead paragraph in sidebar
83
- #sidebar {
84
- header ~ *, header ~ nav, p.lead {
85
- display: none;
86
- }
87
- }
88
-
89
- // Make header elements blend into sidebar / background
90
- .container > header {
91
- background: transparent;
92
- color: white;
93
- margin: ($heading-spacing - $section-spacing)
94
- $section-spacing
95
- $section-spacing;
96
-
97
- h1, h2 {
98
- color: white;
99
-
100
- &:last-child {
101
- margin-bottom: 0;
102
- }
103
- }
104
- }
105
-
106
-
107
- /* -----------------------------------------------------------
108
- Mobile view for home page)
109
- ----------------------------------------------------------- */
110
-
111
- .home #sidebar {
112
-
113
- // Center sidebar content
114
- text-align: center;
115
-
116
- // Bigger title
117
- .site-title {
118
- font-size: 3.25rem;
119
- color: $sidebar-title-color;
120
- }
121
-
122
- // Show secondary nav content + lead
123
- header ~ *, p.lead {
124
- display: block;
125
- }
126
-
127
- header {
128
- ~ nav {
129
- display: flex;
130
- }
131
- }
132
-
133
- // Slightly more bottom padding to compensate for heading not match 100% of
134
- // line-height on top
135
- > *:last-child {
136
- margin-bottom: 0.5rem;
137
- }
138
- }
139
-
140
-
141
- /* -----------------------------------------------------------
142
- Tablet / Desktop view
143
- ----------------------------------------------------------- */
144
-
145
- @media (min-width: $large-breakpoint) {
146
- body {
147
- flex-direction: row;
148
- height: 100vh;
149
- overflow: auto;
150
- > * { max-height: 100vh; overflow: auto; }
151
- }
152
-
153
- /* Undo mobile CSS */
154
-
155
- #sidebar, .home #sidebar {
156
- width: $sidebar-width;
157
- text-align: left;
158
-
159
- > *:last-child {
160
- margin-bottom: 0;
161
- }
162
- }
163
-
164
- #sidebar {
165
- .site-title {
166
- font-size: 3.25rem;
167
-
168
- a { color: $sidebar-title-color; }
169
- .back-arrow { display: none; }
170
- }
171
-
172
- p.lead, header ~ * {
173
- display: block;
174
- }
175
-
176
- header ~ nav {
177
- display: flex;
178
- }
179
- }
180
-
181
- .index #sidebar { margin-bottom: 0; }
182
-
183
- // Make entire container background white to contrast against sidebar
184
- .container {
185
- background: $body-bg;
186
- color: $body-color;
187
- padding: $section-spacing * 2;
188
- height: 100vh;
189
-
190
- > header {
191
- color: inherit;
192
- margin: 0;
193
- h1, h2 {
194
- color: inherit;
195
-
196
- &:last-child {
197
- margin-bottom: $heading-spacing;
198
- }
199
- }
200
- }
201
-
202
- > * {
203
- max-width: 38rem;
204
- padding: 0;
205
- }
206
- }
207
- }
208
-
209
-
210
- /* -----------------------------------------------------------
211
- Sidebar links + nav
212
- ----------------------------------------------------------- */
213
-
214
- #sidebar a {
215
- color: #fff;
216
-
217
- svg {
218
- fill: rgba(255, 255, 255, 0.85);
219
- }
220
-
221
- &:hover, &:focus, &.active {
222
- svg { fill: #fff; }
223
- }
224
-
225
- &:hover, &:focus {
226
- text-decoration: underline;
227
- &.icon {
228
- text-decoration: none;
229
- }
230
- }
231
-
232
- &.active {
233
- font-weight: bold;
234
- }
235
- }
236
-
237
- #sidebar nav {
238
- display: flex;
239
- }
240
-
241
- #sidebar-nav-links {
242
- flex-flow: column nowrap;
243
- }
244
-
245
- #sidebar-icon-links {
246
- max-width: 100%;
247
- flex-flow: row wrap;
248
- justify-content: center;
249
- margin-top: 1rem;
250
-
251
- @media (min-width: $large-breakpoint) {
252
- margin-left: -0.25em;
253
- justify-content: flex-start;
254
- }
255
- }
256
-
257
- #sidebar nav > * {
258
- display: block;
259
- line-height: 1.75;
260
- }
261
-
262
- #sidebar nav > .icon {
263
- font-size: 1.5rem;
264
- display: inline-block;
265
- margin: 0 0.25em;
266
- }
267
-
268
-
269
- /* -----------------------------------------------------------
270
- Sticky sidebar
271
-
272
- Set $sidebar-stick variable to affix sidebar contents to the
273
- bottom of the sidebar in tablets and up.
274
- ----------------------------------------------------------- */
275
-
276
- @if $sidebar-sticky {
277
- @media (min-width: $large-breakpoint) {
278
- body {
279
- align-items: flex-end;
280
- }
281
- }
282
- }
283
-
284
-
285
- /* -----------------------------------------------------------
286
- Reverse layout
287
-
288
- Flip the orientation of the page by placing the `#sidebar`
289
- on the right.
290
- ----------------------------------------------------------- */
291
-
292
- @if $layout-reverse {
293
- @media (min-width: $large-breakpoint) {
294
- .container {
295
- order: -1;
296
- }
297
- }
298
- }
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: rgba(255,255,255,.75);
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
+ color: rgba(255,255,255,.75);
47
+ margin-top: 0;
48
+ margin-bottom: $heading-spacing;
49
+
50
+ a {
51
+ color: inherit;
52
+ &:hover { color: $sidebar-title-color; }
53
+ }
54
+
55
+ .back-arrow { margin-right: 0.5rem; }
56
+ }
57
+ }
58
+
59
+ // Container is flexbox as well -- we want content div to stretch and fill
60
+ .container {
61
+ flex: 1 1 auto;
62
+ display: flex;
63
+ flex-direction: column;
64
+
65
+ > .content {
66
+ flex-grow: 1;
67
+ padding-bottom: $section-spacing * 2;
68
+ }
69
+ }
70
+
71
+ .content {
72
+ background: $body-bg;
73
+ color: $body-color;
74
+ padding: $section-spacing;
75
+ }
76
+
77
+
78
+ /* -----------------------------------------------------------
79
+ Mobile view
80
+ ----------------------------------------------------------- */
81
+
82
+ // Hide secondary nav content in sidebar
83
+ // Hide lead paragraph in sidebar
84
+ #sidebar {
85
+ header ~ *, header ~ nav, p.lead {
86
+ display: none;
87
+ }
88
+ }
89
+
90
+ // Make header elements blend into sidebar / background
91
+ .container > header {
92
+ background: transparent;
93
+ color: white;
94
+ margin: ($heading-spacing - $section-spacing)
95
+ $section-spacing
96
+ $section-spacing;
97
+
98
+ h1, h2 {
99
+ color: white;
100
+
101
+ &:last-child {
102
+ margin-bottom: 0;
103
+ }
104
+ }
105
+ }
106
+
107
+
108
+ /* -----------------------------------------------------------
109
+ Mobile view for home page)
110
+ ----------------------------------------------------------- */
111
+
112
+ .home #sidebar {
113
+
114
+ // Center sidebar content
115
+ text-align: center;
116
+
117
+ // Bigger title
118
+ .site-title {
119
+ font-size: 3.25rem;
120
+ color: $sidebar-title-color;
121
+ }
122
+
123
+ // Show secondary nav content + lead
124
+ header ~ *, p.lead {
125
+ display: block;
126
+ }
127
+
128
+ header {
129
+ ~ nav {
130
+ display: flex;
131
+ }
132
+ }
133
+
134
+ // Slightly more bottom padding to compensate for heading not match 100% of
135
+ // line-height on top
136
+ > *:last-child {
137
+ margin-bottom: 0.5rem;
138
+ }
139
+ }
140
+
141
+
142
+ /* -----------------------------------------------------------
143
+ Tablet / Desktop view
144
+ ----------------------------------------------------------- */
145
+
146
+ @media (min-width: $large-breakpoint) {
147
+ body {
148
+ flex-direction: row;
149
+ height: 100vh;
150
+ overflow-y: auto;
151
+ -webkit-overflow-scrolling: touch;
152
+ > * {
153
+ max-height: 100vh;
154
+ overflow-y: auto;
155
+ -webkit-overflow-scrolling: touch;
156
+ }
157
+ }
158
+
159
+ /* Undo mobile CSS */
160
+
161
+ #sidebar, .home #sidebar {
162
+ width: $sidebar-width;
163
+ text-align: left;
164
+
165
+ > *:last-child {
166
+ margin-bottom: 0;
167
+ }
168
+ }
169
+
170
+ #sidebar {
171
+ .site-title {
172
+ font-size: 3.25rem;
173
+
174
+ a { color: $sidebar-title-color; }
175
+ .back-arrow { display: none; }
176
+ }
177
+
178
+ p.lead, header ~ * {
179
+ display: block;
180
+ }
181
+
182
+ header ~ nav {
183
+ display: flex;
184
+ }
185
+ }
186
+
187
+ .index #sidebar { margin-bottom: 0; }
188
+
189
+ // Make entire container background white to contrast against sidebar
190
+ .container {
191
+ background: $body-bg;
192
+ color: $body-color;
193
+ padding: $section-spacing * 2
194
+ $section-spacing * 2
195
+ 0;
196
+ height: 100vh;
197
+
198
+ > header {
199
+ color: inherit;
200
+ margin: 0;
201
+ h1, h2 {
202
+ color: inherit;
203
+
204
+ &:last-child {
205
+ margin-bottom: $heading-spacing;
206
+ }
207
+ }
208
+ }
209
+
210
+ > * {
211
+ max-width: 38rem;
212
+ padding: 0;
213
+ }
214
+ }
215
+ }
216
+
217
+
218
+ /* -----------------------------------------------------------
219
+ Sidebar links + nav
220
+ ----------------------------------------------------------- */
221
+
222
+ #sidebar a {
223
+ color: #fff;
224
+
225
+ svg {
226
+ fill: rgba(255, 255, 255, 0.85);
227
+ }
228
+
229
+ &:hover, &:focus, &.active {
230
+ svg { fill: #fff; }
231
+ }
232
+
233
+ &:hover, &:focus {
234
+ text-decoration: underline;
235
+ &.icon {
236
+ text-decoration: none;
237
+ }
238
+ }
239
+
240
+ &.active {
241
+ font-weight: bold;
242
+ }
243
+ }
244
+
245
+ #sidebar nav {
246
+ display: flex;
247
+ }
248
+
249
+ #sidebar-nav-links {
250
+ flex-flow: column nowrap;
251
+ }
252
+
253
+ #sidebar-icon-links {
254
+ max-width: 100%;
255
+ flex-flow: row wrap;
256
+ justify-content: center;
257
+ margin-top: 1rem;
258
+
259
+ @media (min-width: $large-breakpoint) {
260
+ margin-left: -0.25em;
261
+ justify-content: flex-start;
262
+ }
263
+ }
264
+
265
+ #sidebar nav > * {
266
+ display: block;
267
+ line-height: 1.75;
268
+ }
269
+
270
+ #sidebar nav > .icon {
271
+ font-size: 1.5rem;
272
+ display: inline-block;
273
+ margin: 0 0.25em;
274
+ }
275
+
276
+
277
+ /* -----------------------------------------------------------
278
+ Sticky sidebar
279
+
280
+ Set $sidebar-stick variable to affix sidebar contents to the
281
+ bottom of the sidebar in tablets and up.
282
+ ----------------------------------------------------------- */
283
+
284
+ @if $sidebar-sticky {
285
+ @media (min-width: $large-breakpoint) {
286
+ body {
287
+ align-items: flex-end;
288
+ }
289
+ }
290
+ }
291
+
292
+
293
+ /* -----------------------------------------------------------
294
+ Reverse layout
295
+
296
+ Flip the orientation of the page by placing the `#sidebar`
297
+ on the right.
298
+ ----------------------------------------------------------- */
299
+
300
+ @if $layout-reverse {
301
+ @media (min-width: $large-breakpoint) {
302
+ .container {
303
+ order: -1;
304
+ }
305
+ }
306
+ }
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
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: 3.7.0
4
+ version: 3.7.1
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-06-11 00:00:00.000000000 Z
11
+ date: 2018-08-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -160,7 +160,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
160
160
  version: '0'
161
161
  requirements: []
162
162
  rubyforge_project:
163
- rubygems_version: 2.6.14
163
+ rubygems_version: 2.6.14.1
164
164
  signing_key:
165
165
  specification_version: 4
166
166
  summary: The Hyde theme for Jekyll, refreshed.