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 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