pages/src/lib/content.svelte

<script lang="ts">
    let {
        useContentWidth,
    }: {
        useContentWidth?: boolean;
    } = $props();
</script>

{#if useContentWidth}
    <div class="main-content content-width">
        <slot />
    </div>
{:else}
    <div class="main-content page-width">
        <slot />
    </div>
{/if}

<style>
    .main-content {
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0 24px;
    }

    .content-width {
        max-width: var(--content-width);
    }

    .page-width {
        max-width: var(--page-width);
    }

    @media screen and (max-width: 800px) {
        .main-content {
            padding: 0 8px;
        }
    }
</style>