okf-pub-theme 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|