okf-pub-theme 0.1.0 → 0.2.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.
- checksums.yaml +4 -4
- data/README.md +29 -23
- data/_includes/header.html +21 -7
- data/_includes/next_chapter.html +41 -0
- data/_layouts/default.html +0 -3
- data/_layouts/home.html +29 -32
- data/_layouts/page.html +27 -0
- data/_sass/_header.sass +41 -2
- data/_sass/_helpers.sass +23 -5
- data/_sass/_main.sass +39 -2
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 73ba7b45bb64f40bbf9424c77c7c52057e86664a
|
4
|
+
data.tar.gz: be33a9f87253c8e441f5916c989d1f3229a8e9ae
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fbc12d0ad879b548a2475720c27d2aa29332938b4de824e96d3bad2e06c0f2d5953451d7a7ec5aad28c78fbaab1df8cfcfc769f549efb15b6a72e5b586372ca4
|
7
|
+
data.tar.gz: 2f2441cd401e7d6a21bb86fd17718d527c7acd4f31deb4b4a552479081dece5b7a43200657867a61a390db230e22539a64e2e80e2db24ecb34a648d40d75fafc
|
data/README.md
CHANGED
@@ -7,13 +7,13 @@ A Jekyll theme for online publications.
|
|
7
7
|
Add this line to your Jekyll site's `Gemfile`:
|
8
8
|
|
9
9
|
```ruby
|
10
|
-
gem "okf-pub"
|
10
|
+
gem "okf-pub-theme"
|
11
11
|
```
|
12
12
|
|
13
13
|
And add this line to your Jekyll site's `_config.yml`:
|
14
14
|
|
15
15
|
```yaml
|
16
|
-
theme: okf-pub
|
16
|
+
theme: okf-pub-theme
|
17
17
|
```
|
18
18
|
|
19
19
|
And then execute:
|
@@ -22,51 +22,57 @@ And then execute:
|
|
22
22
|
|
23
23
|
Or install it yourself as:
|
24
24
|
|
25
|
-
$ gem install okf-pub
|
25
|
+
$ gem install okf-pub-theme
|
26
26
|
|
27
27
|
## Usage
|
28
28
|
|
29
|
-
This is a Jekyll theme for publications
|
29
|
+
This is a Jekyll theme for publications, sort of like a book.
|
30
30
|
|
31
|
-
|
31
|
+
It offers two layouts, `home` and `page`.
|
32
32
|
|
33
|
-
|
33
|
+
`home` should be used for the landing page of your site, like the `index.md` on the top level like so:
|
34
|
+
|
35
|
+
``` md
|
34
36
|
---
|
35
37
|
layout: home
|
38
|
+
title: Landing page
|
36
39
|
---
|
37
40
|
```
|
41
|
+
Every other page that represents a page in the book gets layout `page`.
|
38
42
|
|
39
|
-
|
43
|
+
To ensure that Jekyll handles all pages in the correct order always, add the `chapter` key in the frontmatter and give it a continuous value. You can add it below the title.
|
40
44
|
|
41
|
-
|
42
|
-
- _content/
|
43
|
-
-- 1-intro.md
|
44
|
-
-- 2-overview.md
|
45
|
-
-- 3-sections/
|
46
|
-
---- 1-subsection.md
|
47
|
-
---- 2-subsection.md
|
48
|
-
-- 4-afterword.md
|
49
|
-
```
|
45
|
+
To see if a page is top or sub level in the main navigation, the theme will look at the permalink key in the front matter.
|
50
46
|
|
51
|
-
|
47
|
+
So a page should have the following keys:
|
48
|
+
|
49
|
+
``` yaml
|
50
|
+
---
|
51
|
+
layout: page
|
52
|
+
title: Introduction chapter or whatever
|
53
|
+
permalink: /introduction/
|
54
|
+
chapter: 1
|
55
|
+
---
|
56
|
+
```
|
52
57
|
|
53
58
|
There are a bunch of variables you should set in your config.yml to, as well.
|
54
59
|
This theme will use the following:
|
55
60
|
|
56
61
|
``` yaml
|
57
62
|
title: A title
|
58
|
-
author: Author
|
59
|
-
email: test@test.de
|
60
63
|
description: >
|
61
64
|
Description and teaser, used in a couple of places
|
62
|
-
#
|
63
|
-
|
64
|
-
|
65
|
-
|
65
|
+
# optional image for the landing page
|
66
|
+
main_image: path/to-image.png
|
67
|
+
# information for licenses in the footer
|
68
|
+
license:
|
69
|
+
holder: Open Knowledge Foundation Deutschland
|
70
|
+
license: License CC BY-SA 3.0
|
66
71
|
mainpage:
|
67
72
|
url: //your-actual-website.tld
|
68
73
|
label: Go back to the actual website
|
69
74
|
year: 2018
|
75
|
+
pdf: /fake/link/to.pdf
|
70
76
|
# used to generate project meta content
|
71
77
|
# these are the keys that will be looked for in the project.md files
|
72
78
|
chapter:
|
data/_includes/header.html
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
<header class="header" id="menutoggle">
|
2
|
-
<a href="#content" class="show-on-focus skip">Zum Inhalt
|
2
|
+
<a href="#content" class="show-on-focus skip">Zum Inhalt springen</a>
|
3
3
|
<div class="header__visible">
|
4
4
|
<div class="header__toggle">
|
5
5
|
<a href="#menutoggle" class="toggle burger" title="Menü ausklappen">
|
@@ -16,21 +16,35 @@
|
|
16
16
|
</a>
|
17
17
|
</div>
|
18
18
|
<div class="header__title">
|
19
|
-
<h2>{{ site.title }}</h2>
|
19
|
+
<h2><a href="/">{{ site.title }}</a></h2>
|
20
20
|
</div>
|
21
21
|
</div>
|
22
22
|
<div class="header__toggleble">
|
23
23
|
<nav class="header__nav">
|
24
24
|
<h2 class="header__nav-title is-size-5">Inhalt</h2>
|
25
25
|
<ol>
|
26
|
-
{%
|
27
|
-
{%
|
28
|
-
|
29
|
-
|
26
|
+
{% assign sorted_pages = site.pages | sort:"chapter" %}
|
27
|
+
{% for p in sorted_pages %}
|
28
|
+
{% if p.layout == 'page' %}
|
29
|
+
{% assign frags = p.path | split: "/" %}
|
30
|
+
<li class="{% if frags[1] == 'index.md' %}toplevel{% else %}sublevel{% endif %}
|
31
|
+
{% if page.url == p.permalink %}active{% endif %}">
|
32
|
+
<a href="{{ p.permalink }}">{{ p.title }}</a>
|
30
33
|
</li>
|
34
|
+
{% endif %}
|
31
35
|
{% endfor %}
|
32
36
|
</ol>
|
33
37
|
</nav>
|
34
|
-
<p class="header__footer"><a href="{{ site.mainpage.url }}"
|
38
|
+
<p class="header__footer"><a href="{{ site.mainpage.url }}">
|
39
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
|
40
|
+
width="18px" height="18px" class="icon-back-to">
|
41
|
+
<title>Arrow pointing left</title>
|
42
|
+
<path d="M10 50 H 80" fill="transparent" stroke="#112233"
|
43
|
+
stroke-width="7" stroke-linecap="square"/>
|
44
|
+
<path d="M40 25 L 8 50 L 40 75"
|
45
|
+
fill="transparent" stroke="#112233"
|
46
|
+
stroke-width="7" stroke-linecap="round"/>
|
47
|
+
</svg>
|
48
|
+
{{ site.mainpage.label }}</a></p>
|
35
49
|
</div>
|
36
50
|
</header>
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<aside class="main__next">
|
2
|
+
{% assign pages = site.pages | sort:"chapter" %}
|
3
|
+
{% assign found = 'false' %}
|
4
|
+
{% assign nextp = 'false' %}
|
5
|
+
{% for p in pages %}
|
6
|
+
{% if p.layout == 'page' %}
|
7
|
+
{% if found == 'true' %}
|
8
|
+
{% assign nextp = p %}
|
9
|
+
{% break %}
|
10
|
+
{% endif %}
|
11
|
+
{% if p.url == page.url %}
|
12
|
+
{% assign found = 'true' %}
|
13
|
+
{% endif %}
|
14
|
+
{% endif %}
|
15
|
+
{% endfor %}
|
16
|
+
|
17
|
+
{% if nextp != 'false' %}
|
18
|
+
<hr>
|
19
|
+
<a class="main__next__link" href="{{ nextp.url }}"
|
20
|
+
title="Zum nächsten Kapitel {{ nextp.title }}">
|
21
|
+
<p>
|
22
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
|
23
|
+
width="35px" height="35px" class="icon-next-chapter">
|
24
|
+
<title>Arrow pointing right</title>
|
25
|
+
<path d="M10 50 H 80" fill="transparent" stroke="#9d9d9d"
|
26
|
+
stroke-width="7" stroke-linecap="square"/>
|
27
|
+
<path d="M60 25 L 84 50 L 60 75"
|
28
|
+
fill="transparent" stroke="#9d9d9d"
|
29
|
+
stroke-width="7" stroke-linecap="round"/>
|
30
|
+
</svg>
|
31
|
+
</p>
|
32
|
+
<p class="main__next__chapter is-uppercase is-size-7">Nächstes Kapitel</p>
|
33
|
+
<h2 class="main__next__title is-size-3">{{ nextp.title }}</h2>
|
34
|
+
</a>
|
35
|
+
{% endif %}
|
36
|
+
{% if site.license %}
|
37
|
+
<hr>
|
38
|
+
<p class="main__next__license">{{ site.license.holder }} ·<br>
|
39
|
+
{{ site.license.license }}</p>
|
40
|
+
{% endif %}
|
41
|
+
</aside>
|
data/_layouts/default.html
CHANGED
data/_layouts/home.html
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
-
<section class="hero is-light is-fullheight">
|
5
|
+
<section class="hero is-light is-fullheight" style="{% if site.main_image %}background-image: url({{ site.main_image}}){% endif %}">
|
6
6
|
<div class="hero-body">
|
7
7
|
<div class="container">
|
8
8
|
<div class="colums">
|
@@ -13,40 +13,37 @@ layout: default
|
|
13
13
|
<h2 class="subtitle">
|
14
14
|
{{ site.description }}
|
15
15
|
</h2>
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
<path d="M15 84 H 85" fill="transparent" stroke="white" stroke-width="7"
|
23
|
-
stroke-linecap="square" />
|
24
|
-
<path d="M50 10 V 70" fill="transparent" stroke="white"
|
25
|
-
stroke-width="7" stroke-linecap="round" />
|
26
|
-
<path d="M25 50 L 50 70 L 75 50"
|
27
|
-
fill="transparent" stroke="white"
|
28
|
-
stroke-width="7" stroke-linecap="round"/>
|
29
|
-
</svg>
|
30
|
-
</a>
|
16
|
+
<div class="hero-actions">
|
17
|
+
{% assign first_pages = site.pages | sort:"chapter" %}
|
18
|
+
{% for p in first_pages %}
|
19
|
+
{% if p.layout == 'page' %}
|
20
|
+
{% assign firstp = p %}
|
21
|
+
{% break %}
|
31
22
|
{% endif %}
|
23
|
+
{% endfor %}
|
24
|
+
<a href="{{ firstp.permalink }}"
|
25
|
+
class="button is-link is-uppercase"
|
26
|
+
title="Kapitel {{ firstp.chapter }} {{firstp.title}}">
|
27
|
+
Zu Kapitel {{ firstp.chapter }}
|
28
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
|
29
|
+
width="20px" height="20px" class="icon-start">
|
30
|
+
<title>Arrow pointing right</title>
|
31
|
+
<path d="M20 50 H 80" fill="transparent" stroke="white"
|
32
|
+
stroke-width="7" stroke-linecap="square"/>
|
33
|
+
<path d="M60 30 L 84 50 L 60 70"
|
34
|
+
fill="transparent" stroke="white"
|
35
|
+
stroke-width="7" stroke-linecap="round"/>
|
36
|
+
</svg>
|
37
|
+
</a>
|
38
|
+
|
39
|
+
{% if site.mainpage.pdf %}
|
40
|
+
<a href="{{ site.mainpage.pdf }}" class="is-uppercase">
|
41
|
+
Download PDF
|
42
|
+
</a>
|
43
|
+
{% endif %}
|
44
|
+
</div>
|
32
45
|
</div>
|
33
46
|
</div>
|
34
47
|
</div>
|
35
48
|
</div>
|
36
49
|
</section>
|
37
|
-
<article>
|
38
|
-
{% for page in site.content %}
|
39
|
-
<section class="main columns">
|
40
|
-
<div class="main__img column is-half">
|
41
|
-
{% if page.visual %}
|
42
|
-
<img src="{{ page.visual.img}}"
|
43
|
-
alt="{{ page.visual.alt }}"
|
44
|
-
class="main__img__img">
|
45
|
-
{% endif%}
|
46
|
-
</div>
|
47
|
-
<div class="main__copy column is-half">
|
48
|
-
{% include chapters.html %}
|
49
|
-
</div>
|
50
|
-
</section>
|
51
|
-
{% endfor %}
|
52
|
-
</article>
|
data/_layouts/page.html
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<article>
|
6
|
+
<section class="main columns">
|
7
|
+
<div class="main__img column is-half">
|
8
|
+
{% if page.visual %}
|
9
|
+
<img src="{{ page.visual.img}}"
|
10
|
+
alt="{{ page.visual.alt }}"
|
11
|
+
class="main__img__img">
|
12
|
+
{% endif%}
|
13
|
+
|
14
|
+
{% if page.visuals %}
|
15
|
+
{% for vis in page.visuals %}
|
16
|
+
<img src="{{ vis.img }}" alt="{{ vis.alt }}" class="main__img__vis">
|
17
|
+
{% endfor %}
|
18
|
+
{% endif %}
|
19
|
+
</div>
|
20
|
+
<div class="main__copy column is-half">
|
21
|
+
<div class="main__copy__inner">
|
22
|
+
{% include chapters.html %}
|
23
|
+
</div>
|
24
|
+
{% include next_chapter.html %}
|
25
|
+
</div>
|
26
|
+
</section>
|
27
|
+
</article>
|
data/_sass/_header.sass
CHANGED
@@ -9,6 +9,12 @@
|
|
9
9
|
width: $header-space-left
|
10
10
|
counter-reset: ordered
|
11
11
|
|
12
|
+
a
|
13
|
+
color: $okf-font-1
|
14
|
+
&:hover,
|
15
|
+
&:active
|
16
|
+
color: $okf-blue
|
17
|
+
|
12
18
|
// this is the menu toggle logic
|
13
19
|
&:target
|
14
20
|
.header__toggleble
|
@@ -57,22 +63,46 @@
|
|
57
63
|
.header__nav
|
58
64
|
flex-grow: 1
|
59
65
|
padding: 1.2em $gap / 2 1em
|
66
|
+
li
|
67
|
+
position: relative
|
60
68
|
ol
|
61
69
|
list-style: none
|
62
70
|
.toplevel
|
63
71
|
&::before
|
64
72
|
counter-increment: ordered
|
65
73
|
content: counter(ordered)
|
66
|
-
margin-right: .
|
74
|
+
margin-right: .55rem
|
75
|
+
&.active,
|
76
|
+
&:hover,
|
77
|
+
&:active,
|
78
|
+
a
|
79
|
+
color: $okf-blue
|
80
|
+
&::before
|
81
|
+
color: $okf-blue
|
67
82
|
.sublevel
|
68
83
|
&::before
|
69
84
|
content: ""
|
85
|
+
position: absolute
|
86
|
+
top: 0
|
87
|
+
bottom: 0
|
88
|
+
margin: auto
|
70
89
|
display: inline-block
|
71
|
-
width:
|
90
|
+
width: 10px
|
72
91
|
height: 1px
|
73
92
|
vertical-align: middle
|
74
93
|
margin-right: 0.4em
|
75
94
|
background-color: $okf-font-2
|
95
|
+
transition: width 200ms ease
|
96
|
+
a
|
97
|
+
padding-left: 1.3rem
|
98
|
+
&.active,
|
99
|
+
&:hover,
|
100
|
+
&:active,
|
101
|
+
a
|
102
|
+
color: $okf-blue
|
103
|
+
&::before
|
104
|
+
width: 18px
|
105
|
+
background-color: $okf-blue
|
76
106
|
.sublevel + .toplevel
|
77
107
|
margin-top: 1.3rem
|
78
108
|
|
@@ -81,6 +111,15 @@
|
|
81
111
|
padding: 1.2em $gap / 2 1em
|
82
112
|
line-height: 1
|
83
113
|
border-top: 1px solid $okf-grey-2
|
114
|
+
.icon-back-to
|
115
|
+
vertical-align: middle
|
116
|
+
transition: transform 200ms ease
|
117
|
+
a:hover,
|
118
|
+
a:active
|
119
|
+
.icon-back-to
|
120
|
+
transform: translateX(-0.2em)
|
121
|
+
path
|
122
|
+
stroke: $okf-blue
|
84
123
|
|
85
124
|
.header__nav-title
|
86
125
|
margin-bottom: $gap / 2
|
data/_sass/_helpers.sass
CHANGED
@@ -1,8 +1,26 @@
|
|
1
|
-
.icon-download
|
2
|
-
display: inline-block
|
3
|
-
margin: 0 -0.1em 0 0.5em
|
4
|
-
|
5
|
-
|
6
1
|
.no-inner-margin
|
7
2
|
& >:first-child
|
8
3
|
margin-top: 0
|
4
|
+
|
5
|
+
.hero
|
6
|
+
background-size: cover
|
7
|
+
|
8
|
+
.hero-actions
|
9
|
+
a
|
10
|
+
display: inline-block
|
11
|
+
vertical-align: baseline
|
12
|
+
font-weight: 500
|
13
|
+
a.button
|
14
|
+
line-height: 1.8
|
15
|
+
&:hover,
|
16
|
+
&:active
|
17
|
+
.icon-start
|
18
|
+
transform: translateX(.2em)
|
19
|
+
a + a
|
20
|
+
margin-left: 1.3rem
|
21
|
+
color: $okf-blue !important
|
22
|
+
|
23
|
+
.icon-start
|
24
|
+
vertical-align: sub
|
25
|
+
margin-left: .3em
|
26
|
+
transition: transform 200ms ease
|
data/_sass/_main.sass
CHANGED
@@ -9,12 +9,26 @@ main
|
|
9
9
|
background-color: $okf-grey-1
|
10
10
|
.main__img__img
|
11
11
|
width: 100%
|
12
|
-
margin-top: 14.5rem
|
12
|
+
// margin-top: 14.5rem
|
13
13
|
|
14
14
|
.main + .main .main__chapter
|
15
15
|
margin-top: 5rem
|
16
16
|
|
17
|
+
.main__img__vis
|
18
|
+
@media (max-width: $tablet)
|
19
|
+
width: 100%
|
20
|
+
@media (min-width: $tablet)
|
21
|
+
&:not(:first-of-type)
|
22
|
+
margin-top: -2rem
|
23
|
+
&:nth-of-type(odd)
|
24
|
+
float: right
|
25
|
+
|
26
|
+
.main__copy__inner
|
27
|
+
max-width: 40rem
|
28
|
+
margin: auto
|
29
|
+
|
17
30
|
.main__copy
|
31
|
+
min-height: 100vh
|
18
32
|
padding: 3rem 4em 0em 3em
|
19
33
|
background-color: white
|
20
34
|
|
@@ -58,4 +72,27 @@ main
|
|
58
72
|
padding-left: 2em
|
59
73
|
|
60
74
|
hr
|
61
|
-
margin: 3rem 0 5rem
|
75
|
+
margin: 3rem 0 3.5rem
|
76
|
+
|
77
|
+
.main__next
|
78
|
+
text-align: center
|
79
|
+
|
80
|
+
.main__next__chapter
|
81
|
+
margin: 1rem 0 0 0 !important
|
82
|
+
color: $okf-grey-3 !important
|
83
|
+
font-weight: 500
|
84
|
+
|
85
|
+
.main__next__link
|
86
|
+
display: block
|
87
|
+
color: $okf-font-1
|
88
|
+
&:hover,
|
89
|
+
&:active
|
90
|
+
color: $okf-blue
|
91
|
+
.icon-next-chapter
|
92
|
+
transform: translateX(0.2em)
|
93
|
+
|
94
|
+
.main__next__license
|
95
|
+
margin-bottom: 2.5rem
|
96
|
+
|
97
|
+
.icon-next-chapter
|
98
|
+
transition: transform 200ms ease
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: okf-pub-theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- lislis
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2019-05-
|
11
|
+
date: 2019-05-17 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -96,9 +96,11 @@ files:
|
|
96
96
|
- _includes/head.html
|
97
97
|
- _includes/header.html
|
98
98
|
- _includes/matomo.html
|
99
|
+
- _includes/next_chapter.html
|
99
100
|
- _includes/outcomes.html
|
100
101
|
- _layouts/default.html
|
101
102
|
- _layouts/home.html
|
103
|
+
- _layouts/page.html
|
102
104
|
- _sass/_a11y.sass
|
103
105
|
- _sass/_bulma-0.7.4/CHANGELOG.md
|
104
106
|
- _sass/_bulma-0.7.4/LICENSE
|