135 lines
		
	
	
	
		
			1.9 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
		
		
			
		
	
	
			135 lines
		
	
	
	
		
			1.9 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
|  | // Site header
 | ||
|  | 
 | ||
|  | .site-header { | ||
|  | 	padding: 1em; | ||
|  | 
 | ||
|  | 	&.featured-image { | ||
|  | 		display: flex; | ||
|  | 		flex-direction: column; | ||
|  | 		justify-content: space-between; | ||
|  | 		min-height: 90vh; | ||
|  | 
 | ||
|  | 		.site-branding-container { | ||
|  | 			margin-bottom: auto; | ||
|  | 		} | ||
|  | 	} | ||
|  | 
 | ||
|  | 	@include media(tablet) { | ||
|  | 		margin: 0; | ||
|  | 		padding: 3rem 0; | ||
|  | 
 | ||
|  | 		&.featured-image { | ||
|  | 			min-height: 100vh; | ||
|  | 			margin-bottom: 3rem; | ||
|  | 		} | ||
|  | 	} | ||
|  | } | ||
|  | 
 | ||
|  | // Site branding
 | ||
|  | 
 | ||
|  | .site-branding { | ||
|  | 
 | ||
|  | 	color: $color__text-light; | ||
|  | 	position: relative; | ||
|  | 
 | ||
|  | 	@include media(tablet) { | ||
|  | 		margin: 0 $size__site-margins; | ||
|  | 	} | ||
|  | } | ||
|  | 
 | ||
|  | // Site logo
 | ||
|  | 
 | ||
|  | .site-logo { | ||
|  | 
 | ||
|  | 	position: relative; | ||
|  | 	z-index: 999; | ||
|  | 	margin-bottom: calc(.66 * #{$size__spacing-unit}); | ||
|  | 
 | ||
|  | 	@include media(tablet) { | ||
|  | 		margin-bottom: 0; | ||
|  | 		position: absolute; | ||
|  | 		right: calc(100% + (1.25 * #{$size__spacing-unit})); | ||
|  | 		top: 4px; // Accounts for box-shadow widths
 | ||
|  | 		z-index: 999; | ||
|  | 	} | ||
|  | 
 | ||
|  | 	.custom-logo-link { | ||
|  | 		border-radius: 100%; | ||
|  | 		box-sizing: content-box; | ||
|  | 		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | ||
|  | 		display: block; | ||
|  | 		width: 50px; | ||
|  | 		height: 50px; | ||
|  | 		overflow: hidden; | ||
|  | 		transition: box-shadow $background_transition ease-in-out; | ||
|  | 
 | ||
|  | 		.custom-logo { | ||
|  | 			min-height: inherit; | ||
|  | 		} | ||
|  | 
 | ||
|  | 		&:hover, | ||
|  | 		&:active, | ||
|  | 		&:focus { | ||
|  | 			box-shadow: 0 0 0 2px rgba(0, 0, 0, 1); | ||
|  | 		} | ||
|  | 
 | ||
|  | 		@include media(tablet) { | ||
|  | 			width: 64px; | ||
|  | 			height: 64px; | ||
|  | 		} | ||
|  | 	} | ||
|  | } | ||
|  | 
 | ||
|  | // Site title
 | ||
|  | 
 | ||
|  | .site-title { | ||
|  | 	margin: auto; | ||
|  | 	display: inline; | ||
|  | 	color: $color__text-main; | ||
|  | 
 | ||
|  | 	a { | ||
|  | 		color: $color__text-main; | ||
|  | 
 | ||
|  | 		&:link, | ||
|  | 		&:visited { | ||
|  | 			color: $color__text-main; | ||
|  | 		} | ||
|  | 
 | ||
|  | 		&:hover { | ||
|  | 			color: $color__text-hover; | ||
|  | 		} | ||
|  | 	} | ||
|  | 
 | ||
|  | 	.featured-image & { | ||
|  | 		margin: 0; | ||
|  | 
 | ||
|  | 		@include media(tablet) { | ||
|  | 			display: inline-block; | ||
|  | 		} | ||
|  | 	} | ||
|  | 
 | ||
|  | 	/* When there is no description set, make sure navigation appears below title. */ | ||
|  | 	+ .main-navigation { | ||
|  | 		display: block; | ||
|  | 	} | ||
|  | 
 | ||
|  | 	@include media(tablet) { | ||
|  | 		display: inline; | ||
|  | 	} | ||
|  | 
 | ||
|  | 	&:not(:empty) + .site-description:not(:empty):before { | ||
|  | 		content: "\2014"; | ||
|  | 		margin: 0 .2em; | ||
|  | 	} | ||
|  | } | ||
|  | 
 | ||
|  | // Site description
 | ||
|  | 
 | ||
|  | .site-description { | ||
|  | 
 | ||
|  | 	display: inline; | ||
|  | 	color: $color__text-light; | ||
|  | 	font-weight: normal; | ||
|  | 	margin: 0; | ||
|  | } |