Layout Breakouts in Swyxkit

This was on HN today: https://ryanmulligan.dev/blog/layout-breakouts/

with a wonderful idea for simple declarative levels of breakout levels.

I’ve implemented it accordingly in sw-yx#127

Previously, code samples stayed within the margins of the parent content:

<Pre> tags

Now, code samples actually break out of the content:

.swyxcontent {
	--gap: clamp(1rem, 6vw, 3rem);
	--full: minmax(var(--gap), 1fr);
	/* --content: min(65ch, 100% - var(--gap) * 2); */
	--content: 65ch;
	--popout: minmax(0, 2rem);
	--feature: minmax(0, 5rem);

	display: grid;
	grid-template-columns: 
		[full-start]
		[feature-start]
		[popout-start]
		[content-start] var(--content) [content-end]
		[feature-end]
		[popout-end]
		[feature-end]
		[full-end]
}

@media (min-width: 768px) {
	.swyxcontent {
		grid-template-columns:
			[full-start] var(--full)
			[feature-start] var(--feature)
			[popout-start] var(--popout)
			[content-start] var(--content) [content-end]
			var(--popout) [popout-end]
			var(--feature) [feature-end]
			var(--full) [full-end];
	}
}

:global(.swyxcontent > *) {
	grid-column: content;
}

article :global(pre) {
	grid-column: feature;
	margin-left: -1rem;
	margin-right: -1rem;
}

popout class for admonitions?

you can now use this to make admonitions that pop out:

<div class="popout admonition">
<h2>this is an admonition</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

renders this

full bleed class for some images?

and images that have a full bleed (on desktop)

<img src="https://images.unsplash.com/photo-1549558549-415fe4c37b60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3438&q=80" class="full">

renders this:

This would not apply to “regular” images as that is probably overkill