jekyll-theme-collider 0.1.0 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/README.md +70 -16
- data/_includes/disqus_comments.html +16 -0
- data/_layouts/default.html +2 -2
- data/_layouts/home.html +3 -3
- data/_sass/jekyll-theme-collider/generic/_normalize.scss +4 -0
- data/_sass/jekyll-theme-collider/helpers/_syntax-highlighting.scss +81 -0
- data/_sass/jekyll-theme-collider/jekyll-theme-collider.scss +1 -0
- metadata +25 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 2550936b3fc6679fce2ecc7ad8c4e8087bed07b8d2c1566a4a635010b71348ba
|
4
|
+
data.tar.gz: ad2f77730bcb4bcbc9e8c3d641e53c93563eeba6b100bb266d4bef751da4b8fa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c18e523a9b7cdcfd120ca308ae528d2996ac3118fedf8173d5443c4ddaa25f7ec810c7cc0018f8893cbe16aa345858ae0a298317ef73ebb9c02188a3b753b8d0
|
7
|
+
data.tar.gz: 4fc724699298e500dcf63fd1d5d13b92d635e8acba35ab15b815b52863cb1723a4fa1d72fa8123de14d130875479ca73becd800fb9b68c7a24eebbaf7fbcd752
|
data/README.md
CHANGED
@@ -1,5 +1,21 @@
|
|
1
1
|
# jekyll-theme-collider
|
2
2
|
|
3
|
+
- [About](#about)
|
4
|
+
- [Installation](#installation)
|
5
|
+
- [Jekyll requirements](#jekyll-requirements)
|
6
|
+
- [Create a local copy of the site](#create-a-local-copy-of-the-site)
|
7
|
+
- [Install theme using gem](#install-theme-using-gem)
|
8
|
+
- [Troubleshooting](#troubleshooting)
|
9
|
+
- [Tags](#tags)
|
10
|
+
- [Colors](#colors)
|
11
|
+
- [Page header colors](#page-header-colors)
|
12
|
+
- [Homepage background color](#homepage-background-color)
|
13
|
+
- [About page customization](#about-page-customization)
|
14
|
+
- [Customizing particles js](#customizing-particles-js)
|
15
|
+
- [Future projects](#future-projects)
|
16
|
+
- [Contributing](#contributing)
|
17
|
+
- [License](#license)
|
18
|
+
|
3
19
|
## About
|
4
20
|
This theme has two main nifty features, the use of [particles.js](https://vincentgarreau.com/particles.js/) and the [jekyll-paginate-v2 plugin](https://github.com/sverrirs/jekyll-paginate-v2/tree/master/examples). For those who don't know, the jekyll-paginate-v2 plugin allows you to do cool things like paginate within a given collection, which the current jekyll-paginate gem does not allow.
|
5
21
|
|
@@ -7,16 +23,14 @@ I'm also using the powers of [ITCSS](https://github.com/ahmadajmi/awesome-itcss)
|
|
7
23
|
|
8
24
|
The font I'm using is a favorite of mine, [Operator Mono SSm](https://www.typography.com/fonts/operator/styles/operatormonoscreensmart). Also notice the fun use of colors on tags and each page, these are easily customizable by design and is detailed below.
|
9
25
|
|
10
|
-
Please [contact me](https://www.ryandevelops.com/contact) if you are interested in contributing to this theme or have any ideas for improvement!
|
11
|
-
|
12
26
|
## Installation
|
13
|
-
|
27
|
+
#### Jekyll requirements
|
14
28
|
* You must have Ruby installed:
|
15
29
|
* https://www.ruby-lang.org/en/downloads/
|
16
30
|
* Install Jekyll and Bundler:
|
17
31
|
* `gem install jekyll bundler`
|
18
32
|
|
19
|
-
|
33
|
+
#### Create a local copy of the site
|
20
34
|
* Download this site:
|
21
35
|
* `git clone https://github.com/ryancolorcafe/jekyll-theme-collider.git`
|
22
36
|
* Move into directory:
|
@@ -27,7 +41,7 @@ Please [contact me](https://www.ryandevelops.com/contact) if you are interested
|
|
27
41
|
* `bundle exec jekyll serve`
|
28
42
|
* Browse to http://localhost:4000
|
29
43
|
|
30
|
-
|
44
|
+
#### Install theme using gem
|
31
45
|
* Add this line to your Gemfile:
|
32
46
|
* `gem "jekyll-theme-collider"`
|
33
47
|
* Install running this command in your terminal:
|
@@ -54,6 +68,19 @@ Please [contact me](https://www.ryandevelops.com/contact) if you are interested
|
|
54
68
|
* Finally, add the following to config.yml:
|
55
69
|
|
56
70
|
```
|
71
|
+
title: [Your site title here]
|
72
|
+
email: [Your email]
|
73
|
+
description: >
|
74
|
+
[Your site description]
|
75
|
+
baseurl: "" # the subpath of your site, e.g. /blog
|
76
|
+
url: "https://jekyll-theme-collider.netlify.com" # the base hostname & protocol for your site, e.g. http://example.com
|
77
|
+
github_username: [Your GitHub user name]
|
78
|
+
linked_in_profile: [LinkedIn profile url]
|
79
|
+
full_name: [Your username]
|
80
|
+
user_description: [Your description]
|
81
|
+
disqus:
|
82
|
+
shortname: [Your Disqus shortname] # https://disqus.com
|
83
|
+
|
57
84
|
theme: jekyll-theme-collider
|
58
85
|
|
59
86
|
plugins:
|
@@ -82,17 +109,11 @@ pagination:
|
|
82
109
|
* Run your server and you should be good to go!
|
83
110
|
* `bundle exec jekyll serve`
|
84
111
|
|
85
|
-
|
112
|
+
#### Troubleshooting:
|
86
113
|
* The `curl -L -O` commands may not have fully downloaded each file. Even if it seems the file was fully downloaded, open each one to make sure that it doesn't just contain a 503 error inside. Delete the files with errors and retry the curl commands.
|
87
114
|
* You may need to restart your server in order for your changes to take effect.
|
88
115
|
|
89
|
-
##
|
90
|
-
|
91
|
-
**Config file:**
|
92
|
-
|
93
|
-
Be sure to add your own site title, email, github username, etc. in config.yml.
|
94
|
-
|
95
|
-
**Tags:**
|
116
|
+
## Tags
|
96
117
|
|
97
118
|
To create a new tag, make a new file in the `tags` directory with the name of the tag you'd like to use. The structure of each is the following:
|
98
119
|
|
@@ -110,7 +131,7 @@ pagination:
|
|
110
131
|
|
111
132
|
All posts tagged with _Jekyll_
|
112
133
|
```
|
113
|
-
If you're familiar with Jekyll
|
134
|
+
If you're familiar with Jekyll [front matter](https://jekyllrb.com/docs/front-matter/), this configuration will be intuitive. The parts unique to this theme are the color and the pagination configurations. The color configured here will determine the color of the tag page header and is based on SCSS color settings, meaning it's not just the default CSS purple color being used here. More on that in the colors section below.
|
114
135
|
|
115
136
|
The pagination settings are necessary to set for the jekyll-pagination-v2 plugin. The only one you'll likely want to ever modify here is the `tag:` setting, where you simply put the tag name you'd like to use in lowercase.
|
116
137
|
|
@@ -120,11 +141,14 @@ You'll also want to create a new file in the `_blog_tags` directory that is also
|
|
120
141
|
color: purple
|
121
142
|
---
|
122
143
|
```
|
144
|
+
In order to configure the colors as above, and make your own custom colors, see the section on colors below.
|
123
145
|
|
124
|
-
|
146
|
+
## Colors
|
125
147
|
|
126
148
|
If using this theme as a gem, see [overriding theme defaults](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) in the Jekyll docs as you will need to make a copy of the following files.
|
127
149
|
|
150
|
+
#### Page header colors
|
151
|
+
|
128
152
|
To set up a new color variable in the SCSS, you may do so in `settings/_color.scss`. To create a new reusable color class that can be used for tag pages and the tags themselves, go to `elements/_colors.scss`. The structure a new color classes should look like the following:
|
129
153
|
|
130
154
|
```
|
@@ -147,9 +171,39 @@ a.bg--orange:hover {
|
|
147
171
|
|
148
172
|
This is what would allow you to simply configure `color: orange` in your `tags` and `_blog_tags` directory files. For an example of what is happening under the hood, you can take a look at the `_includes/header.html` file, lines 1-15.
|
149
173
|
|
174
|
+
#### Homepage background color
|
175
|
+
|
176
|
+
To change the background color of the particles.js canvas on the homepage, go to `components/_particles.scss` and change the background color here:
|
177
|
+
```
|
178
|
+
#particles-js {
|
179
|
+
background: $dark-sea-green;
|
180
|
+
}
|
181
|
+
```
|
182
|
+
|
183
|
+
## About page customization
|
184
|
+
|
185
|
+
If creating a local copy of the site, simple modify the HTML and text in `_layouts/about.html`. When using the gem theme, create a new `_layouts` directory with an `about.html` file inside that use the following front matter:
|
186
|
+
```
|
187
|
+
---
|
188
|
+
layout: default
|
189
|
+
---
|
190
|
+
```
|
191
|
+
You may put whatever HTML and text you'd like below.
|
192
|
+
|
193
|
+
## Customizing particles js
|
194
|
+
|
195
|
+
To customize particles.js, such as the shape and size of the particles, you'll need to edit `assets/js/app.js`. If using the theme gem, you'll need to create this file and override with your own settings. Since this customization is outside the scope of this readme, I recommend learning more on the particles.js [GitHub page](https://github.com/VincentGarreau/particles.js/).
|
196
|
+
|
150
197
|
## Future projects
|
151
198
|
|
152
|
-
* Add comments to posts using Disqus
|
153
199
|
* A portfolio/work page using CSS Grid
|
154
200
|
* Search bar for articles in blog
|
155
201
|
* Modular scale typography
|
202
|
+
|
203
|
+
## Contributing
|
204
|
+
|
205
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/ryancolorcafe/jekyll-theme-collider. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
206
|
+
|
207
|
+
## License
|
208
|
+
|
209
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,16 @@
|
|
1
|
+
{% if page.comments != false %}
|
2
|
+
<div id="disqus_thread"></div>
|
3
|
+
<script>
|
4
|
+
var disqus_config = function () {
|
5
|
+
this.page.url = '{{ page.url | absolute_url }}'; // Replace PAGE_URL with your page's canonical URL variable
|
6
|
+
this.page.identifier = '{{ page.url | absolute_url }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
7
|
+
};
|
8
|
+
(function() { // DON'T EDIT BELOW THIS LINE
|
9
|
+
var d = document, s = d.createElement('script');
|
10
|
+
s.src = 'https://{{site.disqus.shortname}}.disqus.com/embed.js';
|
11
|
+
s.setAttribute('data-timestamp', +new Date());
|
12
|
+
(d.head || d.body).appendChild(s);
|
13
|
+
})();
|
14
|
+
</script>
|
15
|
+
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
16
|
+
{% endif %}
|
data/_layouts/default.html
CHANGED
@@ -5,8 +5,8 @@
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
6
6
|
<meta property="og:image" content="{{ "/assets/images/theme-image.png" | prepend: site.baseurl }}">
|
7
7
|
<meta property="og:description" content="The Collider Jekyll Theme is a gem-based theme that helps makes use of the jekyll-paginate-v2 plugin and particles.js.">
|
8
|
-
<meta property="og:title" content="
|
9
|
-
<meta property="og:url" content="//{{site.
|
8
|
+
<meta property="og:title" content="{{site.meta_title}}">
|
9
|
+
<meta property="og:url" content="//{{site.url}}">
|
10
10
|
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
|
11
11
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
|
12
12
|
</head>
|
data/_layouts/home.html
CHANGED
@@ -6,11 +6,11 @@ layout: default
|
|
6
6
|
{% include header.html %}
|
7
7
|
<div class="site-title__wrapper">
|
8
8
|
<h1>
|
9
|
-
<span class="site-title__text">{{site.
|
10
|
-
<span class="site-title__text--sub">{{site.
|
9
|
+
<span class="site-title__text">{{site.full_name}}</span>
|
10
|
+
<span class="site-title__text--sub">{{site.user_description}}</span>
|
11
11
|
</h1>
|
12
12
|
<a href="https://github.com/{{site.github_username}}" target="_blank"><i class="fab fa-github fa-3x"></i></a>
|
13
|
-
<a href="
|
13
|
+
<a href="{{site.linked_in_profile}}" target="_blank"><i class="fab fa-linkedin-in fa-3x"></i></a>
|
14
14
|
</div>
|
15
15
|
</div>
|
16
16
|
|
@@ -0,0 +1,81 @@
|
|
1
|
+
/**
|
2
|
+
* Syntax highlighting styles
|
3
|
+
*/
|
4
|
+
|
5
|
+
pre {
|
6
|
+
white-space: pre-wrap;
|
7
|
+
}
|
8
|
+
|
9
|
+
.highlight {
|
10
|
+
background: whitesmoke;
|
11
|
+
padding: 8px 12px;
|
12
|
+
margin: 20px 0 0 0;
|
13
|
+
|
14
|
+
.highlighter-rouge & {
|
15
|
+
background: #eef;
|
16
|
+
}
|
17
|
+
|
18
|
+
.c { color: #998; font-style: italic } // Comment
|
19
|
+
.err { color: #a61717; background-color: #e3d2d2 } // Error
|
20
|
+
.k { font-weight: bold } // Keyword
|
21
|
+
.o { font-weight: bold } // Operator
|
22
|
+
.cm { color: #998; font-style: italic } // Comment.Multiline
|
23
|
+
.cp { color: #999; font-weight: bold } // Comment.Preproc
|
24
|
+
.c1 { color: #998; font-style: italic } // Comment.Single
|
25
|
+
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
|
26
|
+
.gd { color: #000; background-color: #fdd } // Generic.Deleted
|
27
|
+
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
|
28
|
+
.ge { font-style: italic } // Generic.Emph
|
29
|
+
.gr { color: #a00 } // Generic.Error
|
30
|
+
.gh { color: #999 } // Generic.Heading
|
31
|
+
.gi { color: #000; background-color: #dfd } // Generic.Inserted
|
32
|
+
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
|
33
|
+
.go { color: #888 } // Generic.Output
|
34
|
+
.gp { color: #555 } // Generic.Prompt
|
35
|
+
.gs { font-weight: bold } // Generic.Strong
|
36
|
+
.gu { color: #aaa } // Generic.Subheading
|
37
|
+
.gt { color: #a00 } // Generic.Traceback
|
38
|
+
.kc { font-weight: bold } // Keyword.Constant
|
39
|
+
.kd { font-weight: bold } // Keyword.Declaration
|
40
|
+
.kp { font-weight: bold } // Keyword.Pseudo
|
41
|
+
.kr { font-weight: bold } // Keyword.Reserved
|
42
|
+
.kt { color: #458; font-weight: bold } // Keyword.Type
|
43
|
+
.m { color: #099 } // Literal.Number
|
44
|
+
.s { color: #d14 } // Literal.String
|
45
|
+
.na { color: #008080 } // Name.Attribute
|
46
|
+
.nb { color: #0086B3 } // Name.Builtin
|
47
|
+
.nc { color: #458; font-weight: bold } // Name.Class
|
48
|
+
.no { color: #008080 } // Name.Constant
|
49
|
+
.ni { color: #800080 } // Name.Entity
|
50
|
+
.ne { color: #900; font-weight: bold } // Name.Exception
|
51
|
+
.nf { color: #900; font-weight: bold } // Name.Function
|
52
|
+
.nn { color: #555 } // Name.Namespace
|
53
|
+
.nt { color: #000080 } // Name.Tag
|
54
|
+
.nv { color: #008080 } // Name.Variable
|
55
|
+
.ow { font-weight: bold } // Operator.Word
|
56
|
+
.w { color: #bbb } // Text.Whitespace
|
57
|
+
.mf { color: #099 } // Literal.Number.Float
|
58
|
+
.mh { color: #099 } // Literal.Number.Hex
|
59
|
+
.mi { color: #099 } // Literal.Number.Integer
|
60
|
+
.mo { color: #099 } // Literal.Number.Oct
|
61
|
+
.sb { color: #d14 } // Literal.String.Backtick
|
62
|
+
.sc { color: #d14 } // Literal.String.Char
|
63
|
+
.sd { color: #d14 } // Literal.String.Doc
|
64
|
+
.s2 { color: #d14 } // Literal.String.Double
|
65
|
+
.se { color: #d14 } // Literal.String.Escape
|
66
|
+
.sh { color: #d14 } // Literal.String.Heredoc
|
67
|
+
.si { color: #d14 } // Literal.String.Interpol
|
68
|
+
.sx { color: #d14 } // Literal.String.Other
|
69
|
+
.sr { color: #009926 } // Literal.String.Regex
|
70
|
+
.s1 { color: #d14 } // Literal.String.Single
|
71
|
+
.ss { color: #990073 } // Literal.String.Symbol
|
72
|
+
.bp { color: #999 } // Name.Builtin.Pseudo
|
73
|
+
.vc { color: #008080 } // Name.Variable.Class
|
74
|
+
.vg { color: #008080 } // Name.Variable.Global
|
75
|
+
.vi { color: #008080 } // Name.Variable.Instance
|
76
|
+
.il { color: #099 } // Literal.Number.Integer.Long
|
77
|
+
}
|
78
|
+
|
79
|
+
.highlighter-rouge {
|
80
|
+
background-color: whitesmoke;
|
81
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll-theme-collider
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ryan Brown
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2021-11-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -16,28 +16,28 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - "~>"
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version:
|
19
|
+
version: 3.9.1
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version:
|
26
|
+
version: 3.9.1
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
28
|
name: jekyll-paginate-v2
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
31
|
- - "~>"
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version:
|
33
|
+
version: 1.9.4
|
34
34
|
type: :runtime
|
35
35
|
prerelease: false
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
37
37
|
requirements:
|
38
38
|
- - "~>"
|
39
39
|
- !ruby/object:Gem::Version
|
40
|
-
version:
|
40
|
+
version: 1.9.4
|
41
41
|
- !ruby/object:Gem::Dependency
|
42
42
|
name: jekyll-feed
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
@@ -52,20 +52,34 @@ dependencies:
|
|
52
52
|
- - "~>"
|
53
53
|
- !ruby/object:Gem::Version
|
54
54
|
version: '0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: kramdown-parser-gfm
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - "~>"
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: 1.1.0
|
62
|
+
type: :runtime
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - "~>"
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: 1.1.0
|
55
69
|
- !ruby/object:Gem::Dependency
|
56
70
|
name: bundler
|
57
71
|
requirement: !ruby/object:Gem::Requirement
|
58
72
|
requirements:
|
59
73
|
- - "~>"
|
60
74
|
- !ruby/object:Gem::Version
|
61
|
-
version:
|
75
|
+
version: 2.2.10
|
62
76
|
type: :development
|
63
77
|
prerelease: false
|
64
78
|
version_requirements: !ruby/object:Gem::Requirement
|
65
79
|
requirements:
|
66
80
|
- - "~>"
|
67
81
|
- !ruby/object:Gem::Version
|
68
|
-
version:
|
82
|
+
version: 2.2.10
|
69
83
|
- !ruby/object:Gem::Dependency
|
70
84
|
name: rake
|
71
85
|
requirement: !ruby/object:Gem::Requirement
|
@@ -89,6 +103,7 @@ extra_rdoc_files: []
|
|
89
103
|
files:
|
90
104
|
- LICENSE.txt
|
91
105
|
- README.md
|
106
|
+
- _includes/disqus_comments.html
|
92
107
|
- _includes/header.html
|
93
108
|
- _includes/pagination.html
|
94
109
|
- _layouts/about.html
|
@@ -110,6 +125,7 @@ files:
|
|
110
125
|
- _sass/jekyll-theme-collider/generic/_font.scss
|
111
126
|
- _sass/jekyll-theme-collider/generic/_normalize.scss
|
112
127
|
- _sass/jekyll-theme-collider/helpers/_helpers.scss
|
128
|
+
- _sass/jekyll-theme-collider/helpers/_syntax-highlighting.scss
|
113
129
|
- _sass/jekyll-theme-collider/jekyll-theme-collider.scss
|
114
130
|
- _sass/jekyll-theme-collider/settings/_colors.scss
|
115
131
|
- assets/css/main.scss
|
@@ -143,8 +159,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
143
159
|
- !ruby/object:Gem::Version
|
144
160
|
version: '0'
|
145
161
|
requirements: []
|
146
|
-
|
147
|
-
rubygems_version: 2.5.2.3
|
162
|
+
rubygems_version: 3.0.3.1
|
148
163
|
signing_key:
|
149
164
|
specification_version: 4
|
150
165
|
summary: A simple blog using jekyll-paginate-v2 and particles.js
|