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.
Files changed (56) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +11 -0
  3. data/README.md +189 -0
  4. data/_includes/back-link.html +6 -0
  5. data/_includes/category-links.html +12 -0
  6. data/_includes/comments.html +6 -0
  7. data/_includes/copyright.html +4 -0
  8. data/_includes/custom-foot.html +1 -0
  9. data/_includes/custom-head.html +1 -0
  10. data/_includes/custom-icon-links.html +1 -0
  11. data/_includes/custom-nav-links.html +1 -0
  12. data/_includes/disqus.html +43 -0
  13. data/_includes/favicons.html +2 -0
  14. data/_includes/font-includes.html +6 -0
  15. data/_includes/google-analytics.html +11 -0
  16. data/_includes/head.html +30 -0
  17. data/_includes/page-links.html +13 -0
  18. data/_includes/pagination-newer.html +8 -0
  19. data/_includes/pagination-older.html +8 -0
  20. data/_includes/post-meta.html +29 -0
  21. data/_includes/post-tags.html +21 -0
  22. data/_includes/related_posts.html +15 -0
  23. data/_includes/search-form.html +17 -0
  24. data/_includes/sidebar-icon-links.html +53 -0
  25. data/_includes/sidebar-nav-links.html +20 -0
  26. data/_includes/sidebar.html +21 -0
  27. data/_includes/svg/back-arrow.svg +4 -0
  28. data/_includes/svg/download.svg +4 -0
  29. data/_includes/svg/feed.svg +5 -0
  30. data/_includes/svg/github.svg +2 -0
  31. data/_includes/svg/search.svg +4 -0
  32. data/_includes/svg/tags.svg +4 -0
  33. data/_includes/tags-list.html +41 -0
  34. data/_layouts/category.html +21 -0
  35. data/_layouts/default.html +16 -0
  36. data/_layouts/index.html +42 -0
  37. data/_layouts/page.html +11 -0
  38. data/_layouts/post.html +18 -0
  39. data/_layouts/search.html +10 -0
  40. data/_layouts/tags.html +5 -0
  41. data/_sass/hydeout/_back-link.scss +10 -0
  42. data/_sass/hydeout/_base.scss +131 -0
  43. data/_sass/hydeout/_code.scss +78 -0
  44. data/_sass/hydeout/_layout.scss +332 -0
  45. data/_sass/hydeout/_masthead.scss +27 -0
  46. data/_sass/hydeout/_message.scss +11 -0
  47. data/_sass/hydeout/_pagination.scss +74 -0
  48. data/_sass/hydeout/_posts.scss +95 -0
  49. data/_sass/hydeout/_search.scss +19 -0
  50. data/_sass/hydeout/_syntax.scss +80 -0
  51. data/_sass/hydeout/_tags.scss +37 -0
  52. data/_sass/hydeout/_type.scss +142 -0
  53. data/_sass/hydeout/_variables.scss +53 -0
  54. data/_sass/hydeout.scss +18 -0
  55. data/assets/css/main.scss +6 -0
  56. metadata +180 -0
