csssecrets

/**
 * Fancy Ampersands
 */

@font-face {
	font-family: Ampersand;
	src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
	unicode-range: U+26;
}

csssecrets

/**
 * Ligatures
 */

body {
	font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif;
	font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}

csssecrets

/**
 * Adjusting tabs
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	font-family: Consolas, Monaco, monospace;
}

csssecrets

/**
 * Zebra striped text lines
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	background-image: linear-gradient(
	                  rgba(120,0,0,.1) 50%, transparent 0);

csssecrets

/**
 * Inserting line breaks
 */
 
dt, dd {
	display: inline;
	margin: 0;
}

dd {

csssecrets

/**
 * Folded corner effect — at an angle
 */

div {
	position: relative;
	width: 12em;
	background: #58a; /* Fallback */
	background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
	padding: 2em;

csssecrets

/**
 * Folded corner effect
 */

div {
	width: 12em;
	background: #58a; /* Fallback */
	background:
		linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
		linear-gradient(-135deg, transparent 1.5em, #58a 0);

csssecrets

/**
 * Frosted glass effect
 */

body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding-top: calc(50vh - 6em);
	font: 150%/1.6 Baskerville, Palatino, serif;

csssecrets

/**
 * Color tinting — with blending modes
 */

.tinted-image {
	width: 640px; height: 440px;
	background-size: cover;
	background-color: hsl(335, 100%, 50%);
	background-blend-mode: luminosity;
	transition: .5s background-color;

csssecrets

/**
 * Color tinting — with filters
 */

img {
	max-width: 640px;
	transition: 1s filter, 1s -webkit-filter;
	-webkit-filter: sepia() saturate(4) hue-rotate(295deg);
	filter: sepia() saturate(4) hue-rotate(295deg);
}