swedbank-pay-design-guide-jekyll-theme 1.8 → 1.9.3
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 +4 -4
- data/_includes/sidebar.html +1 -2
- data/_includes/title-header.html +32 -0
- data/_layouts/default.html +1 -24
- data/_layouts/front-page.html +17 -17
- data/_plugins/sidebar.rb +2 -1
- data/_sass/breakpoints.scss +5 -0
- data/_sass/card.scss +1 -0
- data/_sass/front-page.scss +93 -58
- data/_sass/swedbank-pay-design-guide-theme.scss +5 -0
- data/_sass/variables.scss +1 -1
- data/lib/gem_version.rb +1 -1
- data/lib/safe_merge.rb +28 -0
- data/lib/sanitized_filename.rb +12 -0
- data/lib/sidebar.rb +25 -196
- data/lib/sidebar_html_builder.rb +154 -0
- data/lib/sidebar_page.rb +181 -0
- data/lib/sidebar_page_collection.rb +36 -0
- data/lib/sidebar_page_title.rb +94 -0
- data/lib/sidebar_parser.rb +95 -0
- data/lib/sidebar_path.rb +62 -0
- data/lib/sidebar_renderer.rb +67 -0
- data/lib/sidebar_text_builder.rb +47 -0
- data/lib/sidebar_tree_builder.rb +86 -0
- metadata +31 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bb6399fcb6768466d3a79fa48d7cc148786b6b16e7f2e5116d1d577998b1e411
|
4
|
+
data.tar.gz: cf030d126581b3a457204ed655035da20a36308c1cb93297595d1d38c5ca99db
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 14f293bdd5a8913d5fc292eb70d26708a212e2fbe106715495feabb2569311e45287618a881864116964280f3c8a4915b965a59ac95ee1cf681c1b9c38e93672
|
7
|
+
data.tar.gz: 40621213c12b27023e3c48ad1387e315cf2ec96e67d00d20abdacb813d34a86fd9eb3478dda9f4a279d220ff03a9183f0aeca81d86abbb80419e12775db96568
|
data/_includes/sidebar.html
CHANGED
@@ -19,7 +19,7 @@ Original creator: https://sebnitu.com/2016/10/13/dynamic-menus-in-jekyll/
|
|
19
19
|
{% endif %}
|
20
20
|
|
21
21
|
<ul class="main-nav-ul">
|
22
|
-
{% assign pages = site.pages | sort: '
|
22
|
+
{% assign pages = site.pages | sort: 'menu_order' %}
|
23
23
|
{% for node in pages %}
|
24
24
|
{% assign node_parts = node.url | split: '/' %}
|
25
25
|
{% assign node_depth = node_parts | size %}
|
@@ -113,4 +113,3 @@ Original creator: https://sebnitu.com/2016/10/13/dynamic-menus-in-jekyll/
|
|
113
113
|
</ul>
|
114
114
|
</nav>
|
115
115
|
</div>
|
116
|
-
|
@@ -0,0 +1,32 @@
|
|
1
|
+
{% assign lead_title = page.lead_title %}
|
2
|
+
{% assign main_title = page.main_title | default: page.title %}
|
3
|
+
{% assign description = page.description %}
|
4
|
+
{% assign estimated_read = page.estimated_read %}
|
5
|
+
{% capture max_width_class %}
|
6
|
+
{% if page.card_overview %}
|
7
|
+
max-width-card-overview
|
8
|
+
{% else %}
|
9
|
+
max-width
|
10
|
+
{% endif %}
|
11
|
+
{% endcapture %}
|
12
|
+
|
13
|
+
<div class="title-header">
|
14
|
+
<div class="title-header-container {{ max_width_class | strip }}">
|
15
|
+
{% if lead_title != nil %}
|
16
|
+
<h4>{{ lead_title }}</h4>
|
17
|
+
{% endif %}
|
18
|
+
|
19
|
+
<h1>{{ main_title }}</h1>
|
20
|
+
|
21
|
+
{% if estimated_read %}
|
22
|
+
<div class="title-header-estimated-read">
|
23
|
+
<i class="material-icons">schedule</i>
|
24
|
+
{{ estimated_read }} min read
|
25
|
+
</div>
|
26
|
+
{% endif %}
|
27
|
+
|
28
|
+
{% if description %}
|
29
|
+
<p>{{ description | markdownify }}</p>
|
30
|
+
{% endif %}
|
31
|
+
</div>
|
32
|
+
</div>
|
data/_layouts/default.html
CHANGED
@@ -80,30 +80,7 @@
|
|
80
80
|
|
81
81
|
<main class="doc-view col-xxl-10 col-lg-9">
|
82
82
|
{% if page.layout != 'front-page' %}
|
83
|
-
|
84
|
-
{% assign title_main = title | split: '–' | last %}
|
85
|
-
{% assign description = page.description %}
|
86
|
-
{% assign estimated_read = page.estimated_read %}
|
87
|
-
<div class="title-header">
|
88
|
-
<div class="title-header-container
|
89
|
-
{% if page.card_overview %} max-width-card-overview
|
90
|
-
{% else %} max-width
|
91
|
-
{% endif %}">
|
92
|
-
{% if title_lead != title_main %}
|
93
|
-
<h4>{{ title_lead }}</h4>
|
94
|
-
{% endif %}
|
95
|
-
<h1>{{ title_main }}</h1>
|
96
|
-
{% if estimated_read %}
|
97
|
-
<div class="title-header-estimated-read">
|
98
|
-
<i class="material-icons">schedule</i>
|
99
|
-
{{ estimated_read }} min read
|
100
|
-
</div>
|
101
|
-
{% endif %}
|
102
|
-
{% if description %}
|
103
|
-
<p>{{ description | markdownify }}</p>
|
104
|
-
{% endif %}
|
105
|
-
</div>
|
106
|
-
</div>
|
83
|
+
{% include title-header.html %}
|
107
84
|
{% endif %}
|
108
85
|
<div class="doc-container{% if page.layout == 'front-page' %} no-padding
|
109
86
|
{% elsif page.card_overview %} normal-padding max-width-card-overview
|
data/_layouts/front-page.html
CHANGED
@@ -9,20 +9,20 @@ layout: default
|
|
9
9
|
{% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
|
10
10
|
|
11
11
|
<div class="front-page">
|
12
|
-
<div class="front-page-
|
13
|
-
<div class="front-page-
|
14
|
-
<
|
15
|
-
|
16
|
-
<
|
17
|
-
{<span>{{ front_page_title }}</span>}
|
18
|
-
</div>
|
19
|
-
<p>{{ front_page_ingress }}</p>
|
20
|
-
</div>
|
21
|
-
<div class="front-page-intro-cards">
|
22
|
-
<h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
|
23
|
-
{% contentblock start %}
|
12
|
+
<div class="front-page-top">
|
13
|
+
<div class="front-page-hero">
|
14
|
+
<h3>{{ front_page_hero }}</h3>
|
15
|
+
<div class="front-page-hero-name">
|
16
|
+
{<span>{{ front_page_title }}</span>}
|
24
17
|
</div>
|
18
|
+
<p>{{ front_page_ingress }}</p>
|
25
19
|
</div>
|
20
|
+
<div class="front-page-intro-cards">
|
21
|
+
<h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
|
22
|
+
{% contentblock start %}
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
<div class="front-page-container">
|
26
26
|
{% if show_merchants_bar == true %}
|
27
27
|
<div class="front-page-merchants">
|
28
28
|
<h6>Trusted by</h6>
|
@@ -54,9 +54,9 @@ layout: default
|
|
54
54
|
{% endif %}
|
55
55
|
<a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="front-page-demoshop">
|
56
56
|
<span class="front-page-demoshop-text">
|
57
|
-
<span class="h2">Try our Demoshop
|
57
|
+
<span class="h2">Try our Demoshop</span>
|
58
58
|
<span class="demoshop-text-description">
|
59
|
-
|
59
|
+
See how our checkout and payment methods are used
|
60
60
|
in practice!
|
61
61
|
</span>
|
62
62
|
</span>
|
@@ -64,11 +64,11 @@ layout: default
|
|
64
64
|
<span class="h3">Go to the demoshop</span>
|
65
65
|
<i class="material-icons">arrow_forward</i>
|
66
66
|
<span class="demoshop-link-img">
|
67
|
-
<img class="demoshop-link-img-mobile d-
|
67
|
+
<img class="demoshop-link-img-mobile d-none d-md-flex"
|
68
68
|
src="/assets/img/demoshop-mobile.svg" alt="demoshop-mobile" />
|
69
|
-
<img class="demoshop-link-img-mobile d-none d-
|
69
|
+
<img class="demoshop-link-img-mobile d-none d-xl-flex d-xxl-none"
|
70
70
|
src="/assets/img/demoshop-mobile2.svg" alt="demoshop-mobile2" />
|
71
|
-
<img class="demoshop-link-img-web d-none d-
|
71
|
+
<img class="demoshop-link-img-web d-none d-xxl-flex"
|
72
72
|
src="/assets/img/demoshop-web.svg" alt="demoshop-web" />
|
73
73
|
</span>
|
74
74
|
</span>
|
data/_plugins/sidebar.rb
CHANGED
data/_sass/card.scss
CHANGED
data/_sass/front-page.scss
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
@import 'colors.scss';
|
2
2
|
@import 'fonts.scss';
|
3
|
+
@import 'breakpoints.scss';
|
3
4
|
|
4
5
|
$front-page-padding: 0 4rem;
|
5
|
-
$front-page-max-width:
|
6
|
+
$front-page-max-width: 1312px;
|
6
7
|
|
7
8
|
@mixin row-cards {
|
8
9
|
>[class*='col-'] {
|
@@ -49,77 +50,88 @@ $front-page-max-width: 1280px;
|
|
49
50
|
}
|
50
51
|
|
51
52
|
.front-page {
|
53
|
+
margin: 3rem 2rem 0;
|
52
54
|
position: relative;
|
53
55
|
display: flex;
|
54
56
|
flex-direction: column;
|
55
57
|
align-items: center;
|
58
|
+
|
59
|
+
.front-page-top {
|
60
|
+
position: relative;
|
61
|
+
padding: 4rem 4rem 2rem;
|
62
|
+
width: 100%;
|
63
|
+
margin-bottom: 3rem;
|
64
|
+
max-width: 1432px;
|
65
|
+
background-color: $dark-brown;
|
66
|
+
z-index: 0;
|
67
|
+
border-radius: 1rem;
|
68
|
+
min-height: 33rem;
|
56
69
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
.front-page-top {
|
62
|
-
padding-top: 4rem;
|
63
|
-
width: 100%;
|
70
|
+
.front-page-hero {
|
71
|
+
position: relative;
|
72
|
+
max-width: 38rem;
|
64
73
|
margin-bottom: 3rem;
|
74
|
+
z-index: 1;
|
65
75
|
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
top: 0;
|
71
|
-
left: 0;
|
72
|
-
background-color: $dark-brown;
|
73
|
-
width: 100%;
|
74
|
-
height: 34rem;
|
75
|
-
z-index: 0;
|
76
|
+
h3 {
|
77
|
+
color: $yellow;
|
78
|
+
font-family: $headline;
|
79
|
+
margin-bottom: 0;
|
76
80
|
}
|
77
81
|
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
z-index: 1;
|
82
|
+
p {
|
83
|
+
color: $white;
|
84
|
+
font-size: 1.125rem;
|
85
|
+
}
|
83
86
|
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
87
|
+
.front-page-hero-name {
|
88
|
+
font-family: $mono;
|
89
|
+
font-weight: bold;
|
90
|
+
font-size: 2rem;
|
91
|
+
color: $yellow;
|
92
|
+
margin-bottom: 1rem;
|
89
93
|
|
90
|
-
|
94
|
+
span {
|
91
95
|
color: $white;
|
92
|
-
font-size: 1.125rem;
|
93
96
|
}
|
97
|
+
}
|
94
98
|
|
95
|
-
|
96
|
-
font-family: $mono;
|
97
|
-
font-weight: bold;
|
98
|
-
font-size: 2rem;
|
99
|
-
color: $yellow;
|
100
|
-
margin-bottom: 1rem;
|
99
|
+
}
|
101
100
|
|
102
|
-
|
103
|
-
|
104
|
-
|
101
|
+
.front-page-intro-cards {
|
102
|
+
h2 {
|
103
|
+
color: $white;
|
104
|
+
|
105
|
+
.header-anchor {
|
106
|
+
display: none;
|
105
107
|
}
|
108
|
+
}
|
106
109
|
|
110
|
+
.row {
|
111
|
+
@include row-cards();
|
107
112
|
}
|
113
|
+
}
|
108
114
|
|
115
|
+
@media screen and (min-width: $breakpoint-xxl) {
|
116
|
+
margin-bottom: 9rem;
|
117
|
+
|
109
118
|
.front-page-intro-cards {
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
}
|
116
|
-
}
|
117
|
-
|
118
|
-
.row {
|
119
|
-
@include row-cards();
|
120
|
-
}
|
119
|
+
position: absolute;
|
120
|
+
bottom: -7rem;
|
121
|
+
left: 0;
|
122
|
+
width: 100%;
|
123
|
+
padding: 0 4rem;
|
121
124
|
}
|
122
125
|
}
|
126
|
+
}
|
127
|
+
.front-page-container {
|
128
|
+
max-width: $front-page-max-width;
|
129
|
+
margin: $front-page-padding;
|
130
|
+
position: relative;
|
131
|
+
|
132
|
+
@media screen and (max-width: $breakpoint-md) {
|
133
|
+
margin: 0;
|
134
|
+
}
|
123
135
|
|
124
136
|
.front-page-merchants {
|
125
137
|
margin-bottom: 3.75rem;
|
@@ -221,6 +233,7 @@ $front-page-max-width: 1280px;
|
|
221
233
|
height: 22.5rem;
|
222
234
|
background-color: $dark-brown;
|
223
235
|
text-decoration: none;
|
236
|
+
border-radius: 1rem;
|
224
237
|
|
225
238
|
&:hover,
|
226
239
|
&:focus {
|
@@ -249,17 +262,29 @@ $front-page-max-width: 1280px;
|
|
249
262
|
|
250
263
|
.h2 {
|
251
264
|
color: $white;
|
252
|
-
|
253
|
-
span {
|
254
|
-
color: $yellow;
|
255
|
-
}
|
256
265
|
}
|
257
266
|
|
258
267
|
.demoshop-text-description {
|
259
268
|
color: $white;
|
260
|
-
width:
|
261
|
-
height: 4.5rem;
|
269
|
+
width: 40%;
|
270
|
+
min-height: 4.5rem;
|
271
|
+
font-size: 1rem;
|
272
|
+
|
273
|
+
}
|
274
|
+
|
275
|
+
}
|
276
|
+
|
277
|
+
@media screen and (max-width: $breakpoint-md) {
|
278
|
+
padding-top: 3rem;
|
279
|
+
height: 18rem;
|
280
|
+
|
281
|
+
.front-page-demoshop-text {
|
282
|
+
.demoshop-text-description {
|
283
|
+
width: 100%;
|
284
|
+
min-height: 2.25rem;
|
285
|
+
}
|
262
286
|
}
|
287
|
+
|
263
288
|
}
|
264
289
|
|
265
290
|
.front-page-demoshop-link {
|
@@ -297,8 +322,6 @@ $front-page-max-width: 1280px;
|
|
297
322
|
}
|
298
323
|
}
|
299
324
|
|
300
|
-
|
301
|
-
|
302
325
|
.h3 {
|
303
326
|
color: $white;
|
304
327
|
padding-right: 1rem;
|
@@ -306,6 +329,18 @@ $front-page-max-width: 1280px;
|
|
306
329
|
margin: 0;
|
307
330
|
}
|
308
331
|
}
|
332
|
+
|
333
|
+
@media screen and (min-width: $breakpoint-xxl) {
|
334
|
+
.front-page-demoshop-text {
|
335
|
+
margin-bottom: 1rem;
|
336
|
+
}
|
337
|
+
|
338
|
+
.front-page-demoshop-link {
|
339
|
+
.demoshop-link-img {
|
340
|
+
bottom: -2rem;
|
341
|
+
}
|
342
|
+
}
|
343
|
+
}
|
309
344
|
}
|
310
345
|
|
311
346
|
|
@@ -1,6 +1,7 @@
|
|
1
1
|
@import 'colors.scss';
|
2
2
|
@import 'fonts.scss';
|
3
3
|
@import 'variables.scss';
|
4
|
+
@import 'breakpoints.scss';
|
4
5
|
|
5
6
|
@import 'card.scss';
|
6
7
|
@import 'code-view.scss';
|
@@ -17,6 +18,10 @@ img {
|
|
17
18
|
max-width: 100%;
|
18
19
|
}
|
19
20
|
|
21
|
+
body {
|
22
|
+
font-size: 1.125rem;
|
23
|
+
}
|
24
|
+
|
20
25
|
.table {
|
21
26
|
|
22
27
|
th,
|
data/_sass/variables.scss
CHANGED
@@ -1 +1 @@
|
|
1
|
-
$max-width:
|
1
|
+
$max-width: 880px;
|
data/lib/gem_version.rb
CHANGED
data/lib/safe_merge.rb
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# The Hash class
|
4
|
+
class Hash
|
5
|
+
# Safely merges the current Hash with an 'other' Hash.
|
6
|
+
def safe_merge(other)
|
7
|
+
all_keys = keys | other.keys
|
8
|
+
result_hash = {}
|
9
|
+
|
10
|
+
all_keys.each do |key|
|
11
|
+
hash_value = {}
|
12
|
+
|
13
|
+
if key? key
|
14
|
+
value = self[key]
|
15
|
+
hash_value = value unless value.nil?
|
16
|
+
end
|
17
|
+
|
18
|
+
if other.key? key
|
19
|
+
value = other[key]
|
20
|
+
hash_value = hash_value.merge(value) unless value.nil?
|
21
|
+
end
|
22
|
+
|
23
|
+
result_hash[key] = hash_value
|
24
|
+
end
|
25
|
+
|
26
|
+
result_hash
|
27
|
+
end
|
28
|
+
end
|