@@ -0,0 +1,11 @@
1
+ // Messages
2
+ //
3
+ // Show alert messages to users. You may add it to single elements like a `<p>`,
4
+ // or to a parent if there are multiple elements to show.
5
+
6
+ .message {
7
+ background-color: #f9f9f9;
8
+ color: #717171;
9
+ margin-bottom: 1rem;
10
+ padding: 1rem;
11
+ }
@@ -0,0 +1,74 @@
1
+ @use "variables";
2
+
3
+ /*
4
+ Pagination
5
+
6
+ Super lightweight (HTML-wise) blog pagination. Should only be visible
7
+ when there is navigation available -- single buttons at top or bottom
8
+ of each page.
9
+ */
10
+
11
+ .pagination {
12
+ color: variables.$gray-3;
13
+ margin-bottom: variables.$section-spacing;
14
+ text-align: center;
15
+
16
+ > a {
17
+ background: variables.$body-bg;
18
+ border: solid variables.$border-color;
19
+ border-radius: variables.$border-radius;
20
+ border-width: 1px;
21
+ box-shadow: variables.$default-box-shadow;
22
+ display: inline-block;
23
+ max-width: variables.$sidebar-width;
24
+ padding: variables.$padding-v variables.$padding-h;
25
+ width: 60%;
26
+ }
27
+
28
+ > a:hover {
29
+ background-color: variables.$border-color;
30
+ }
31
+ }
32
+
33
+ // Bottom -> margin-top;
34
+ * + .pagination {
35
+ margin-top: variables.$section-spacing;
36
+ }
37
+
38
+ // Push above header if newer on mobile
39
+ .content .pagination:first-child {
40
+ margin-top: -(variables.$section-spacing) * 2;
41
+ }
42
+
43
+ // Make room for larger header by extending margin below title
44
+ .index #sidebar {
45
+ padding-bottom: calc(#{variables.$section-spacing} + #{variables.$padding-v});
46
+ }
47
+
48
+ // But not on page1
49
+ .home.index #sidebar {
50
+ padding-bottom: variables.$section-spacing;
51
+ }
52
+
53
+ // Undo for larger screens
54
+ @media (min-width: variables.$large-breakpoint) {
55
+ .pagination > a {
56
+ box-shadow: none;
57
+
58
+ &:hover { box-shadow: variables.$default-box-shadow; }
59
+ }
60
+
61
+ .content .pagination:first-child {
62
+ margin-top: 0;
63
+
64
+ + * {
65
+ border-top: 1px solid variables.$border-color;
66
+ margin-top: variables.$section-spacing;
67
+ padding-top: variables.$section-spacing;
68
+ }
69
+ }
70
+
71
+ .index #sidebar {
72
+ padding-bottom: variables.$section-spacing;
73
+ }
74
+ }
@@ -0,0 +1,95 @@
1
+ @use "variables";
2
+
3
+ // Posts and pages
4
+ //
5
+ // Each post is wrapped in `.post` and is used on default and post layouts. Each
6
+ // page is wrapped in `.page` and is only used on the page layout.
7
+
8
+ .posts-by-tag h2 {
9
+ text-transform: capitalize;
10
+ }
11
+
12
+ // Blog post or page title
13
+ .page-title,
14
+ .post-title {
15
+ margin-top: 0;
16
+ }
17
+
18
+ .page-title,
19
+ .post-title,
20
+ .post-title a {
21
+ color: variables.$heading-color;
22
+ }
23
+
24
+ h2.post-title,
25
+ h2.page-title {
26
+ font-size: 2rem;
27
+ }
28
+
29
+ .post-tags a {
30
+ font-size: 0.8em;
31
+ margin-right: 0.5rem;
32
+ opacity: 0.75;
33
+ white-space: nowrap;
34
+
35
+ .tag-name { text-transform: capitalize; }
36
+
37
+ &:hover {
38
+ opacity: 1;
39
+ text-decoration: none;
40
+ }
41
+ }
42
+
43
+ .posts-list {
44
+ list-style: none;
45
+ padding-left: 0;
46
+
47
+ h3 {
48
+ margin-top: 0;
49
+ }
50
+
51
+ li small {
52
+ color: #999;
53
+ font-size: 75%;
54
+ white-space: nowrap;
55
+ }
56
+
57
+ li a:hover {
58
+ color: variables.$link-color;
59
+ text-decoration: none;
60
+ }
61
+
62
+ li a:hover small {
63
+ color: inherit;
64
+ }
65
+ }
66
+
67
+ article + *,
68
+ .post-body ~ section {
69
+ border-top: 1px solid variables.$border-color;
70
+ margin-top: variables.$section-spacing;
71
+ padding-top: variables.$section-spacing;
72
+
73
+ > h2:first-child,
74
+ > h3:first-child {
75
+ margin-top: 0;
76
+ }
77
+ }
78
+
79
+ // Meta data line below post title
80
+ .post-meta {
81
+ color: variables.$body-muted;
82
+ margin-bottom: 1rem;
83
+ margin-top: -0.5rem;
84
+ }
85
+
86
+ .post,
87
+ .page {
88
+ .content li + li {
89
+ margin-top: 0.25rem;
90
+ }
91
+ }
92
+
93
+ button.disqus-load {
94
+ margin-top: 1em;
95
+ }
@@ -0,0 +1,19 @@
1
+ @use "variables";
2
+
3
+ .search-row {
4
+ border: 1px solid variables.$border-color;
5
+ border-radius: variables.$border-radius;
6
+ display: flex;
7
+ padding: 2px;
8
+
9
+ input {
10
+ border: 0;
11
+ }
12
+
13
+ input + input { margin-left: 2px; }
14
+
15
+ input[type='text'],
16
+ input[type='search'] {
17
+ flex-grow: 1;
18
+ }
19
+ }
@@ -0,0 +1,80 @@
1
+ .highlight .hll { background-color: #ffc; }
2
+ .highlight .c { color: #999; } /* Comment */
3
+ .highlight .err { /* Error */
4
+ background-color: #faa;
5
+ color: #a00;
6
+ }
7
+ .highlight .k { color: #069; } /* Keyword */
8
+ .highlight .o { color: #555; } /* Operator */
9
+ .highlight .cm { /* Comment.Multiline */
10
+ color: #09f;
11
+ font-style: italic;
12
+ }
13
+ .highlight .cp { color: #099; } /* Comment.Preproc */
14
+ .highlight .c1 { color: #999; } /* Comment.Single */
15
+ .highlight .cs { color: #999; } /* Comment.Special */
16
+ .highlight .gd { /* Generic.Deleted */
17
+ background-color: #fcc;
18
+ border: 1px solid #c00;
19
+ }
20
+ .highlight .ge { font-style: italic; } /* Generic.Emph */
21
+ .highlight .gr { color: #f00; } /* Generic.Error */
22
+ .highlight .gh { color: #030; } /* Generic.Heading */
23
+ .highlight .gi { /* Generic.Inserted */
24
+ background-color: #cfc;
25
+ border: 1px solid #0c0;
26
+ }
27
+ .highlight .go { color: #aaa; } /* Generic.Output */
28
+ .highlight .gp { color: #009; } /* Generic.Prompt */
29
+ // .highlight .gs { } /* Generic.Strong */
30
+ .highlight .gu { color: #030; } /* Generic.Subheading */
31
+ .highlight .gt { color: #9c6; } /* Generic.Traceback */
32
+ .highlight .kc { color: #069; } /* Keyword.Constant */
33
+ .highlight .kd { color: #069; } /* Keyword.Declaration */
34
+ .highlight .kn { color: #069; } /* Keyword.Namespace */
35
+ .highlight .kp { color: #069; } /* Keyword.Pseudo */
36
+ .highlight .kr { color: #069; } /* Keyword.Reserved */
37
+ .highlight .kt { color: #078; } /* Keyword.Type */
38
+ .highlight .m { color: #f60; } /* Literal.Number */
39
+ .highlight .s { color: #d44950; } /* Literal.String */
40
+ .highlight .na { color: #4f9fcf; } /* Name.Attribute */
41
+ .highlight .nb { color: #366; } /* Name.Builtin */
42
+ .highlight .nc { color: #0a8; } /* Name.Class */
43
+ .highlight .no { color: #360; } /* Name.Constant */
44
+ .highlight .nd { color: #99f; } /* Name.Decorator */
45
+ .highlight .ni { color: #999; } /* Name.Entity */
46
+ .highlight .ne { color: #c00; } /* Name.Exception */
47
+ .highlight .nf { color: #c0f; } /* Name.Function */
48
+ .highlight .nl { color: #99f; } /* Name.Label */
49
+ .highlight .nn { color: #0cf; } /* Name.Namespace */
50
+ .highlight .nt { color: #2f6f9f; } /* Name.Tag */
51
+ .highlight .nv { color: #033; } /* Name.Variable */
52
+ .highlight .ow { color: #000; } /* Operator.Word */
53
+ .highlight .w { color: #bbb; } /* Text.Whitespace */
54
+ .highlight .mf { color: #f60; } /* Literal.Number.Float */
55
+ .highlight .mh { color: #f60; } /* Literal.Number.Hex */
56
+ .highlight .mi { color: #f60; } /* Literal.Number.Integer */
57
+ .highlight .mo { color: #f60; } /* Literal.Number.Oct */
58
+ .highlight .sb { color: #c30; } /* Literal.String.Backtick */
59
+ .highlight .sc { color: #c30; } /* Literal.String.Char */
60
+ .highlight .sd { /* Literal.String.Doc */
61
+ color: #c30;
62
+ font-style: italic;
63
+ }
64
+ .highlight .s2 { color: #c30; } /* Literal.String.Double */
65
+ .highlight .se { color: #c30; } /* Literal.String.Escape */
66
+ .highlight .sh { color: #c30; } /* Literal.String.Heredoc */
67
+ .highlight .si { color: #a00; } /* Literal.String.Interpol */
68
+ .highlight .sx { color: #c30; } /* Literal.String.Other */
69
+ .highlight .sr { color: #3aa; } /* Literal.String.Regex */
70
+ .highlight .s1 { color: #c30; } /* Literal.String.Single */
71
+ .highlight .ss { color: #fc3; } /* Literal.String.Symbol */
72
+ .highlight .bp { color: #366; } /* Name.Builtin.Pseudo */
73
+ .highlight .vc { color: #033; } /* Name.Variable.Class */
74
+ .highlight .vg { color: #033; } /* Name.Variable.Global */
75
+ .highlight .vi { color: #033; } /* Name.Variable.Instance */
76
+ .highlight .il { color: #f60; } /* Literal.Number.Integer.Long */
77
+
78
+ .css .o,
79
+ .css .o + .nt,
80
+ .css .nt + .nt { color: #999; }
@@ -0,0 +1,37 @@
1
+ @use "variables";
2
+
3
+ .tags-list a {
4
+ margin-right: 0.5em;
5
+ opacity: 0.75;
6
+ white-space: nowrap;
7
+ }
8
+
9
+ .tags-list a .tag-count {
10
+ background: variables.$link-color;
11
+ border-radius: 1000px;
12
+ color: rgba(255, 255, 255, 0.8);
13
+ font-size: 0.75em;
14
+ margin-left: 0.25em;
15
+ padding-left: 0.6em;
16
+ padding-right: 0.6em;
17
+ }
18
+
19
+ .tags-list a:hover {
20
+ opacity: 1;
21
+ text-decoration: none;
22
+ }
23
+
24
+ @keyframes posts-for-tag-fade-in {
25
+ from { opacity: 0; }
26
+ to { opacity: 1; }
27
+ }
28
+
29
+ // Display only if targeted
30
+ .posts-for-tag {
31
+ display: none;
32
+
33
+ &:target {
34
+ animation: posts-for-tag-fade-in 0.6s ease-in-out;
35
+ display: block;
36
+ }
37
+ }
@@ -0,0 +1,142 @@
1
+ @use "variables";
2
+
3
+ // Typography
4
+ //
5
+ // Headings, body text, lists, and other misc typographic elements.
6
+
7
+ h1,
8
+ h2,
9
+ h3,
10
+ h4,
11
+ h5,
12
+ h6,
13
+ .site-title {
14
+ color: variables.$heading-color;
15
+ font-weight: 600;
16
+ line-height: 1.25;
17
+ margin-bottom: variables.$heading-spacing;
18
+ text-rendering: optimizeLegibility;
19
+ }
20
+
21
+ h1 {
22
+ font-size: 2rem;
23
+ }
24
+
25
+ h2 {
26
+ font-size: 1.5rem;
27
+ margin-top: 1rem;
28
+ }
29
+
30
+ h3 {
31
+ font-size: 1.25rem;
32
+ margin-top: 1.5rem;
33
+ }
34
+
35
+ h4,
36
+ h5,
37
+ h6 {
38
+ font-size: 1rem;
39
+ margin-top: 1rem;
40
+ }
41
+
42
+ p {
43
+ margin-bottom: 1rem;
44
+ margin-top: 0;
45
+ }
46
+
47
+ strong {
48
+ color: #303030;
49
+ }
50
+
51
+ ul,
52
+ ol,
53
+ dl {
54
+ margin-bottom: 1rem;
55
+ margin-top: 0;
56
+ }
57
+
58
+ dt {
59
+ font-weight: bold;
60
+ }
61
+
62
+ dd {
63
+ margin-bottom: 0.5rem;
64
+ }
65
+
66
+ hr {
67
+ border: 0;
68
+ border-bottom: 1px solid #fff;
69
+ border-top: 1px solid #eee;
70
+ margin: 1.5rem 0;
71
+ position: relative;
72
+ }
73
+
74
+ abbr {
75
+ color: #555;
76
+ font-size: 85%;
77
+ font-weight: bold;
78
+ text-transform: uppercase;
79
+
80
+ &[title] {
81
+ border-bottom: 1px dotted variables.$border-color;
82
+ cursor: help;
83
+ }
84
+ }
85
+
86
+ blockquote {
87
+ border-left: 0.25rem solid variables.$border-color;
88
+ color: #7a7a7a;
89
+ margin: 0.8rem 0;
90
+ padding: 0.5rem 1rem;
91
+
92
+ p:last-child {
93
+ margin-bottom: 0;
94
+ }
95
+
96
+ @media (min-width: 30em) {
97
+ padding-left: 1.25rem;
98
+ padding-right: 5rem;
99
+ }
100
+ }
101
+
102
+ // Markdown footnotes
103
+ //
104
+ // See the example content post for an example.
105
+
106
+ // Footnote number within body text
107
+ a[href^='#fn:'],
108
+ // Back to footnote link
109
+ a[href^='#fnref:'] {
110
+ display: inline-block;
111
+ font-weight: bold;
112
+ margin-left: 0.1rem;
113
+ }
114
+
115
+ // List of footnotes
116
+ .footnotes {
117
+ font-size: 85%;
118
+ margin-top: 2rem;
119
+ }
120
+
121
+ // Custom type
122
+ //
123
+ // Extend paragraphs with `.lead` for larger introductory text.
124
+
125
+ .lead {
126
+ font-size: 1.25rem;
127
+ font-weight: 300;
128
+ }
129
+
130
+ // SVG Icons
131
+ a svg {
132
+ fill: variables.$link-color;
133
+ }
134
+
135
+ a svg,
136
+ .icon svg {
137
+ height: 1em;
138
+ }
139
+
140
+ .icon {
141
+ vertical-align: middle;
142
+ }
@@ -0,0 +1,53 @@
1
+ $gray-1: #f9f9f9 !default;
2
+ $gray-2: #e5e5e5 !default;
3
+ $gray-3: #ccc !default;
4
+ $gray-4: #767676 !default;
5
+ $gray-5: #515151 !default;
6
+ $gray-6: #313131 !default;
7
+
8
+ $red: #ac4142 !default;
9
+ $orange: #d28445 !default;
10
+ $yellow: #f4bf75 !default;
11
+ $green: #90a959 !default;
12
+ $cyan: #75b5aa !default;
13
+ $blue: #268bd2 !default;
14
+ $brown: #8f5536 !default;
15
+
16
+ $root-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif !default;
17
+ $root-font-size: 1rem !default;
18
+ $root-line-height: 1.5 !default;
19
+
20
+ $body-color: $gray-5 !default;
21
+ $body-muted: $gray-4 !default;
22
+ $body-bg: #fff !default;
23
+ $link-color: $blue !default;
24
+ $heading-color: $gray-6 !default;
25
+
26
+ $border-color: $gray-2 !default;
27
+ $border-radius: 300px !default;
28
+ $padding-v: 1em !default;
29
+ $padding-h: 1.5em !default;
30
+ $heading-spacing: 0.5rem !default;
31
+ $section-spacing: 2rem !default;
32
+ $sidebar-width: 18rem !default;
33
+
34
+ $large-breakpoint: 49rem !default;
35
+ $large-font-size: 1.25rem !default;
36
+
37
+ $box-shadow-size: 1px !default;
38
+ $box-shadow-opacity: 0.16 !default;
39
+ $default-box-shadow: $box-shadow-size $box-shadow-size $box-shadow-size rgba(0, 0, 0, $box-shadow-opacity);
40
+
41
+ $code-font-family: Menlo, Monaco, 'Courier New', monospace !default;
42
+ $code-color: #bf616a !default;
43
+
44
+ // Hyde theming
45
+ $sidebar-bg-color: #202020 !default;
46
+ $sidebar-fg-color: #fff !default;
47
+ $sidebar-sticky: true !default;
48
+ $layout-reverse: false !default;
49
+
50
+ $sidebar-title-color: $sidebar-fg-color !default;
51
+ $sidebar-link-color: $sidebar-fg-color !default;
52
+ $sidebar-text-color: rgba($sidebar-fg-color, 0.75) !default;
53
+ $sidebar-icon-color: rgba($sidebar-fg-color, 0.85) !default;
@@ -0,0 +1,18 @@
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
+ @use 'hydeout/variables';
7
+ @use 'hydeout/base';
8
+ @use 'hydeout/type';
9
+ @use 'hydeout/syntax';
10
+ @use 'hydeout/code';
11
+ @use 'hydeout/layout';
12
+ @use 'hydeout/masthead';
13
+ @use 'hydeout/posts';
14
+ @use 'hydeout/pagination';
15
+ @use 'hydeout/message';
16
+ @use 'hydeout/search';
17
+ @use 'hydeout/tags';
18
+ @use 'hydeout/back-link';
@@ -0,0 +1,6 @@
1
+ ---
2
+ # Use a comment to ensure Jekyll reads the file to be transformed into CSS later
3
+ # only main files contain this front matter, not partials.
4
+ ---
5
+
6
+ @import "hydeout";