matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Center the home page content and let its section rules reach the page edge

Browse source
This commit is contained in:
Coracle-Bot 2026-09-09 16:10:57 +00:00 committed by hodlbod
parent 32fa1635a7
commit 24f60b70db
4 changed files with 36 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/HomeNetwork.svelte
View file

@ -94,15 +94,15 @@
<Link href="/spaces" class="button button-neutral button-sm">Browse spaces</Link>
</div>
{:else if items.length === 0}
<div class="flex justify-center pb-4">
<Spinner loading>Looking for posts from people you follow…</Spinner>
<div class="flex justify-center py-8">
<Spinner loading>Loading recent posts...</Spinner>
</div>
{:else}
{#each items as event (event.id)}
<HomeNetworkItem {event} {context} />
{/each}
{#if loading}
<div class="flex justify-center py-4">
<div class="flex justify-center py-8">
<Spinner loading />
</div>
{/if}

2
src/app/components/HomeSection.svelte
View file

@ -13,7 +13,7 @@
const {title, icon, action, children, class: className = ""}: Props = $props()
</script>
<section class="flex min-w-0 flex-col border-b border-line {className}">
<section class="rule-bleed flex min-w-0 flex-col border-b border-line {className}">
<div class="flex items-center justify-between gap-3 px-4 pt-4 pb-3">
<h2 class="flex items-center gap-2 text-base font-bold tracking-wide uppercase">
<Icon {icon} size={5} />

24
src/lib/components/base.css
View file

@ -105,6 +105,30 @@
content-visibility: auto;
contain-intrinsic-size: auto 16rem;
}
/* Carries a bottom border out past the element's own box, so a centered column can still rule the
page from edge to edge. The pseudo-elements inherit that border, so an element without one draws
nothing; --rule-bleed-l and --rule-bleed-r turn off the side that faces a neighbor. */
@utility rule-bleed {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
bottom: calc(-1 * var(--border-thin));
border-bottom: inherit;
}
&::before {
right: 100%;
width: var(--rule-bleed-l, 100vw);
}
&::after {
left: 100%;
width: var(--rule-bleed-r, 100vw);
}
}
/* Marks the event a link pointed at, so the reader can pick it out of the conversation once the
jump lands. Brightness rather than a background so it works over any row's own surface. */
@utility highlight-target {

11
src/routes/home/+page.svelte
View file

@ -33,15 +33,20 @@
</div>
</PageBar>
<PageContent noPad bind:element class="flex flex-col bg-surface">
<div class="flex min-w-0 flex-1 flex-col lg:flex-row lg:items-stretch">
<!-- Content is centered and capped, but the section rules still reach the page edge. At lg
each column bleeds only on the side facing the page, so no rule crosses the divider. -->
<div
class="mx-auto flex w-full max-w-[1000px] min-w-0 flex-1 flex-col lg:flex-row lg:items-stretch">
<!-- The columns are `contents` below lg, which puts every section in one flow and lets the
rail's health checks sit between the inbox and the rest of the main column. -->
<div class="contents lg:flex lg:min-w-0 lg:flex-[2] lg:flex-col lg:border-r lg:border-line">
<div
class="contents lg:flex lg:min-w-0 lg:flex-[2] lg:flex-col lg:border-r lg:border-line lg:[--rule-bleed-r:0px]">
<HomeInbox />
<HomeActivity class="order-last" />
<HomeNetwork class="order-last border-b-0" />
</div>
<div class="contents lg:flex lg:w-96 lg:min-w-0 lg:shrink-0 lg:flex-col">
<div
class="contents lg:flex lg:w-96 lg:min-w-0 lg:shrink-0 lg:flex-col lg:[--rule-bleed-l:0px]">
<HomeHealthChecks />
{#if HOSTING_ENABLED}
<HomeHosting class="border-b-0 max-lg:hidden" />