jekyll-theme-hydeout 3.7.1 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +168 -167
- data/_includes/back-link.html +6 -0
- data/_includes/category-links.html +1 -1
- data/_includes/copyright.html +1 -1
- data/_includes/favicons.html +2 -2
- data/_includes/head.html +3 -3
- data/_includes/page-links.html +1 -1
- data/_includes/pagination-newer.html +1 -1
- data/_includes/pagination-older.html +1 -1
- data/_includes/post-meta.html +1 -1
- data/_includes/post-tags.html +1 -1
- data/_includes/related_posts.html +1 -1
- data/_includes/search-form.html +1 -1
- data/_includes/sidebar-icon-links.html +6 -6
- data/_includes/sidebar-nav-links.html +2 -2
- data/_includes/sidebar.html +1 -1
- data/_includes/tags-list.html +1 -1
- data/_layouts/category.html +1 -1
- data/_layouts/default.html +1 -1
- data/_layouts/index.html +2 -2
- data/_layouts/page.html +2 -1
- data/_sass/hydeout.scss +13 -12
- data/_sass/hydeout/_back-link.scss +10 -0
- data/_sass/hydeout/_base.scss +48 -22
- data/_sass/hydeout/_code.scss +18 -24
- data/_sass/hydeout/_layout.scss +329 -306
- data/_sass/hydeout/_masthead.scss +5 -5
- data/_sass/hydeout/_message.scss +2 -2
- data/_sass/hydeout/_pagination.scss +11 -11
- data/_sass/hydeout/_posts.scss +53 -52
- data/_sass/hydeout/_search.scss +4 -3
- data/_sass/hydeout/_syntax.scss +56 -41
- data/_sass/hydeout/_tags.scss +19 -22
- data/_sass/hydeout/_type.scss +44 -28
- data/_sass/hydeout/_variables.scss +9 -7
- metadata +36 -8
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 }}{{
|
|
13
|
+
value="{{ url }}{{ "/" | relative_url }}" />
|
|
14
14
|
|
|
15
15
|
<input type="submit" value="Search" />
|
|
16
16
|
</div>
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<nav id="sidebar-icon-links">
|
|
2
|
-
{% if site.
|
|
2
|
+
{% if site.hydeout.repo %}
|
|
3
3
|
<a id="github-link"
|
|
4
4
|
class="icon" title="Github Project" aria-label="Github Project"
|
|
5
|
-
href="{{ site.
|
|
5
|
+
href="{{ site.hydeout.repo }}">
|
|
6
6
|
{% include svg/github.svg %}
|
|
7
7
|
</a>
|
|
8
8
|
<a id="github-download-link"
|
|
9
9
|
class="icon" title="Download" aria-label="Download"
|
|
10
|
-
href="{{ site.
|
|
10
|
+
href="{{ site.hydeout.repo }}/archive/v{{ site.hydeout.version }}.zip">
|
|
11
11
|
{% include svg/download.svg %}
|
|
12
12
|
</a>
|
|
13
13
|
{% endif %}
|
|
14
14
|
|
|
15
15
|
<a id="subscribe-link"
|
|
16
16
|
class="icon" title="Subscribe" aria-label="Subscribe"
|
|
17
|
-
href="{{ site.
|
|
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="{{
|
|
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="{{
|
|
47
|
+
href="{{ search_page.url | relative_url }}">
|
|
48
48
|
{% include svg/search.svg %}
|
|
49
49
|
</a>
|
|
50
50
|
{% endif %}
|
|
@@ -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="{{
|
|
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.
|
|
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="{{
|
|
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
data/_layouts/category.html
CHANGED
data/_layouts/default.html
CHANGED
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="{{
|
|
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="{{
|
|
35
|
+
<a href="{{ post.url | relative_url }}">More …</a>
|
|
36
36
|
{% endif %}
|
|
37
37
|
{% endif %}
|
|
38
38
|
</article>
|
data/_layouts/page.html
CHANGED
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
|
|
7
|
-
@import
|
|
8
|
-
@import
|
|
9
|
-
@import
|
|
10
|
-
@import
|
|
11
|
-
@import
|
|
12
|
-
@import
|
|
13
|
-
@import
|
|
14
|
-
@import
|
|
15
|
-
@import
|
|
16
|
-
@import
|
|
17
|
-
@import
|
|
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/_base.scss
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
// Update the foundational and global aspects of the page.
|
|
4
4
|
|
|
5
5
|
* {
|
|
6
|
-
|
|
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
|
-
|
|
29
|
-
-ms-text-size-adjust: 100%;
|
|
26
|
+
text-size-adjust: 100%;
|
|
30
27
|
}
|
|
31
28
|
|
|
32
|
-
main,
|
|
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
|
|
54
|
+
height: auto; // prevent max-width from squishing images with defined height
|
|
53
55
|
margin: 0 0 1rem;
|
|
54
|
-
|
|
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
|
-
|
|
83
|
-
|
|
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,
|
|
89
|
-
|
|
92
|
+
button,
|
|
93
|
+
input[type='submit'] {
|
|
90
94
|
background: transparent;
|
|
91
95
|
border-color: $border-color;
|
|
92
96
|
color: $link-color;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
//
|
|
51
|
-
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
-
|
|
27
|
-
background-color: $sidebar-bg-color;
|
|
28
|
-
background-image: linear-gradient(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
//
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
.
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
#sidebar
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
#sidebar
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
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
|
+
}
|