@conduction/docusaurus-preset 1.4.3 → 1.5.0
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.
package/package.json
CHANGED
|
@@ -37,6 +37,11 @@
|
|
|
37
37
|
* Each cta object also accepts `tone: "orange"` to flip the primary
|
|
38
38
|
* (or secondary) variant to the KNVB-orange accent. Reserved for
|
|
39
39
|
* product pages with an orange-leaning brand identity (mydash).
|
|
40
|
+
*
|
|
41
|
+
* `background="cobalt"` paints the hero in a full-bleed cobalt panel
|
|
42
|
+
* with white type — the product-page identity used on the
|
|
43
|
+
* {slug}.conduction.nl landings. Default (undefined) keeps the
|
|
44
|
+
* existing on-cream rendering used by the connext apps detail pages.
|
|
40
45
|
*/
|
|
41
46
|
|
|
42
47
|
import React from 'react';
|
|
@@ -61,12 +66,18 @@ export default function DetailHero({
|
|
|
61
66
|
className,
|
|
62
67
|
appId,
|
|
63
68
|
downloads,
|
|
69
|
+
background,
|
|
64
70
|
}) {
|
|
65
71
|
const dlCount = downloads != null ? downloads : (appId ? downloadsForApp(appId) : 0);
|
|
66
72
|
const hasIllustration = Boolean(illustration);
|
|
73
|
+
/* `background="cobalt"` flips the hero to a full-bleed cobalt panel
|
|
74
|
+
with white type — the product-page identity used on
|
|
75
|
+
{slug}.conduction.nl landings. Default (undefined) keeps the
|
|
76
|
+
existing on-cream rendering used by connext apps detail pages. */
|
|
77
|
+
const bgClass = background === 'cobalt' ? styles.bgCobalt : null;
|
|
67
78
|
|
|
68
79
|
return (
|
|
69
|
-
<section className={[styles.head, hasIllustration && styles.withIllustration, className].filter(Boolean).join(' ')}>
|
|
80
|
+
<section className={[styles.head, hasIllustration && styles.withIllustration, bgClass, className].filter(Boolean).join(' ')}>
|
|
70
81
|
{crumb && Array.isArray(crumb) && (
|
|
71
82
|
<div className={styles.crumb}>
|
|
72
83
|
{crumb.map((c, i) => {
|
|
@@ -8,8 +8,43 @@
|
|
|
8
8
|
margin: 0 auto;
|
|
9
9
|
padding: 24px 64px 56px;
|
|
10
10
|
font-family: var(--conduction-typography-font-family-body);
|
|
11
|
+
position: relative;
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
/* Cobalt-background hero variant for product-page identity. The brand
|
|
15
|
+
panel sits full-bleed via a pseudo-element so the centred content
|
|
16
|
+
keeps its 1280px max-width. Text + crumb + badges flip to white /
|
|
17
|
+
cobalt-100 against the dark surface; the icon hex and the action
|
|
18
|
+
buttons carry their own colour via iconColor + Button tone. */
|
|
19
|
+
.bgCobalt {
|
|
20
|
+
padding-top: 56px;
|
|
21
|
+
padding-bottom: 64px;
|
|
22
|
+
color: white;
|
|
23
|
+
}
|
|
24
|
+
.bgCobalt::before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute;
|
|
27
|
+
inset: 0;
|
|
28
|
+
left: 50%;
|
|
29
|
+
transform: translateX(-50%);
|
|
30
|
+
width: 100vw;
|
|
31
|
+
background: var(--c-blue-cobalt);
|
|
32
|
+
z-index: -1;
|
|
33
|
+
}
|
|
34
|
+
.bgCobalt > * { position: relative; }
|
|
35
|
+
|
|
36
|
+
.bgCobalt .crumb,
|
|
37
|
+
.bgCobalt .crumb a { color: var(--c-cobalt-100); }
|
|
38
|
+
.bgCobalt .crumb a:hover { color: var(--c-orange-knvb); }
|
|
39
|
+
.bgCobalt .sep { color: var(--c-cobalt-300); }
|
|
40
|
+
.bgCobalt .badge { color: var(--c-cobalt-100); }
|
|
41
|
+
.bgCobalt .versionBadge { color: var(--c-cobalt-200); }
|
|
42
|
+
.bgCobalt .downloadsBadge { color: white; }
|
|
43
|
+
.bgCobalt .title,
|
|
44
|
+
.bgCobalt .titleText { color: white; }
|
|
45
|
+
.bgCobalt .tagline { color: var(--c-cobalt-100); }
|
|
46
|
+
.bgCobalt .tagline :global(.next-blue) { color: var(--c-nextcloud-cyan); }
|
|
47
|
+
|
|
13
48
|
.crumb {
|
|
14
49
|
font-family: var(--conduction-typography-font-family-code);
|
|
15
50
|
font-size: 12px;
|