Untitled

dabblet.css

:root {
	--clr-primary: hsl(250 30% 40%);
	--clr-secondary: hsl(190 40% 40%);
	--clr-bg: hsl(0 0% 100% / .8);
}

h1 {
	color: var(--clr-secondary);
	padding-inline-start: 1rem;
}

article {
	background: var(--clr-primary);
	margin: 1rem;
	display: grid;
	border-radius: 0.5rem;
}

article h2 {
	color: white;
	line-height: 1;
	padding-inline-start: 0.5rem;
}

article a {
	color: var(--clr-primary);
}

article .content {
	background: var(--clr-bg);
	padding: 0.5rem;
}

article.alt {
  --clr-primary: var(--clr-secondary);
}

dabblet.html

<h1>Titulo</h1>

<article>
	<h2>Subtitulo 1</h2>
	<div class="content">
		<p>Blog post content with <a href="#">Link</a></p>
	</div>
</article>

<article class="alt">
	<h2>Subtitulo 2</h2>
	<div class="content">
		<p>Blog post 2 content with <a href="#">Link</a></p>
	</div>
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"css"}