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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: e73318dca48bad376050a513f4690ef4df3889a1
4
- data.tar.gz: 866d2520bbd1bb9f9bc97cf7b7be64fb547ac1f4
3
+ metadata.gz: 73ba7b45bb64f40bbf9424c77c7c52057e86664a
4
+ data.tar.gz: be33a9f87253c8e441f5916c989d1f3229a8e9ae
5
5
  SHA512:
6
- metadata.gz: 39a2019de5c279715e5d433173ec74e420e5f56b05d595513abc13e1b0fc06958e635a90e4dc57a75111b31658584184d4dda0c5a561b58e5c444c2ec42a8c18
7
- data.tar.gz: cdf3999e1b9eb86527a27c793c2e2a6e4ab0021eff1a5f0a2673bd6d70f0227977574fba420892033328c3d9d78a2798917cd2fc56879fbe050b82fe3a88ed69
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. It will render all `_content` into a single html file and generate a navigation with jump links.
29
+ This is a Jekyll theme for publications, sort of like a book.
30
30
 
31
- Because of that this theme only has one layout, `home`, to be used in your `index.md` like so:
31
+ It offers two layouts, `home` and `page`.
32
32
 
33
- ``` yaml
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
- For the layout to find all your Markdown files, put them into `_content` and numerate the filenames and folders for Jekyll to keep the order consistent. E.g:
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
- `content` is a [collection](https://jekyllrb.com/docs/collections/), in case you were wondering.
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
- # path to the publication as pdf
63
- pub:
64
- pdf: /fake/link/to.pdf
65
- # were to link back to
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:
@@ -1,5 +1,5 @@
1
1
  <header class="header" id="menutoggle">
2
- <a href="#content" class="show-on-focus skip">Zum Inhalt skippen</a>
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
- {% for page in site.content %}
27
- {% assign frags = page.path | split: "/" %}
28
- <li class="{% if frags.size == 2 %}toplevel{% else %}sublevel{% endif %}">
29
- <a href="#{{ page.title | url_encode}}">{{ page.title }}</a>
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 }}"><- {{ site.mainpage.label }}</a></p>
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>
@@ -12,8 +12,5 @@
12
12
  {{ content }}
13
13
  </div>
14
14
  </main>
15
-
16
- {%- include footer.html -%}
17
-
18
15
  </body>
19
16
  </html>
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
- {% if site.pub and site.pub.pdf %}
17
- <a href="{{ site.pub.pdf }}" class="button is-link is-uppercase">
18
- <span>Download PDF</span>
19
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
20
- width="20px" height="20px" class="icon-download">
21
- <title>download icon</title>
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>
@@ -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: .4em
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: 20px
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.1.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-10 00:00:00.000000000 Z
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