jekyll-theme-isotc211 0.3.1 → 0.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|