soames-gatsby-theme
Version:
A customizable Gatsby theme for personal websites using WordPress as a headless CMS.
26 lines (25 loc) • 1.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const SoamesTitleBarLg = ({ title, attributes }) => {
const subtitle = attributes?.subtitle?.[0];
const background = attributes?.background?.[0];
const defaultBackground = 'https://picsum.photos/1080/720';
const css = `
.soames-background-title-bar-lg::after {
background: url(${background || defaultBackground});
background-position: 50% 50%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
left: 0px;
height: 176px;
overflow: hidden;
pointer-events: none;
margin-top: 0px;
transform: translate3d(0px, 0px, 0px);
}
`;
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-sm soames-parallax soames-background-title-bar-lg mt-5 mb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "soames-overlay", style: { opacity: 0.6, 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-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 }), subtitle && ((0, jsx_runtime_1.jsx)("h3", { className: "soames-section-subtitle align-center soames-light soames-white mbr-fonts-style display-5", children: subtitle }))] }) }) })] })] }));
};
exports.default = SoamesTitleBarLg;