codesignd Patterns

// @font-face definitions
@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-regular', normal, normal);
@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-italic',  normal, italic);
@include -cdd-font-face('Input Sans Narrow',  'input-sans-narrow-bold',    bold,   normal);
@include -cdd-font-face('Input Serif Narrow', 'input-serif-narrow-bold',   bold,   normal);

:root {
	font-size: 112.5%;
	line-height: 1.7;
	font-family: "Input Sans Narrow", Tahoma, Helvetica, sans-serif;
	word-spacing: -0.1em;
	
	// Make everything slightly smaller on small screens
	@media (max-width: 30em) {
		font-size: 100%;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Input Serif Narrow", "Hoefler Text", Palatino, serif;
	line-height: 1.35;
	text-rendering: optimizeLegibility;
	
	margin-top: 1.3em;
	margin-bottom: 0.9em;
	
	@media print {
		page-break-after: avoid;
	}
}
h1 {
	font-size: -cdd-rem(36);
}
h2 {
	font-size: -cdd-rem(27);
}
h3 {
	font-size: -cdd-rem(20);
	
	margin-bottom: 0.6em;
}
h4 {
	font-size: -cdd-rem(18);
}
h5 {
	font-size: -cdd-rem(18);
	font-variant: small-caps;
}
h6 {
	font-size: -cdd-rem(14);
	text-transform: uppercase;
	
	margin-top: 1.6em;
}

a {
	transition: color 0.2s ease;
	
	&:link, &:visited {
		text-decoration: none;
		color: $color--brand-primary;
	}
	&:hover, &:focus, &:active {
		color: $color--brand-primary-alternate;
	}
}

hr {
	height: 0;
	margin-top: 2em;
	margin-bottom: 2em;
	
	border-top: -cdd-rem(2) solid $color--passive;
	
	@media print {
		page-break-after: avoid;
	}
}

small {
	font-size: -cdd-rem(14);
}

// Content within Kirbytext
.text {
	&-container {
		@include container--text;
	}
	
	p:not(:last-child), ul:not(:last-child),
	ol:not(:last-child), blockquote:not(:last-child) {
		margin-bottom: 1em;
	}
	
	ul, ol {
		padding-left: 40px;
	}
	ul li {
		list-style: disc;
	}
	ol li {
		list-style: decimal;
	}
	li:not(:last-child) {
		margin-bottom: 0.1em;
	}
	
	a:visited {
		color: $color--brand-primary-alternate;
	}
	
	blockquote {
		padding: 0.5em 1em;
		
		background: $color--passive-light;
		border-left: 0.7em solid $color--passive;
		border-radius: 0 0.3em 0.3em 0;
	}
}