jekyll-theme-hydeout 3.7.1 → 4.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +168 -167
  3. data/_includes/back-link.html +6 -0
  4. data/_includes/category-links.html +1 -1
  5. data/_includes/copyright.html +1 -1
  6. data/_includes/favicons.html +2 -2
  7. data/_includes/head.html +3 -3
  8. data/_includes/page-links.html +1 -1
  9. data/_includes/pagination-newer.html +1 -1
  10. data/_includes/pagination-older.html +1 -1
  11. data/_includes/post-meta.html +1 -1
  12. data/_includes/post-tags.html +1 -1
  13. data/_includes/related_posts.html +1 -1
  14. data/_includes/search-form.html +1 -1
  15. data/_includes/sidebar-icon-links.html +6 -6
  16. data/_includes/sidebar-nav-links.html +2 -2
  17. data/_includes/sidebar.html +1 -1
  18. data/_includes/tags-list.html +1 -1
  19. data/_layouts/category.html +1 -1
  20. data/_layouts/default.html +1 -1
  21. data/_layouts/index.html +2 -2
  22. data/_layouts/page.html +2 -1
  23. data/_sass/hydeout.scss +13 -12
  24. data/_sass/hydeout/_back-link.scss +10 -0
  25. data/_sass/hydeout/_base.scss +48 -22
  26. data/_sass/hydeout/_code.scss +18 -24
  27. data/_sass/hydeout/_layout.scss +329 -306
  28. data/_sass/hydeout/_masthead.scss +5 -5
  29. data/_sass/hydeout/_message.scss +2 -2
  30. data/_sass/hydeout/_pagination.scss +11 -11
  31. data/_sass/hydeout/_posts.scss +53 -52
  32. data/_sass/hydeout/_search.scss +4 -3
  33. data/_sass/hydeout/_syntax.scss +56 -41
  34. data/_sass/hydeout/_tags.scss +19 -22
  35. data/_sass/hydeout/_type.scss +44 -28
  36. data/_sass/hydeout/_variables.scss +9 -7
  37. metadata +36 -8
data/_includes/related_posts.html CHANGED
@@ -4,7 +4,7 @@
4
4
  {% for post in site.related_posts limit:3 %}
5
5
  <li>
6
6
  <h3>
7
- <a href="{{ site.baseurl }}{{ post.url }}">
7
+ <a href="{{ post.url | relative_url }}">
8
8
  {{ post.title }}
9
9
  <small>{{ post.date | date_to_string }}</small>
10
10
  </a>
data/_includes/search-form.html CHANGED
@@ -10,7 +10,7 @@
10
10
  {% assign url = url | replace_first: 'spdy://', '' %}
11
11
  {% assign url = url | replace_first: '//', '' %}
12
12
  <input name="sitesearch" type="hidden"
13
- value="{{ url }}{{ site.baseurl }}" />
13
+ value="{{ url }}{{ "/" | relative_url }}" />
14
14
 
15
15
  <input type="submit" value="Search" />
16
16
  </div>
data/_includes/sidebar-icon-links.html CHANGED
@@ -1,20 +1,20 @@
1
1
  <nav id="sidebar-icon-links">
2
- {% if site.github.repo %}
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.github.repo }}">
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.github.repo }}/archive/v{{ site.version }}.zip">
10
+ href="{{ site.hydeout.repo }}/archive/v{{ site.hydeout.version }}.zip">
11
11
  {% include svg/download.svg %}
12
12
  </a>
13
13
  {% endif %}
14
14
 
15
15
  <a id="subscribe-link"
16
16
  class="icon" title="Subscribe" aria-label="Subscribe"
17
- href="{{ site.baseurl }}/{{ site.feed.path | default: 'feed.xml' }}">
17
+ href="{{ site.feed.path | default: 'feed.xml' | relative_url }}">
18
18
  {% include svg/feed.svg %}
19
19
  </a>
20
20
 
