49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { LitElement, html, css } from "lit";
|
|
import { customElement } from "lit/decorators/custom-element.js";
|
|
import "./fridge-tile.js";
|
|
|
|
@customElement("fridge-magnets")
|
|
export class FridgeMagnets extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
#fridgemagnets {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: 100fr 18ex;
|
|
}
|
|
|
|
#fridge {
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
background: url("./dist/pingbg.png") repeat;
|
|
}
|
|
|
|
#footer {
|
|
background-color: #32cd32;
|
|
width: 100%;
|
|
height: 18ex;
|
|
}
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
return html` <div id="fridgemagnets">
|
|
<div id="fridge">
|
|
<fridge-tile word="Magnificent"></fridge-tile>
|
|
</div>
|
|
<div id="footer">Footer</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"fridge-magnets": FridgeMagnets;
|
|
}
|
|
}
|