Skip to content

Commit da9b0a6

Browse files
mollierobbertmollierobbert
committed
Support dark mode. Simplify left/right grouping of navigation. Update CSP header.
1 parent 89ed66a commit da9b0a6

File tree

4 files changed

+91
-53
lines changed

4 files changed

+91
-53
lines changed

‎.lambda-functions/origin-response.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ exports.handler = (event, context, callback) => {
2121
{
2222
key: 'Content-Security-Policy',
2323
value:
24-
"default-src 'self' assets.docs.mollie.com; img-src 'self' data: assets.docs.mollie.com https://images.ctfassets.net www.google-analytics.com https://www.gstatic.com https://www.googletagmanager.com; font-src cdn.mollie.com https://fonts.gstatic.com; script-src assets.docs.mollie.com https://www.googletagmanager.com www.google-analytics.com https://cdn.mxpnl.com 'sha256-FPgvfx+DeiJzmOHcDk2Iig1vKX6j8I0pKqPA7y33Xbc=' 'sha256-dSca7Fq9h/m8NPfsEIGN6QsOnwspkqCSOGFBGND+lps=' 'sha256-0M7Y8vfoB3jQRWrbd9UeLZorU2w32qynoWspDQn7U0g=' 'sha256-akWsBON1KU9NUSFengZbPuVOt+8KK3uSXcBP5Hc0sqQ=' 'sha256-nST9yaMPaU/xAS62+YWnvg5TxAXYYQm1Fn5Ybpu0AXM=' 'sha256-q/CGewBJOc0HL8ZusH9Fqnh2aZgLOH7lBvepoEVOrVw='; style-src assets.docs.mollie.com fonts.googleapis.com 'sha256-biLFinpqYMtWHmXfkA1BPeCY0/fNt46SAZ+BBk5YUog='; object-src 'none'; media-src 'none'; form-action 'none'; connect-src www.google-analytics.com https://api.mixpanel.com stats.g.doubleclick.net; report-uri https://mollie.report-uri.com/r/d/csp/enforce",
24+
"default-src 'self' assets.docs.mollie.com; img-src 'self' data: assets.docs.mollie.com https://images.ctfassets.net www.google-analytics.com https://www.gstatic.com https://www.googletagmanager.com; font-src cdn.mollie.com https://fonts.gstatic.com; script-src assets.docs.mollie.com https://www.googletagmanager.com www.google-analytics.com https://cdn.mxpnl.com 'sha256-FPgvfx+DeiJzmOHcDk2Iig1vKX6j8I0pKqPA7y33Xbc=' 'sha256-dSca7Fq9h/m8NPfsEIGN6QsOnwspkqCSOGFBGND+lps=' 'sha256-0M7Y8vfoB3jQRWrbd9UeLZorU2w32qynoWspDQn7U0g=' 'sha256-akWsBON1KU9NUSFengZbPuVOt+8KK3uSXcBP5Hc0sqQ=' 'sha256-nST9yaMPaU/xAS62+YWnvg5TxAXYYQm1Fn5Ybpu0AXM=' 'sha256-q/CGewBJOc0HL8ZusH9Fqnh2aZgLOH7lBvepoEVOrVw='; style-src assets.docs.mollie.com fonts.googleapis.com 'sha256-biLFinpqYMtWHmXfkA1BPeCY0/fNt46SAZ+BBk5YUog='; object-src 'none'; media-src 'none'; form-action 'none'; connect-src tagmanager.mollie.com google-analytics.com https://api.mixpanel.com stats.g.doubleclick.net algolia.net algolianet.com; report-uri https://mollie.report-uri.com/r/d/csp/enforce",
2525
},
2626
];
2727
response.headers['x-content-type-options'] = [

‎source/theme/navigation.html

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,38 @@
1111
{%- endif -%}
1212
<nav class="main-navigation">
1313
<div class="title-bar" data-enhancer="nav-logged-in">
14-
<ul>
15-
<li class="title-bar__item title-bar__logo">
16-
<a href="https://docs.mollie.com/">
17-
<svg viewBox="0 0 81 24">
18-
<path d="M 58.551 2.517 C 58.551 1.127 59.676 0 61.064 0 C 62.452 0 63.577 1.127 63.577 2.517 C 63.577 3.908 62.452 5.035 61.064 5.035 C 59.676 5.035 58.551 3.908 58.551 2.517 Z M 22.365 10.129 C 23.546 11.446 24.199 13.15 24.199 14.92 L 24.199 23.648 L 20.346 23.648 L 20.346 14.811 C 20.338 13.074 18.906 11.656 17.163 11.656 C 17.063 11.656 16.954 11.664 16.845 11.673 C 15.287 11.832 13.98 13.309 13.98 14.903 L 13.98 23.648 L 10.127 23.648 L 10.127 14.836 C 10.119 13.091 8.695 11.664 6.952 11.664 C 6.852 11.664 6.743 11.673 6.634 11.681 C 5.084 11.841 3.769 13.317 3.769 14.92 L 3.769 23.648 L 0 23.648 L 0 14.811 C 0 10.951 3.141 7.813 6.994 7.813 C 8.921 7.813 10.755 8.618 12.079 10.02 C 13.402 8.61 15.245 7.813 17.188 7.813 C 17.398 7.813 17.599 7.821 17.808 7.838 C 19.567 7.989 21.184 8.803 22.365 10.129 Z M 48.248 23.664 L 44.395 23.664 L 44.395 0.378 L 48.248 0.378 Z M 55.619 23.664 L 51.766 23.664 L 51.766 0.378 L 55.619 0.378 Z M 62.991 23.656 L 59.138 23.656 L 59.138 8.215 L 62.991 8.215 Z M 81 17.312 L 69.281 17.312 C 69.801 19.175 71.493 20.484 73.453 20.484 C 74.986 20.484 76.368 19.703 77.164 18.386 L 77.323 18.126 L 80.506 19.695 L 80.322 20.006 C 78.872 22.448 76.217 23.966 73.386 23.966 L 73.377 23.966 C 71.216 23.966 69.189 23.11 67.656 21.558 C 66.123 20.006 65.294 17.958 65.319 15.793 C 65.344 13.67 66.182 11.681 67.673 10.179 C 69.164 8.677 71.158 7.838 73.269 7.813 L 73.369 7.813 C 75.405 7.813 77.314 8.627 78.763 10.095 C 80.204 11.564 81 13.494 81 15.541 Z M 69.34 14.123 L 77.105 14.123 C 76.552 12.478 74.977 11.32 73.218 11.32 C 71.459 11.32 69.884 12.478 69.34 14.123 Z M 42.318 15.902 C 42.318 20.35 38.699 23.975 34.26 23.975 C 29.82 23.975 26.201 20.35 26.201 15.902 C 26.201 11.455 29.812 7.829 34.26 7.829 C 38.707 7.829 42.318 11.455 42.318 15.902 Z M 38.498 15.91 C 38.498 13.569 36.597 11.664 34.26 11.664 C 31.923 11.664 30.021 13.569 30.021 15.91 C 30.021 18.252 31.923 20.157 34.26 20.157 C 36.597 20.157 38.498 18.252 38.498 15.91 Z"></path>
19-
</svg>
20-
<span>docs</span>
21-
</a>
22-
</li>
23-
<li class="title-bar__item title-bar__space title-bar__item--active">
24-
<a href="https://docs.mollie.com/">Developers</a>
25-
</li>
26-
<li class="title-bar__item title-bar__space">
27-
<a href="https://help.mollie.com/" target="_blank">Support</a>
28-
</li>
29-
<li class="title-bar__item title-bar__search">
30-
<div data-enhancer="algolia-search"></div>
31-
</li>
32-
<li class="title-bar__item title-bar__login js-login-nav-link">
33-
<a href="https://www.mollie.com/dashboard/login" target="_blank">Log in</a>
34-
</li>
35-
<li class="title-bar__item title-bar__signup js-signup-nav-link">
36-
<a href="https://www.mollie.com/dashboard/signup" target="_blank">Sign up</a>
37-
</li>
38-
<li class="title-bar__item title-bar__dashboard js-dashboard-nav-link is-hidden">
39-
<a href="https://www.mollie.com/dashboard" target="_blank">Dashboard</a>
40-
</li>
41-
</ul>
14+
<div class="title-bar__wrap">
15+
<ul>
16+
<li class="title-bar__item title-bar__logo">
17+
<a href="https://docs.mollie.com/">
18+
<svg viewBox="0 0 81 24">
19+
<path d="M 58.551 2.517 C 58.551 1.127 59.676 0 61.064 0 C 62.452 0 63.577 1.127 63.577 2.517 C 63.577 3.908 62.452 5.035 61.064 5.035 C 59.676 5.035 58.551 3.908 58.551 2.517 Z M 22.365 10.129 C 23.546 11.446 24.199 13.15 24.199 14.92 L 24.199 23.648 L 20.346 23.648 L 20.346 14.811 C 20.338 13.074 18.906 11.656 17.163 11.656 C 17.063 11.656 16.954 11.664 16.845 11.673 C 15.287 11.832 13.98 13.309 13.98 14.903 L 13.98 23.648 L 10.127 23.648 L 10.127 14.836 C 10.119 13.091 8.695 11.664 6.952 11.664 C 6.852 11.664 6.743 11.673 6.634 11.681 C 5.084 11.841 3.769 13.317 3.769 14.92 L 3.769 23.648 L 0 23.648 L 0 14.811 C 0 10.951 3.141 7.813 6.994 7.813 C 8.921 7.813 10.755 8.618 12.079 10.02 C 13.402 8.61 15.245 7.813 17.188 7.813 C 17.398 7.813 17.599 7.821 17.808 7.838 C 19.567 7.989 21.184 8.803 22.365 10.129 Z M 48.248 23.664 L 44.395 23.664 L 44.395 0.378 L 48.248 0.378 Z M 55.619 23.664 L 51.766 23.664 L 51.766 0.378 L 55.619 0.378 Z M 62.991 23.656 L 59.138 23.656 L 59.138 8.215 L 62.991 8.215 Z M 81 17.312 L 69.281 17.312 C 69.801 19.175 71.493 20.484 73.453 20.484 C 74.986 20.484 76.368 19.703 77.164 18.386 L 77.323 18.126 L 80.506 19.695 L 80.322 20.006 C 78.872 22.448 76.217 23.966 73.386 23.966 L 73.377 23.966 C 71.216 23.966 69.189 23.11 67.656 21.558 C 66.123 20.006 65.294 17.958 65.319 15.793 C 65.344 13.67 66.182 11.681 67.673 10.179 C 69.164 8.677 71.158 7.838 73.269 7.813 L 73.369 7.813 C 75.405 7.813 77.314 8.627 78.763 10.095 C 80.204 11.564 81 13.494 81 15.541 Z M 69.34 14.123 L 77.105 14.123 C 76.552 12.478 74.977 11.32 73.218 11.32 C 71.459 11.32 69.884 12.478 69.34 14.123 Z M 42.318 15.902 C 42.318 20.35 38.699 23.975 34.26 23.975 C 29.82 23.975 26.201 20.35 26.201 15.902 C 26.201 11.455 29.812 7.829 34.26 7.829 C 38.707 7.829 42.318 11.455 42.318 15.902 Z M 38.498 15.91 C 38.498 13.569 36.597 11.664 34.26 11.664 C 31.923 11.664 30.021 13.569 30.021 15.91 C 30.021 18.252 31.923 20.157 34.26 20.157 C 36.597 20.157 38.498 18.252 38.498 15.91 Z"></path>
20+
</svg>
21+
<span>docs</span>
22+
</a>
23+
</li>
24+
<li class="title-bar__item title-bar__space title-bar__item--active">
25+
<a href="https://docs.mollie.com/">Developers</a>
26+
</li>
27+
<li class="title-bar__item title-bar__space">
28+
<a href="https://help.mollie.com/" target="_blank">Support</a>
29+
</li>
30+
</ul>
31+
<ul>
32+
<li class="title-bar__item title-bar__search">
33+
<div data-enhancer="algolia-search"></div>
34+
</li>
35+
<li class="title-bar__item title-bar__login js-login-nav-link">
36+
<a href="https://www.mollie.com/dashboard/login" target="_blank">Log in</a>
37+
</li>
38+
<li class="title-bar__item title-bar__signup js-signup-nav-link">
39+
<a href="https://www.mollie.com/dashboard/signup" target="_blank">Sign up</a>
40+
</li>
41+
<li class="title-bar__item title-bar__dashboard js-dashboard-nav-link is-hidden">
42+
<a href="https://www.mollie.com/dashboard" target="_blank">Dashboard</a>
43+
</li>
44+
</ul>
45+
</div>
4246
</div>
4347

4448
<div class="product-navigation">

‎source/theme/styles/components/_main-navigation.scss

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,41 @@
1414
border-bottom: 1px solid #e0e0e0;
1515
}
1616

