@penn-libraries/web 0.3.1 → 1.0.0-dev.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.
- package/dist/cjs/pennlibs-banner.cjs.entry.js +1 -1
- package/dist/cjs/pennlibs-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/pennlibs-banner.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat_6.cjs.entry.js +12 -12
- package/dist/cjs/pennlibs-chat_6.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-banner/pennlibs-banner.css +8 -8
- package/dist/collection/components/pennlibs-chat/pennlibs-chat.css +12 -6
- package/dist/collection/components/pennlibs-fallback-img/pennlibs-fallback-img.css +3 -3
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +21 -16
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.css +15 -10
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js +29 -4
- package/dist/collection/components/pennlibs-footer/pennlibs-footer.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.css +19 -14
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +3 -2
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +17 -18
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +3 -2
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js.map +1 -1
- package/dist/components/pennlibs-banner.js +1 -1
- package/dist/components/pennlibs-banner.js.map +1 -1
- package/dist/components/pennlibs-chat.js +1 -1
- package/dist/components/pennlibs-chat.js.map +1 -1
- package/dist/components/pennlibs-fallback-img.js +1 -1
- package/dist/components/pennlibs-fallback-img.js.map +1 -1
- package/dist/components/pennlibs-feedback.js +1 -1
- package/dist/components/pennlibs-feedback.js.map +1 -1
- package/dist/components/pennlibs-footer.js +5 -5
- package/dist/components/pennlibs-footer.js.map +1 -1
- package/dist/components/pennlibs-header.js +2 -2
- package/dist/components/pennlibs-header.js.map +1 -1
- package/dist/components/pennlibs-hero.js +2 -2
- package/dist/components/pennlibs-hero.js.map +1 -1
- package/dist/docs.json +39 -6
- package/dist/esm/pennlibs-banner.entry.js +1 -1
- package/dist/esm/pennlibs-banner.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat_6.entry.js +12 -12
- package/dist/esm/pennlibs-chat_6.entry.js.map +1 -1
- package/dist/types/components/pennlibs-footer/pennlibs-footer.d.ts +25 -0
- package/dist/types/components/pennlibs-header/pennlibs-header.d.ts +2 -1
- package/dist/types/components/pennlibs-hero/pennlibs-hero.d.ts +2 -1
- package/dist/types/components.d.ts +96 -8
- package/dist/web/{p-b9fe301b.entry.js → p-5dab51f0.entry.js} +13 -13
- package/dist/web/p-5dab51f0.entry.js.map +1 -0
- package/dist/web/{p-bb31e5e2.entry.js → p-e331a309.entry.js} +2 -2
- package/dist/web/p-e331a309.entry.js.map +1 -0
- package/dist/web/pennlibs-banner.entry.esm.js.map +1 -1
- package/dist/web/pennlibs-chat.pennlibs-fallback-img.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.css +536 -58
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +42 -15
- package/hydrate/index.mjs +42 -15
- package/package.json +1 -1
- package/dist/web/p-b9fe301b.entry.js.map +0 -1
- package/dist/web/p-bb31e5e2.entry.js.map +0 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: var(--font-family);
|
|
3
|
-
font-size: var(--font-size);
|
|
2
|
+
font-family: var(--pl-font-family);
|
|
3
|
+
font-size: var(--pl-font-size);
|
|
4
4
|
--max-width: 1080px;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.viewport-margins {
|
|
8
8
|
max-width: calc(var(--max-width) + 0.5em); /* plus universal nav item link padding */
|
|
9
9
|
margin: 0 auto;
|
|
10
|
-
padding: 0 var(--viewport-margins-gutter, 1em);
|
|
10
|
+
padding: 0 var(--pl-viewport-margins-gutter, 1em);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.skip-to-content-link {
|
|
14
14
|
position: absolute;
|
|
15
15
|
transform: translateY(-300%);
|
|
16
|
-
background: var(--color-bg-default);
|
|
16
|
+
background: var(--pl-color-bg-default);
|
|
17
17
|
left: 0.5em;
|
|
18
18
|
padding: 0.5em 1em;
|
|
19
19
|
margin-top: 0.5em;
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
|
|
23
23
|
.skip-to-content-link:focus {
|
|
24
24
|
transform: translateY(0%);
|
|
25
|
-
color: var(--color-fg-default);
|
|
25
|
+
color: var(--pl-color-fg-default);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.universal-nav {
|
|
29
|
-
background: var(--color-penn-blue);
|
|
29
|
+
background: var(--pl-color-penn-blue);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.universal-nav ul {
|
|
33
33
|
display: flex;
|
|
34
34
|
align-items: baseline;
|
|
35
35
|
flex-wrap: wrap;
|
|
36
|
-
scrollbar-color: var(--color-penn-red);
|
|
36
|
+
scrollbar-color: var(--pl-color-penn-red);
|
|
37
37
|
list-style: none;
|
|
38
38
|
padding: 0;
|
|
39
39
|
margin: 0;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
font-size: 0.75em;
|
|
50
50
|
letter-spacing: 0.075em;
|
|
51
51
|
font-weight: 600;
|
|
52
|
-
color: var(--color-fg-subtle-on-emphasis);
|
|
52
|
+
color: var(--pl-color-fg-subtle-on-emphasis);
|
|
53
53
|
padding: 0.5em;
|
|
54
54
|
text-decoration: none;
|
|
55
55
|
}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: var(--font-family);
|
|
3
|
-
font-size: var(--font-size);
|
|
2
|
+
font-family: var(--pl-font-family);
|
|
3
|
+
font-size: var(--pl-font-size);
|
|
4
4
|
line-height: normal;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
@media print {
|
|
8
|
+
:host {
|
|
9
|
+
display: none;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
7
13
|
a {
|
|
8
14
|
display: flex;
|
|
9
15
|
align-items: center;
|
|
@@ -13,7 +19,7 @@ a {
|
|
|
13
19
|
bottom: 0.75em;
|
|
14
20
|
right: 0.75em;
|
|
15
21
|
box-shadow: rgba(0,0,0,0.3) 0px 2px 16px 0px;
|
|
16
|
-
color: var(--color-penn-blue);
|
|
22
|
+
color: var(--pl-color-penn-blue);
|
|
17
23
|
text-decoration: none;
|
|
18
24
|
font-weight: 500;
|
|
19
25
|
padding: 0.15em;
|
|
@@ -30,14 +36,14 @@ a {
|
|
|
30
36
|
|
|
31
37
|
a:hover {
|
|
32
38
|
text-decoration: underline;
|
|
33
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
34
|
-
text-decoration-thickness: var(--link-hover-text-decoration-thickness);
|
|
39
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
40
|
+
text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
|
|
35
41
|
}
|
|
36
42
|
|
|
37
43
|
a:hover,
|
|
38
44
|
a:focus {
|
|
39
45
|
outline: none;
|
|
40
|
-
box-shadow: 0 0 0 2px var(--color-bg-attention),0 0 0 4px var(--color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;
|
|
46
|
+
box-shadow: 0 0 0 2px var(--pl-color-bg-attention),0 0 0 4px var(--pl-color-penn-blue), rgba(0,0,0,0.3) 0px 2px 16px 0px;;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
svg {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: var(--font-family);
|
|
3
|
-
font-size: var(--font-size);
|
|
2
|
+
font-family: var(--pl-font-family);
|
|
3
|
+
font-size: var(--pl-font-size);
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
padding: 1rem;
|
|
8
|
-
background: var(--color-bg-subtle);
|
|
8
|
+
background: var(--pl-color-bg-subtle);
|
|
9
9
|
aspect-ratio: 3/2;
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -4,13 +4,19 @@
|
|
|
4
4
|
display: block;
|
|
5
5
|
background: #eeeff4;
|
|
6
6
|
padding: 1.5em 1em;
|
|
7
|
-
font-family: var(--font-family);
|
|
8
|
-
font-size: var(--font-size);
|
|
9
|
-
color: var(--color-fg-default);
|
|
7
|
+
font-family: var(--pl-font-family);
|
|
8
|
+
font-size: var(--pl-font-size);
|
|
9
|
+
color: var(--pl-color-fg-default);
|
|
10
10
|
line-height: 1.4;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
@media print {
|
|
15
|
+
:host {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
/* Container Layout
|
|
15
21
|
---------------------------------------- */
|
|
16
22
|
.feedback-container {
|
|
@@ -19,8 +25,7 @@
|
|
|
19
25
|
flex-wrap: wrap;
|
|
20
26
|
gap: 0.5em;
|
|
21
27
|
width: 100%;
|
|
22
|
-
|
|
23
|
-
margin: 0 auto;
|
|
28
|
+
justify-content: center;
|
|
24
29
|
}
|
|
25
30
|
|
|
26
31
|
@media (max-width: 26em) {
|
|
@@ -34,7 +39,7 @@
|
|
|
34
39
|
h2 {
|
|
35
40
|
display: inline-block;
|
|
36
41
|
margin: 0 0.5em 0 0;
|
|
37
|
-
font-family: var(--font-sans-serif);
|
|
42
|
+
font-family: var(--pl-font-sans-serif);
|
|
38
43
|
font-size: 1em;
|
|
39
44
|
font-weight: 600;
|
|
40
45
|
}
|
|
@@ -51,10 +56,10 @@ strong {
|
|
|
51
56
|
/* Links
|
|
52
57
|
---------------------------------------- */
|
|
53
58
|
a {
|
|
54
|
-
color: var(--color-fg-accent);
|
|
59
|
+
color: var(--pl-color-fg-accent);
|
|
55
60
|
text-decoration: underline;
|
|
56
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
57
|
-
text-decoration-thickness: var(--link-text-decoration-thickness);
|
|
61
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
62
|
+
text-decoration-thickness: var(--pl-link-text-decoration-thickness);
|
|
58
63
|
}
|
|
59
64
|
|
|
60
65
|
/* Buttons
|
|
@@ -65,12 +70,12 @@ button {
|
|
|
65
70
|
align-items: center;
|
|
66
71
|
gap: 0.5em;
|
|
67
72
|
padding: 0.5em 1.5em;
|
|
68
|
-
font-family: var(--font-family);
|
|
73
|
+
font-family: var(--pl-font-family);
|
|
69
74
|
font-weight: 500;
|
|
70
75
|
line-height: 1.4;
|
|
71
|
-
color: var(--color-fg-default);
|
|
72
|
-
background: var(--color-bg-default);
|
|
73
|
-
border: solid 1px var(--color-fg-subtle);
|
|
76
|
+
color: var(--pl-color-fg-default);
|
|
77
|
+
background: var(--pl-color-bg-default);
|
|
78
|
+
border: solid 1px var(--pl-color-fg-subtle);
|
|
74
79
|
border-radius: 1em;
|
|
75
80
|
box-sizing: border-box;
|
|
76
81
|
}
|
|
@@ -88,13 +93,13 @@ button:hover span {
|
|
|
88
93
|
*:focus {
|
|
89
94
|
outline: 0;
|
|
90
95
|
box-shadow:
|
|
91
|
-
0 0 0 2px var(--color-bg-attention),
|
|
92
|
-
0 0 0 3px var(--color-bg-emphasis);
|
|
96
|
+
0 0 0 2px var(--pl-color-bg-attention),
|
|
97
|
+
0 0 0 3px var(--pl-color-bg-emphasis);
|
|
93
98
|
}
|
|
94
99
|
|
|
95
100
|
p:focus {
|
|
96
101
|
outline: none;
|
|
97
|
-
box-shadow: 0 0 0 2px var(--color-bg-attention), 0 0 0 3px var(--color-bg-emphasis);
|
|
102
|
+
box-shadow: 0 0 0 2px var(--pl-color-bg-attention), 0 0 0 3px var(--pl-color-bg-emphasis);
|
|
98
103
|
}
|
|
99
104
|
|
|
100
105
|
/* Responsive Adjustments
|
|
@@ -1,32 +1,37 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: var(--font-family);
|
|
3
|
-
font-size: var(--font-size);
|
|
4
|
-
--max-width: 1080px;
|
|
2
|
+
font-family: var(--pl-font-family);
|
|
3
|
+
font-size: var(--pl-font-size);
|
|
5
4
|
--padding-bottom: 5.75rem;
|
|
6
5
|
}
|
|
7
6
|
|
|
7
|
+
@media print {
|
|
8
|
+
:host {
|
|
9
|
+
display: none;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
8
13
|
*, *::before, *::after {
|
|
9
14
|
box-sizing: border-box;
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
.website-footer-wrapper {
|
|
13
|
-
background: var(--color-penn-blue);
|
|
18
|
+
background: var(--pl-color-penn-blue);
|
|
14
19
|
padding-bottom: var(--padding-bottom);
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
.viewport-margins {
|
|
18
|
-
max-width: var(--max-width);
|
|
23
|
+
max-width: var(--pl-viewport-max-width);
|
|
19
24
|
margin: 0 auto;
|
|
20
|
-
padding: 0 var(--viewport-margins-gutter, 1em);
|
|
25
|
+
padding: 0 var(--pl-viewport-margins-gutter, 1em);
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
.website-footer {
|
|
24
29
|
background-size: cover;
|
|
25
|
-
color: var(--color-fg-subtle-on-emphasis);
|
|
30
|
+
color: var(--pl-color-fg-subtle-on-emphasis);
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
.website-footer a {
|
|
29
|
-
color: var(--color-fg-subtle-on-emphasis);
|
|
34
|
+
color: var(--pl-color-fg-subtle-on-emphasis);
|
|
30
35
|
}
|
|
31
36
|
|
|
32
37
|
.website-footer__content {
|
|
@@ -62,7 +67,7 @@
|
|
|
62
67
|
|
|
63
68
|
.website-footer__links a:hover {
|
|
64
69
|
text-decoration: underline;
|
|
65
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
70
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
.website-footer__footer {
|
|
@@ -93,5 +98,5 @@
|
|
|
93
98
|
|
|
94
99
|
.website-footer__links--footer a:hover {
|
|
95
100
|
text-decoration: underline;
|
|
96
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
101
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
97
102
|
}
|
|
@@ -1,4 +1,29 @@
|
|
|
1
1
|
import { h, getAssetPath } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* A footer component for Penn Libraries websites that displays contact information,
|
|
4
|
+
* social media links, and custom navigation sections. Automatically organizes
|
|
5
|
+
* child content into navigation sections based on headings and links.
|
|
6
|
+
*
|
|
7
|
+
* @component
|
|
8
|
+
* @example
|
|
9
|
+
* <pennlibs-footer>
|
|
10
|
+
* <section>
|
|
11
|
+
* <h2>Resources</h2>
|
|
12
|
+
* <a href="/databases">Databases</a>
|
|
13
|
+
* <a href="/research-guides">Research Guides</a>
|
|
14
|
+
* </section>
|
|
15
|
+
* <section>
|
|
16
|
+
* <h2>Services</h2>
|
|
17
|
+
* <a href="/consultation">Research Consultation</a>
|
|
18
|
+
* <a href="/instruction">Library Instruction</a>
|
|
19
|
+
* </section>
|
|
20
|
+
* </pennlibs-footer>
|
|
21
|
+
*
|
|
22
|
+
* @slot default - Custom navigation sections with h2 headings and anchor links
|
|
23
|
+
*
|
|
24
|
+
* @prop --pl-viewport-max-width: The maximum width of the footer content.
|
|
25
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the footer content.
|
|
26
|
+
*/
|
|
2
27
|
export class Footer {
|
|
3
28
|
componentWillLoad() {
|
|
4
29
|
this.setNavigationByChildren();
|
|
@@ -23,12 +48,12 @@ export class Footer {
|
|
|
23
48
|
}
|
|
24
49
|
render() {
|
|
25
50
|
const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');
|
|
26
|
-
return (h("div", { key: '
|
|
27
|
-
background: `var(--color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
51
|
+
return (h("div", { key: '9c2bcb29ada71917ecc4a2d7fe50997680e512c7', class: "website-footer-wrapper" }, h("footer", { key: '9f1407819668d47899efedd7d1a3cb56a2d21890', class: "website-footer", style: {
|
|
52
|
+
background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,
|
|
28
53
|
backgroundSize: 'cover',
|
|
29
|
-
} }, h("div", { key: '
|
|
54
|
+
} }, h("div", { key: '4042e6d23d0628d3f460fd2d645264a8c9e078f3', class: "viewport-margins" }, h("div", { key: '9fc499534305d77f5f2f7ee8ee9af9dab6feef5f', class: "website-footer__content" }, h("div", { key: '3ef2da60bb255be3bc67ac3b2296a6ab894f56ad', class: "website-footer__links-container" }, h("section", { key: '8464a7b015fe3ec58fed0070aa4868b2967a9afe' }, h("h2", { key: 'dc99bcfe767d2d9bc077c3ebf737b739de826f17', class: "website-footer__heading" }, "Penn Libraries"), h("ul", { key: 'e67fe3bc6701d03a534ddad3f3a415f86968a968', class: "website-footer__links" }, h("li", { key: 'd4258dc3d05e7bee6496d302e55e248cbb323de1' }, h("a", { key: 'fb1b1a029aba8e22199225acbfc579ad72a083ec', href: "https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206" }, "3420 Walnut Street", h("br", { key: 'a2b74af1199901799942ad00039b7aa50ac18faf' }), "Philadelphia, PA 19104-6206")), h("li", { key: 'b9557840862921b4afe4bb7698ac82ad5865d2da' }, h("a", { key: 'd5e8ad2d102012daf8f3f1ca965073cb351f28bc', href: "tel:(215) 898-7555" }, "(215) 898-7555")), h("li", { key: '1d119f2b3465c75eb5e2978b3e955cd04eff0da0' }, h("a", { key: '9f8e3ac88902c4bf2669b8bcb38273d158e333b3', href: "https://www.library.upenn.edu/contact-us" }, "Contact us")), h("li", { key: 'ed548eab7405dd44c14acd05899c912259c95e5e' }, h("a", { key: '59bf08266f6c744623d7d92c864cc2987879b227', href: "https://www.library.upenn.edu/about/hours", target: "_blank" }, "Locations and hours")))), h("section", { key: '0ec819bb0df59ad7b0acd47abb93ff39a66a670e' }, h("h2", { key: '790eb358ecca24cb693830766e9134853cc98436', class: "website-footer__heading" }, "Stay in touch"), h("ul", { key: 'bff8383fcdacc51b449eee06f88575bdc7390ccb', class: "website-footer__links" }, h("li", { key: '5acd132276b6dea27c469719f39533ec32160a10' }, h("a", { key: '9ae37a20fe94e7c9900fb9121985883faa66026f', href: "https://www.alumni.upenn.edu/libsignup" }, "Newsletter")), h("li", { key: 'b81d975f2301ce3f52dc21968cdfb4084f62a1dd' }, h("a", { key: 'b959feb337dcded7396c45510d24a677dabe5f13', href: "https://www.instagram.com/upennlib/" }, "Instagram")), h("li", { key: '76a73c4d49c707a1a3aa7744482f80c22128fb74' }, h("a", { key: '0757181117c5f2c7426210e426dc2d122780d894', href: "https://www.facebook.com/PennLibraries/" }, "Facebook")), h("li", { key: 'f2be8408042d5271e179eb3a1ed3370d36451d79' }, h("a", { key: '360c4a8a4236ee8e9b1db3780710b4fea9189888', href: "https://www.linkedin.com/company/penn-libraries" }, "LinkedIn")))), this.navigationByChildren && [
|
|
30
55
|
this.navigationByChildren.map(section => (h("section", null, h("h2", { class: "website-footer__heading" }, section.heading), h("ul", { class: "website-footer__links" }, section.links.map(link => (h("li", null, h("a", { href: link.href }, link.label))))))))
|
|
31
|
-
]))), h("div", { key: '
|
|
56
|
+
]))), h("div", { key: 'a4fb2085daf97f5b356463a2e43d800e43682b6c', class: "website-footer__footer" }, h("div", { key: 'a85cac4dce8cdda27b144114aea44105fdf5be04', class: "viewport-margins" }, h("ul", { key: 'f2ebd327db928ba7408b2e85f0e0e594b377f0c5', class: "website-footer__links website-footer__links--footer" }, h("li", { key: 'd5bfe5300a9d69d31129c16b504539fdf097c1b4' }, h("a", { key: 'e06f37953b31cae81eece04f3cc7904ab1aedb5f', href: "https://www.upenn.edu/" }, "UPenn")), h("li", { key: '5fd231fd169a20096cbaec59da61db6577ed30ec' }, h("a", { key: 'ddf2fefb50f1566defc3f0ddc202ee8fd0ab83c2', href: "https://www.upenn.edu/about/privacy-policy" }, "Privacy Policy")), h("li", { key: 'ea68f260488498455443c2afeab661dc0fa44033' }, h("a", { key: '8f17fe53fc2af239a0bc7c724e9ee4637d95d8f4', href: "https://accessibility.web-resources.upenn.edu/get-help" }, "Report Accessibility Issues and Get Help")), h("li", { key: '818bb632487b3b880602f065d6c3c55bb03cd0e6' }, h("a", { key: '887b34e197ebd942adbe9bd29d6ad8be721ca332', href: "https://www.upenn.edu/about/disclaimer" }, "Disclaimer")), h("li", { key: '3b8ab2f7cc12bb7af048d11efe06eff5ab18ca02' }, h("a", { key: '5e5e57cdc3974768005123433354ef4f7bd62540', href: "https://www.publicsafety.upenn.edu/contact/" }, "Emergency Services")), h("li", { key: '8968a082b9bb04d2996c9bcba7104271ee0ded4d' }, h("a", { key: 'fb5373b19b964ba138053dd315e984c010384118', href: "https://www.upenn.edu/about/report-copyright-infringement" }, "Report Copyright Infringement"))))))));
|
|
32
57
|
}
|
|
33
58
|
static get is() { return "pennlibs-footer"; }
|
|
34
59
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"pennlibs-footer.js","sourceRoot":"","sources":["../../../src/components/pennlibs-footer/pennlibs-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, getAssetPath, State } from '@stencil/core';\n\n/**\n * A footer component for Penn Libraries websites that displays contact information,\n * social media links, and custom navigation sections. Automatically organizes\n * child content into navigation sections based on headings and links.\n * \n * @component\n * @example\n * <pennlibs-footer>\n * <section>\n * <h2>Resources</h2>\n * <a href=\"/databases\">Databases</a>\n * <a href=\"/research-guides\">Research Guides</a>\n * </section>\n * <section>\n * <h2>Services</h2>\n * <a href=\"/consultation\">Research Consultation</a>\n * <a href=\"/instruction\">Library Instruction</a>\n * </section>\n * </pennlibs-footer>\n * \n * @slot default - Custom navigation sections with h2 headings and anchor links\n * \n * @prop --pl-viewport-max-width: The maximum width of the footer content.\n * @prop --pl-viewport-margins-gutter: The gutter width of the footer content.\n */\n@Component({\n tag: 'pennlibs-footer',\n styleUrl: 'pennlibs-footer.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Footer {\n @State() navigationByChildren;\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n this.setNavigationByChildren();\n }\n\n setNavigationByChildren() {\n try {\n if (this.hostElement.children) {\n this.navigationByChildren = Array.from(this.hostElement.children).reduce(\n (acc, element) => {\n acc = acc.concat({\n heading: element.querySelector('h2').innerText,\n links: Array.from(element.querySelectorAll('a')).map(link => {\n return { label: link.innerText, href: link.href }\n })\n })\n \n return acc;\n }, []);\n }\n } catch {\n console.warn('<pennlibs-footer> Composed with unexpected HTML', this.hostElement.children)\n }\n }\n\n render() {\n const footerBackgroundSrc = getAssetPath('./assets/footer-bg.webp');\n \n return (\n <div class=\"website-footer-wrapper\">\n <footer class=\"website-footer\" style={{\n background: `var(--pl-color-penn-blue) url(${footerBackgroundSrc}) no-repeat 50% 50%`,\n backgroundSize: 'cover',\n }}>\n <div class=\"viewport-margins\">\n <div class=\"website-footer__content\">\n <div class=\"website-footer__links-container\">\n <section>\n <h2 class=\"website-footer__heading\">Penn Libraries</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://maps.google.com/?q=Van Pelt Library 3420 Walnut Street, Philadelphia, PA 19104-6206\">3420 Walnut Street<br />Philadelphia, PA 19104-6206</a></li>\n <li><a href=\"tel:(215) 898-7555\">(215) 898-7555</a></li>\n <li><a href=\"https://www.library.upenn.edu/contact-us\">Contact us</a></li>\n <li><a href=\"https://www.library.upenn.edu/about/hours\" target=\"_blank\">Locations and hours</a></li>\n </ul>\n </section>\n <section>\n <h2 class=\"website-footer__heading\">Stay in touch</h2>\n <ul class=\"website-footer__links\">\n <li><a href=\"https://www.alumni.upenn.edu/libsignup\">Newsletter</a></li>\n <li><a href=\"https://www.instagram.com/upennlib/\">Instagram</a></li>\n <li><a href=\"https://www.facebook.com/PennLibraries/\">Facebook</a></li>\n <li><a href=\"https://www.linkedin.com/company/penn-libraries\">LinkedIn</a></li>\n </ul>\n </section>\n {this.navigationByChildren && [\n this.navigationByChildren.map(section => (\n <section>\n <h2 class=\"website-footer__heading\">{section.heading}</h2>\n <ul class=\"website-footer__links\">\n {section.links.map(link => (\n <li><a href={link.href}>{link.label}</a></li>\n ))}\n </ul>\n </section>\n ))\n ]}\n </div>\n </div>\n </div>\n <div class=\"website-footer__footer\">\n <div class=\"viewport-margins\"> \n <ul class=\"website-footer__links website-footer__links--footer\">\n <li><a href=\"https://www.upenn.edu/\">UPenn</a></li>\n <li><a href=\"https://www.upenn.edu/about/privacy-policy\">Privacy Policy</a></li>\n <li><a href=\"https://accessibility.web-resources.upenn.edu/get-help\">Report Accessibility Issues and Get Help</a></li>\n <li><a href=\"https://www.upenn.edu/about/disclaimer\">Disclaimer</a></li>\n <li><a href=\"https://www.publicsafety.upenn.edu/contact/\">Emergency Services</a></li>\n <li><a href=\"https://www.upenn.edu/about/report-copyright-infringement\">Report Copyright Infringement</a></li>\n </ul>\n </div>\n </div>\n </footer>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
font-family: var(--font-family);
|
|
3
|
-
font-size: var(--font-size);
|
|
4
|
-
color: var(--color-fg-default);
|
|
5
|
-
--max-width: 1080px;
|
|
2
|
+
font-family: var(--pl-font-family);
|
|
3
|
+
font-size: var(--pl-font-size);
|
|
4
|
+
color: var(--pl-color-fg-default);
|
|
6
5
|
}
|
|
7
6
|
|
|
8
7
|
*, *:before, *:after {
|
|
@@ -11,9 +10,9 @@
|
|
|
11
10
|
|
|
12
11
|
.viewport-margins {
|
|
13
12
|
width: 100%;
|
|
14
|
-
max-width: var(--max-width);
|
|
13
|
+
max-width: var(--pl-viewport-max-width);
|
|
15
14
|
margin: 0 auto;
|
|
16
|
-
padding: 0 var(--viewport-margins-gutter, 1em);
|
|
15
|
+
padding: 0 var(--pl-viewport-margins-gutter, 1em);
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
a {
|
|
@@ -21,21 +20,21 @@ a {
|
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
*:focus {
|
|
24
|
-
box-shadow: 0 0 0 2px var(--color-bg-accent), 0 0 0 4px var(--color-bg-accent-emphasis);
|
|
23
|
+
box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-bg-accent-emphasis);
|
|
25
24
|
outline: none;
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
/* Header base styles */
|
|
29
28
|
.website-header {
|
|
30
|
-
--color-fg-service: var(--color-penn-blue);
|
|
31
|
-
--color-fg-menu: var(--color-fg-default);
|
|
32
|
-
--color-bg-menu: var(--color-bg-default);
|
|
29
|
+
--color-fg-service: var(--pl-color-penn-blue);
|
|
30
|
+
--color-fg-menu: var(--pl-color-fg-default);
|
|
31
|
+
--color-bg-menu: var(--pl-color-bg-default);
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
.website-header--dark {
|
|
36
|
-
--color-fg-service: var(--color-fg-on-emphasis);
|
|
37
|
-
--color-fg-menu: var(--color-fg-on-emphasis);
|
|
38
|
-
--color-bg-menu: var(--color-penn-blue);
|
|
35
|
+
--color-fg-service: var(--pl-color-fg-on-emphasis);
|
|
36
|
+
--color-fg-menu: var(--pl-color-fg-on-emphasis);
|
|
37
|
+
--color-bg-menu: var(--pl-color-penn-blue);
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
/* Logo and service name */
|
|
@@ -197,7 +196,7 @@ a {
|
|
|
197
196
|
.website-header__navigation-list a:hover,
|
|
198
197
|
.website-header__navigation-list button:hover {
|
|
199
198
|
text-decoration: underline;
|
|
200
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
199
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
201
200
|
}
|
|
202
201
|
|
|
203
202
|
.website-header__navigation-button {
|
|
@@ -225,4 +224,10 @@ a {
|
|
|
225
224
|
|
|
226
225
|
.website-header__navigation-button[aria-expanded=true] svg {
|
|
227
226
|
rotate: 180deg;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@media print {
|
|
230
|
+
.website-header__inner-container > *:not(.website-header__logo-name-container) {
|
|
231
|
+
display: none;
|
|
232
|
+
}
|
|
228
233
|
}
|
|
@@ -18,7 +18,8 @@ import { LogoBlue } from "./logo-blue";
|
|
|
18
18
|
* @slot end - Content to display at the end of the header (right side)
|
|
19
19
|
* @slot name-end - Content to display at the end of the service name (right side)
|
|
20
20
|
*
|
|
21
|
-
* @prop --max-width: The maximum width of the header.
|
|
21
|
+
* @prop --pl-viewport-max-width: The maximum width of the header.
|
|
22
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the header content.
|
|
22
23
|
*/
|
|
23
24
|
export class Header {
|
|
24
25
|
constructor() {
|
|
@@ -62,7 +63,7 @@ export class Header {
|
|
|
62
63
|
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
63
64
|
}
|
|
64
65
|
render() {
|
|
65
|
-
return (h("header", { key: '
|
|
66
|
+
return (h("header", { key: '45fe6be2cc7bbd406efbb026c1931f20b9f55e48', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, h("div", { key: '4ebf135a2bba3b2285dda568d1a8845fb929841f', class: "website-header__inner-container" }, h("div", { key: '5782f3fae1588cac9f818ee5a08eedbad6663925', class: "website-header__logo-name-container" }, h("a", { key: '20033643e8cfd34b4d445d1a4df882c8ce6401b4', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? h(LogoWhite, null) : h(LogoBlue, null)), this.serviceName && (h("a", { key: 'b020528632198fbe654983f025c63ebf0d1b013e', href: "/", class: "website-header__service-link" }, h("span", { key: 'a00a21f06791eca0cf1989ff308b13ce1825ab63', class: "website-header__service-name" }, this.serviceName), this.serviceLede && h("span", { key: 'c7e5f0b068ae893b5c6eac5c79b782fec080d0ca', class: "website-header__service-lede" }, this.serviceLede))), h("slot", { key: '48c9a328f94a9d483daef354b69609ba4cb113aa', name: "name-end" })), this.navigation.length > 0 && (h("nav", { key: 'd5894ef67d4a30d229d3ad2d612da66b519e0421', class: "website-header__navigation" }, h("button", { key: 'fcf8bb70103057aaaa62b38ffb570ad7cecbf443', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (h("ol", { key: 'e57830c7ec66374f653cadc448fc7689aebde718', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => h("li", { innerHTML: element.outerHTML })))))), h("slot", { key: '2962683e615d452fd5382fb34c96ecbfb9fb4ad1', name: "end" }))));
|
|
66
67
|
}
|
|
67
68
|
static get is() { return "pennlibs-header"; }
|
|
68
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC
|
|
1
|
+
{"version":3,"file":"pennlibs-header.js","sourceRoot":"","sources":["../../../src/components/pennlibs-header/pennlibs-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, State } from '@stencil/core';\n\nimport { LogoWhite } from \"./logo-white\"\nimport { LogoBlue } from \"./logo-blue\"\n\n/**\n * A header component for Penn Libraries websites that displays the Penn Libraries logo,\n * service branding, and navigation. Supports both light and dark themes.\n * \n * @component\n * @example\n * <pennlibs-header \n * service-name=\"Find Books\" \n * service-lede=\"Search our catalog and collections\"\n * theme=\"light\">\n * <a href=\"/search\">Search</a>\n * <a href=\"/help\">Help</a>\n * </pennlibs-header>\n * \n * @slot end - Content to display at the end of the header (right side)\n * @slot name-end - Content to display at the end of the service name (right side)\n * \n * @prop --pl-viewport-max-width: The maximum width of the header.\n * @prop --pl-viewport-margins-gutter: The gutter width of the header content.\n */\n@Component({\n tag: 'pennlibs-header',\n styleUrl: 'pennlibs-header.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class Header {\n /**\n * The service name should clearly describe what users want to accomplish. Avoid technical jargon, technology names, and acronyms.\n */\n @Prop() serviceName?: string;\n\n /**\n * A brief, compelling description that helps users understand what they can do here. Keep it short and focused on user benefits.\n */\n @Prop() serviceLede?: string;\n\n /**\n * The URL where the service name links to, typically the service homepage or main landing page.\n * @default \"/\"\n */\n @Prop() serviceHref?: string = \"/\";\n\n /**\n * The visual theme of the header. Light theme uses blue logo, dark theme uses white logo.\n * @default 'light'\n */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n @State() isMenuOpen: boolean = false;\n @State() navigation = [];\n\n @Element() hostElement: HTMLElement;\n\n componentWillLoad() {\n if (this.navigation.length === 0) {\n this.setNavigation();\n }\n }\n\n handleToggleMenu() {\n this.isMenuOpen = !this.isMenuOpen\n }\n\n setNavigation() {\n this.navigation = Array.from(this.hostElement.children).reduce((acc, element) => {\n if (element.hasAttribute('slot')) {\n return acc;\n }\n\n switch (element.tagName) {\n case 'A':\n case 'FORM':\n acc = acc.concat(element)\n default:\n break;\n }\n\n return acc;\n }, []);\n }\n\n renderMenuIcon() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path fill=\"currentColor\" d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/></svg>\n )\n }\n\n render() {\n return (\n <header class={`viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}`}>\n <div class=\"website-header__inner-container\">\n <div class=\"website-header__logo-name-container\">\n <a href=\"https://www.library.upenn.edu/\" class=\"website-header_logo-link\" aria-label=\"Penn Libraries\">\n {this.theme === 'dark' ? <LogoWhite /> : <LogoBlue />}\n </a>\n {this.serviceName && (\n <a href=\"/\" class=\"website-header__service-link\">\n <span class=\"website-header__service-name\">{this.serviceName}</span>\n {this.serviceLede && <span class=\"website-header__service-lede\">{this.serviceLede}</span>}\n </a>\n )}\n <slot name=\"name-end\" />\n </div>\n\n {this.navigation.length > 0 && (\n <nav class=\"website-header__navigation\">\n <button class=\"website-header__navigation-button\" aria-expanded={`${this.isMenuOpen}`} onClick={() => this.handleToggleMenu()}>\n {this.renderMenuIcon()} Menu\n </button>\n {this.navigation && (\n <ol class={`website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}`}>\n {this.navigation.map(element => <li innerHTML={element.outerHTML} />)}\n </ol>\n )}\n </nav>\n )}\n\n <slot name=\"end\" />\n </div>\n </header>\n );\n }\n}"]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--hero-height: clamp(42vh, 32rem, 26rem);
|
|
3
|
-
--hero-heading-font: var(--font-serif);
|
|
4
|
-
--
|
|
5
|
-
--color-typo: var(--color-fg-on-emphasis);
|
|
2
|
+
--pl-hero-height: clamp(42vh, 32rem, 26rem);
|
|
3
|
+
--pl-hero-heading-font: var(--pl-font-serif);
|
|
4
|
+
--pl-hero-color: var(--pl-color-fg-on-emphasis);
|
|
6
5
|
}
|
|
7
6
|
|
|
8
7
|
*, *:before, *:after {
|
|
@@ -23,16 +22,16 @@
|
|
|
23
22
|
|
|
24
23
|
.viewport-margins {
|
|
25
24
|
width: 100%;
|
|
26
|
-
max-width: var(--max-width);
|
|
25
|
+
max-width: var(--pl-viewport-max-width);
|
|
27
26
|
margin: 0 auto;
|
|
28
|
-
padding: 0 var(--viewport-margins-gutter, 1em);
|
|
27
|
+
padding: 0 var(--pl-viewport-margins-gutter, 1em);
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
/* Start of Selection */
|
|
32
31
|
/* Hero section */
|
|
33
32
|
.hero {
|
|
34
33
|
position: relative;
|
|
35
|
-
min-height: var(--hero-height);
|
|
34
|
+
min-height: var(--pl-hero-height);
|
|
36
35
|
height: 100%;
|
|
37
36
|
background-size: cover;
|
|
38
37
|
background-repeat: no-repeat;
|
|
@@ -74,20 +73,20 @@
|
|
|
74
73
|
|
|
75
74
|
.hero__heading-container {
|
|
76
75
|
margin-top: auto;
|
|
77
|
-
padding-top:
|
|
78
|
-
padding-bottom:
|
|
76
|
+
padding-top: var(--pl-space-3xl);
|
|
77
|
+
padding-bottom: var(--pl-space-3xl);
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.hero__heading {
|
|
82
|
-
text-shadow: 1px 1px 2px var(--color-fg-default);
|
|
81
|
+
text-shadow: 1px 1px 2px var(--pl-color-fg-default);
|
|
83
82
|
line-height: 1.1;
|
|
84
83
|
font-size: 2.75em;
|
|
85
84
|
font-weight: bold;
|
|
86
|
-
font-family: var(--hero-heading-font);
|
|
85
|
+
font-family: var(--pl-hero-heading-font);
|
|
87
86
|
text-wrap: pretty;
|
|
88
87
|
max-width: 30ch;
|
|
89
88
|
margin: 0;
|
|
90
|
-
color: var(--color
|
|
89
|
+
color: var(--pl-hero-color);
|
|
91
90
|
}
|
|
92
91
|
|
|
93
92
|
@media (max-width: 920px) {
|
|
@@ -98,9 +97,9 @@
|
|
|
98
97
|
|
|
99
98
|
.hero__sub-heading {
|
|
100
99
|
font-size: 1.15em;
|
|
101
|
-
font-family: var(--font-family);
|
|
100
|
+
font-family: var(--pl-font-family);
|
|
102
101
|
font-weight: 500;
|
|
103
|
-
color: var(--color
|
|
102
|
+
color: var(--pl-hero-color);
|
|
104
103
|
max-width: 52ch;
|
|
105
104
|
text-wrap: pretty;
|
|
106
105
|
margin-top: 1em;
|
|
@@ -109,13 +108,13 @@
|
|
|
109
108
|
|
|
110
109
|
.hero__sub-heading a {
|
|
111
110
|
text-decoration: underline;
|
|
112
|
-
text-underline-offset: var(--link-text-underline-offset);
|
|
113
|
-
text-decoration-thickness: var(--link-text-decoration-thickness);
|
|
114
|
-
color: var(--color
|
|
111
|
+
text-underline-offset: var(--pl-link-text-underline-offset);
|
|
112
|
+
text-decoration-thickness: var(--pl-link-text-decoration-thickness);
|
|
113
|
+
color: var(--pl-hero-color);
|
|
115
114
|
}
|
|
116
115
|
|
|
117
116
|
.hero__sub-heading a:hover {
|
|
118
|
-
text-decoration-thickness: var(--link-hover-text-decoration-thickness);
|
|
117
|
+
text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
|
|
119
118
|
}
|
|
120
119
|
|
|
121
120
|
.hero__sub-heading strong {
|
|
@@ -8,7 +8,8 @@ const getCurrentImageSource = (pictureElement) => {
|
|
|
8
8
|
*
|
|
9
9
|
* @slot start - Content to display at the start (top) of the hero.
|
|
10
10
|
*
|
|
11
|
-
* @prop --max-width: The maximum width of the hero inner content.
|
|
11
|
+
* @prop --pl-viewport-max-width: The maximum width of the hero inner content.
|
|
12
|
+
* @prop --pl-viewport-margins-gutter: The gutter width of the hero inner content.
|
|
12
13
|
*/
|
|
13
14
|
export class Hero {
|
|
14
15
|
constructor() {
|
|
@@ -50,7 +51,7 @@ export class Hero {
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
render() {
|
|
53
|
-
return (h("div", { key: '
|
|
54
|
+
return (h("div", { key: 'fa2bc27b539b4246a7ce13d84be0bbf5518d30dd', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, h("div", { key: '52f802774816bcaba73c4fa25a34c9dc391f4a3f', class: "hero__content" }, h("slot", { key: 'e11e8bf3909844383ee1199a3f04e8f64151466e', name: "start" }), h("div", { key: 'af38875bdfa03346e5ecb3bd352adc6a7f00fc02', class: "hero__heading-container" }, this.heroHeadingElement && (h("div", { key: '69e64c73f25bec3f26d95473ce01bc545beb98bc', class: "viewport-margins" }, h("h1", { key: '14e726629606b794fa59128cd6ab6b21fc97c0fa', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && h("p", { key: '2530d6cc635d41c2b062b7cf9c659e1877110ba7', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
54
55
|
}
|
|
55
56
|
static get is() { return "pennlibs-hero"; }
|
|
56
57
|
static get encapsulation() { return "shadow"; }
|