@@ -35,7 +35,7 @@
35
35
  <a id="tags-link"
36
36
  class="icon{% if page.url == '/tags' %} active{% endif %}"
37
37
  title="Tags" aria-label="Tags"
38
- href="{{ site.baseurl }}{{ tags_page.url }}">
38
+ href="{{ tags_page.url | relative_url }}">
39
39
  {% include svg/tags.svg %}
40
40
  </a>
41
41
  {% endif %}
@@ -44,7 +44,7 @@
44
44
  <a id="search-link"
45
45
  class="icon{% if page.url == '/search' %} active{% endif %}"
46
46
  title="Search" aria-label="Search"
47
- href="{{ site.baseurl }}{{ search_page.url }}">
47
+ href="{{ search_page.url | relative_url }}">
48
48
  {% include svg/search.svg %}
49
49
  </a>
50
50
  {% endif %}
data/_includes/sidebar-nav-links.html CHANGED
@@ -1,11 +1,11 @@
1
1
  <nav id="sidebar-nav-links">
2
2
  {% if site.sidebar_home_link %}
3
3
  <a class="home-link {% if page.url == '/' %} active{% endif %}"
4
- href="{{ site.baseurl }}/">Home</a>
4
+ href="{{ "/" | relative_url }}">Home</a>
5
5
  {% endif %}
6
6
  {% if site.sidebar_blog_link %}
7
7
  <a class="page-link {% if page.url == site.sidebar_blog_link %} active{% endif %}"
8
- href="{{ site.baseurl }}{{ site.sidebar_blog_link }}">Blog</a>
8
+ href="{{ site.sidebar_blog_link | relative_url }}">Blog</a>
9
9
  {% endif %}
10
10
 
11
11
  {% comment %}
data/_includes/sidebar.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <div id="sidebar">
2
2
  <header>
3
3
  <{% if page.layout == "index" %}h1{% else %}div{% endif %} class="site-title">
4
- <a href="{{ site.baseurl }}/">
4
+ <a href="{{ "/" | relative_url }}">
5
5
  {% unless page.url == "/" %}
6
6
  <span class="back-arrow icon">{% include svg/back-arrow.svg %}</span>
7
7
  {% endunless %}
data/_includes/tags-list.html CHANGED
@@ -27,7 +27,7 @@
27
27
  {% for post in site.tags[tag] %}
28
28
  <li>
29
29
  <h3>
30
- <a href="{{ site.baseurl }}{{ post.url }}">
30
+ <a href="{{ post.url | relative_url }}">
31
31
  {{ post.title }}
32
32
  <small>{{ post.date | date_to_string }}</small>
33
33
  </a>
data/_layouts/category.html CHANGED
@@ -11,7 +11,7 @@ layout: page
11
11
  {% for post in site.categories[category] %}
12
12
  <li>
13
13
  <h3>
14
- <a href="{{ site.baseurl }}{{ post.url }}">
14
+ <a href="{{ post.url | relative_url }}">
15
15
  {{ post.title }}
16
16
  <small>{{ post.date | date_to_string }}</small>
17
17
  </a>
data/_layouts/default.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en-us">
2
+ <html lang="{{ page.lang | default: 'en-us'}}">
3
3
 
4
4
  {% include head.html %}
5
5
 
data/_layouts/index.html CHANGED
@@ -10,7 +10,7 @@ layout: default
10
10
  {% for post in paginator.posts %}
11
11
  <article class="post-body">
12
12
  <h2 class="post-title">
13
- <a href="{{ site.baseurl }}{{ post.url }}">
13
+ <a href="{{ post.url | relative_url }}">
14
14
  {{ post.title }}
15
15
  </a>
16
16
  </h2>
@@ -32,7 +32,7 @@ layout: default
32
32
  {% endcapture %}
33
33
 
34
34
  {% if content_words != excerpt_words %}
35
- <a href="{{ site.baseurl }}{{ post.url }}">More &hellip;</a>
35
+ <a href="{{ post.url | relative_url }}">More &hellip;</a>
36
36
  {% endif %}