17-
.title-bar > ul {
17+
.title-bar__wrap {
1818
display: flex;
1919
height: 60px;
2020
max-width: 1440px;
2121
margin: 0 auto;
2222
padding: 12px 120px;
23+
}
24+
25+
.title-bar__wrap > ul {
26+
display: flex;
27+
margin: 0;
28+
padding: 0;
2329
list-style: none;
2430
}
2531

32+
.title-bar__wrap > ul:last-child {
33+
margin-left: auto;
34+
}
35+
2636
.title-bar .is-hidden {
2737
display: none;
2838
}
2939

3040
.title-bar__item {
3141
height: 36px;
32-
margin: 0 40px 0 0;
42+
margin: 0 30px 0 0;
43+
}
44+
45+
ul:last-child > .title-bar__item {
46+
margin: 0 0 0 30px;
47+
}
48+
49+
ul:first-child > .title-bar__item:last-child,
50+
ul:last-child > .title-bar__item:first-child {
51+
margin: 0;
3352
}
3453

3554
.title-bar__item a {
@@ -48,6 +67,10 @@
4867
text-decoration: none;
4968
}
5069

70+
.title-bar__logo {
71+
margin-right: 40px;
72+
}
73+
5174
.title-bar__logo a {
5275
display: flex;
5376
padding: 5px 0;
@@ -99,19 +122,6 @@
99122
bottom: -20px;
100123
}
101124

102-
.title-bar__search {
103-
margin-left: auto;
104-
margin-right: 30px;
105-
}
106-
107-
.title-bar__login {
108-
margin-right: 30px;
109-
}
110-
111-
.title-bar__signup {
112-
margin-right: 0;
113-
}
114-
115125
.title-bar__signup a {
116126
background: #333;
117127
color: #fff;
@@ -125,11 +135,6 @@
125135
color: #fff;
126136
}
127137

128-
.title-bar__dashboard {
129-
margin-left: auto;
130-
margin-right: 0;
131-
}
132-
133138
.product-navigation {
134139
height: 40px;
135140
background: #fafafa;
@@ -234,7 +239,7 @@
234239
padding-top: 60px;
235240
}
236241

237-
.title-bar > ul {
242+
.title-bar__wrap {
238243
padding-left: 30px;
239244
padding-right: 30px;
240245
}
@@ -271,7 +276,7 @@
271276
box-shadow: none;
272277
}
273278

274-
.title-bar {
279+
.title-bar__wrap {
275280
border-color: #555;
276281
}
277282

‎source/theme/styles/components/_search.scss

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $search-bar-radius: 4px;
77
display: none; /* Temp */
88
margin: 0;
99
padding: 8px 10px 8px 30px;
10-
background: #fff;
10+
background: transparent;
1111
border: 1px solid #ddd;
1212
border-radius: $search-bar-radius;
1313
position: relative;
@@ -128,7 +128,7 @@ $search-bar-radius: 4px;
128128
width: 20px;
129129
height: 20px;
130130
position: absolute;
131-
top: 8px;
131+
top: 10px;
132132
opacity: .5;
133133
}
134134

@@ -226,3 +226,32 @@ $search-bar-radius: 4px;
226226
background-color: #e3eaff;
227227
color: #3a33c5;
228228
}
229+
230+
/*
231+
* Dark mode
232+
*/
233+
@media (prefers-color-scheme: dark) {
234+
.aa-DetachedSearchButton {
235+
color: $dark-mode-text-color;
236+
}
237+
238+
.aa-DetachedContainer {
239+
background: $dark-mode-background-color;
240+
border-color: #e0e0e0;
241+
box-shadow: none;
242+
}
243+
244+
.aa-Item[aria-selected='true'] a {
245+
background-color: #333;
246+
}
247+
248+
.aa-Item__Title code {
249+
background: tint($dark-mode-background-color, 8%);
250+
border-color: $grey-dark;
251+
}
252+
253+
.aa-Item mark {
254+
background-color: #3a33c5;
255+
color: #e3eaff;
256+
}
257+
}

0 commit comments

Comments
 (0)