mykelsoft

/**
 * Fluid background, fixed content
 */
 
header, section, footer {
	padding: 1em calc(50% - 350px);
}

footer {
	background: #333;

mykelsoft

/**
 * Styling by sibling count: Color palette example
 */
 
/* Hide "color" 4 items or more */
.palette li:first-child:nth-last-child(n+4) .color-options a:after,
.palette li:first-child:nth-last-child(n+4) ~ li .color-options a:after {
	content: none;
}

mykelsoft

/**
 * Taming table column widths
 */

body { background: #ddd }

section {
	width: 500px;
	margin: 2em;
	background: white;

mykelsoft

/**
 * Intrinsic sizing
 */

figure {
	max-width: 300px;
	max-width: min-content;
	margin: auto;
}

mykelsoft

/**
 * Interactive image comparison - with CSS resize
 */

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div {

mykelsoft

/**
 * Scrolling hints
 */

ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;

mykelsoft

/**
 * De-emphasizing by blurring (AND dimming)
 */

main {
	transition: .6s;
	background: white;
}

main.de-emphasized {

mykelsoft

/**
 * Native modal dialog (limited support)
 */

dialog::backdrop {
	background: rgba(0,0,0,.8)
}

mykelsoft

/**
 * Rudimetary overlay with box-shadow
 */

.lightbox {
	position: fixed;
	top: 50%; left: 50%;
	margin: -200px;
	box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}

mykelsoft

/**
 * Toggle buttons
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {