108 lines
2.2 KiB
JavaScript
108 lines
2.2 KiB
JavaScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
|
import Router from '../api/Router.js'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
// components
|
|
import '../components/NavCard.js'
|
|
|
|
class Home extends LitElement {
|
|
static properties = {}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<header>
|
|
<div>
|
|
<p class="sub">Oude Kerk and Hartwig Art Foundation present</p>
|
|
<h1>Meredith Monk: Calling</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="home-nav">
|
|
${Router.routes.map(r => (r.title != 'Not found' && r.title != 'home') ? html`<mm-ncard .route=${r}></mm-ncard>` : '')}
|
|
</nav>
|
|
|
|
<footer>
|
|
<div>
|
|
<p>Rooms for Listening & Watching</p>
|
|
</div>
|
|
</footer>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
--margin: 0.75em;
|
|
display: block;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - calc(var(--margin) * 2));
|
|
background-image: url('/images/home-bg.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
margin: var(--margin);
|
|
}
|
|
|
|
div {
|
|
background-color: white;
|
|
color: var(--green-400, black);
|
|
text-shadow: 0 0 5px rgba(0, 173, 78, 0.4);
|
|
padding-inline: 1em;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
}
|
|
|
|
header > div {
|
|
margin-inline: 4em;
|
|
border-radius: 0 0 0.75em 0.75em;
|
|
padding-block-start: 0.5em;
|
|
padding-block-end: 1em;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.25em;
|
|
}
|
|
|
|
.home-nav {
|
|
display: grid;
|
|
margin: 4em;
|
|
flex-grow: 1;
|
|
gap: 2.5em;
|
|
grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
|
|
grid-auto-rows: 1fr;
|
|
}
|
|
|
|
mm-ncard {
|
|
--highlight-color: var(--green-400);
|
|
--shadow: 0px 0px 5px #00000099;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
footer > div {
|
|
margin-inline-end: 4em;
|
|
margin-inline-start: auto;
|
|
border-radius: 0.75em 0.75em 0 0;
|
|
padding-block-start: 1em;
|
|
padding-block-end: 0.5em;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 1.5em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-home', Home)
|