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