soames-gatsby-theme
Version:
A customizable Gatsby theme for personal websites using WordPress as a headless CMS.
40 lines (39 loc) • 2.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const HeroHeader = ({ title, subhead, backgroundImage, backgroundImageTitle, overlayOpacity, }) => {
if (!backgroundImage) {
backgroundImage = "https://picsum.photos/1080/720";
}
else {
if (backgroundImageTitle?.includes("_03o_"))
overlayOpacity = 0.3;
else if (backgroundImageTitle?.includes("_04o_"))
overlayOpacity = 0.4;
else if (backgroundImageTitle?.includes("_05o_"))
overlayOpacity = 0.5;
else if (backgroundImageTitle?.includes("_06o_"))
overlayOpacity = 0.6;
else if (backgroundImageTitle?.includes("_07o_"))
overlayOpacity = 0.7;
}
if (!overlayOpacity) {
overlayOpacity = 0.6;
}
const css = `
.soames-background-lg::after {
background: url(${backgroundImage});
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
pointer-events: none;
margin-top: -180px;
}
`;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: css }), (0, jsx_runtime_1.jsxs)("section", { className: "soames-header-lg soames-parallax soames-background-lg", id: "header1", children: [(0, jsx_runtime_1.jsx)("div", { className: "soames-overlay", style: { opacity: overlayOpacity, backgroundColor: "rgb(46, 46, 46)" } }), (0, jsx_runtime_1.jsx)("div", { className: "container", children: (0, jsx_runtime_1.jsx)("div", { className: "row justify-content-md-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "soames-hero-header soames-white col-md-10", children: [(0, jsx_runtime_1.jsx)("h1", { className: "soames-section-title align-center soames-bold mbr-fonts-style display-1", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "soames-section-subtitle align-center soames-light soames-white mbr-fonts-style display-5", children: subhead })] }) }) })] })] }));
};
exports.default = HeroHeader;