jekyll-theme-isotc211 0.3.1 → 0.4
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 +5 -5
- data/_config.yml +19 -7
- data/_layouts/base-page.html +30 -0
- data/_layouts/default.html +76 -21
- data/_layouts/page.html +1 -3
- data/_layouts/post.html +2 -6
- data/_layouts/posts.html +10 -0
- data/_sass/adoc-markup.scss +63 -0
- data/_sass/expandable-nav.scss +187 -0
- data/_sass/home.scss +1 -1
- data/_sass/jekyll-theme-isotc211.scss +6 -2
- data/_sass/main.scss +187 -46
- data/_sass/offsets.scss +6 -1
- data/_sass/post.scss +0 -19
- data/_sass/posts.scss +18 -0
- data/assets/nav.js +125 -0
- metadata +8 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 4ab566731d8ba5fced940a432af47990dc307a05
|
|
4
|
+
data.tar.gz: a03ffd378fcfb9d05428431c39dd851d59fe5318
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1d2ed0e30ef9279621f90b833469f0e5b0b2d4f5471635de3bb2615af99edbe78453c19e1657043d2fac44469c32c7dc0c4aeda00ea482a0e343ace70a9f8565
|
|
7
|
+
data.tar.gz: a740eb6651f60153fdf693edd4fbb26651b9ba05c52f4236ec91c13851e20d0a6810c25f760ec6708bf468f80229d1ca3aa473fad78a6ae28fbbb57a2c516e4a
|
data/_config.yml
CHANGED
|
@@ -22,15 +22,27 @@ permalink: /blog/:month-:day-:year/:title/
|
|
|
22
22
|
# - url: https://www.facebook.com/groups/…
|
|
23
23
|
# - url: https://www.linkedin.com/groups/…
|
|
24
24
|
|
|
25
|
+
# committee:
|
|
26
|
+
# id: <number>
|
|
27
|
+
# name: <full name>
|
|
28
|
+
# home: <committee’s external home page URL>
|
|
29
|
+
# links:
|
|
30
|
+
# - url: /about
|
|
31
|
+
# title: About
|
|
32
|
+
# - url: /strategic-policy
|
|
33
|
+
# title: Strategic Policy Statement
|
|
34
|
+
# - url: /faq
|
|
35
|
+
# title: FAQ
|
|
36
|
+
|
|
25
37
|
# Main site navigation.
|
|
26
|
-
# Layouts and pages can
|
|
38
|
+
# Layouts and pages can specify priority nav items
|
|
39
|
+
# using frontmatter key nav_items
|
|
40
|
+
# pointing to an array listing nav item IDs.
|
|
27
41
|
nav:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
url: /about
|
|
33
|
-
title: About
|
|
42
|
+
items:
|
|
43
|
+
- id: posts
|
|
44
|
+
url: /posts/
|
|
45
|
+
title: News & Articles
|
|
34
46
|
|
|
35
47
|
# Footer navigation
|
|
36
48
|
footer_nav:
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
# “Normal” page with header.
|
|
3
|
+
layout: default
|
|
4
|
+
---
|
|
5
|
+
{% assign title = page.title | default: page.title_html | default: layout.title | default: layout.title_html %}
|
|
6
|
+
{% assign parent_title = page.parent_title | default: layout.parent_title %}
|
|
7
|
+
{% if title or parent_title %}
|
|
8
|
+
<header>
|
|
9
|
+
{% if parent_title %}
|
|
10
|
+
<p class="section-title">{{ parent_title }}</p>
|
|
11
|
+
{% endif %}
|
|
12
|
+
|
|
13
|
+
{% if title %}
|
|
14
|
+
<h1>{{ title }}</h1>
|
|
15
|
+
{% endif %}
|
|
16
|
+
|
|
17
|
+
{% if page.date or page.version %}
|
|
18
|
+
<div class="meta">
|
|
19
|
+
{% if page.date %}
|
|
20
|
+
<p>{{ page.date | date: '%B %d, %Y' }}
|
|
21
|
+
{% endif %}
|
|
22
|
+
{% if page.version %}
|
|
23
|
+
<p>Versoin: {{ page.version }}
|
|
24
|
+
{% endif %}
|
|
25
|
+
</div>
|
|
26
|
+
{% endif %}
|
|
27
|
+
</header>
|
|
28
|
+
{% endif %}
|
|
29
|
+
|
|
30
|
+
{{ content }}
|
data/_layouts/default.html
CHANGED
|
@@ -4,39 +4,84 @@
|
|
|
4
4
|
{% include head.html %}
|
|
5
5
|
|
|
6
6
|
<body class="{{ page.bodyClass | default: layout.bodyClass }}">
|
|
7
|
-
<header>
|
|
7
|
+
<header class="{% if site.has_brand_name %}brand{% endif %}">
|
|
8
8
|
<div class="site-headline">
|
|
9
9
|
<div class="parent-org-reference">
|
|
10
|
-
<a href="/" class="logo-link"
|
|
10
|
+
<a href="/" class="logo-link">
|
|
11
|
+
<img src="{{ "/assets/logo-iso-noninverted.svg" | relative_url }}" alt="ISO">
|
|
12
|
+
</a>
|
|
11
13
|
</div>
|
|
12
14
|
|
|
13
15
|
<div class="site-title">
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
<span class="committee-widget">
|
|
17
|
+
<span class="widget-group">
|
|
18
|
+
<span class="widget-item parent-org-reference">
|
|
19
|
+
ISO
|
|
20
|
+
</span>
|
|
21
|
+
<span class="widget-item committee-id">
|
|
22
|
+
TC {{ site.committee.id }}
|
|
23
|
+
</span>
|
|
24
|
+
<span class="widget-item committee-name">
|
|
25
|
+
{{ site.committee.name }}
|
|
26
|
+
</span>
|
|
18
27
|
</span>
|
|
19
28
|
|
|
20
|
-
|
|
29
|
+
{% if site.committee.home or site.committee.links %}
|
|
30
|
+
<span class="widget-group committee-menu">
|
|
31
|
+
{% if site.committee.home %}
|
|
32
|
+
<a href="{{ site.committee.home }}" class="widget-item home"
|
|
33
|
+
title="Committee home page">
|
|
34
|
+
<i class="fas fa-home"></i>
|
|
35
|
+
</a>
|
|
36
|
+
{% endif %}
|
|
21
37
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
38
|
+
{% if site.committee.links %}
|
|
39
|
+
{% for link in site.committee.links %}
|
|
40
|
+
<a href="{{ link.url }}" class="widget-item">
|
|
41
|
+
{{ link.title }}
|
|
42
|
+
</a>
|
|
43
|
+
{% endfor %}
|
|
44
|
+
{% endif %}
|
|
25
45
|
</span>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
46
|
+
{% endif %}
|
|
47
|
+
</span>
|
|
48
|
+
|
|
49
|
+
<h1 class="title">
|
|
50
|
+
<a href="/">{{ site.title_html | default: site.title }}</a>
|
|
51
|
+
</h1>
|
|
31
52
|
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
{% assign nav_items = page.nav_items | default: layout.nav_items %}
|
|
56
|
+
{% if nav_items %}
|
|
57
|
+
<nav class="priority-nav">
|
|
58
|
+
<ul>
|
|
59
|
+
{% for item in nav_items %}
|
|
60
|
+
{% assign item_data = site.nav.items | where_exp: "nav_item", "nav_item.id == item" | first %}
|
|
61
|
+
{% if item_data %}
|
|
62
|
+
<li>
|
|
63
|
+
<a href="{{ item_data.url }}">{{ item_data.title }}</a>
|
|
64
|
+
</li>
|
|
65
|
+
{% endif %}
|
|
66
|
+
{% endfor %}
|
|
67
|
+
</ul>
|
|
68
|
+
</nav>
|
|
69
|
+
{% endif %}
|
|
32
70
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
71
|
+
{% if site.nav %}
|
|
72
|
+
<nav class="expandable-nav">
|
|
73
|
+
<ul>
|
|
74
|
+
{% for item in site.nav.items %}
|
|
75
|
+
<li>
|
|
76
|
+
<a href="{{ item.url }}">{{ item.title }}</a>
|
|
77
|
+
{% if item.description %}
|
|
78
|
+
<p class="desc">{{ item.description }}</p>
|
|
79
|
+
{% endif %}
|
|
80
|
+
</li>
|
|
37
81
|
{% endfor %}
|
|
38
|
-
|
|
39
|
-
|
|
82
|
+
</ul>
|
|
83
|
+
</nav>
|
|
84
|
+
{% endif %}
|
|
40
85
|
</header>
|
|
41
86
|
|
|
42
87
|
<main>
|
|
@@ -91,5 +136,15 @@
|
|
|
91
136
|
</footer>
|
|
92
137
|
|
|
93
138
|
{% include script.html %}
|
|
139
|
+
|
|
140
|
+
<template id="expandableNavTrigger">
|
|
141
|
+
<button class="nav-expand-trigger">
|
|
142
|
+
<i class="fas fa-bars"></i>
|
|
143
|
+
<i class="fas fa-times"></i>
|
|
144
|
+
</button>
|
|
145
|
+
</template>
|
|
146
|
+
|
|
147
|
+
<script src="{{ "/assets/nav.js" | relative_url }}"></script>
|
|
148
|
+
|
|
94
149
|
</body>
|
|
95
150
|
</html>
|
data/_layouts/page.html
CHANGED
data/_layouts/post.html
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
---
|
|
2
|
-
layout:
|
|
3
|
-
nav_items: [home, about]
|
|
2
|
+
layout: base-page
|
|
4
3
|
bodyClass: post
|
|
4
|
+
parent_title: Articles
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
<h1>{{ page.title_html | default: page.title }}</h1>
|
|
8
|
-
|
|
9
|
-
<p class="meta">{{ page.date | date: '%B %d, %Y' }}</p>
|
|
10
|
-
|
|
11
7
|
{% if page.illustration %}
|
|
12
8
|
<div class="illustration">
|
|
13
9
|
<img src="{{ page.illustration | relative_url }}">
|
data/_layouts/posts.html
ADDED
data/_sass/adoc-markup.scss
CHANGED
|
@@ -1,6 +1,63 @@
|
|
|
1
1
|
// Asciidoctor-generated markup
|
|
2
2
|
// ============================
|
|
3
3
|
|
|
4
|
+
@mixin padded-code-snippet() {
|
|
5
|
+
padding: 0 .75em;
|
|
6
|
+
margin: 0 .2em;
|
|
7
|
+
background: $codeListingBackgroundColor;
|
|
8
|
+
|
|
9
|
+
border: 1px dashed $codeListingBorderColor;
|
|
10
|
+
border-radius: .25em;
|
|
11
|
+
|
|
12
|
+
font-size: 15px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin padded-code-snippet--reset() {
|
|
16
|
+
padding: 0;
|
|
17
|
+
margin: 0;
|
|
18
|
+
background: transparent;
|
|
19
|
+
border: 0;
|
|
20
|
+
border-radius: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin code-snippet-container() {
|
|
24
|
+
overflow-x: scroll;
|
|
25
|
+
overflow-y: hidden;
|
|
26
|
+
line-height: 1.2;
|
|
27
|
+
|
|
28
|
+
@include padded-code-snippet();
|
|
29
|
+
padding-top: .5em;
|
|
30
|
+
padding-bottom: .5em;
|
|
31
|
+
|
|
32
|
+
border-width: 0 0 0 1px;
|
|
33
|
+
border-radius: 0 .25em .25em 0;
|
|
34
|
+
|
|
35
|
+
margin-top: 1em;
|
|
36
|
+
margin-bottom: 1em;
|
|
37
|
+
|
|
38
|
+
margin-left: -.1em;
|
|
39
|
+
|
|
40
|
+
> code {
|
|
41
|
+
// Avoid bad formatting in case of <code> element nested
|
|
42
|
+
// inside a <pre>
|
|
43
|
+
@include padded-code-snippet--reset();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin code-snippet() {
|
|
48
|
+
color: lighten($textColor, 24);
|
|
49
|
+
|
|
50
|
+
@include padded-code-snippet();
|
|
51
|
+
margin-top: -1px;
|
|
52
|
+
margin-bottom: -1px;
|
|
53
|
+
|
|
54
|
+
code {
|
|
55
|
+
// Avoid bad formatting in case of <code> elements nested
|
|
56
|
+
// into each other (possible with adoc output)
|
|
57
|
+
@include padded-code-snippet--reset();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
4
61
|
@mixin asciidoc-markup() {
|
|
5
62
|
|
|
6
63
|
// Code listing
|
|
@@ -8,6 +65,12 @@
|
|
|
8
65
|
.paragraph code {
|
|
9
66
|
word-break: break-word;
|
|
10
67
|
}
|
|
68
|
+
code {
|
|
69
|
+
@include code-snippet();
|
|
70
|
+
}
|
|
71
|
+
pre {
|
|
72
|
+
@include code-snippet-container();
|
|
73
|
+
}
|
|
11
74
|
|
|
12
75
|
// Generic block title
|
|
13
76
|
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
// This style is enabled by nav.js.
|
|
2
|
+
|
|
3
|
+
$expandTransitionTime: .08s;
|
|
4
|
+
$expandTransitionFunc: ease-out;
|
|
5
|
+
|
|
6
|
+
body.with-expandable-nav {
|
|
7
|
+
> header {
|
|
8
|
+
will-change: background, opacity, box-shadow, height;
|
|
9
|
+
transition:
|
|
10
|
+
color $expandTransitionTime $expandTransitionFunc 0s,
|
|
11
|
+
background $expandTransitionTime $expandTransitionFunc 0s,
|
|
12
|
+
padding-bottom $expandTransitionTime $expandTransitionFunc 0s,
|
|
13
|
+
box-shadow $expandTransitionTime $expandTransitionFunc 0s,
|
|
14
|
+
height $expandTransitionTime $expandTransitionFunc 0s;
|
|
15
|
+
|
|
16
|
+
position: relative;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
|
|
19
|
+
padding-bottom: 0; // JS relies on this value
|
|
20
|
+
|
|
21
|
+
.committee-widget {
|
|
22
|
+
.widget-item {
|
|
23
|
+
will-change: color, background, border;
|
|
24
|
+
transition:
|
|
25
|
+
color $expandTransitionTime $expandTransitionFunc 0s,
|
|
26
|
+
background $expandTransitionTime $expandTransitionFunc 0s,
|
|
27
|
+
border $expandTransitionTime $expandTransitionFunc 0s;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media screen and (max-width: $bigscreenBreakpoint - 1) {
|
|
31
|
+
.committee-name {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.widget-group.committee-menu {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> main {
|
|
43
|
+
will-change: transform;
|
|
44
|
+
transition:
|
|
45
|
+
transform $expandTransitionTime $expandTransitionFunc;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
nav.expandable-nav {
|
|
49
|
+
transition: none;
|
|
50
|
+
opacity: 0;
|
|
51
|
+
display: block;
|
|
52
|
+
position: absolute;
|
|
53
|
+
bottom: 20px;
|
|
54
|
+
display: none;
|
|
55
|
+
|
|
56
|
+
ul {
|
|
57
|
+
padding: 0;
|
|
58
|
+
margin: 0;
|
|
59
|
+
list-style: none;
|
|
60
|
+
|
|
61
|
+
li {
|
|
62
|
+
padding: 0;
|
|
63
|
+
margin-bottom: 1em;
|
|
64
|
+
|
|
65
|
+
&:last-child {
|
|
66
|
+
margin-bottom: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
p.desc {
|
|
70
|
+
margin: 0;
|
|
71
|
+
font-size: 80%;
|
|
72
|
+
opacity: .8;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
76
|
+
margin-bottom: 0;
|
|
77
|
+
margin-right: 1em;
|
|
78
|
+
margin-left: 2px;
|
|
79
|
+
max-width: 10em;
|
|
80
|
+
padding-left: 1em;
|
|
81
|
+
border-left: 1px solid white;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-flow: row nowrap;
|
|
88
|
+
align-items: stretch;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
93
|
+
left: 15vw;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
button.nav-expand-trigger {
|
|
98
|
+
border: none;
|
|
99
|
+
background: none;
|
|
100
|
+
color: white;
|
|
101
|
+
|
|
102
|
+
flex-flow: column nowrap;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
height: 1.8em;
|
|
106
|
+
width: $stripeWidth;
|
|
107
|
+
display: flex;
|
|
108
|
+
|
|
109
|
+
position: absolute;
|
|
110
|
+
left: 0;
|
|
111
|
+
top: .5em;
|
|
112
|
+
|
|
113
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
114
|
+
top: 3.3em;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.fa-times { display: none; }
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&.with-expanded-nav {
|
|
121
|
+
> header {
|
|
122
|
+
box-shadow: 0 5px 50px -20px rgba(black, 0.4);
|
|
123
|
+
background: $isoTCColor;
|
|
124
|
+
color: white;
|
|
125
|
+
padding-bottom: 1.5em;
|
|
126
|
+
z-index: 2;
|
|
127
|
+
|
|
128
|
+
.parent-org-reference {
|
|
129
|
+
.logo-link img {
|
|
130
|
+
-webkit-filter: invert(1);
|
|
131
|
+
filter: invert(1);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
nav.priority-nav {
|
|
136
|
+
opacity: 0;
|
|
137
|
+
}
|
|
138
|
+
nav.expandable-nav {
|
|
139
|
+
will-change: opacity;
|
|
140
|
+
transition: opacity $expandTransitionTime $expandTransitionFunc;
|
|
141
|
+
transition-delay: 0s;
|
|
142
|
+
display: block;
|
|
143
|
+
opacity: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.committee-widget {
|
|
147
|
+
.widget-item {
|
|
148
|
+
background: none;
|
|
149
|
+
box-shadow: none;
|
|
150
|
+
border: 1px solid white;
|
|
151
|
+
|
|
152
|
+
&.committee-id {
|
|
153
|
+
background: white;
|
|
154
|
+
color: $isoTCColor;
|
|
155
|
+
}
|
|
156
|
+
&.parent-org-reference {
|
|
157
|
+
background: #e30b1f;
|
|
158
|
+
border-color: white;
|
|
159
|
+
color: white;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
.committee-name {
|
|
163
|
+
display: inline;
|
|
164
|
+
flex-basis: 100%;
|
|
165
|
+
}
|
|
166
|
+
.widget-group {
|
|
167
|
+
flex-basis: 100%;
|
|
168
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
169
|
+
flex-basis: unset;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
.widget-group.committee-menu {
|
|
173
|
+
display: flex;
|
|
174
|
+
|
|
175
|
+
.widget-item {
|
|
176
|
+
background: rgba(black, 0.2);
|
|
177
|
+
border-color: rgba(black, 0.2);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
button.nav-expand-trigger {
|
|
183
|
+
.fa-times { display: inline-block; }
|
|
184
|
+
.fa-bars { display: none; }
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
data/_sass/home.scss
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
$bodyFontFamily: Helvetica, sans-serif;
|
|
4
4
|
$bigscreenBreakpoint: 900px;
|
|
5
|
-
$
|
|
5
|
+
$widescreenBreakpoint: 1200px;
|
|
6
6
|
$logoSize: 100px;
|
|
7
|
+
$logoOffset: $logoSize + 12px;
|
|
7
8
|
|
|
8
9
|
$isoTCColor: #0f6db3;
|
|
9
10
|
$textColor: black;
|
|
@@ -12,7 +13,8 @@ $warningColor: red;
|
|
|
12
13
|
$importantColor: orange;
|
|
13
14
|
$accentColor: $isoTCColor;
|
|
14
15
|
|
|
15
|
-
$codeListingBorderColor:
|
|
16
|
+
$codeListingBorderColor: lighten($textColor, 70);
|
|
17
|
+
$codeListingBackgroundColor: rgba($textColor, 0.03);
|
|
16
18
|
|
|
17
19
|
$mainShadowColor: rgba(black, 0.4);
|
|
18
20
|
$headerFooterBackgroundColor: rgba(black, 0.05);
|
|
@@ -74,5 +76,7 @@ html {
|
|
|
74
76
|
@import 'adoc-markup';
|
|
75
77
|
@import 'offsets';
|
|
76
78
|
@import 'main';
|
|
79
|
+
@import 'expandable-nav';
|
|
77
80
|
@import 'home';
|
|
78
81
|
@import 'post';
|
|
82
|
+
@import 'posts';
|
data/_sass/main.scss
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
|
+
a {
|
|
2
|
+
text-decoration: none;
|
|
3
|
+
color: $textColor;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
body > main a {
|
|
7
|
+
text-decoration: underline;
|
|
8
|
+
color: $linkColor;
|
|
9
|
+
}
|
|
10
|
+
|
|
1
11
|
// Main layout
|
|
2
12
|
// ===========
|
|
3
13
|
|
|
14
|
+
$stripeWidth: 30px;
|
|
15
|
+
|
|
4
16
|
body > main {
|
|
5
17
|
font-size: 18px;
|
|
6
18
|
@include asciidoc-markup();
|
|
@@ -38,7 +50,7 @@ body {
|
|
|
38
50
|
align-items: stretch;
|
|
39
51
|
margin-bottom: -$footerH;
|
|
40
52
|
|
|
41
|
-
background: linear-gradient(90deg, $isoTCColor
|
|
53
|
+
background: linear-gradient(90deg, $isoTCColor $stripeWidth, transparent 20px);
|
|
42
54
|
|
|
43
55
|
> .awards {
|
|
44
56
|
color: grey;
|
|
@@ -57,13 +69,13 @@ body {
|
|
|
57
69
|
font-size: 90%;
|
|
58
70
|
line-height: 1.6;
|
|
59
71
|
|
|
60
|
-
background: $headerFooterBackgroundColor
|
|
61
|
-
box-shadow: 0
|
|
72
|
+
background: $headerFooterBackgroundColor;
|
|
73
|
+
box-shadow: 0 10px 20px -20px $mainShadowColor inset;
|
|
62
74
|
|
|
63
75
|
padding-top: 1em;
|
|
64
76
|
|
|
65
77
|
.logo {
|
|
66
|
-
width: $
|
|
78
|
+
width: $footerLogoSize + 12px;
|
|
67
79
|
margin-left: 0;
|
|
68
80
|
display: inline-block;
|
|
69
81
|
|
|
@@ -114,7 +126,7 @@ body {
|
|
|
114
126
|
|
|
115
127
|
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
116
128
|
display: flex;
|
|
117
|
-
flex-flow: row
|
|
129
|
+
flex-flow: row nowrap;
|
|
118
130
|
align-items: center;
|
|
119
131
|
justify-content: flex-end;
|
|
120
132
|
|
|
@@ -130,13 +142,17 @@ body {
|
|
|
130
142
|
> header {
|
|
131
143
|
flex-shrink: 0;
|
|
132
144
|
padding-top: .5em;
|
|
133
|
-
padding-bottom: .5em;
|
|
134
145
|
|
|
135
146
|
background: $headerFooterBackgroundColor;
|
|
136
|
-
box-shadow: 0 -
|
|
147
|
+
box-shadow: 0 -10px 20px -20px $mainShadowColor inset;
|
|
137
148
|
|
|
138
149
|
.site-headline {
|
|
139
|
-
|
|
150
|
+
margin: 0;
|
|
151
|
+
padding: 0;
|
|
152
|
+
font-size: 100%;
|
|
153
|
+
font-weight: normal;
|
|
154
|
+
|
|
155
|
+
> .parent-org-reference {
|
|
140
156
|
display: none;
|
|
141
157
|
|
|
142
158
|
flex-flow: column nowrap;
|
|
@@ -163,52 +179,103 @@ body {
|
|
|
163
179
|
display: flex;
|
|
164
180
|
flex-flow: column nowrap;
|
|
165
181
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
font-size: 170%;
|
|
182
|
+
.title {
|
|
183
|
+
font-size: 150%;
|
|
184
|
+
font-weight: normal;
|
|
170
185
|
margin: 0;
|
|
171
|
-
margin-
|
|
172
|
-
margin-bottom: .2em;
|
|
186
|
+
margin-bottom: 1em;
|
|
173
187
|
margin-left: -.12em; // Visual alignment of capital G
|
|
174
|
-
letter-spacing: -.
|
|
175
|
-
|
|
176
|
-
a {
|
|
177
|
-
text-decoration: none;
|
|
178
|
-
color: $textColor;
|
|
179
|
-
}
|
|
188
|
+
letter-spacing: -.025em;
|
|
180
189
|
}
|
|
181
190
|
|
|
182
|
-
|
|
191
|
+
.committee-widget {
|
|
192
|
+
font-size: 80%;
|
|
193
|
+
line-height: 1.5;
|
|
183
194
|
margin: 0;
|
|
184
|
-
|
|
185
|
-
padding-bottom: 1em;
|
|
186
|
-
flex: 1;
|
|
195
|
+
padding-bottom: 1.5em;
|
|
187
196
|
|
|
188
|
-
|
|
189
|
-
|
|
197
|
+
display: flex;
|
|
198
|
+
flex-flow: row wrap;
|
|
199
|
+
align-items: center;
|
|
200
|
+
|
|
201
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
202
|
+
margin-top: 3.3em;
|
|
190
203
|
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
204
|
|
|
194
|
-
|
|
195
|
-
|
|
205
|
+
.widget-group {
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-flow: row wrap;
|
|
208
|
+
margin-bottom: 3px;
|
|
196
209
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
210
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
211
|
+
flex-flow: row nowrap;
|
|
212
|
+
margin-bottom: 0;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.widget-item {
|
|
217
|
+
margin-right: 2px;
|
|
218
|
+
margin-bottom: 2px;
|
|
219
|
+
padding: .3em .6em;
|
|
220
|
+
box-shadow: 1px 1px 2px rgba(black, 0.1);
|
|
221
|
+
border-width: 1px;
|
|
222
|
+
border-style: solid;
|
|
223
|
+
|
|
224
|
+
background: lighten(desaturate($isoTCColor, 50), 20);
|
|
225
|
+
border-color: lighten(desaturate($isoTCColor, 50), 20);
|
|
226
|
+
color: white;
|
|
227
|
+
|
|
228
|
+
box-sizing: border-box;
|
|
229
|
+
|
|
230
|
+
@media screen and (max-width: $bigscreenBreakpoint) {
|
|
231
|
+
margin-right: -1px;
|
|
232
|
+
margin-bottom: -1px;
|
|
233
|
+
flex: 1;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
203
236
|
|
|
204
|
-
|
|
237
|
+
.committee-id {
|
|
238
|
+
padding-left: .7em;
|
|
239
|
+
// Corrects visual padding inconsistency of unclear origin
|
|
205
240
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
241
|
+
white-space: nowrap;
|
|
242
|
+
background: black;
|
|
243
|
+
border-color: black;
|
|
244
|
+
font-weight: bold;
|
|
245
|
+
color: white;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.committee-menu {
|
|
249
|
+
flex-flow: row wrap;
|
|
250
|
+
|
|
251
|
+
.widget-item {
|
|
252
|
+
@media screen and (max-width: $bigscreenBreakpoint) {
|
|
253
|
+
flex-basis: 50%;
|
|
254
|
+
&.home {
|
|
255
|
+
flex: 0;
|
|
256
|
+
&:only-child {
|
|
257
|
+
flex: 1;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.widget-item.parent-org-reference {
|
|
265
|
+
display: inline;
|
|
266
|
+
background: #e30b1f;
|
|
267
|
+
border-color: #e30b1f;
|
|
211
268
|
font-weight: bold;
|
|
269
|
+
|
|
270
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
271
|
+
display: none;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.committee-name {
|
|
276
|
+
background: $isoTCColor;
|
|
277
|
+
border-color: $isoTCColor;
|
|
278
|
+
color: white;
|
|
212
279
|
}
|
|
213
280
|
}
|
|
214
281
|
}
|
|
@@ -216,20 +283,63 @@ body {
|
|
|
216
283
|
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
217
284
|
display: flex;
|
|
218
285
|
flex-flow: row nowrap;
|
|
286
|
+
align-items: flex-start;
|
|
219
287
|
|
|
220
|
-
.parent-org-reference {
|
|
288
|
+
> .parent-org-reference {
|
|
221
289
|
display: flex;
|
|
222
290
|
}
|
|
223
291
|
}
|
|
224
|
-
}
|
|
225
292
|
|
|
226
|
-
|
|
227
|
-
.site-headline {
|
|
293
|
+
@media screen and (max-width: $bigscreenBreakpoint) {
|
|
228
294
|
.parent-org-reference .logo-link img {
|
|
229
295
|
visibility: hidden;
|
|
230
296
|
}
|
|
231
297
|
}
|
|
232
298
|
}
|
|
299
|
+
|
|
300
|
+
&.brand {
|
|
301
|
+
.site-headline {
|
|
302
|
+
.title {
|
|
303
|
+
font-size: 220%;
|
|
304
|
+
margin-bottom: .5em;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
> header > nav.priority-nav {
|
|
311
|
+
ul {
|
|
312
|
+
padding: 0;
|
|
313
|
+
margin: 0;
|
|
314
|
+
margin-right: -$logoOffset;
|
|
315
|
+
|
|
316
|
+
white-space: nowrap;
|
|
317
|
+
overflow: hidden;
|
|
318
|
+
text-overflow: ellipsis;
|
|
319
|
+
|
|
320
|
+
padding-bottom: 1em;
|
|
321
|
+
|
|
322
|
+
@media screen and (min-width: $bigscreenBreakpoint) {
|
|
323
|
+
margin-left: $logoOffset;
|
|
324
|
+
margin-right: 0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
li {
|
|
328
|
+
display: inline;
|
|
329
|
+
margin-right: 1em;
|
|
330
|
+
overflow: hidden;
|
|
331
|
+
|
|
332
|
+
a {
|
|
333
|
+
text-transform: uppercase;
|
|
334
|
+
font-size: 80%;
|
|
335
|
+
letter-spacing: -.01em;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
> header > nav.expandable-nav {
|
|
342
|
+
display: none;
|
|
233
343
|
}
|
|
234
344
|
|
|
235
345
|
> main {
|
|
@@ -238,5 +348,36 @@ body {
|
|
|
238
348
|
flex-flow: column nowrap;
|
|
239
349
|
line-height: 1.6;
|
|
240
350
|
padding-bottom: 1em;
|
|
351
|
+
|
|
352
|
+
position: relative;
|
|
353
|
+
|
|
354
|
+
> header {
|
|
355
|
+
p.section-title {
|
|
356
|
+
margin: 0;
|
|
357
|
+
@extend .section-title;
|
|
358
|
+
transform-origin: top left;
|
|
359
|
+
transform: rotate(-90deg) translateX(-100%);
|
|
360
|
+
position: absolute;
|
|
361
|
+
color: $isoTCColor;
|
|
362
|
+
font-size: 80%;
|
|
363
|
+
top: 3em;
|
|
364
|
+
left: .3em;
|
|
365
|
+
}
|
|
366
|
+
h1 {
|
|
367
|
+
margin-bottom: 0;
|
|
368
|
+
font-weight: normal;
|
|
369
|
+
font-size: 200%;
|
|
370
|
+
}
|
|
371
|
+
.meta {
|
|
372
|
+
color: lighten($textColor, 50);
|
|
373
|
+
margin-bottom: 2em;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.lead {
|
|
378
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
379
|
+
font-size: 120%;
|
|
380
|
+
margin-bottom: 1em;
|
|
381
|
+
}
|
|
241
382
|
}
|
|
242
383
|
}
|
data/_sass/offsets.scss
CHANGED
|
@@ -37,7 +37,8 @@ body.home > main > .news {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
// Basic body
|
|
41
|
+
.pad-all-main-contents {
|
|
41
42
|
> main > * {
|
|
42
43
|
padding-left: $sideOffsetBase;
|
|
43
44
|
padding-right: $sideOffsetBase / 2;
|
|
@@ -47,3 +48,7 @@ body.post, body.page {
|
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
}
|
|
51
|
+
|
|
52
|
+
body.post, body.page, body.post-index {
|
|
53
|
+
@extend .pad-all-main-contents;
|
|
54
|
+
}
|
data/_sass/post.scss
CHANGED
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
body.post,
|
|
2
2
|
body.page {
|
|
3
3
|
> main {
|
|
4
|
-
padding-bottom: 1em;
|
|
5
|
-
|
|
6
|
-
h1 {
|
|
7
|
-
margin-bottom: 0;
|
|
8
|
-
font-weight: normal;
|
|
9
|
-
font-size: 200%;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.lead {
|
|
13
|
-
background-color: rgba(0, 0, 0, 0.05);
|
|
14
|
-
font-size: 120%;
|
|
15
|
-
margin-bottom: 1em;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.meta {
|
|
19
|
-
color: lighten($textColor, 50);
|
|
20
|
-
margin-bottom: 2em;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
4
|
.illustration {
|
|
24
5
|
margin-bottom: 1em;
|
|
25
6
|
|
data/_sass/posts.scss
ADDED
data/assets/nav.js
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
(function () {
|
|
2
|
+
|
|
3
|
+
// Requires accompanying CSS rules, based on classes on main container
|
|
4
|
+
// (body) that style header, menu and trigger button.
|
|
5
|
+
// Container classes used: .with-expandable-nav, .with-expanded-nav
|
|
6
|
+
|
|
7
|
+
class NavTrigger {
|
|
8
|
+
constructor({ triggerTemplateSelector, onTriggerClick }) {
|
|
9
|
+
this.onTriggerClick = onTriggerClick;
|
|
10
|
+
this.triggerTemplate = document.querySelector(`${triggerTemplateSelector}`);
|
|
11
|
+
this.triggerEl = document.importNode(this.triggerTemplate.content, true);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
render() {
|
|
15
|
+
const wrapper = this.triggerEl.children[0];
|
|
16
|
+
wrapper.addEventListener('click', this.onTriggerClick);
|
|
17
|
+
return wrapper;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
class ExpandableContainer {
|
|
22
|
+
constructor({
|
|
23
|
+
containerEl,
|
|
24
|
+
headerEl,
|
|
25
|
+
mainEl,
|
|
26
|
+
footerEl,
|
|
27
|
+
expandableNavEl, priorityNavEl,
|
|
28
|
+
expandableHtmlClass, expandedHtmlClass }) {
|
|
29
|
+
|
|
30
|
+
this.toggle = this.toggle.bind(this);
|
|
31
|
+
|
|
32
|
+
this.expandedHtmlClass = expandedHtmlClass;
|
|
33
|
+
|
|
34
|
+
this.containerEl = containerEl;
|
|
35
|
+
this.headerEl = headerEl;
|
|
36
|
+
this.mainEl = mainEl;
|
|
37
|
+
this.footerEl = footerEl;
|
|
38
|
+
this.expandableNavEl = expandableNavEl;
|
|
39
|
+
this.priorityNavEl = priorityNavEl;
|
|
40
|
+
|
|
41
|
+
this.expandableNavBottomOffset = 20;
|
|
42
|
+
this.containerEl.classList.add(expandableHtmlClass);
|
|
43
|
+
|
|
44
|
+
this.expanded = false;
|
|
45
|
+
this.animationTimeout = undefined;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
toggle() {
|
|
49
|
+
this.expanded = !this.expanded;
|
|
50
|
+
this.update();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
update() {
|
|
54
|
+
if (this.expanded) {
|
|
55
|
+
window.clearTimeout(this.animationTimeout);
|
|
56
|
+
|
|
57
|
+
// Hold main position
|
|
58
|
+
const mainTopOffset =
|
|
59
|
+
this.mainEl.getBoundingClientRect().top +
|
|
60
|
+
document.documentElement.scrollTop -
|
|
61
|
+
(document.documentElement.clientTop || document.body.clientTop || 0);
|
|
62
|
+
this.mainEl.style.marginTop = `${mainTopOffset}px`;
|
|
63
|
+
|
|
64
|
+
this.containerEl.classList.add(this.expandedHtmlClass);
|
|
65
|
+
|
|
66
|
+
const expH = this.expandableNavEl ?
|
|
67
|
+
this.expandableNavEl.getBoundingClientRect().height :
|
|
68
|
+
0;
|
|
69
|
+
|
|
70
|
+
const prioH = this.priorityNavEl ?
|
|
71
|
+
this.priorityNavEl.getBoundingClientRect().height :
|
|
72
|
+
0;
|
|
73
|
+
|
|
74
|
+
const heightDifference = expH - prioH + this.expandableNavBottomOffset;
|
|
75
|
+
|
|
76
|
+
this.headerEl.style.paddingBottom = `${heightDifference}px`;
|
|
77
|
+
this.headerEl.style.zIndex = '2';
|
|
78
|
+
this.headerEl.style.position = 'absolute';
|
|
79
|
+
this.headerEl.style.top = '0px';
|
|
80
|
+
this.headerEl.style.left = '0px';
|
|
81
|
+
this.headerEl.style.right = '0px';
|
|
82
|
+
|
|
83
|
+
} else {
|
|
84
|
+
this.containerEl.classList.remove(this.expandedHtmlClass);
|
|
85
|
+
this.headerEl.style.removeProperty('padding-bottom');
|
|
86
|
+
|
|
87
|
+
window.clearTimeout(this.animationTimeout);
|
|
88
|
+
|
|
89
|
+
this.animationTimeout = window.setTimeout(() => {
|
|
90
|
+
this.mainEl.style.removeProperty('margin-top');
|
|
91
|
+
this.headerEl.style.removeProperty('z-index');
|
|
92
|
+
this.headerEl.style.removeProperty('position');
|
|
93
|
+
}, 1000);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const body = document.querySelector('body');
|
|
99
|
+
const headerEl = document.querySelector('body > header');
|
|
100
|
+
const expandableNavEl = headerEl.querySelector('nav.expandable-nav');
|
|
101
|
+
const committeeMenuEl = headerEl.querySelector('.committee-widget .committee-menu');
|
|
102
|
+
|
|
103
|
+
if (expandableNavEl || committeeMenuEl) {
|
|
104
|
+
|
|
105
|
+
const container = new ExpandableContainer({
|
|
106
|
+
containerEl: body,
|
|
107
|
+
expandableHtmlClass: 'with-expandable-nav',
|
|
108
|
+
expandedHtmlClass: 'with-expanded-nav',
|
|
109
|
+
headerEl: headerEl,
|
|
110
|
+
footerEl: document.querySelector('body > footer'),
|
|
111
|
+
mainEl: document.querySelector('body > main'),
|
|
112
|
+
expandableNavEl: expandableNavEl,
|
|
113
|
+
priorityNavEl: headerEl.querySelector('nav.priority-nav'),
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
const trigger = new NavTrigger({
|
|
117
|
+
triggerTemplateSelector: '#expandableNavTrigger',
|
|
118
|
+
onTriggerClick: container.toggle,
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
headerEl.appendChild(trigger.render());
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
}());
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-isotc211
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: '0.4'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ribose Inc.
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-
|
|
11
|
+
date: 2019-04-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -137,21 +137,26 @@ files:
|
|
|
137
137
|
- _includes/head.html
|
|
138
138
|
- _includes/newsroll-entry.html
|
|
139
139
|
- _includes/script.html
|
|
140
|
+
- _layouts/base-page.html
|
|
140
141
|
- _layouts/default.html
|
|
141
142
|
- _layouts/home.html
|
|
142
143
|
- _layouts/page.html
|
|
143
144
|
- _layouts/post.html
|
|
145
|
+
- _layouts/posts.html
|
|
144
146
|
- _pages/404.adoc
|
|
145
147
|
- _sass/adoc-markup.scss
|
|
148
|
+
- _sass/expandable-nav.scss
|
|
146
149
|
- _sass/home.scss
|
|
147
150
|
- _sass/jekyll-theme-isotc211.scss
|
|
148
151
|
- _sass/main.scss
|
|
149
152
|
- _sass/normalize.scss
|
|
150
153
|
- _sass/offsets.scss
|
|
151
154
|
- _sass/post.scss
|
|
155
|
+
- _sass/posts.scss
|
|
152
156
|
- assets/logo-iso-noninverted.svg
|
|
153
157
|
- assets/logo-iso.svg
|
|
154
158
|
- assets/logo-ribose.svg
|
|
159
|
+
- assets/nav.js
|
|
155
160
|
homepage: https://github.com/iso-tc211/jekyll-theme-isotc211/
|
|
156
161
|
licenses:
|
|
157
162
|
- MIT
|
|
@@ -172,7 +177,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
172
177
|
version: '0'
|
|
173
178
|
requirements: []
|
|
174
179
|
rubyforge_project:
|
|
175
|
-
rubygems_version: 2.
|
|
180
|
+
rubygems_version: 2.5.2.3
|
|
176
181
|
signing_key:
|
|
177
182
|
specification_version: 4
|
|
178
183
|
summary: ISO/TC 211 Jekyll theme
|