37
37
  {% endif %}
38
38
  </article>
data/_layouts/page.html CHANGED
@@ -1,10 +1,11 @@
1
1
  ---
2
2
  layout: default
3
3
  ---
4
-
5
4
  <header>
5
+ {% include back-link.html %}
6
6
  <h1 class="page-title">{{ page.title }}</h1>
7
7
  </header>
8
8
  <div class="content">
9
9
  {{ content }}
10
10
  </div>
11
+ {% include back-link.html %}
data/_sass/hydeout.scss CHANGED
@@ -3,15 +3,16 @@
3
3
  Designed, built, and released under MIT license by @mdo.
4
4
  */
5
5
 
6
- @import "hydeout/variables";
7
- @import "hydeout/base";
8
- @import "hydeout/type";
9
- @import "hydeout/syntax";
10
- @import "hydeout/code";
11
- @import "hydeout/layout";
12
- @import "hydeout/masthead";
13
- @import "hydeout/posts";
14
- @import "hydeout/pagination";
15
- @import "hydeout/message";
16
- @import "hydeout/search";
17
- @import "hydeout/tags";
6
+ @import 'hydeout/variables';
7
+ @import 'hydeout/base';
8
+ @import 'hydeout/type';
9
+ @import 'hydeout/syntax';
10
+ @import 'hydeout/code';
11
+ @import 'hydeout/layout';
12
+ @import 'hydeout/masthead';
13
+ @import 'hydeout/posts';
14
+ @import 'hydeout/pagination';
15
+ @import 'hydeout/message';
16
+ @import 'hydeout/search';
17
+ @import 'hydeout/tags';
18
+ @import 'hydeout/back-link';
data/_sass/hydeout/_back-link.scss ADDED
@@ -0,0 +1,10 @@
1
+ .back-link {
2
+ font-size: 80%;
3
+ a {
4
+ color: currentColor;
5
+ svg {
6
+ fill: currentColor;
7
+ }
8
+ }
9
+ }
10
+
data/_sass/hydeout/_base.scss CHANGED
@@ -3,9 +3,7 @@
3
3
  // Update the foundational and global aspects of the page.
4
4
 
5
5
  * {
6
- -webkit-box-sizing: border-box;
7
- -moz-box-sizing: border-box;
8
- box-sizing: border-box;
6
+ box-sizing: border-box;
9
7
  }
10
8
 
11
9
  html,
@@ -25,11 +23,14 @@ html {
25
23
  }
26
24
 
27
25
  body {
28
- -webkit-text-size-adjust: 100%;
29
- -ms-text-size-adjust: 100%;
26
+ text-size-adjust: 100%;
30
27
  }
31
28
 
32
- main, article, section { display: block; }
29
+ main,
30
+ article,
31
+ section {
32
+ display: block;
33
+ }
33
34
 
34
35
  // No `:visited` state is required by default (browsers will use `a`)
35
36
  a {
@@ -48,26 +49,25 @@ a {
48
49
  }
49
50
 
50
51
  img {
52
+ border-radius: 5px;
51
53
  display: block;
52
- max-width: 100%;
54
+ height: auto; // prevent max-width from squishing images with defined height
53
55
  margin: 0 0 1rem;
54
- border-radius: 5px;
55
- height: auto; // Fix to keep max-width from squishing images with defined
56
- // height in HTML
56
+ max-width: 100%;
57
57
  }
58
58
 
59
59
  table {
60
- margin-bottom: 1rem;
61
- width: 100%;
62
- font-size: 85%;
63
60
  border: 1px solid $border-color;
64
61
  border-collapse: collapse;
62
+ font-size: 85%;
63
+ margin-bottom: 1rem;
64
+ width: 100%;
65
65
  }
66
66
 
67
67
  td,
68
68
  th {
69
- padding: .25rem .5rem;
70
69
  border: 1px solid $border-color;
70
+ padding: 0.25rem 0.5rem;
71
71
  }
72
72
 
73
73
  th {
@@ -79,25 +79,51 @@ 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 {
83
- padding: $padding-v $padding-h;
82
+ button,
83
+ input[type='text'],
84
+ input[type='email'],
85
+ input[type='search'],
86
+ input[type='submit'] {
84
87
  border: 1px solid $border-color;
85
88
  border-radius: $border-radius;
89
+ padding: $padding-v $padding-h;
86
90
  }
87
91
 
88
- button, input[type="submit"] {
89
- cursor: pointer;
92
+ button,
93
+ input[type='submit'] {
90
94
  background: transparent;
91
95
  border-color: $border-color;
92
96
  color: $link-color;
93
- transition: color 0.6s ease-in-out,
94
- border-color 0.6s ease-in-out,
95
- background 0.6s ease-in-out;
97
+ cursor: pointer;
98
+ transition:
99
+ color 0.6s ease-in-out,
100
+ border-color 0.6s ease-in-out,
101
+ background 0.6s ease-in-out;
96
102
 
97
103
  &:hover {
98
104
  background: $link-color;
99
105
  border-color: $link-color;
100
- color: white;
101
106
  box-shadow: $default-box-shadow;
107
+ color: #fff;
102
108
  }
109
+ }
110
+
111
+ .video-container {
112
+ overflow: hidden;
113
+ position: relative;
114
+ width:100%;
115
+ }
116
+
117
+ .video-container::after {
118
+ padding-top: 56.25%;
119
+ display: block;
120
+ content: '';
121
+ }
122
+
123
+ .video-container iframe {
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: 100%;
103
129
  }
data/_sass/hydeout/_code.scss CHANGED
@@ -9,33 +9,35 @@ pre {
9
9
  }
10
10
 
11
11
  code {
12
- padding: .25em .5em;
13
- font-size: 85%;
14
- color: $code-color;
15
12
  background-color: #f9f9f9;
16
13
  border-radius: 3px;
14
+ color: $code-color;
15
+ font-size: 85%;
16
+ padding: 0.25em 0.5em;
17
17
  }
18
18
 
19
19
  pre {
20
- margin-top: 0;
21
20
  margin-bottom: 1rem;
21
+ margin-top: 0;
22
+ max-width: 100%;
23
+ overflow-x: auto;
22
24
  }
23
25
 
24
26
  pre code {
25
- padding: 0;
26
- font-size: 100%;
27
- color: inherit;
28
27
  background-color: transparent;
28
+ color: inherit;
29
+ font-size: 100%;
30
+ padding: 0;
29
31
  }
30
32
 
31
33
  // Pygments/Rouge via Jekyll
32
34
  .highlight {
33
- padding: 1rem;
34
- margin-bottom: 1rem;
35
- font-size: .8rem;
36
- line-height: 1.4;
37
35
  background-color: #f9f9f9;
38
- border-radius: .25rem;
36
+ border-radius: 0.25rem;
37
+ font-size: 0.8rem;
38
+ line-height: 1.4;
39
+ margin-bottom: 1rem;
40
+ padding: 1rem;
39
41
 
40
42
  pre {
41
43
  margin-bottom: 0;
@@ -43,22 +45,14 @@ pre code {
43
45
  }
44
46
 
45
47
  .lineno {
46
- display: inline-block; // Ensures the null space also isn't selectable
47
- padding-right: .75rem;
48
- padding-left: .25rem;
49
48
  color: #999;
50
- // Make sure numbers aren't selectable
51
- -webkit-user-select: none;
52
- -moz-user-select: none;
53
- user-select: none;
49
+ display: inline-block; // Ensures the null space also isn't selectable
50
+ padding-left: 0.25rem;
51
+ padding-right: 0.75rem;
52
+ user-select: none; // Make sure numbers aren't selectable
54
53
  }
55
54
  }
56
55
 
57
- pre {
58
- max-width: 100%;
59
- overflow-x: auto;
60
- }
61
-
62
56
  // Gist via GitHub Pages
63
57
  // .gist .gist-file {
64
58
  // font-family: Menlo, Monaco, "Courier New", monospace !important;
data/_sass/hydeout/_layout.scss CHANGED
@@ -1,306 +1,329 @@
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
- }
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
+ background-attachment: fixed;
27
+ background-color: $sidebar-bg-color;
28
+ background-image: linear-gradient(to bottom, lighten($sidebar-bg-color, 7%), darken($sidebar-bg-color, 7%));
29
+ color: $sidebar-text-color;
30
+ display: flex;
31
+ flex-direction: column;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ #sidebar {
36
+ flex: 0 0 auto;
37
+ padding: $section-spacing;
38
+
39
+ .site-title {
40
+ font-family: 'Abril Fatface', serif;
41
+ font-size: $large-font-size;
42
+ font-weight: normal;
43
+ margin-bottom: $heading-spacing;
44
+ margin-top: 0;
45
+ }
46
+
47
+ .site-title .back-arrow { margin-right: 0.5rem; }
48
+ }
49
+
50
+ .content {
51
+ background: $body-bg;
52
+ color: $body-color;
53
+ padding: $section-spacing;
54
+ }
55
+
56
+ // Container is flexbox as well -- we want content div to stretch and fill
57
+ .container {
58
+ display: flex;
59
+ flex: 1 1 auto;
60
+ flex-direction: column;
61
+
62
+ > .content {
63
+ flex-grow: 1;
64
+ padding-bottom: $section-spacing * 2;
65
+ }
66
+ }
67
+
68
+ /* -----------------------------------------------------------
69
+ Mobile view
70
+ ----------------------------------------------------------- */
71
+
72
+ // Hide secondary nav content in sidebar
73
+ // Hide lead paragraph in sidebar
74
+ #sidebar {
75
+ header ~ *,
76
+ header ~ nav,
77
+ p.lead {
78
+ display: none;
79
+ }
80
+ }
81
+
82
+ // Make header elements blend into sidebar / background
83
+ .container > header {
84
+ background: transparent;
85
+ color: $sidebar-title-color;
86
+ margin:
87
+ ($heading-spacing - $section-spacing)
88
+ $section-spacing
89
+ $section-spacing;
90
+
91
+ h1,
92
+ h2 {
93
+ color: inherit;
94
+ }
95
+
96
+ h1:last-child,
97
+ h2:last-child {
98
+ margin-bottom: 0;
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 ~ *,
118
+ p.lead {
119
+ display: block;
120
+ }
121
+
122
+ header ~ nav {
123
+ display: flex;
124
+ }
125
+
126
+ // Slightly more bottom padding to compensate for heading not match 100% of
127
+ // line-height on top
128
+ > *:last-child {
129
+ margin-bottom: 0.5rem;
130
+ }
131
+ }
132
+
133
+ /* -----------------------------------------------------------
134
+ Tablet / Desktop view
135
+ ----------------------------------------------------------- */
136
+
137
+ @media (min-width: $large-breakpoint) {
138
+ body {
139
+ flex-direction: row;
140
+ min-height: 100vh;
141
+ -webkit-overflow-scrolling: touch;
142
+ overflow-y: auto;
143
+
144
+ > * {
145
+ -webkit-overflow-scrolling: touch;
146
+ overflow-y: auto;
147
+ }
148
+ }
149
+
150
+ /* Undo mobile CSS */
151
+
152
+ #sidebar,
153
+ .home #sidebar {
154
+ text-align: left;
155
+ width: $sidebar-width;
156
+
157
+ > *:last-child {
158
+ margin-bottom: 0;
159
+ }
160
+ }
161
+
162
+ #sidebar {
163
+ position: fixed;
164
+
165
+ // Attach to bottom or top of window
166
+ @if $sidebar-sticky {
167
+ bottom: 0;
168
+ }
169
+
170
+ @else {
171
+ top: 0;
172
+ }
173
+
174
+ // Attach to right or left of window
175
+ @if $layout-reverse {
176
+ right: 0;
177
+ }
178
+
179
+ @else {
180
+ left: 0;
181
+ }
182
+
183
+ .site-title {
184
+ font-size: 3.25rem;
185
+ .back-arrow { display: none; }
186
+ }
187
+
188
+ p.lead,
189
+ header ~ * {
190
+ display: block;
191
+ }
192
+
193
+ header ~ nav {
194
+ display: flex;
195
+ }
196
+ }
197
+
198
+ .index #sidebar { margin-bottom: 0; }
199
+
200
+ // Make entire container background white to contrast against sidebar
201
+ .container {
202
+ background: $body-bg;
203
+ color: $body-color;
204
+ min-height: 100vh;
205
+ padding:
206
+ $section-spacing * 2
207
+ $section-spacing * 2
208
+ 0;
209
+
210
+ @if $layout-reverse {
211
+ margin-right: $sidebar-width;
212
+ }
213
+
214
+ @else {
215
+ margin-left: $sidebar-width;
216
+ }
217
+
218
+ > header {
219
+ color: $heading-color;
220
+ margin: 0;
221
+
222
+ h1,
223
+ h2 {
224
+ color: inherit;
225
+
226
+ &:last-child {
227
+ margin-bottom: $heading-spacing;
228
+ }
229
+ }
230
+ }
231
+
232
+ > * {
233
+ max-width: 38rem;
234
+ padding: 0;
235
+ }
236
+ }
237
+ }
238
+
239
+ /* -----------------------------------------------------------
240
+ Sidebar links + nav
241
+ ----------------------------------------------------------- */
242
+
243
+ #sidebar a {
244
+ color: $sidebar-link-color;
245
+
246
+ svg {
247
+ fill: $sidebar-icon-color;
248
+ }
249
+ }
250
+
251
+ #sidebar a:hover,
252
+ #sidebar a:focus,
253
+ #sidebar a.active {
254
+ svg { fill: $sidebar-icon-color; }
255
+ }
256
+
257
+ #sidebar a:hover,
258
+ #sidebar a:focus {
259
+ text-decoration: underline;
260
+
261
+ &.icon {
262
+ text-decoration: none;
263
+ }
264
+ }
265
+
266
+ #sidebar a.active {
267
+ font-weight: bold;
268
+ }
269
+
270
+ #sidebar .site-title {
271
+ color: $sidebar-title-color;
272
+ a { color: inherit; }
273
+ }
274
+
275
+ #sidebar nav {
276
+ display: flex;
277
+ }
278
+
279
+ #sidebar-nav-links {
280
+ flex-flow: column nowrap;
281
+ }
282
+
283
+ #sidebar-icon-links {
284
+ flex-flow: row wrap;
285
+ justify-content: center;
286
+ margin-top: 1rem;
287
+ max-width: 100%;
288
+
289
+ @media (min-width: $large-breakpoint) {
290
+ justify-content: flex-start;
291
+ margin-left: -0.25em;
292
+ }
293
+ }
294
+
295
+ #sidebar nav > * {
296
+ display: block;
297
+ line-height: 1.75;
298
+ }
299
+
300
+ #sidebar nav > .icon {
301
+ display: inline-block;
302
+ font-size: 1.5rem;
303
+ margin: 0 0.25em;
304
+ }
305
+
306
+ @media print {
307
+ #sidebar {
308
+ display: none;
309
+ }
310
+
311
+ body {
312
+ display: block;
313
+ }
314
+
315
+ .container {
316
+ display: block;
317
+ margin-left: 0;
318
+ margin-right: 0;
319
+ padding: 0;
320
+
321
+ > * {
322
+ max-width: 100%;
323
+ }
324
+ }
325
+
326
+ html {
327
+ font-size: normal;
328
+ }
329
+ }