@penn-libraries/web 0.3.0-dev.3 → 0.3.0-dev.4
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-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js +3 -3
- package/dist/cjs/pennlibs-chat_5.cjs.entry.js.map +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.js +1 -1
- package/dist/collection/components/pennlibs-header/pennlibs-header.js.map +1 -1
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.css +5 -4
- package/dist/collection/components/pennlibs-hero/pennlibs-hero.js +1 -1
- package/dist/components/pennlibs-header.js +1 -1
- 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/esm/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.js.map +1 -1
- package/dist/esm/pennlibs-chat_5.entry.js +3 -3
- package/dist/esm/pennlibs-chat_5.entry.js.map +1 -1
- package/dist/web/{p-a921fec4.entry.js → p-a24d914e.entry.js} +4 -4
- package/dist/web/p-a24d914e.entry.js.map +1 -0
- package/dist/web/pennlibs-chat.pennlibs-feedback.pennlibs-footer.pennlibs-header.pennlibs-hero.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/package.json +1 -1
- package/dist/web/p-a921fec4.entry.js.map +0 -1
|
@@ -174,14 +174,14 @@ const Header = class {
|
|
|
174
174
|
return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, index.h("path", { fill: "currentColor", d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })));
|
|
175
175
|
}
|
|
176
176
|
render() {
|
|
177
|
-
return (index.h("header", { key: '865c3c13148c36b791d854b420fe34ac05207438', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: '372d85d6a5bdc55a80028adf971b99cf9bd39000', class: "website-header__inner-container" }, index.h("div", { key: '69b9151390e311f054aeee0fa99ba7f5d6e4f35f', class: "website-header__logo-name-container" }, index.h("a", { key: '8e5880531e043763b3c7279f3371bff49e1c51f8', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '37028e0b96a7e1f2fcd29e2c6a64be9697a9f657', href: "/", class: "website-header__service-link" }, index.h("span", { key: '808d5aea5f0a3c5cfcc6f889e2f9eefd23d11d1f', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: 'c099359cdc6d0c6344dfb28f34e736bcb12e1b02', class: "website-header__service-lede" }, this.serviceLede)))), this.navigation.length > 0 && (index.h("nav", { key: '
|
|
177
|
+
return (index.h("header", { key: '865c3c13148c36b791d854b420fe34ac05207438', class: `viewport-margins website-header ${this.theme === 'dark' && 'website-header--dark'}` }, index.h("div", { key: '372d85d6a5bdc55a80028adf971b99cf9bd39000', class: "website-header__inner-container" }, index.h("div", { key: '69b9151390e311f054aeee0fa99ba7f5d6e4f35f', class: "website-header__logo-name-container" }, index.h("a", { key: '8e5880531e043763b3c7279f3371bff49e1c51f8', href: "https://www.library.upenn.edu/", class: "website-header_logo-link", "aria-label": "Penn Libraries" }, this.theme === 'dark' ? index.h(LogoWhite, null) : index.h(LogoBlue, null)), this.serviceName && (index.h("a", { key: '37028e0b96a7e1f2fcd29e2c6a64be9697a9f657', href: "/", class: "website-header__service-link" }, index.h("span", { key: '808d5aea5f0a3c5cfcc6f889e2f9eefd23d11d1f', class: "website-header__service-name" }, this.serviceName), this.serviceLede && index.h("span", { key: 'c099359cdc6d0c6344dfb28f34e736bcb12e1b02', class: "website-header__service-lede" }, this.serviceLede)))), index.h("slot", { key: '85ad871d23d585803233001a6dbaf66735f0785f', name: "center" }), this.navigation.length > 0 && (index.h("nav", { key: '6d601072d530fe9ace278e10dfbdd05ab65e9d44', class: "website-header__navigation" }, index.h("button", { key: 'a44c189575fdb6b893a72c66d77264b310277cae', class: "website-header__navigation-button", "aria-expanded": `${this.isMenuOpen}`, onClick: () => this.handleToggleMenu() }, this.renderMenuIcon(), " Menu"), this.navigation && (index.h("ol", { key: '6d755b835555e009d80e10aa8cc87882070f819c', class: `website-header__navigation-list ${this.isMenuOpen && 'website-header__navigation-list--visible'}` }, this.navigation.map(element => index.h("li", { innerHTML: element.outerHTML })))))), index.h("slot", { key: '4a4a5255c453a1a7145f599074308276d84bd2e5', name: "end" }))));
|
|
178
178
|
}
|
|
179
179
|
static get assetsDirs() { return ["assets"]; }
|
|
180
180
|
get hostElement() { return index.getElement(this); }
|
|
181
181
|
};
|
|
182
182
|
Header.style = pennlibsHeaderCss;
|
|
183
183
|
|
|
184
|
-
const pennlibsHeroCss = ":host{--hero-height:clamp(
|
|
184
|
+
const pennlibsHeroCss = ":host{--hero-height:clamp(42vh, 32rem, 26rem);--hero-heading-font:var(--font-serif);--max-width:1080px;--color-typo:var(--color-fg-on-emphasis)}*,*:before,*:after{box-sizing:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.viewport-margins{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1em}.hero{position:relative;min-height:var(--hero-height);height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 33%;display:flex}.hero::before{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.05) 100%);z-index:0}.hero::after{content:\"\";display:flex;width:100%;height:100%;top:0;position:absolute;background:linear-gradient(180deg, rgba(1, 31, 91, 1) 0%, rgba(1, 31, 91, 0.9) 10%, rgba(1, 31, 91, 0.8) 20%, rgba(1, 31, 91, 0.1) 50%, rgba(1, 31, 91, 0.0) 100%);z-index:0}.hero__content{position:relative;display:flex;flex-direction:column;width:100%;z-index:1}.hero__heading-container{margin-top:auto;padding-top:3em;padding-bottom:3em}.hero__heading{text-shadow:1px 1px 2px var(--color-fg-default);line-height:1.1;font-size:2.75em;font-weight:bold;font-family:var(--hero-heading-font);text-wrap:pretty;max-width:30ch;margin:0;color:var(--color-typo)}@media (max-width: 920px){.hero__heading{font-size:2.5em}}.hero__sub-heading{font-size:1.15em;font-family:var(--font-family);font-weight:500;color:var(--color-typo);max-width:52ch;text-wrap:pretty;margin-top:1em;margin-bottom:0}.hero__sub-heading a{text-decoration:underline;text-underline-offset:var(--link-text-underline-offset);text-decoration-thickness:var(--link-text-decoration-thickness);color:var(--color-typo)}.hero__sub-heading a:hover{text-decoration-thickness:var(--link-hover-text-decoration-thickness)}.hero__sub-heading strong{font-weight:bold}@media (max-width: 620px){.hero__heading{font-size:2em}.hero__sub-heading{font-size:1em}}";
|
|
185
185
|
|
|
186
186
|
const getCurrentImageSource = (pictureElement) => {
|
|
187
187
|
const imgElement = pictureElement.querySelector('img');
|
|
@@ -228,7 +228,7 @@ const Hero = class {
|
|
|
228
228
|
}
|
|
229
229
|
}
|
|
230
230
|
render() {
|
|
231
|
-
return (index.h("div", { key: '
|
|
231
|
+
return (index.h("div", { key: '87c59d996e17ad0de49957658053e61868f91369', class: "hero", style: { backgroundImage: `url(${this.heroSrc})` } }, index.h("div", { key: '68e8a1bde0b506c044e0a7d3d63cc5617b52c025', class: "hero__content" }, index.h("slot", { key: '9a5a94c334922dc17e3d19002f2480d93a1a9612', name: "start" }), index.h("div", { key: 'abb6ea5015c9810829cde3b8c6a391b2c36298f2', class: "hero__heading-container" }, this.heroHeadingElement && (index.h("div", { key: '81d5b79af5f5ac2e006ebc594d4d9b4ffa1dbb53', class: "viewport-margins" }, index.h("h1", { key: '1c6672b6228b8d3d2f2d0666644fc9cb199150a0', class: "hero__heading", innerHTML: this.heroHeadingElement.innerText }), this.heroParagraphElement && index.h("p", { key: '5ffbee19a06e6ecac28aa84549cc8d0bef112cd2', class: "hero__sub-heading", innerHTML: this.heroParagraphElement.innerHTML })))))));
|
|
232
232
|
}
|
|
233
233
|
static get assetsDirs() { return ["assets"]; }
|
|
234
234
|
get hostElement() { return index.getElement(this); }
|