swedbank-pay-design-guide-jekyll-theme 1.7 → 1.9.1
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 +4 -28
- data/_layouts/front-page.html +112 -0
- 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 +24 -196
- data/lib/sidebar_html_builder.rb +136 -0
- data/lib/sidebar_page.rb +164 -0
- data/lib/sidebar_page_collection.rb +37 -0
- data/lib/sidebar_page_title.rb +71 -0
- data/lib/sidebar_parser.rb +82 -0
- data/lib/sidebar_path.rb +62 -0
- data/lib/sidebar_renderer.rb +70 -0
- data/lib/sidebar_text_builder.rb +46 -0
- data/lib/sidebar_tree_builder.rb +73 -0
- metadata +46 -5
- data/_includes/front-page.html +0 -240
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e647f0131f3c08e0a12439a2c614440abf1490e8daddad219fb7d07abf2a20ec
|
|
4
|
+
data.tar.gz: 9a662eb6a96daca6040b5bd41077a956d79cac4dacfce609d46eb574efaab328
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8c68104d9e39d320d6f7d02ce71ae26bb8f413fc85ebcfc3af07573a46fff395a8ef1b6764e9ef9cb6358e5eab593e4143788038f5353e68c05b16d362fae89a
|
|
7
|
+
data.tar.gz: c076139876f3d855ee1ee9b0d483c78979f6fd2f241c0ae932fe2572e73170a0527688fe48c12e6c6bd0bddd606350f25be541b4215ed32776c95174d223b8dd
|
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
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
{%- assign title = page.title | default: "PayEx Design Guide theme for Jekyll" -%}
|
|
2
|
-
{%- assign front_page = page.front_page | default: false -%}
|
|
3
2
|
{%- assign description = page.opengraph.description | default: site.opengraph.description -%}
|
|
4
3
|
{%- assign image = page.opengraph.image | default: site.opengraph.image -%}
|
|
5
4
|
{%- assign github_branch = site.github.branch | default : "develop" -%}
|
|
@@ -80,34 +79,11 @@
|
|
|
80
79
|
</div>
|
|
81
80
|
|
|
82
81
|
<main class="doc-view col-xxl-10 col-lg-9">
|
|
83
|
-
{% if
|
|
84
|
-
|
|
85
|
-
{% assign title_main = title | split: '–' | last %}
|
|
86
|
-
{% assign description = page.description %}
|
|
87
|
-
{% assign estimated_read = page.estimated_read %}
|
|
88
|
-
<div class="title-header">
|
|
89
|
-
<div class="title-header-container
|
|
90
|
-
{% if page.card_overview%} max-width-card-overview
|
|
91
|
-
{% else %} max-width
|
|
92
|
-
{% endif %}">
|
|
93
|
-
{% if title_lead != title_main %}
|
|
94
|
-
<h4>{{ title_lead }}</h4>
|
|
95
|
-
{% endif %}
|
|
96
|
-
<h1>{{ title_main }}</h1>
|
|
97
|
-
{% if estimated_read %}
|
|
98
|
-
<div class="title-header-estimated-read">
|
|
99
|
-
<i class="material-icons">schedule</i>
|
|
100
|
-
{{ estimated_read }} min read
|
|
101
|
-
</div>
|
|
102
|
-
{% endif %}
|
|
103
|
-
{% if description %}
|
|
104
|
-
<p>{{ description | markdownify }}</p>
|
|
105
|
-
{% endif %}
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
82
|
+
{% if page.layout != 'front-page' %}
|
|
83
|
+
{% include title-header.html %}
|
|
108
84
|
{% endif %}
|
|
109
|
-
<div class="doc-container{% if
|
|
110
|
-
{% elsif page.card_overview%} normal-padding max-width-card-overview
|
|
85
|
+
<div class="doc-container{% if page.layout == 'front-page' %} no-padding
|
|
86
|
+
{% elsif page.card_overview %} normal-padding max-width-card-overview
|
|
111
87
|
{% else %} normal-padding max-width
|
|
112
88
|
{% endif %}">
|
|
113
89
|
<article>
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% assign show_merchants_bar = page.front_page.show_merchants_bar | default: false %}
|
|
6
|
+
{% assign front_page_title = page.front_page.title | default: 'developer portal' %}
|
|
7
|
+
{% assign front_page_hero = page.front_page.hero | default: "Welcome to the Swedbank Pay" %}
|
|
8
|
+
{% assign front_page_ingress = page.front_page.ingress | default: "Our developer portal gives you the full tool box for integrating our payment instruments and getting started with easy, flexible and safe payments on your e-commerce website." %}
|
|
9
|
+
{% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
|
|
10
|
+
|
|
11
|
+
<div class="front-page">
|
|
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>}
|
|
17
|
+
</div>
|
|
18
|
+
<p>{{ front_page_ingress }}</p>
|
|
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
|
+
{% if show_merchants_bar == true %}
|
|
27
|
+
<div class="front-page-merchants">
|
|
28
|
+
<h6>Trusted by</h6>
|
|
29
|
+
<div class="merchants-container justify-content-xxl-between">
|
|
30
|
+
<a class="merchant-link">
|
|
31
|
+
{% include img/merchants/logo-schibsted.svg %}
|
|
32
|
+
</a>
|
|
33
|
+
<a class="merchant-link">
|
|
34
|
+
{% include img/merchants/logo-ica.svg %}
|
|
35
|
+
</a>
|
|
36
|
+
<a class="merchant-link">
|
|
37
|
+
{% include img/merchants/logo-elkjop.svg %}
|
|
38
|
+
</a>
|
|
39
|
+
<a class="merchant-link">
|
|
40
|
+
{% include img/merchants/logo-synsam.svg %}
|
|
41
|
+
</a>
|
|
42
|
+
<a class="merchant-link">
|
|
43
|
+
{% include img/merchants/logo-coop.svg %}
|
|
44
|
+
</a>
|
|
45
|
+
<a class="merchant-link">
|
|
46
|
+
{% include img/merchants/logo-svenskaspel.svg %}
|
|
47
|
+
</a>
|
|
48
|
+
<a class="merchant-link">
|
|
49
|
+
{% include img/merchants/logo-skanetrafiken.svg %}
|
|
50
|
+
</a>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
{% endif %}
|
|
55
|
+
<a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="front-page-demoshop">
|
|
56
|
+
<span class="front-page-demoshop-text">
|
|
57
|
+
<span class="h2">Try our Demoshop</span>
|
|
58
|
+
<span class="demoshop-text-description">
|
|
59
|
+
See how our checkout and payment methods are used
|
|
60
|
+
in practice!
|
|
61
|
+
</span>
|
|
62
|
+
</span>
|
|
63
|
+
<span class="front-page-demoshop-link">
|
|
64
|
+
<span class="h3">Go to the demoshop</span>
|
|
65
|
+
<i class="material-icons">arrow_forward</i>
|
|
66
|
+
<span class="demoshop-link-img">
|
|
67
|
+
<img class="demoshop-link-img-mobile d-none d-md-flex"
|
|
68
|
+
src="/assets/img/demoshop-mobile.svg" alt="demoshop-mobile" />
|
|
69
|
+
<img class="demoshop-link-img-mobile d-none d-xl-flex d-xxl-none"
|
|
70
|
+
src="/assets/img/demoshop-mobile2.svg" alt="demoshop-mobile2" />
|
|
71
|
+
<img class="demoshop-link-img-web d-none d-xxl-flex"
|
|
72
|
+
src="/assets/img/demoshop-web.svg" alt="demoshop-web" />
|
|
73
|
+
</span>
|
|
74
|
+
</span>
|
|
75
|
+
</a>
|
|
76
|
+
|
|
77
|
+
<div class="front-page-container">
|
|
78
|
+
<div class="front-page-cards-sdk">
|
|
79
|
+
{% contentblock sdks %}
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="front-page-cards-module">
|
|
83
|
+
{% contentblock modules %}
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="front-page-release-notes">
|
|
87
|
+
{% contentblock release_notes %}
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="front-page-cards-extra">
|
|
91
|
+
{% contentblock extras %}
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="front-page-contact">
|
|
95
|
+
<div class="front-page-contact-content">
|
|
96
|
+
<div class="row">
|
|
97
|
+
<div class="col-xl-7">
|
|
98
|
+
<h2 id="front-page-contact" class="heading-line heading-line-long">Can't find what you are
|
|
99
|
+
looking for?</h2>
|
|
100
|
+
<p>
|
|
101
|
+
We are always trying to make the developer portal as
|
|
102
|
+
good as it can be please don’t hesitate to contact us.
|
|
103
|
+
</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="col-xl-5 d-flex align-items-center justify-content-center">
|
|
106
|
+
<button class="btn">Contact us here</button>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
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
|
|