1 files changed, 134 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/site/header/_site-header.scss b/themes/twentynineteen/sass/site/header/_site-header.scss
new file mode 100644
index 00000000..22ab1034
--- /dev/null
+++ b/themes/twentynineteen/sass/site/header/_site-header.scss
@@ -0,0 +1,134 @@
+// 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;
+}