Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLAttributes } from "svelte/elements";
/** * The page's columns. * - `page`: the 1086px column the navbar and footer draw, inside the gutter. * - `hero`: the hero's narrower 980px column. * - `rail`: the content beside the thread — the page column on desktop, edge to edge * below it, with the start held clear for the rail (--rail-lane). The thread's x is * measured from this container's left edge, so content and line stay in register. */ interface Props extends HTMLAttributes<HTMLDivElement> { width?: "page" | "hero" | "rail"; children: Snippet; }
let { width = "page", children, class: className, ...rest }: Props = $props();</script>
<div {...rest} class={["l-container", `l-container-${width}`, className]}> {@render children()}</div>
<style> .l-container { position: relative; box-sizing: border-box; margin-inline: auto; } .l-container-page { width: min(var(--page-w), 100% - 2 * var(--gutter)); } .l-container-hero { width: min(var(--hero-w), 100% - 2 * var(--gutter)); } .l-container-rail { width: 100%; padding-inline: var(--rail-lane) var(--rail-end);
@media (width >= 64rem) { width: min(var(--page-w), 100% - 2 * var(--gutter)); } }</style>