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