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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: e43b46ed2c9fd039a2764d588a90ffb2e35b9240
4
- data.tar.gz: c877eb77514601161e9dca36e55fcbf119efbaf4
2
+ SHA256:
3
+ metadata.gz: 2550936b3fc6679fce2ecc7ad8c4e8087bed07b8d2c1566a4a635010b71348ba
4
+ data.tar.gz: ad2f77730bcb4bcbc9e8c3d641e53c93563eeba6b100bb266d4bef751da4b8fa
5
5
  SHA512:
6
- metadata.gz: d4e67c2da8d0b68d28a7dbe9db897cc6ba1ffeeaabbdf0d7f94192feb2709b97e2242e01c0ba7aa444cf461f00514a202cb5c7f775348e979e6cd8308c2f354f
7
- data.tar.gz: b15d24054352e11d78e2359d07f9f01516344f1a00a8da68862283dc227767309186b01d569ed4295d6696615ae75edda61a149aa92c13e9b3a8ae79f83a55ec
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
- **Jekyll requirements**
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
- **Create a local copy of the site**
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
- **Install theme using gem**
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
- **Troubleshooting:**
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
- ## Site configuration
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, most of this will look familiar. 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 another section.
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
- **Colors**
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 %}
@@ -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="Collider Jekyll Theme">
9
- <meta property="og:url" content="//{{site.hosted_url}}">
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.username}}</span>
10
- <span class="site-title__text--sub">{{site.user_title}}</span>
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="https://www.linkedin.com/in/{{site.linked_in_profile_name}}/" target="_blank"><i class="fab fa-linkedin-in fa-3x"></i></a>
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
 
@@ -21,3 +21,7 @@ body {
21
21
  background-color: #000;
22
22
  color: $white;
23
23
  }
24
+
25
+ img {
26
+ width: 100%;
27
+ }
@@ -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
+ }
@@ -23,3 +23,4 @@
23
23
 
24
24
  // Helpers
25
25
  @import "helpers/helpers";
26
+ @import "helpers/syntax-highlighting";
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.0
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: 2018-08-25 00:00:00.000000000 Z
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: '3.8'
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: '3.8'
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: '1.7'
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: '1.7'
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: '1.16'
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: '1.16'
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
- rubyforge_project:
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