import {ExComponent} from '../ExComponent.js'
import {Component} from '../decorators.js'

@Component('ex-page')
export class PageComponent extends ExComponent {
    protected static html = `
        <style>
            .container {
                display: flex;
                justify-content: center;
                width: 100%;
                height: 100%;
                text-align: left;
            }

            .inner {
                padding: 0 20px;
                max-width: min(70%, 1000px);
                min-width: min(70%, 1000px);
            }

            @media(max-width: 960px) {
                .inner {
                    width: 100%;
                    max-width: unset;
                }
            }
        </style>
        <div class="container">
            <div class="inner">
                <slot></slot>
            </div>
        </div>
    `
}