52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
/**
|
|
* Site Content Component
|
|
* Main content area wrapper with slot for page content
|
|
* Uses flexbox with gap for consistent vertical spacing
|
|
*/
|
|
class SiteContent extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md, 16px);
|
|
padding-top: var(--spacing-md, 16px);
|
|
padding-bottom: var(--spacing-md, 16px);
|
|
}
|
|
|
|
/* Remove vertical padding from direct children to let gap handle spacing */
|
|
::slotted(.content-padding) {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
::slotted(.section) {
|
|
padding-top: var(--spacing-md, 16px);
|
|
padding-bottom: var(--spacing-md, 16px);
|
|
}
|
|
</style>
|
|
<main class="content">
|
|
<slot></slot>
|
|
</main>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("site-content", SiteContent);
|