jekyll-theme-munky 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +388 -0
  4. data/_includes/disqus_comments.html +17 -0
  5. data/_includes/footer.html +96 -0
  6. data/_includes/github_buttons.html +23 -0
  7. data/_includes/google_analytics.html +11 -0
  8. data/_includes/head.html +36 -0
  9. data/_includes/header.html +29 -0
  10. data/_includes/image.html +17 -0
  11. data/_includes/share_buttons.html +39 -0
  12. data/_includes/sidebar.html +77 -0
  13. data/_layouts/about.html +75 -0
  14. data/_layouts/blog.html +19 -0
  15. data/_layouts/default.html +54 -0
  16. data/_layouts/page.html +11 -0
  17. data/_layouts/photography.html +24 -0
  18. data/_layouts/post.html +89 -0
  19. data/_layouts/projects.html +41 -0
  20. data/_sass/font-awesome/_animated.scss +34 -0
  21. data/_sass/font-awesome/_bordered-pulled.scss +25 -0
  22. data/_sass/font-awesome/_core.scss +12 -0
  23. data/_sass/font-awesome/_fixed-width.scss +6 -0
  24. data/_sass/font-awesome/_icons.scss +789 -0
  25. data/_sass/font-awesome/_larger.scss +13 -0
  26. data/_sass/font-awesome/_list.scss +19 -0
  27. data/_sass/font-awesome/_mixins.scss +60 -0
  28. data/_sass/font-awesome/_path.scss +15 -0
  29. data/_sass/font-awesome/_rotated-flipped.scss +20 -0
  30. data/_sass/font-awesome/_screen-reader.scss +5 -0
  31. data/_sass/font-awesome/_stacked.scss +20 -0
  32. data/_sass/font-awesome/_variables.scss +800 -0
  33. data/_sass/font-awesome/font-awesome.scss +18 -0
  34. data/_sass/munky.scss +43 -0
  35. data/_sass/munky/_about.scss +20 -0
  36. data/_sass/munky/_base.scss +335 -0
  37. data/_sass/munky/_blog.scss +14 -0
  38. data/_sass/munky/_footer.scss +37 -0
  39. data/_sass/munky/_github-buttons.scss +19 -0
  40. data/_sass/munky/_header.scss +83 -0
  41. data/_sass/munky/_icons.scss +50 -0
  42. data/_sass/munky/_photography.scss +61 -0
  43. data/_sass/munky/_post.scss +74 -0
  44. data/_sass/munky/_projects.scss +65 -0
  45. data/_sass/munky/_share-buttons.scss +28 -0
  46. data/_sass/munky/_sidebar.scss +192 -0
  47. data/_sass/munky/_syntax-highlighting.scss +74 -0
  48. data/assets/css/main.scss +11 -0
  49. data/assets/css/simplelightbox.scss +289 -0
  50. data/assets/fonts/font-awesome/FontAwesome.otf +0 -0
  51. data/assets/fonts/font-awesome/fontawesome-webfont.eot +0 -0
  52. data/assets/fonts/font-awesome/fontawesome-webfont.svg +2671 -0
  53. data/assets/fonts/font-awesome/fontawesome-webfont.ttf +0 -0
  54. data/assets/fonts/font-awesome/fontawesome-webfont.woff +0 -0
  55. data/assets/fonts/font-awesome/fontawesome-webfont.woff2 +0 -0
  56. data/assets/images/logo-transparent.png +0 -0
  57. data/assets/images/logo.png +0 -0
  58. data/assets/images/profile-small.jpg +0 -0
  59. data/assets/images/profile.jpg +0 -0
  60. data/assets/javascripts/gallery.js +5 -0
  61. data/assets/javascripts/jquery-3.1.1.min.js +4 -0
  62. data/assets/javascripts/simple-lightbox.min.js +5 -0
  63. metadata +176 -0
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 74d7de5a20c03f3c41dea4f80729fcbf248c60b1
4
+ data.tar.gz: 1ec3f786e0e9dd7befdcfcfb5ada4377f32479c0
5
+ SHA512:
6
+ metadata.gz: ec3faed503c0edd18750a59e4d8ada62c515c5ca7fc2601b6410acef31a6d8b314fc4deab8ffc97a786888749ba00f653c2bbdd5a89a9aec479e914ae16723e0
7
+ data.tar.gz: 106bbcaab9d76e3d1ccf312d646fcf8852b9f8e8d75a89699d9cd6a7727d04d400b6df45a9822f63b69d2ddbbb57575fa9bd88c8a3b87112dc9d0f7eb688a011
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2017 Geert Ariën
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,388 @@
1
+ # munky
2
+
3
+ *Munky is a jekyll theme for portfolio websites*. It features a blog, project, photography and about page.
4
+
5
+ [Theme preview](http://www.geertarien.com)
6
+
7
+ ![munky theme preview](/screenshot.png)
8
+
9
+ ## Table of contents
10
+
11
+ * [Installation](#installation)
12
+ * [Getting started](#getting-started)
13
+ * [Contents At-A-Glance](#contents-at-a-glance)
14
+ * [Layouts](#layouts)
15
+ * [Includes](#includes)
16
+ * [Sass](#sass)
17
+ * [Assets](#assets)
18
+ * [Usage](#usage)
19
+ * [General](#general)
20
+ * [Pages](#pages)
21
+ * [Blogposts](#blogposts)
22
+ * [Projects](#projects)
23
+ * [Photography gallery](#photography-gallery)
24
+ * [About me page](#about-me-page)
25
+ * [Customization](#customization)
26
+ * [Enabling comments (via Disqus)](#enabling-comments-via-disqus)
27
+ * [Enabling Google Analytics](#enabling-google-analytics)
28
+ * [Contributing](#contributing)
29
+ * [License](#license)
30
+
31
+ ## Installation
32
+
33
+ Add this line to your Jekyll site's Gemfile:
34
+
35
+ ```ruby
36
+ gem "jekyll-theme-munky"
37
+ ```
38
+
39
+ And add this line to your Jekyll site's `_config.yml`:
40
+
41
+ ```yaml
42
+ theme: jekyll-theme-munky
43
+ ```
44
+
45
+ And then execute:
46
+
47
+ $ bundle
48
+
49
+ ## Getting started
50
+
51
+ Wether you're using munkye as a theme gem or as a fork, the easiest way to
52
+ get started is to copy the content from the `demo` folder to your jekyll
53
+ website's root folder. It adds all the required files and settings
54
+ to get the most of out of the theme and adds some example data to get started.
55
+
56
+ As a bare minimum for the theme to work properly you will need to add the
57
+ following configuration data to the `_config.yml` file:
58
+
59
+ ```yaml
60
+ defaults:
61
+ - scope:
62
+ path: ""
63
+ values:
64
+ image: /assets/images/logo.png
65
+ -
66
+ scope:
67
+ path: ""
68
+ type: "posts"
69
+ values:
70
+ type: "post"
71
+ -
72
+ scope:
73
+ path: ""
74
+ type: "projects"
75
+ values:
76
+ type: "project"
77
+ ```
78
+
79
+ ## Contents At-A-Glance
80
+
81
+ ### Layouts
82
+
83
+ Refers to files within the `_layouts` directory, that define the markup for your theme.
84
+
85
+ - `default.html` — The base layout that lays the foundation for subsequent layouts. The derived layouts inject their contents into this file at the line that says ` {{ content }} ` and are linked to this file via [FrontMatter](https://jekyllrb.com/docs/frontmatter/) declaration `layout: default`.
86
+ - `blog.html` — The layout for your landing-page / home-page / index-page.
87
+ - `page.html` — The layout for your documents that contain FrontMatter, but are not posts.
88
+ - `post.html` — The layout for your posts and projects.
89
+ - `about.html` — The layout for your about-page.
90
+ - `photography.html` — The layout for your photography-page.
91
+ - `projects.html` — The layout for your projects-page.
92
+
93
+ ### Includes
94
+
95
+ Refers to snippets of code within the `_includes` directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem.
96
+
97
+ - `disqus_comments.html` — Code to markup disqus comment box.
98
+ - `footer.html` — Defines the site's footer section.
99
+ - `google-analytics.html` — Inserts Google Analytics module (active only in production environment).
100
+ - `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
101
+ - `header.html` &mdash; Defines the site's main header section.
102
+ - `sidebar.html` &mdash; Defines the site's sidebar section.
103
+ - `github-buttons.html` &mdash; Inserts github repository buttons for projects.
104
+ - `share-buttons.html` &mdash; Inserts social media share buttons for projects and posts.
105
+ - `image.html` &mdash; Defines how are images defined in markdown are generated.
106
+
107
+ ### Sass
108
+
109
+ Refers to `.scss` files within the `_sass` directory that define the theme's styles.
110
+
111
+ - `munky.scss` &mdash; The core file imported by preprocessed `main.scss`, it defines the variable defaults for the theme and also further imports sass partials to supplement itself.
112
+ - `munky/*.scss` &mdash; Sass partials that are imported by `munky.scss`.
113
+ - `font-awesome/font-awesome.scss` &mdash; Imports sass partials for font-awesome icons.
114
+
115
+ ### Assets
116
+
117
+ Refers to various asset files within the `assets` directory.
118
+ Contains the `main.scss` that imports sass files from within the `_sass`
119
+ directory. This `main.scss` is what gets processed into the theme's main
120
+ stylesheet `main.css` called by `_layouts/default.html` via `_includes/head.html`.
121
+
122
+ This directory can include sub-directories to manage assets of similar type,
123
+ and will be copied over as is, to the final transformed site directory.
124
+
125
+ The following sub-directories are required:
126
+
127
+ - `css` &mdash; Contains the main `.scss` file as well as the `simplelightbox.scss` file for the configuration of the photo gallery.
128
+ - `downloads` &mdash; Place downloadable content for projects in this directory.
129
+ - `fonts` &mdash; Contains font-awesome font files for icons.
130
+ - `javascripts` &mdash; Directory with jquery, simple-lightbox and custom javascript files.
131
+ - `images` &mdash; The root directory contains side wide images such as logos and profile pictures.
132
+ - `photography` &mdash; Place photographs with their thumbnails in this directory.
133
+ - `posts` &mdash; Images for the posts, each post has his own sub-directory corresponding with the markdown filename.
134
+ - `projects` &mdash; Images for the projects, each project has his own sub-directory corresponding with the markdown filename.
135
+
136
+ ## Usage
137
+
138
+ ### General
139
+
140
+ #### Logo
141
+
142
+ To change the header logo replace the `/assets/images/logo-transparent.png`
143
+ image:
144
+
145
+ ```
146
+ assets
147
+ └───images
148
+ └───profile-transparent.png
149
+ ```
150
+
151
+ For maximum compatibility use an image with a height of 236 pixels and a
152
+ transparent background.
153
+
154
+ #### Email
155
+
156
+ A link to your email address is provided in the _footer_, _sidebar_ and _about page_.
157
+ For this to work your email address needs to be configured in your `_config.yml` file:
158
+
159
+ ```yaml
160
+ email: virtual@munky.com
161
+ ```
162
+
163
+ The link to your email is set using javascript to mislead basic web crawlers. It
164
+ is still advised to use an email service with a strong spam filter.
165
+
166
+ #### Social media links
167
+
168
+ Your social media links are displayed in the _footer_, _sidebar_ and _about page_.
169
+ They need to be configured in your `_config.yml` file:
170
+
171
+ ```yaml
172
+ twitter:
173
+ username: accountname
174
+ linkedin:
175
+ username: accountname
176
+ github:
177
+ username: accountname
178
+ flickr:
179
+ username: accountname
180
+ ```
181
+
182
+ **Don't forget to set up your github username if you're gonna link to
183
+ repositories in your projects.**
184
+
185
+ #### Sidebar
186
+
187
+ Change the following data in your `_config.yml` file to change the information
188
+ in the sidebar:
189
+
190
+ ```yaml
191
+ author:
192
+ name: Virtual Munky
193
+ bio: Jekyll theme for portfolio websites
194
+ location: Antwerp, BE
195
+ ```
196
+
197
+ To change the rounded profile picture replace the `/assets/images/profile-small.jpg`
198
+ image:
199
+
200
+ ```
201
+ assets
202
+ └───images
203
+ └───profile-small.jpg
204
+ ```
205
+
206
+ #### Images
207
+
208
+ In markdown files you can use the following syntax to render images with
209
+ (or without) captions:
210
+
211
+ ```markdown
212
+ {% include image.html
213
+ name="example.jpg"
214
+ caption="Est orci, gravida pede vestibulum sodales pellentesque neque condimentum, occaecat luctus fermentum."
215
+ alt="example"
216
+ %}
217
+ ```
218
+
219
+ ### Pages
220
+
221
+ On top of the default FrontMatter variables, munky theme also uses
222
+ the following variables:
223
+
224
+ ```yaml
225
+ order: 2 # Used for ordering page links in navigation menu's.
226
+ sidebar: true # Enable or disable the author info sidebar.
227
+ text: true # Set true to change the main content width to a more readable format.
228
+ custom_css: # Add custom css to a page.
229
+ - simplelightbox
230
+ custom_js: # Add custom javascript to a page.
231
+ - simple-lightbox.min
232
+ - gallery
233
+ ```
234
+
235
+ The following markdown files are required in your jekyll site's root folder:
236
+
237
+ - `index.md` &mdash; Layout: *blog*
238
+ - `projects.md` &mdash; Layout: *projects*
239
+ - `photography.md` &mdash; Layout: *photography*
240
+ - `about.md` &mdash; Layout: *about*
241
+
242
+ ### Blogposts
243
+
244
+ Blogposts follow the default jekyll standard. Exclusive to posts is the
245
+ `last_modified_at` FrontMatter variable. This variable, that is also
246
+ used by the jekyll-seo-tag plugin, shows the date the post was last changed
247
+ below the title.
248
+
249
+ ```yaml
250
+ last_modified_at: 2017-04-07
251
+ ```
252
+
253
+ Images that are used in blogposts should be placed inside a separate directory,
254
+ with the same name as the post's filename, inside the `/assets/images/posts/`
255
+ directory:
256
+
257
+ ```
258
+ assets
259
+ └───images
260
+ └───posts
261
+ └───2017-04-01-example-post
262
+ │ image01.jpg
263
+ │ ...
264
+ ```
265
+
266
+ ### Projects
267
+
268
+ Projects use the *post* layout but add some extra features through the following
269
+ FrontMatter variables:
270
+
271
+ ```yaml
272
+ # The description for the project overview page.
273
+ description: Ultrices dapibus felis dolor sed, augue scelerisque, ante ligula
274
+ aenean aliquam feugiat eget.
275
+ # Link to the github repository of the project. To use this feature you need
276
+ # to set the name of your github account in _config.yml .
277
+ repo: example
278
+ # Only in case the repo is not set, you can use the download variable to link
279
+ # to a file in the /assets/download directory.
280
+ download: example.zip
281
+ # Link to the image for the project overview page.
282
+ image: /assets/images/projects/example.jpg
283
+ ```
284
+
285
+ Images that are used in projects should be placed inside a separate directory,
286
+ with the same name as the project's filename, inside the
287
+ `/assets/images/projects/` directory:
288
+
289
+ ```
290
+ assets
291
+ └───images
292
+ └───projects
293
+ └───example-project
294
+ │ image01.jpg
295
+ │ ...
296
+ ```
297
+
298
+ ### Photography gallery
299
+
300
+ To add images to the photography page, simply add the images to the
301
+ `/assets/images/photography/` directory along with a thumbnail version named
302
+ `<filename>_thumb.<extension>`:
303
+
304
+ ```
305
+ assets
306
+ └───images
307
+ └───photography
308
+ │ 01_thumb.jpg
309
+ │ 01.jpg
310
+ │ 02_thumb.jpg
311
+ │ 02.jpg
312
+ │ ...
313
+ ```
314
+
315
+ ### About me page
316
+
317
+ A caption below the title can be set using FrontMatter:
318
+
319
+ ```yaml
320
+ caption: Super awesome caption.
321
+ ```
322
+
323
+ To change the profile picture replace the `/assets/images/profile.jpg` image:
324
+
325
+ ```
326
+ assets
327
+ └───images
328
+ └───profile.jpg
329
+ ```
330
+
331
+ ### Customization
332
+
333
+ #### General
334
+
335
+ To override the default structure and style of munky, simply create the
336
+ concerned directory at the root of your site, copy the file you wish to
337
+ customize to that directory, and then edit the file.
338
+ e.g., to override the [`_includes/head.html `](_includes/head.html) file to
339
+ specify a custom style path, create an `_includes` directory, copy
340
+ `_includes/head.html` from munky gem folder to `<yoursite>/_includes` and start
341
+ editing that file.
342
+
343
+ #### CSS
344
+
345
+ To **configure the munky SCSS variables**, the `munky.scss` file has to exist at your site source:
346
+
347
+ - Create a new file `munky.scss` at `<your-site>/_sass/`
348
+ - Copy the contents at [_sass/munky.scss](_sass/munky.scss) onto the `munky.scss` you just created, and edit away!
349
+
350
+ To **override the default CSS**, the `main.scss` file has to exist at your site source:
351
+
352
+ - Create a new file `main.scss` at `<your-site>/assets/css/`
353
+ - Copy the contents at [assets/css/main.scss](assets/css/main.scss) onto the `main.scss` you just created, and edit away!
354
+
355
+ ### Enabling comments (via Disqus)
356
+
357
+ Optionally, if you have a Disqus account, you can tell Jekyll to use it to show
358
+ a comments section below each post.
359
+
360
+ To enable it, add the following lines to your Jekyll site's `_config.yml`:
361
+
362
+ ```yaml
363
+ disqus:
364
+ shortname: my_disqus_shortname
365
+ ```
366
+
367
+ You can find out more about Disqus' shortnames [here](https://help.disqus.com/customer/portal/articles/466208).
368
+
369
+ Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production`
370
+
371
+
372
+ ### Enabling Google Analytics
373
+
374
+ To enable Google Anaytics, add the following lines to your Jekyll site's `_config.yml`:
375
+
376
+ ```yaml
377
+ google_analytics: UA-NNNNNNNN-N
378
+ ```
379
+
380
+ Google Analytics will only appear in production, i.e., `JEKYLL_ENV=production`
381
+
382
+ ## Contributing
383
+
384
+ Bug reports and pull requests are welcome on GitHub at https://github.com/GeertArien/jekyll-theme-munky.
385
+
386
+ ## License
387
+
388
+ The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
@@ -0,0 +1,17 @@
1
+ <div id="disqus_thread" class="col-100"></div>
2
+ <script>
3
+ var disqus_config = function () {
4
+ this.page.url = '{{ page.url | absolute_url }}';
5
+ this.page.identifier = '{{ page.url | absolute_url }}';
6
+ };
7
+
8
+ (function() {
9
+ var d = document, s = d.createElement('script');
10
+
11
+ s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
12
+
13
+ s.setAttribute('data-timestamp', +new Date());
14
+ (d.head || d.body).appendChild(s);
15
+ })();
16
+ </script>
17
+ <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
@@ -0,0 +1,96 @@
1
+ <footer>
2
+ <div id="foot-nav" class="group">
3
+ <div class="col-25">
4
+ <p>
5
+ <strong>Site Map</strong>
6
+ </p>
7
+
8
+ <ul class="pages">
9
+ {% assign sorted_pages = site.pages | sort:"order" %}
10
+ {% for node in sorted_pages %}
11
+ {% if node.title and node.order %}
12
+ <li class="nav-link">
13
+ <a class="reverse" href="{{ node.url | relative_url }}">{{ node.title | escape }}</a>
14
+ </li>
15
+ {% endif %}
16
+ {% endfor %}
17
+ </ul>
18
+ </div>
19
+
20
+ <div class="col-25">
21
+
22
+ <p>
23
+ <strong>Contact</strong>
24
+ </p>
25
+
26
+ <ul class="social-media-list">
27
+ <li>
28
+ <a class="reverse email" href="" title="Send me an email">
29
+ <span class="username">Email</span>
30
+ </a>
31
+ </li>
32
+
33
+ {% if site.linkedin.username %}
34
+ <li>
35
+ <a class="reverse" href="https://www.linkedin.com/in/{{ site.linkedin.username }}" title="Follow me on LinkedIn">
36
+ <span class="username">LinkedIn</span>
37
+ </a>
38
+ </li>
39
+ {% endif %}
40
+
41
+ {% if site.github.username %}
42
+ <li>
43
+ <a class="reverse" href="https://github.com/{{ site.github.username }}" title="Follow me on GitHub">
44
+ <span class="username">GitHub</span>
45
+ </a>
46
+ </li>
47
+ {% endif %}
48
+
49
+ {% if site.flickr.username %}
50
+ <li>
51
+ <a class="reverse" href="https://www.flickr.com/photos/{{ site.flickr.username }}/" title="Connect with me on Flickr">
52
+ <span class="username">Flickr</span>
53
+ </a>
54
+ </li>
55
+ {% endif %}
56
+
57
+ {% if site.twitter.username %}
58
+ <li>
59
+ <a class="reverse" href="https://twitter.com/{{ site.twitter.username }}/" title="Follow me on Twitter">
60
+ <span class="username">Twitter</span>
61
+ </a>
62
+ </li>
63
+ {% endif %}
64
+
65
+ {% if site.instagram.username %}
66
+ <li>
67
+ <a class="reverse" href="https://www.instagram.com/{{ site.instagram.username }}/" title="Connect with me on Instagram">
68
+ <span class="username">Instagram</span>
69
+ </a>
70
+ </li>
71
+ {% endif %}
72
+
73
+ </ul>
74
+ </div>
75
+
76
+ <div class="col-50">
77
+ <p id="rss-subscribe"><strong>Subscribe <a class="reverse underline" href="/feed.xml">via RSS</a></strong></p>
78
+ <p id="poweredby">Powered by
79
+ <a class="reverse" href="https://jekyllrb.com/">Jekyll</a>,
80
+ <a class="reverse" href="http://sass-lang.com/">Sass</a>,
81
+ <a class="reverse" href="https://jquery.com/">Jquery</a>,
82
+ <a class="reverse" href="https://disqus.com/">Disqus</a>,
83
+ <a class="reverse" href="https://www.andrerinas.de/simplelightbox.html">Simplelightbox</a>
84
+ and <a class="reverse" href="https://pages.github.com/">GitHub Pages</a>.
85
+ </p>
86
+ </div>
87
+
88
+ </div>
89
+
90
+ <div id="disclaimer">
91
+ <p>
92
+ Copyright © <span id="year"></span> <a class="reverse email" href="">{{ site.author.name | escape }}</a>.
93
+ </p>
94
+ </div>
95
+
96
+ </footer>