jekyll-theme-prologue 0.2.4 → 0.2.5
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 +26 -19
- data/_config.yml +9 -8
- data/_includes/header.html +1 -1
- data/_includes/section.html +2 -1
- data/_layouts/home.html +18 -16
- data/_sass/jekyll-theme-prologue.scss +14 -4
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b86b82ae01213016cb29c9ed5c93b1f2db04c6b3
|
|
4
|
+
data.tar.gz: '09b67933da31dbc55b68b7a3300cc5f0be6d4e86'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 81416c9bba4a2139ba34e13fc401f92e9a723d6d42eb7d14241f747503c60048a52d2b2979cd049533df49a87af9a56888fce993a08d025acfff50c7a17b80fd
|
|
7
|
+
data.tar.gz: 72dfcdd5e0ba6b6b0064dbfd9d765d9a454fabc974460ae331c07fab5928bfa84c6976543c1aca12ad1e1f33ae0b5010685902221a97036feea6a02fe7ab0fc8
|
data/README.md
CHANGED
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
# Prologue - Jekyll Theme
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
(Actively maintained, expect some changes)
|
|
3
4
|
|
|
4
5
|
[](https://badge.fury.io/rb/jekyll-theme-prologue)
|
|
5
6
|
|
|
6
7
|
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.
|
|
9
10
|
|
|
10
11
|
**Demo**: https://chrisbobbe.github.io/jekyll-theme-prologue/
|
|
11
12
|
|
|
13
|
+
# Added Features
|
|
14
|
+
|
|
15
|
+
* **[Formspree.io](https://formspree.io/) contact form integration** - just add your email to the `_config.yml` and it works!
|
|
16
|
+
* Set a cover photo for any of your sections (not just the first), with alt text for screen readers and SEO
|
|
17
|
+
* Add your **social profiles** easily in `_config.yml`. Only the social profiles buttons you enter in `config.yml` will show up on the site footer.
|
|
18
|
+
* Search engine optimization (SEO) meta tags based on info you provide in `_config.yml` and frontmatter
|
|
19
|
+
* Google Analytics built-in; just put your [Tracking ID](https://support.google.com/analytics/answer/1008080?hl=en) in `_config.yml` as `google_analytics`
|
|
20
|
+
* Custom 404 page (called 404.html; to activate, move it to your project directory).
|
|
21
|
+
|
|
12
22
|
# How to Use
|
|
13
23
|
|
|
14
24
|
There are two ways to get started:
|
|
@@ -16,33 +26,30 @@ There are two ways to get started:
|
|
|
16
26
|
1. **Install the [jekyll-theme-prologue gem](https://rubygems.org/gems/jekyll-theme-prologue).** Instructions are in the [Jekyll docs](https://jekyllrb.com/docs/themes/#installing-a-theme). After running `bundle install`, you can find the theme files by running `open $(bundle show jekyll-theme-prologue)`. A sample working `_config.yml` file ships with the gem; if you want to activate it, move it to your project's root directory. It will do nothing until you move it there, replacing the default `_config.yml` file.
|
|
17
27
|
2. **Fork the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue).** If you want to use [GitHub Pages](https://pages.github.com/), create a branch named `gh-pages`, and replace `theme: jekyll-theme-prologue` with `remote_theme: chrisbobbe/jekyll-theme-prologue` in the provided `_config.yml` ([GitHub Pages now supports open-source themes on GitHub](https://github.com/blog/2464-use-any-theme-with-github-pages)).
|
|
18
28
|
|
|
19
|
-
Make sure that `url` and `base_url` are set
|
|
29
|
+
Make sure that `url` and `base_url` are set for your own website in `_config.yml`. For local testing, make them both blank.
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
Add a photo avatar to your project, then set `avatar: path/to/your/avatar.jpg` in _config.yml; for example, `avatar: assets/images/avatar.jpg`. 48x48 pixels works best.
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
Set a cover photo in any of the sections by adding `cover-photo: path/to/photo.jpg` and `cover-photo-alt: some alt text` to the section's frontmatter. (Don't forget the alt text for screen readers; it won't work without it.)
|
|
24
34
|
|
|
25
|
-
|
|
35
|
+
## Special instructions
|
|
36
|
+
Jekyll does not support multiple layout-formatted content sections per page, and this theme is a good workaround. **Bear with me for a few instructions unique to jekyll-theme-prologue.**
|
|
26
37
|
|
|
27
|
-
|
|
38
|
+
You don't need to use Jekyll's hardcoded support for `_pages` or `_posts`, and layouts aren't provided for them. If you want to customize the templates, go to `_layouts/home.html` and `_includes/section.html` provided with the theme, but this isn't necessary.
|
|
28
39
|
|
|
29
|
-
|
|
40
|
+
1. **Your `_config.yml` file must include the following line or it will not work**: `collections: [sections]`. This tells Jekyll to look in the _sections folder (which you will create) for your content and render it all on one page.
|
|
41
|
+
|
|
42
|
+
2. **Create a `_sections` folder** in your project's root directory and start adding content. Sample content is provided in the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue/tree/master/_sections).
|
|
30
43
|
|
|
31
44
|
All new sections should be added as html or Markdown documents in the `_sections` folder. The following variables can be set with [frontmatter](https://jekyllrb.com/docs/frontmatter/):
|
|
32
45
|
- `title` (required)
|
|
33
|
-
- `order` (required; orders the sequence of sections on the page.
|
|
34
|
-
- `
|
|
46
|
+
- `order` (required; orders the sequence of sections on the page. Example: `1`)
|
|
47
|
+
- `cover-photo` (optional; sets a background image for the section. Example: `assets/images/banner.jpg`)
|
|
48
|
+
- `cover-photo-alt` (required if using a cover photo. Describes the photo for screen readers; e.g., "Dome of Light art installation, Kaohsiung, Taiwan")
|
|
49
|
+
- `icon` (optional; see [Font Awesome](http://fontawesome.io/icons/) for icon codes. Example: `fa-github`)
|
|
35
50
|
- `auto-header` (optional; "use-title" is default, "none" for no header, or custom header text)
|
|
36
51
|
|
|
37
|
-
There shouldn't be a need to set `permalink`
|
|
38
|
-
|
|
39
|
-
# Added Features
|
|
40
|
-
|
|
41
|
-
* **[Formspree.io](https://formspree.io/) contact form integration** - just add your email to the `_config.yml` and it works!
|
|
42
|
-
* Add your **social profiles** easily in `_config.yml`. Only the social profiles buttons you enter in `config.yml` will show up on the site footer.
|
|
43
|
-
* Custom 404 page (called 404.html; to activate, move to your project directory).
|
|
44
|
-
* Comprehensive search engine optimization (SEO) tags based on info you provide in _config.yml
|
|
45
|
-
* Google Analytics built-in; just put your [Tracking ID](https://support.google.com/analytics/answer/1008080?hl=en) in _config.yml
|
|
52
|
+
There shouldn't be a need to set `permalink` because all content displays together in `index.html`.
|
|
46
53
|
|
|
47
54
|
# Credits
|
|
48
55
|
|
data/_config.yml
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
# jekyll-theme-prologue for your convenience. To use it, move it to your
|
|
3
3
|
# project's root directory. Please note that the following lines are
|
|
4
4
|
# NECESSARY for Prologue to work correctly:
|
|
5
|
-
#
|
|
5
|
+
#
|
|
6
6
|
# theme: jekyll-theme-prologue
|
|
7
7
|
# collections: [sections]
|
|
8
8
|
#
|
|
9
9
|
# They activate the theme and tell Jekyll to find your content
|
|
10
10
|
# in /_sections. Note where "sections" starts with an underscore
|
|
11
|
-
# and where it doesn't. The social settings will make links to
|
|
11
|
+
# and where it doesn't. The social settings will make links to
|
|
12
12
|
# Twitter, etc.
|
|
13
|
-
#
|
|
13
|
+
#
|
|
14
14
|
# Also, be sure to customize url and baseurl for your site.
|
|
15
15
|
#
|
|
16
16
|
# ---------------------------------------------------------------
|
|
@@ -33,15 +33,16 @@
|
|
|
33
33
|
title: Your awesome title
|
|
34
34
|
subtitle: Your awesome subtitle
|
|
35
35
|
description: >- # this means to ignore newlines until "baseurl:"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
author: Your Incredible
|
|
36
|
+
This is the demo site for the Jekyll theme version of
|
|
37
|
+
HTML5 UP's site template Prologue. Content is all on one page
|
|
38
|
+
and it's mobile-friendly.
|
|
39
|
+
author: Your Incredible Name
|
|
40
40
|
email: your-email@example.com
|
|
41
|
+
avatar: assets/images/avatar.jpg
|
|
41
42
|
|
|
42
43
|
# You'll want to customize baseurl for your own site:
|
|
43
44
|
baseurl: "/jekyll-theme-prologue" # the subpath of your site, e.g. /blog
|
|
44
|
-
url: "" # the base hostname & protocol for your site
|
|
45
|
+
url: "https://chrisbobbe.github.io" # the base hostname & protocol for your site
|
|
45
46
|
|
|
46
47
|
# Social settings
|
|
47
48
|
facebook_url:
|
data/_includes/header.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
<!-- Logo -->
|
|
7
7
|
<div id="logo">
|
|
8
|
-
<span class="image avatar48"><img src="{{
|
|
8
|
+
<span class="image avatar48"><img src="{{ site.avatar | relative_url }}" alt="{{ site.author | default: 'unknown author' | prepend: 'Avatar of ' }}" /></span>
|
|
9
9
|
<h1 id="title">{{ site.title }}</h1>
|
|
10
10
|
<p>{{ site.subtitle }}</p>
|
|
11
11
|
</div>
|
data/_includes/section.html
CHANGED
data/_layouts/home.html
CHANGED
|
@@ -10,36 +10,40 @@
|
|
|
10
10
|
{% include head.html %}
|
|
11
11
|
|
|
12
12
|
<body>
|
|
13
|
-
|
|
13
|
+
|
|
14
14
|
{% include header.html %}
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
<!-- Main -->
|
|
17
17
|
<div id="main">
|
|
18
18
|
{% assign sections = site.sections | where_exp: 'section','section.order >= 1' %}
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
{% if page.permalink %}
|
|
21
21
|
<!-- This enables the 404 page, the only page that should
|
|
22
22
|
have a permalink declared in its frontmatter. -->
|
|
23
23
|
{% assign sections = sections | push: page %}
|
|
24
24
|
{% endif %}
|
|
25
|
-
|
|
25
|
+
|
|
26
26
|
{% unless sections == null %}
|
|
27
27
|
{% assign sections = sections | sort: 'order' %}
|
|
28
|
-
|
|
28
|
+
|
|
29
29
|
<!-- Sections -->
|
|
30
30
|
{% for section in sections %}
|
|
31
|
-
|
|
31
|
+
|
|
32
32
|
{% assign title = section.title | default: 'Untitled' %}
|
|
33
33
|
{% assign slug = section.title | slugify | default: 'untitled' %}
|
|
34
|
-
|
|
35
|
-
{% if section.
|
|
34
|
+
|
|
35
|
+
{% if section.cover-photo and section.cover-photo-alt %}
|
|
36
|
+
{% capture photo %}
|
|
37
|
+
<img src="{{ section.cover-photo | relative_url }}" alt="{{ section.cover-photo-alt }}" class="back">
|
|
38
|
+
{% endcapture %}
|
|
36
39
|
{% assign class = 'shade-one cover dark' %}
|
|
37
40
|
{% else %}
|
|
41
|
+
{% assign photo = '' %}
|
|
38
42
|
{% capture class %}
|
|
39
43
|
shade-{% cycle 'two', 'three', 'four', 'three' %}
|
|
40
44
|
{% endcapture %}
|
|
41
45
|
{% endif %}
|
|
42
|
-
|
|
46
|
+
|
|
43
47
|
{% if section.auto-header == 'none' %}
|
|
44
48
|
{% assign heading = "" %}
|
|
45
49
|
{% elsif section.auto-header == null or section.auto-header == 'use-title' %}
|
|
@@ -55,16 +59,14 @@
|
|
|
55
59
|
</header>
|
|
56
60
|
{% endcapture %}
|
|
57
61
|
{% endif %}
|
|
58
|
-
|
|
59
|
-
{% include section.html id=slug class=class heading=heading content=section.content %}
|
|
60
|
-
|
|
62
|
+
{% include section.html id=slug class=class photo=photo heading=heading content=section.content %}
|
|
61
63
|
{% endfor %}
|
|
62
|
-
|
|
64
|
+
|
|
63
65
|
{% endunless %}
|
|
64
66
|
</div>
|
|
65
|
-
|
|
67
|
+
|
|
66
68
|
{% include footer.html %}
|
|
67
|
-
|
|
69
|
+
|
|
68
70
|
</body>
|
|
69
71
|
|
|
70
|
-
</html>
|
|
72
|
+
</html>
|
|
@@ -186,7 +186,8 @@
|
|
|
186
186
|
|
|
187
187
|
> :last-child,
|
|
188
188
|
> .container,
|
|
189
|
-
&:last-child
|
|
189
|
+
&:last-child,
|
|
190
|
+
> .container > :last-child {
|
|
190
191
|
margin-bottom: 0;
|
|
191
192
|
}
|
|
192
193
|
|
|
@@ -429,6 +430,7 @@
|
|
|
429
430
|
margin-bottom: 40px;
|
|
430
431
|
|
|
431
432
|
header {
|
|
433
|
+
color: #666;
|
|
432
434
|
background: #fff;
|
|
433
435
|
margin: 0;
|
|
434
436
|
padding: 1em 0 1em 0;
|
|
@@ -648,13 +650,21 @@
|
|
|
648
650
|
|
|
649
651
|
&.cover {
|
|
650
652
|
padding: 6em 0;
|
|
651
|
-
|
|
652
|
-
|
|
653
|
+
position: relative;
|
|
654
|
+
z-index: 0;
|
|
655
|
+
img.back {
|
|
656
|
+
position: absolute;
|
|
657
|
+
object-fit: cover;
|
|
658
|
+
width: 100%;
|
|
659
|
+
height: 100%;
|
|
660
|
+
left: 0;
|
|
661
|
+
top: 0;
|
|
662
|
+
z-index: -1;
|
|
663
|
+
}
|
|
653
664
|
}
|
|
654
665
|
|
|
655
666
|
&.shade-one {
|
|
656
667
|
background-color: #81918E;
|
|
657
|
-
background-image: url('../images/banner.jpg');
|
|
658
668
|
}
|
|
659
669
|
|
|
660
670
|
&.shade-two {
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-prologue
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- HTML5 UP
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2018-01-
|
|
12
|
+
date: 2018-01-11 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: jekyll
|