csssecrets

/**
 * Animation along a circular path - Solution 2
 */
 
@keyframes spin {
	from {
		transform: rotate(0turn)
		           translateY(-150px) translateY(50%)
		           rotate(1turn)
	}

csssecrets

/**
 * 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;
}

csssecrets

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

footer {
	background: #333;

csssecrets

/**
 * Vertical centering - absolute positioning method
 */

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	

csssecrets

/**
 * Vertical centering - Viewport unit method
 */

main {
	width: 18em;
	padding: 1em 1.5em;
	margin: 50vh auto 0;
	transform: translateY(-50%);
	box-sizing: border-box;

csssecrets

/**
 * Vertical centering - Flexbox solution
 */

* { margin: 0 }

body {
	display: flex;
	min-height: 100vh;
}

csssecrets

/**
 * Vertical centering - Flexbox solution for text
 */

body {
	display: flex;
	align-items: center;
	min-height: 100%;
	margin: 0;
}

csssecrets

/**
 * Sticky footer with fixed height
 */
 
main {
	min-height: calc(100vh - 5em - 7em);
}

/* Toggle checkbox to alternate between short/long content */
#contents:checked ~ p { display: none }

csssecrets

/**
 * Sticky footer with flexible height
 */
 
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

csssecrets

/**
 * Intrinsic sizing
 */

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