jekyll-theme-hydeout 3.1.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 +7 -0
- data/LICENSE.md +11 -0
- data/README.md +98 -0
- data/_includes/comments.html +6 -0
- data/_includes/copyright.html +4 -0
- data/_includes/custom-foot.html +1 -0
- data/_includes/custom-head.html +1 -0
- data/_includes/disqus.html +43 -0
- data/_includes/favicons.html +2 -0
- data/_includes/font-includes.html +6 -0
- data/_includes/google-analytics.html +11 -0
- data/_includes/head.html +30 -0
- data/_includes/pagination.html +16 -0
- data/_includes/post-meta.html +30 -0
- data/_includes/post-tags.html +9 -0
- data/_includes/related_posts.html +15 -0
- data/_includes/search-form.html +17 -0
- data/_includes/sidebar-icon-links.html +26 -0
- data/_includes/sidebar-nav.html +34 -0
- data/_includes/sidebar.html +16 -0
- data/_includes/svg/back-arrow.svg +4 -0
- data/_includes/svg/download.svg +4 -0
- data/_includes/svg/feed.svg +5 -0
- data/_includes/svg/github.svg +2 -0
- data/_includes/svg/search.svg +4 -0
- data/_includes/svg/tags.svg +4 -0
- data/_includes/tags-list.html +39 -0
- data/_layouts/category.html +21 -0
- data/_layouts/default.html +16 -0
- data/_layouts/home.html +38 -0
- data/_layouts/page.html +10 -0
- data/_layouts/post.html +18 -0
- data/_sass/hydeout.scss +17 -0
- data/_sass/hydeout/_base.scss +102 -0
- data/_sass/hydeout/_code.scss +82 -0
- data/_sass/hydeout/_layout.scss +264 -0
- data/_sass/hydeout/_masthead.scss +25 -0
- data/_sass/hydeout/_message.scss +11 -0
- data/_sass/hydeout/_pagination.scss +41 -0
- data/_sass/hydeout/_posts.scss +88 -0
- data/_sass/hydeout/_search.scss +16 -0
- data/_sass/hydeout/_syntax.scss +65 -0
- data/_sass/hydeout/_tags.scss +23 -0
- data/_sass/hydeout/_type.scss +125 -0
- data/_sass/hydeout/_variables.scss +44 -0
- data/assets/css/main.scss +6 -0
- metadata +160 -0
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
3
|
+
<path d="M0 0h24v24H0z" fill="none"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 0h24v24H0z" fill="none"/>
|
|
3
|
+
<path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!-- See https://blog.lanyonm.org/articles/2013/11/21/alphabetize-jekyll-page-tags-pure-liquid.html -->
|
|
2
|
+
<!-- With added pipe to handle lack of sort_natural -->
|
|
3
|
+
{% capture site_tags %}{% for tag in site.tags %}{{ tag | first | downcase }}|{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
|
|
4
|
+
<!-- site_tags: {{ site_tags }} -->
|
|
5
|
+
{% assign tag_words = site_tags | split:',' | sort %}
|
|
6
|
+
<!-- tag_words: {{ tag_words }} -->
|
|
7
|
+
|
|
8
|
+
<div id="tags-page">
|
|
9
|
+
<div class="tags-list">
|
|
10
|
+
{% for tag_pair in tag_words %}
|
|
11
|
+
{% assign tag = tag_pair | split:'|' | last %}
|
|
12
|
+
<a href="#{{ tag | slugify }}" class="tag-link">
|
|
13
|
+
<span class="tag-name">{{ tag }}</span>
|
|
14
|
+
<span class="tag-count">{{ site.tags[tag] | size }}</span>
|
|
15
|
+
</a>
|
|
16
|
+
{% endfor %}
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<hr/>
|
|
20
|
+
|
|
21
|
+
<div class="posts-by-tag">
|
|
22
|
+
{% for tag_pair in tag_words %}
|
|
23
|
+
{% assign tag = tag_pair | split:'|' | last %}
|
|
24
|
+
<h2 id="{{ tag | slugify }}">{{ tag }}</h2>
|
|
25
|
+
<ul class="posts-list">
|
|
26
|
+
{% for post in site.tags[tag] %}
|
|
27
|
+
<li>
|
|
28
|
+
<h3>
|
|
29
|
+
<a href="{{ site.baseurl }}{{ post.url }}">
|
|
30
|
+
{{ post.title }}
|
|
31
|
+
<small>{{ post.date | date_to_string }}</small>
|
|
32
|
+
</a>
|
|
33
|
+
</h3>
|
|
34
|
+
</li>
|
|
35
|
+
{% endfor %}
|
|
36
|
+
</ul>
|
|
37
|
+
{% endfor %}
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% unless page.content == '' %}
|
|
6
|
+
{{ content }}
|
|
7
|
+
{% endunless %}
|
|
8
|
+
|
|
9
|
+
<ul class="posts-list">
|
|
10
|
+
{% assign category = page.category | default: page.title %}
|
|
11
|
+
{% for post in site.categories[category] %}
|
|
12
|
+
<li>
|
|
13
|
+
<h3>
|
|
14
|
+
<a href="{{ site.baseurl }}{{ post.url }}">
|
|
15
|
+
{{ post.title }}
|
|
16
|
+
<small>{{ post.date | date_to_string }}</small>
|
|
17
|
+
</a>
|
|
18
|
+
</h3>
|
|
19
|
+
</li>
|
|
20
|
+
{% endfor %}
|
|
21
|
+
</ul>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-us">
|
|
3
|
+
|
|
4
|
+
{% include head.html %}
|
|
5
|
+
|
|
6
|
+
<body class="{{ page.layout }}">
|
|
7
|
+
|
|
8
|
+
{% include sidebar.html %}
|
|
9
|
+
|
|
10
|
+
<main class="container">
|
|
11
|
+
{{ content }}
|
|
12
|
+
</main>
|
|
13
|
+
|
|
14
|
+
{% include custom-foot.html %}
|
|
15
|
+
</body>
|
|
16
|
+
</html>
|
data/_layouts/home.html
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="content">
|
|
6
|
+
{% for post in paginator.posts %}
|
|
7
|
+
<article class="post-body">
|
|
8
|
+
<h2 class="post-title">
|
|
9
|
+
<a href="{{ site.baseurl }}{{ post.url }}">
|
|
10
|
+
{{ post.title }}
|
|
11
|
+
</a>
|
|
12
|
+
</h2>
|
|
13
|
+
{% include post-meta.html post=post %}
|
|
14
|
+
|
|
15
|
+
{% if post.excerpt %}
|
|
16
|
+
{{ post.excerpt }}
|
|
17
|
+
{% else %}
|
|
18
|
+
{{ post.content }}
|
|
19
|
+
{% endif %}
|
|
20
|
+
|
|
21
|
+
{% if post.excerpt %}
|
|
22
|
+
{% comment %}Excerpt may be equal to content. Check.{% endcomment %}
|
|
23
|
+
{% capture content_words %}
|
|
24
|
+
{{ post.content | number_of_words }}
|
|
25
|
+
{% endcapture %}
|
|
26
|
+
{% capture excerpt_words %}
|
|
27
|
+
{{ post.excerpt | number_of_words }}
|
|
28
|
+
{% endcapture %}
|
|
29
|
+
|
|
30
|
+
{% if content_words != excerpt_words %}
|
|
31
|
+
<a href="{{ site.baseurl }}{{ post.url }}">More …</a>
|
|
32
|
+
{% endif %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
</article>
|
|
35
|
+
{% endfor %}
|
|
36
|
+
|
|
37
|
+
{% include pagination.html %}
|
|
38
|
+
</div>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<header>
|
|
6
|
+
<h1 class="post-title">{{ page.title }}</h1>
|
|
7
|
+
</header>
|
|
8
|
+
<div class="content">
|
|
9
|
+
{% include post-meta.html post=page %}
|
|
10
|
+
|
|
11
|
+
<div class="post-body">
|
|
12
|
+
{{ content }}
|
|
13
|
+
{% include post-tags.html post=page %}
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
{% include comments.html %}
|
|
17
|
+
{% include related_posts.html %}
|
|
18
|
+
</div>
|
data/_sass/hydeout.scss
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Most of these imports are derived from https://github.com/poole/poole.
|
|
3
|
+
Designed, built, and released under MIT license by @mdo.
|
|
4
|
+
*/
|
|
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";
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// Body resets
|
|
2
|
+
//
|
|
3
|
+
// Update the foundational and global aspects of the page.
|
|
4
|
+
|
|
5
|
+
* {
|
|
6
|
+
-webkit-box-sizing: border-box;
|
|
7
|
+
-moz-box-sizing: border-box;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
html,
|
|
12
|
+
body {
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
html {
|
|
18
|
+
font-family: $root-font-family;
|
|
19
|
+
font-size: $root-font-size;
|
|
20
|
+
line-height: $root-line-height;
|
|
21
|
+
|
|
22
|
+
@media (min-width: $large-breakpoint) {
|
|
23
|
+
font-size: $large-font-size;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
body {
|
|
28
|
+
-webkit-text-size-adjust: 100%;
|
|
29
|
+
-ms-text-size-adjust: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
main, article, section { display: block; }
|
|
33
|
+
|
|
34
|
+
// No `:visited` state is required by default (browsers will use `a`)
|
|
35
|
+
a {
|
|
36
|
+
color: $link-color;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
|
|
39
|
+
// `:focus` is linked to `:hover` for basic accessibility
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus {
|
|
42
|
+
text-decoration: underline;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
strong {
|
|
46
|
+
color: inherit;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
img {
|
|
51
|
+
display: block;
|
|
52
|
+
max-width: 100%;
|
|
53
|
+
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
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
table {
|
|
60
|
+
margin-bottom: 1rem;
|
|
61
|
+
width: 100%;
|
|
62
|
+
font-size: 85%;
|
|
63
|
+
border: 1px solid $border-color;
|
|
64
|
+
border-collapse: collapse;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
td,
|
|
68
|
+
th {
|
|
69
|
+
padding: .25rem .5rem;
|
|
70
|
+
border: 1px solid $border-color;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
th {
|
|
74
|
+
text-align: left;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
tbody tr:nth-child(odd) td,
|
|
78
|
+
tbody tr:nth-child(odd) th {
|
|
79
|
+
background-color: $gray-1;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
input[type="text"], input[type="search"], input[type="submit"], button {
|
|
83
|
+
padding: $padding-v $padding-h;
|
|
84
|
+
border: 1px solid $border-color;
|
|
85
|
+
border-radius: $border-radius;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
button, input[type="submit"] {
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
background: transparent;
|
|
91
|
+
border-color: $border-color;
|
|
92
|
+
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;
|
|
96
|
+
|
|
97
|
+
&:hover {
|
|
98
|
+
background: $link-color;
|
|
99
|
+
border-color: $link-color;
|
|
100
|
+
color: white;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// Code
|
|
2
|
+
//
|
|
3
|
+
// Inline and block-level code snippets. Includes tweaks to syntax highlighted
|
|
4
|
+
// snippets from Pygments/Rouge and Gist embeds.
|
|
5
|
+
|
|
6
|
+
code,
|
|
7
|
+
pre {
|
|
8
|
+
font-family: $code-font-family;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
code {
|
|
12
|
+
padding: .25em .5em;
|
|
13
|
+
font-size: 85%;
|
|
14
|
+
color: $code-color;
|
|
15
|
+
background-color: #f9f9f9;
|
|
16
|
+
border-radius: 3px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
pre {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
margin-bottom: 1rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
pre code {
|
|
25
|
+
padding: 0;
|
|
26
|
+
font-size: 100%;
|
|
27
|
+
color: inherit;
|
|
28
|
+
background-color: transparent;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Pygments/Rouge via Jekyll
|
|
32
|
+
.highlight {
|
|
33
|
+
padding: 1rem;
|
|
34
|
+
margin-bottom: 1rem;
|
|
35
|
+
font-size: .8rem;
|
|
36
|
+
line-height: 1.4;
|
|
37
|
+
background-color: #f9f9f9;
|
|
38
|
+
border-radius: .25rem;
|
|
39
|
+
|
|
40
|
+
pre {
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
overflow-x: auto;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.lineno {
|
|
46
|
+
display: inline-block; // Ensures the null space also isn't selectable
|
|
47
|
+
padding-right: .75rem;
|
|
48
|
+
padding-left: .25rem;
|
|
49
|
+
color: #999;
|
|
50
|
+
// Make sure numbers aren't selectable
|
|
51
|
+
-webkit-user-select: none;
|
|
52
|
+
-moz-user-select: none;
|
|
53
|
+
user-select: none;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
pre {
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
overflow-x: auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Gist via GitHub Pages
|
|
63
|
+
// .gist .gist-file {
|
|
64
|
+
// font-family: Menlo, Monaco, "Courier New", monospace !important;
|
|
65
|
+
// }
|
|
66
|
+
// .gist .markdown-body {
|
|
67
|
+
// padding: 15px;
|
|
68
|
+
// }
|
|
69
|
+
// .gist pre {
|
|
70
|
+
// padding: 0;
|
|
71
|
+
// background-color: transparent;
|
|
72
|
+
// }
|
|
73
|
+
// .gist .gist-file .gist-data {
|
|
74
|
+
// font-size: .8rem !important;
|
|
75
|
+
// line-height: 1.4;
|
|
76
|
+
// }
|
|
77
|
+
// .gist code {
|
|
78
|
+
// padding: 0;
|
|
79
|
+
// color: inherit;
|
|
80
|
+
// background-color: transparent;
|
|
81
|
+
// border-radius: 0;
|
|
82
|
+
// }
|
|
@@ -0,0 +1,264 @@
|
|
|
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
|
+
|
|
41
|
+
// Use header + last-child to control vertical spacing so we can make
|
|
42
|
+
// certain elements appear to be part of sidebar
|
|
43
|
+
padding: 0 $section-spacing;
|
|
44
|
+
header { margin-top: $section-spacing; }
|
|
45
|
+
header ~ *:last-child { margin-bottom: $section-spacing; }
|
|
46
|
+
|
|
47
|
+
.site-title {
|
|
48
|
+
font-family: "Abril Fatface", serif;
|
|
49
|
+
font-weight: normal;
|
|
50
|
+
font-size: $large-font-size;
|
|
51
|
+
color: rgba(255,255,255,.75);
|
|
52
|
+
margin-top: 0;
|
|
53
|
+
margin-bottom: 0;
|
|
54
|
+
|
|
55
|
+
a {
|
|
56
|
+
color: inherit;
|
|
57
|
+
&:hover { color: white; }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.back-arrow { margin-right: 0.5rem; }
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Container is flexbox as well -- we want content div to stretch and fill
|
|
65
|
+
.container {
|
|
66
|
+
flex: 1 1 auto;
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
|
|
70
|
+
> .content {
|
|
71
|
+
flex-grow: 1;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.content {
|
|
76
|
+
background: $body-bg;
|
|
77
|
+
color: $body-color;
|
|
78
|
+
padding: $section-spacing;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
/* -----------------------------------------------------------
|
|
83
|
+
Mobile view
|
|
84
|
+
----------------------------------------------------------- */
|
|
85
|
+
|
|
86
|
+
// Hide secondary nav content in sidebar
|
|
87
|
+
// Hide lead paragraph in sidebar
|
|
88
|
+
#sidebar {
|
|
89
|
+
header ~ *, p.lead {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Make header elements blend into sidebar / background
|
|
95
|
+
.container > header {
|
|
96
|
+
background: transparent;
|
|
97
|
+
color: white;
|
|
98
|
+
margin: 0 $section-spacing $section-spacing;
|
|
99
|
+
|
|
100
|
+
h1, h2 {
|
|
101
|
+
color: white;
|
|
102
|
+
|
|
103
|
+
&:last-child {
|
|
104
|
+
margin-bottom: 0;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
/* -----------------------------------------------------------
|
|
111
|
+
Mobile view for home page)
|
|
112
|
+
----------------------------------------------------------- */
|
|
113
|
+
|
|
114
|
+
.home #sidebar {
|
|
115
|
+
|
|
116
|
+
// Center sidebar content
|
|
117
|
+
text-align: center;
|
|
118
|
+
|
|
119
|
+
// Bigger title
|
|
120
|
+
.site-title {
|
|
121
|
+
font-size: 3.25rem;
|
|
122
|
+
margin-bottom: $heading-spacing;
|
|
123
|
+
color: white;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Show secondary nav content + lead
|
|
127
|
+
header ~ *, p.lead {
|
|
128
|
+
display: block;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
/* -----------------------------------------------------------
|
|
134
|
+
Tablet / Desktop view
|
|
135
|
+
----------------------------------------------------------- */
|
|
136
|
+
|
|
137
|
+
@media (min-width: $large-breakpoint) {
|
|
138
|
+
body {
|
|
139
|
+
flex-direction: row;
|
|
140
|
+
height: 100vh;
|
|
141
|
+
overflow: auto;
|
|
142
|
+
> * { max-height: 100vh; overflow: auto; }
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
#sidebar, .home #sidebar {
|
|
146
|
+
width: $sidebar-width;
|
|
147
|
+
text-align: left;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Undo mobile CSS
|
|
151
|
+
#sidebar {
|
|
152
|
+
.site-title {
|
|
153
|
+
font-size: 3.25rem;
|
|
154
|
+
margin-bottom: $heading-spacing;
|
|
155
|
+
|
|
156
|
+
a { color: white; }
|
|
157
|
+
.back-arrow { display: none; }
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
p.lead, header ~ * {
|
|
161
|
+
display: block;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Make entire container background white to contrast against sidebar
|
|
166
|
+
.container {
|
|
167
|
+
background: $body-bg;
|
|
168
|
+
color: $body-color;
|
|
169
|
+
padding: $section-spacing * 2;
|
|
170
|
+
height: 100vh;
|
|
171
|
+
|
|
172
|
+
> header {
|
|
173
|
+
color: inherit;
|
|
174
|
+
margin: 0;
|
|
175
|
+
h1, h2 {
|
|
176
|
+
color: inherit;
|
|
177
|
+
|
|
178
|
+
&:last-child {
|
|
179
|
+
margin-bottom: $heading-spacing;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.content {
|
|
185
|
+
max-width: 38rem;
|
|
186
|
+
padding: 0;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
/* -----------------------------------------------------------
|
|
193
|
+
Sidebar links + nav
|
|
194
|
+
----------------------------------------------------------- */
|
|
195
|
+
|
|
196
|
+
#sidebar a {
|
|
197
|
+
color: #fff;
|
|
198
|
+
|
|
199
|
+
svg {
|
|
200
|
+
fill: rgba(255, 255, 255, 0.85);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&:hover, &:focus, &.active {
|
|
204
|
+
svg { fill: #fff; }
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&:hover, &:focus {
|
|
208
|
+
text-decoration: underline;
|
|
209
|
+
&.icon {
|
|
210
|
+
text-decoration: none;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&.active {
|
|
215
|
+
font-weight: bold;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
#sidebar-nav {
|
|
220
|
+
margin-bottom: 1rem;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
#sidebar nav > * {
|
|
224
|
+
display: block;
|
|
225
|
+
line-height: 1.75;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
#sidebar nav > .icon {
|
|
229
|
+
font-size: 1.5rem;
|
|
230
|
+
display: inline-block;
|
|
231
|
+
+ a { margin-left: 0.5em; }
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
/* -----------------------------------------------------------
|
|
236
|
+
Sticky sidebar
|
|
237
|
+
|
|
238
|
+
Set $sidebar-stick variable to affix sidebar contents to the
|
|
239
|
+
bottom of the sidebar in tablets and up.
|
|
240
|
+
----------------------------------------------------------- */
|
|
241
|
+
|
|
242
|
+
@if $sidebar-sticky {
|
|
243
|
+
@media (min-width: $large-breakpoint) {
|
|
244
|
+
body {
|
|
245
|
+
align-items: flex-end;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
/* -----------------------------------------------------------
|
|
252
|
+
Reverse layout
|
|
253
|
+
|
|
254
|
+
Flip the orientation of the page by placing the `#sidebar`
|
|
255
|
+
on the right.
|
|
256
|
+
----------------------------------------------------------- */
|
|
257
|
+
|
|
258
|
+
@if $layout-reverse {
|
|
259
|
+
@media (min-width: $large-breakpoint) {
|
|
260
|
+
.container {
|
|
261
|
+
order: -1;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
}
|