radh-ui/dist/esm/ws-layout-holy.entry.js

Stencil Component Starter

import { r as registerInstance, h } from './index-a9700b09.js';

const wsLayoutHolyCss = "#holy{color:black;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:100%;grid-template-rows:100px 1fr 1fr 100px 200px;grid-template-areas:\"my-header my-header my-header\" \"my-nav my-nav my-nav\" \"my-main my-main my-main\" \"my-aside my-aside my-aside\" \"my-footer my-footer my-footer\"}#holy-header{grid-area:my-header;background-color:var(--holy-header-background-color, blueviolet)}#holy-nav{grid-area:my-nav;background-color:var(--holy-nav-background-color, cornflowerblue)}#holy-aside{grid-area:my-aside;background-color:var(--holy-aside-background-color, darkmagenta)}#holy-content{padding:1rem;grid-area:my-main;background-color:var(--holy-content-background-color, indigo)}#holy-footer{grid-area:my-footer;background-color:var(--holy-footer-background-color, darkorchid)}@media (min-width: 600px) and (max-width: 1000px){#holy{grid-template-columns:200px 1fr 200px;grid-template-rows:50px 1fr 1fr 50px;grid-template-areas:\"my-header my-header my-header\" \"my-nav my-nav my-nav\" \"my-aside my-main my-main\" \"my-footer my-footer my-footer\"}}@media (min-width: 1001px){#holy{grid-template-columns:200px 1fr 200px;grid-template-rows:50px 1fr 50px;grid-template-areas:\"my-header my-header my-header\" \"my-nav my-main my-aside\" \"my-footer my-footer my-footer\"}}";

class WsLayoutHoly {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return (h("div", { id: "holy" }, h("header", { id: "holy-header", role: "banner" }, h("slot", { name: "header" })), h("nav", { id: "holy-nav" }, h("slot", { name: "nav" })), h("main", { id: "holy-content", role: "main" }, h("slot", { name: "section" })), h("aside", { id: "holy-aside", role: "complementary" }, h("slot", { name: "aside" })), h("footer", { id: "holy-footer", role: "contentinfo" }, h("slot", { name: "footer" }))));
    }
}
WsLayoutHoly.style = wsLayoutHolyCss;

export { WsLayoutHoly as ws_layout_holy };