first

wp-content/themes/twentynineteen/sass/_normalize.scss

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+	 ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+	 ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+	margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/* Grouping content
+	 ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+	box-sizing: content-box; /* 1 */
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+	 ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+	background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+	border-bottom: none; /* 1 */
+	text-decoration: underline; /* 2 */
+	text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+	font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/* Embedded content
+	 ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+	border-style: none;
+}
+
+/* Forms
+	 ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+	overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+	text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+	-webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+	padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *		`fieldset` elements in all browsers.
+ */
+
+legend {
+	box-sizing: border-box; /* 1 */
+	color: inherit; /* 2 */
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 3 */
+	white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+	overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/* Interactive
+	 ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+	display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+	display: list-item;
+}
+
+/* Misc
+	 ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+	display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+	display: none;
+}

wp-content/themes/twentynineteen/sass/elements/_elements.scss

@@ -0,0 +1,89 @@
+html {
+	box-sizing: border-box;
+}
+
+::-moz-selection {
+	background-color: $color__background_selection;
+}
+
+::selection {
+	background-color: $color__background_selection;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+a {
+	@include link-transition;
+	color: $color__link;
+}
+
+a:visited {
+
+}
+
+a:hover,
+a:active {
+	color: $color__link-hover;
+	outline: 0;
+	text-decoration: none;
+}
+
+a:focus {
+	outline: thin;
+	outline-style: dotted;
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	clear: both;
+	margin: $size__spacing-unit 0;
+}
+
+h1:not(.site-title),
+h2 {
+	@include post-section-dash;
+}
+
+hr {
+	background-color: $color__text-light;
+	border: 0;
+	height: 2px;
+}
+
+@import "lists";
+
+img {
+	height: auto;
+	max-width: 100%;
+	position: relative;
+}
+
+figure {
+	margin: 0;
+}
+
+blockquote {
+	border-left: 2px solid $color__link;
+	margin-left: 0;
+	padding: 0 0 0 $size__spacing-unit;
+
+	> p {
+		margin: 0 0 $size__spacing-unit;
+	}
+
+	cite {
+		color: $color__text-light;
+	}
+}
+
+@import "tables";

wp-content/themes/twentynineteen/sass/elements/_lists.scss

@@ -0,0 +1,33 @@
+ul,
+ol {
+	padding-left: ( 1 * $size__spacing-unit );
+}
+
+ul {
+	list-style: disc;
+
+	ul {
+		list-style-type: circle;
+	}
+}
+
+ol {
+	list-style: decimal;
+}
+
+li {
+	line-height: $font__line-height-body;
+}
+
+li > ul,
+li > ol {
+	padding-left: ( 2 * $size__spacing-unit );
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin: 0 $size__spacing-unit $size__spacing-unit;
+}

wp-content/themes/twentynineteen/sass/elements/_tables.scss

@@ -0,0 +1,13 @@
+table {
+	margin: 0 0 $size__spacing-unit;
+	border-collapse: collapse;
+	width: 100%;
+	@include font-family( $font__heading );
+
+	td,
+	th {
+		padding: 0.5em;
+		border: 1px solid $color__text-light;
+		word-break: break-all;
+	}
+}

wp-content/themes/twentynineteen/sass/forms/_buttons.scss

@@ -0,0 +1,37 @@
+.button,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+
+	@include button-transition;
+	background: $color__background-button;
+	border: none;
+	border-radius: 5px;
+	box-sizing: border-box;
+	color: $color__background-body;
+	@include font-family( $font__heading );
+	font-size: $font__size-sm;
+	font-weight: 700;
+	line-height: $font__line-height-heading;
+	outline: none;
+	padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
+	text-decoration: none;
+	vertical-align: bottom;
+
+	&:hover {
+		background: $color__background-button-hover;
+		cursor: pointer;
+	}
+
+	&:visited {
+		color: $color__background-body;
+		text-decoration: none;
+	}
+
+	&:focus {
+		background: $color__background-button-hover;
+		outline: thin dotted;
+		outline-offset: -4px;
+	}
+}

wp-content/themes/twentynineteen/sass/forms/_fields.scss

@@ -0,0 +1,58 @@
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+	-webkit-backface-visibility: hidden;
+	background: $color__background-input;
+	border: solid 1px $color__border;
+	box-sizing: border-box;
+	outline: none;
+	padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit};
+	-webkit-appearance: none;
+	outline-offset: 0;
+	border-radius: 0;
+
+	&:focus {
+		border-color: $color__link;
+		outline: thin solid rgba( $color__link, 0.15 );
+		outline-offset: -4px;
+	}
+}
+
+input[type="search"] {
+	&::-webkit-search-decoration {
+		display: none;
+	}
+}
+
+select {
+
+}
+
+textarea {
+	box-sizing: border-box;
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	resize: vertical;
+}
+
+form {
+
+	p {
+		margin: $size__spacing-unit 0;
+	}
+
+}

wp-content/themes/twentynineteen/sass/forms/_forms.scss

@@ -0,0 +1,3 @@
+@import "buttons";
+
+@import "fields";

wp-content/themes/twentynineteen/sass/layout/_layout.scss

@@ -0,0 +1,11 @@
+
+/** === Layout === */
+
+#page {
+	width: 100%;
+}
+
+.site-content {
+	overflow: hidden;
+}
+

wp-content/themes/twentynineteen/sass/media/_captions.scss

@@ -0,0 +1,32 @@
+.wp-caption {
+	margin-bottom: calc(1.5 * #{$size__spacing-unit});
+
+	&.aligncenter {
+
+		@include media(tablet) {
+			position: relative;
+			left: calc( #{$size__site-tablet-content} / 2 );
+			transform: translateX( -50% );
+		}
+
+		@include media(desktop) {
+			left: calc( #{$size__site-desktop-content} / 2 );
+		}
+	}
+}
+
+.wp-caption img[class*="wp-image-"] {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-caption-text {
+	color: $color__text-light;
+	font-size: $font__size-xs;
+	@include font-family( $font__heading );
+ 	line-height: $font__line-height-pre;
+ 	margin: 0;
+ 	padding: ( $size__spacing-unit * .5 );
+	text-align: center;
+}

wp-content/themes/twentynineteen/sass/media/_galleries.scss

@@ -0,0 +1,52 @@
+.gallery {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+	margin-bottom: calc(1.5 * #{$size__spacing-unit});
+}
+
+.gallery-item {
+	display: inline-block;
+	margin-right: 16px;
+	margin-bottom: 16px;
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+
+	// Loops to enumerate the classes for gallery columns.
+	@for $i from 2 through 9 {
+		.gallery-columns-#{$i} & {
+			max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
+
+			&:nth-of-type(#{$i}n+#{$i}) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	&:last-of-type {
+		padding-right: 0;
+	}
+}
+
+.gallery-caption {
+	display: block;
+	font-size: $font__size-xs;
+	@include font-family( $font__heading );
+	line-height: $font__line-height-pre;
+	margin: 0;
+	padding: ( $size__spacing-unit * .5 );
+}
+
+.gallery-item > div > a {
+	display: block;
+	line-height: 0;
+
+	// Accessibility
+	box-shadow: 0 0 0 0 transparent;
+
+	&:focus {
+		box-shadow: 0 0 0 2px rgba( $color__link, 1 );
+	}
+}
+

wp-content/themes/twentynineteen/sass/media/_media.scss

@@ -0,0 +1,41 @@
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+.custom-logo-link {
+	display: inline-block;
+}
+
+.avatar {
+	border-radius: 100%;
+	display: block;
+	height: calc(2.25 * #{$size__spacing-unit});
+	min-height: inherit;
+	width: calc(2.25 * #{$size__spacing-unit});
+}
+
+svg {
+	transition: fill $icon_transition ease-in-out;
+	fill: currentColor;
+}
+
+/*--------------------------------------------------------------
+## Captions
+--------------------------------------------------------------*/
+@import "captions";
+
+/*--------------------------------------------------------------
+## Galleries
+--------------------------------------------------------------*/
+@import "galleries";

wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss

@@ -0,0 +1,141 @@
+// Rem output with px fallback
+@mixin font-size($sizeValue: 1) {
+	font-size: ($sizeValue * 16) * 1px;
+	font-size: $sizeValue * 1rem;
+}
+
+// Center block
+@mixin center-block {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+// Clearfix
+@mixin clearfix() {
+	content: "";
+	display: table;
+	table-layout: fixed;
+}
+
+// Clear after (not all clearfix need this also)
+@mixin clearfix-after() {
+	clear: both;
+}
+
+// Column width with margin
+@mixin column-width($numberColumns: 3) {
+	width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
+}
+
+@mixin filter-duotone {
+
+	&:before {
+		background: $color__link;
+		mix-blend-mode: screen;
+		opacity: 0.1;
+		z-index: 2;
+	}
+
+	&:after {
+		background: $color__link;
+		mix-blend-mode: multiply;
+		opacity: .8;
+		z-index: 3;
+
+		/* Browsers supporting mix-blend-mode don't need opacity < 1 */
+		@supports (mix-blend-mode: multiply) {
+			opacity: 1;
+		}
+	}
+}
+
+@mixin filter-grayscale {
+
+	position: relative;
+	filter: grayscale(100%);
+	z-index: 1;
+
+	&:after {
+		display: block;
+		width: 100%;
+		height: 100%;
+		z-index: 10;
+	}
+}
+
+@mixin post-section-dash {
+
+	&:before {
+		background: $color__text-light;
+		content: "\020";
+		display: block;
+		height: 2px;
+		margin: $size__spacing-unit 0;
+		width: 1em;
+	}
+
+	&.has-text-align-center:before {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	&.has-text-align-right:before {
+		margin-left: auto;
+	}
+}
+
+/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
+ * since its edges can look jagged due to lack of antialiasing. In this case, we are several
+ * layers of box-shadow to add the border visually, which will render the border smoother. */
+
+@mixin box-shadow( $size ) {
+	box-shadow:
+		0 0 0 $size $color__text-light inset,           // Original border.
+		0 0 0 ($size + 1px) $color__text-light inset,   // Antialiasing, inner edge.
+		0 0 1px 0 rgba( $color__text-light, 0.7 );      // Antialiasing, outer edge.
+}
+
+/* Calculates maximum width for post content */
+@mixin postContentMaxWidth() {
+
+	@include media(tablet) {
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
+		max-width: $size__site-desktop-content;
+	}
+}
+
+/* Nested sub-menu padding: 10 levels deep */
+@mixin nestedSubMenuPadding() {
+
+	ul {
+		counter-reset: submenu;
+	}
+
+	ul > li > a::before {
+		font-family: $font__body;
+		font-weight: normal;
+		content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
+		counter-increment: submenu
+	}
+}
+
+/* Ensure all font family declarations come with non-latin fallbacks */
+@mixin font-family( $font_family: $font__body ) {
+	font-family: $font_family;
+	@extend %non-latin-fonts;
+}
+
+/* Build our non-latin font styles */
+%non-latin-fonts {
+	@each $lang, $font__fallback in $font__fallbacks {
+		&:lang(#{$lang}) {
+			font-family: unquote( $font__fallback );
+		}
+	}
+}
+
+@import "utilities";

wp-content/themes/twentynineteen/sass/mixins/_utilities.scss

@@ -0,0 +1,51 @@
+
+@mixin media( $res ) {
+	@if mobile == $res {
+		@media only screen and (min-width: $mobile_width) {
+			@content;
+		}
+	}
+
+	@if tablet == $res {
+		@media only screen and (min-width: $tablet_width) {
+			@content;
+		}
+	}
+
+	@if desktop == $res {
+		@media only screen and (min-width: $desktop_width) {
+			@content;
+		}
+	}
+
+	@if wide == $res {
+		@media only screen and (min-width: $wide_width) {
+			@content;
+		}
+	}
+}
+
+@mixin link-transition( $attr: color ) {
+	transition: $attr $link_transition ease-in-out;
+}
+
+@mixin button-transition() {
+	transition: background $button_transition ease-in-out;
+}
+
+@mixin button-all-transition() {
+	transition: all $button_transition ease-in-out;
+}
+
+@mixin background-transition() {
+	transition: background $background_transition ease-in-out;
+}
+
+@mixin selection {
+	::-moz-selection {
+		@content;
+	}
+	::selection {
+		@content;
+	}
+}

wp-content/themes/twentynineteen/sass/modules/_accessibility.scss

@@ -0,0 +1,38 @@
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+	&:focus {
+		background-color: $color__background-screen;
+		border-radius: 3px;
+		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+		clip: auto !important;
+		clip-path: none;
+		color: $color__text-screen;
+		display: block;
+		font-size: 0.875rem;
+		font-weight: bold;
+		height: auto;
+		left: 5px;
+		line-height: normal;
+		padding: 15px 23px 14px;
+		text-decoration: none;
+		top: 5px;
+		width: auto;
+		z-index: 100000; /* Above WP toolbar. */
+	}
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}

wp-content/themes/twentynineteen/sass/modules/_alignments.scss

@@ -0,0 +1,28 @@
+.alignleft {
+	/*rtl:ignore*/
+	float: left;
+	/*rtl:ignore*/
+	margin-right: $size__spacing-unit;
+
+	@include media(tablet) {
+		/*rtl:ignore*/
+		margin-right: calc(2 * #{$size__spacing-unit});
+	}
+}
+
+.alignright {
+	/*rtl:ignore*/
+	float: right;
+	/*rtl:ignore*/
+	margin-left: $size__spacing-unit;
+
+	@include media(tablet) {
+		/*rtl:ignore*/
+		margin-left: calc(2 * #{$size__spacing-unit});
+	}
+}
+
+.aligncenter {
+	clear: both;
+	@include center-block;
+}

wp-content/themes/twentynineteen/sass/modules/_clearings.scss

@@ -0,0 +1,23 @@
+.clear:before,
+.clear:after,
+.entry-content:before,
+.entry-content:after,
+.comment-content:before,
+.comment-content:after,
+.site-header:before,
+.site-header:after,
+.site-content:before,
+.site-content:after,
+.site-footer:before,
+.site-footer:after {
+	@include clearfix;
+}
+
+.clear:after,
+.entry-content:after,
+.comment-content:after,
+.site-header:after,
+.site-content:after,
+.site-footer:after {
+	@include clearfix-after;
+}

wp-content/themes/twentynineteen/sass/navigation/_links.scss

@@ -0,0 +1,22 @@
+a {
+
+	@include link-transition;
+	color: $color__link;
+
+	&:visited {
+		color: $color__link-visited;
+	}
+
+	&:hover,
+	&:active {
+		color: $color__link-hover;
+		outline: 0;
+		text-decoration: none;
+	}
+
+	&:focus {
+		outline: thin dotted;
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+	}
+}

wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss

@@ -0,0 +1,22 @@
+/** === Footer menu === */
+
+.footer-navigation {
+
+	display: inline;
+
+	& > div {
+		display: inline;
+	}
+
+	.footer-menu {
+
+		display: inline;
+		padding-left: 0;
+
+		li {
+			display: inline;
+			margin-right: 1rem;
+		}
+	}
+
+}

wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

@@ -0,0 +1,506 @@
+/** === Main menu === */
+
+.main-navigation {
+
+	display: block;
+	margin-top: #{0.25 * $size__spacing-unit};
+
+	body.page & {
+		display: block;
+	}
+
+	> div {
+		display: inline;
+	}
+
+	/* Un-style buttons */
+	button {
+		display: inline-block;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-family: $font__heading;
+		font-weight: 700;
+		line-height: $font__line-height-heading;
+		text-decoration: none;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		transition:
+			background 250ms ease-in-out,
+			transform 150ms ease;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+
+		&:hover,
+		&:focus {
+			background: transparent;
+		}
+
+		&:focus {
+			outline: 1px solid transparent;
+			outline-offset: -4px;
+		}
+
+		&:active {
+			transform: scale(0.99);
+		}
+	}
+
+	.main-menu {
+
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+
+		> li {
+
+			color: $color__link;
+			display: inline;
+			position: relative;
+
+			> a {
+
+				font-weight: 700;
+				color: $color__link;
+				margin-right: #{0.5 * $size__spacing-unit};
+
+				+ svg {
+					margin-right: #{0.5 * $size__spacing-unit};
+				}
+
+				&:hover,
+				&:hover + svg {
+					color: $color__link-hover;
+				}
+			}
+
+			&.menu-item-has-children {
+
+				display: inline-block;
+				position: inherit;
+
+				@include media(tablet) {
+					position: relative;
+				}
+
+				> a {
+					margin-right: #{0.125 * $size__spacing-unit};
+				}
+
+				& > a,
+				.menu-item-has-children > a {
+
+					&:after {
+						content: "";
+						display: none;
+					}
+				}
+
+				.submenu-expand {
+
+					display: inline-block;
+					margin-right: #{0.25 * $size__spacing-unit};
+
+					/* Priority+ Menu */
+					&.main-menu-more-toggle {
+
+						position: relative;
+						height: 24px;
+						line-height: $font__line-height-heading;
+						width: 24px;
+						padding: 0;
+						margin-left: #{0.5 * $size__spacing-unit};
+
+						svg {
+							height: 24px;
+							width: 24px;
+							top: #{-0.125 * $size__spacing-unit};
+							vertical-align: text-bottom;
+						}
+					}
+
+					.wp-customizer-unloading &,
+					&.is-empty {
+						display: none;
+					}
+
+					svg {
+						position: relative;
+						top: 0.2rem;
+					}
+				}
+			}
+
+			&:last-child > a,
+			&:last-child.menu-item-has-children .submenu-expand {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.sub-menu {
+
+		background-color: $color__link;
+		color: $color__background-body;
+		list-style: none;
+		padding-left: 0;
+
+		position: absolute;
+		opacity: 0;
+		left: -9999px;
+		z-index: 99999;
+
+		@include media(tablet) {
+			width: auto;
+			min-width: -moz-max-content;
+			min-width: -webkit-max-content;
+			min-width: max-content;
+		}
+
+		> li {
+
+			display: block;
+			float: none;
+			position: relative;
+
+			&.menu-item-has-children {
+
+				.submenu-expand {
+					display: inline-block;
+					position: absolute;
+					width: calc( 24px + #{$size__spacing-unit} );
+					right: 0;
+					top: calc( .125 * #{$size__spacing-unit} );
+					bottom: 0;
+					color: white;
+					line-height: 1;
+					padding: calc( .5 * #{$size__spacing-unit} );
+
+					svg {
+						top: 0;
+					}
+				}
+
+				.submenu-expand {
+					margin-right: 0;
+				}
+
+				@include media(tablet) {
+
+					.menu-item-has-children > a {
+
+						&:after {
+							content: "\203a";
+						}
+					}
+				}
+			}
+
+			> a,
+			> .menu-item-link-return {
+
+				color: $color__background-body;
+				display: block;
+				line-height: $font__line-height-heading;
+				text-shadow: none;
+				padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
+				max-width: #{20 * $size__spacing-unit};
+
+				&:hover,
+				&:focus {
+					background: $color__link-hover;
+
+					&:after {
+						background: $color__link-hover;
+					}
+				}
+			}
+
+			> .menu-item-link-return {
+				width: 100%;
+				font-size: $font__size_base;
+				font-weight: normal;
+				text-align: left;
+			}
+
+			> a:empty {
+				display: none;
+			}
+
+			&.mobile-parent-nav-menu-item {
+
+				display: none;
+				font-size: $font__size-sm;
+				font-weight: normal;
+
+				svg {
+					position: relative;
+					top: 0.2rem;
+					margin-right: calc( .25 * #{$size__spacing-unit} );
+				}
+			}
+		}
+	}
+
+	/*
+	 * Sub-menu styles
+	 *
+	 * :focus-within needs its own selector so other similar
+	 * selectors don’t get ignored if a browser doesn’t recognize it
+	 */
+	.main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
+
+		display: block;
+		left: 0;
+		margin-top: 0;
+		opacity: 1;
+		width: auto;
+		min-width: 100%;
+
+
+		/* Non-mobile position */
+		@include media(tablet) {
+			display: block;
+			margin-top: 0;
+			opacity: 1;
+			position: absolute;
+			left: 0;
+			right: auto;
+			top: auto;
+			bottom: auto;
+			height: auto;
+			min-width: -moz-max-content;
+			min-width: -webkit-max-content;
+			min-width: max-content;
+			transform: none;
+		}
+
+		&.hidden-links {
+			left: 0;
+			width: 100%;
+			display: table;
+			position: absolute;
+
+			@include media(tablet) {
+				right: 0;
+				left: auto;
+				display: block;
+				width: max-content;
+			}
+		}
+
+		.submenu-expand {
+			display: none;
+		}
+
+		.sub-menu {
+			display: block;
+			margin-top: inherit;
+			position: relative;
+			width: 100%;
+			left: 0;
+			opacity: 1;
+
+			/* Non-mobile position */
+			@include media(tablet) {
+				float: none;
+				max-width: 100%;
+			}
+		}
+
+		/* Nested sub-menu dashes */
+		.sub-menu {
+			counter-reset: submenu;
+		}
+
+		.sub-menu > li > a::before {
+			font-family: $font__body;
+			font-weight: normal;
+			content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
+			counter-increment: submenu
+		}
+	}
+
+	.main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
+	.main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
+	.main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
+
+		display: block;
+		left: 0;
+		margin-top: 0;
+		opacity: 1;
+		width: auto;
+		min-width: 100%;
+
+
+		/* Non-mobile position */
+		@include media(tablet) {
+			display: block;
+			float: none;
+			margin-top: 0;
+			opacity: 1;
+			position: absolute;
+			left: 0;
+			right: auto;
+			top: auto;
+			bottom: auto;
+			height: auto;
+			min-width: -moz-max-content;
+			min-width: -webkit-max-content;
+			min-width: max-content;
+			transform: none;
+		}
+
+		&.hidden-links {
+			left: 0;
+			width: 100%;
+			display: table;
+			position: absolute;
+
+			@include media(tablet) {
+				right: 0;
+				left: auto;
+				display: table;
+				width: max-content;
+			}
+		}
+
+		.submenu-expand {
+			display: none;
+		}
+
+		.sub-menu {
+			display: block;
+			margin-top: inherit;
+			position: relative;
+			width: 100%;
+			left: 0;
+			opacity: 1;
+
+			/* Non-mobile position */
+			@include media(tablet) {
+				float: none;
+				max-width: 100%;
+			}
+		}
+
+		/* Nested sub-menu dashes */
+		.sub-menu {
+			counter-reset: submenu;
+		}
+
+		.sub-menu > li > a::before {
+			font-family: $font__body;
+			font-weight: normal;
+			content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
+			counter-increment: submenu
+		}
+	}
+
+	/**
+	 * Fade-in animation for top-level submenus
+	 */
+	.main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
+		animation: fade_in 0.1s forwards;
+	}
+
+	/**
+	 * Off-canvas touch device styles
+	 */
+	.main-menu .menu-item-has-children.off-canvas .sub-menu {
+
+		.submenu-expand .svg-icon {
+			transform: rotate(270deg);
+		}
+
+		.sub-menu {
+			opacity: 0;
+			position: absolute;
+			z-index: 0;
+			transform: translateX(-100%);
+		}
+
+		li:hover,
+		li:focus,
+		li > a:hover,
+		li > a:focus {
+			background-color: transparent;
+		}
+
+		> li > a,
+		> li > .menu-item-link-return {
+			white-space: inherit;
+		}
+
+		&.expanded-true {
+
+			display: table;
+			margin-top: 0;
+			opacity: 1;
+			padding-left: 0;
+
+			/* Mobile position */
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			position: fixed;
+			z-index: 100000; /* Make sure appears above mobile admin bar */
+			width: 100vw;
+			height: 100vh;
+			max-width: 100vw;
+			transform: translateX(+100%);
+			animation: slide_in_right 0.3s forwards;
+
+			> .mobile-parent-nav-menu-item {
+				display: block;
+			}
+
+			/* Prevent menu from being blocked by admin bar */
+			.admin-bar & {
+				top: 46px;
+				height: calc( 100vh - 46px );
+
+				.sub-menu.expanded-true {
+					top: 0;
+				}
+
+				/* WP core breakpoint */
+				@media only screen and ( min-width: 782px ) {
+					top: 32px;
+					height: calc( 100vh - 32px );
+
+					.sub-menu.expanded-true {
+						top: 0;
+					}
+				}
+			}
+		}
+	}
+
+	// Hide duplicate menu-more-link when re-loading a menu in the customizer
+	.main-menu-more {
+		&:nth-child(n+3) {
+			display: none;
+		}
+	}
+
+}
+
+/* Menu animation */
+
+@keyframes slide_in_right {
+	100% {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes fade_in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

wp-content/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss

@@ -0,0 +1,66 @@
+/* Social menu */
+
+.social-navigation {
+	margin-top: calc(#{$size__spacing-unit} / 2 );
+	text-align: left;
+
+	ul.social-links-menu {
+		@include clearfix;
+
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+
+		li {
+			display: inline-block;
+			vertical-align: bottom;
+			vertical-align: -webkit-baseline-middle;
+			list-style: none;
+
+			&:nth-child(n+2) {
+				margin-left: 0.1em;
+			}
+
+			a {
+				border-bottom: 1px solid transparent;
+				display: block;
+				color: $color__text-main;
+				margin-bottom: -1px;
+				transition: opacity $link_transition ease-in-out;
+
+				&:hover,
+				&:active {
+					color: $color__text-main;
+					opacity: 0.6;
+				}
+
+				&:focus {
+					color: $color__text-main;
+					opacity: 1;
+					border-bottom: 1px solid $color__text-main;
+				}
+
+				svg {
+					display: block;
+					width: 32px;
+					height: 32px;
+
+					// Prevent icons from jumping in Safari using hardware acceleration.
+					transform: translateZ(0);
+
+					&#ui-icon-link {
+						transform: rotate(-45deg);
+					}
+				}
+			}
+		}
+	}
+}
+
+.site-title + .social-navigation,
+.site-description + .social-navigation {
+
+	@include media(tablet) {
+		margin-top: calc(#{$size__spacing-unit} / 5 );
+	}
+}

wp-content/themes/twentynineteen/sass/navigation/_navigation.scss

@@ -0,0 +1,16 @@
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+@import "links";
+
+/*--------------------------------------------------------------
+## Menus
+--------------------------------------------------------------*/
+@import "menu-main-navigation";
+@import "menu-social-navigation";
+@import "menu-footer-navigation";
+
+/*--------------------------------------------------------------
+## Next / Previous
+--------------------------------------------------------------*/
+@import "next-previous";

wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss

@@ -0,0 +1,201 @@
+/* Next/Previous navigation */
+
+// Singular navigation
+.post-navigation {
+
+	margin: calc(3 * 1rem) 0;
+
+	@include media(tablet) {
+		margin: calc(3 * 1rem) $size__site-margins;
+		max-width: calc(6 * (100vw / 12));
+	}
+
+	@include media(desktop) {
+		margin: calc(3 * 1rem) 0;
+		max-width: 100%;
+	}
+
+	.nav-links {
+
+		margin: 0 $size__spacing-unit;
+		max-width: 100%;
+		display: flex;
+		flex-direction: column;
+
+		@include media(tablet) {
+			margin: 0;
+		}
+
+		@include media(desktop) {
+			flex-direction: row;
+			margin: 0 $size__site-margins;
+			max-width: $size__site-desktop-content;
+		}
+
+		a {
+			.meta-nav {
+				color: $color__text-light;
+				user-select: none;
+
+				&:before,
+				&:after {
+					display: none;
+					content: "—";
+					width: 2em;
+					color: $color__text-light;
+					height: 1em;
+				}
+			}
+
+			.post-title {
+				hyphens: auto;
+			}
+
+			&:hover {
+				color: $color__link-hover;
+			}
+		}
+
+		.nav-previous,
+		.nav-next {
+
+			@include media(desktop) {
+				min-width: calc(50% - 2 * #{$size__spacing-unit});
+			}
+		}
+
+		.nav-previous {
+			order: 2;
+
+			@include media(desktop) {
+				order: 1;
+			}
+
+			+ .nav-next {
+				margin-bottom: $size__spacing-unit;
+			}
+
+			.meta-nav {
+				&:before {
+					display: inline;
+				}
+			}
+		}
+
+		.nav-next {
+			order: 1;
+
+			@include media(desktop) {
+				order: 2;
+				padding-left: $size__spacing-unit;
+			}
+
+			.meta-nav {
+				&:after {
+					display: inline;
+				}
+			}
+		}
+	}
+}
+
+// Index/archive navigation
+.pagination {
+
+	.nav-links {
+
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 calc(.5 * #{$size__spacing-unit});
+
+
+		& > * {
+			padding: calc(.5 * #{$size__spacing-unit});
+
+			&.dots,
+			&.prev {
+				padding-left: 0;
+			}
+
+			&.dots,
+			&.next {
+				padding-right: 0;
+			}
+		}
+
+		a:focus {
+			text-decoration: underline;
+			outline-offset: -1px;
+
+			&.prev,
+			&.next {
+				text-decoration: none;
+
+				.nav-prev-text,
+				.nav-next-text {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		.nav-next-text,
+		.nav-prev-text {
+			display: none;
+		}
+
+		@include media(tablet) {
+
+			margin-left: $size__site-margins;
+			padding: 0;
+
+			.prev,
+			.next {
+
+				& > * {
+					display: inline-block;
+					vertical-align: text-bottom;
+				}
+			}
+
+			& > * {
+				padding: $size__spacing-unit;
+			}
+		}
+	}
+}
+
+// Comments navigation
+.comment-navigation {
+
+	.nav-links {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.nav-previous,
+	.nav-next {
+		min-width: 50%;
+		width: 100%;
+		@include font-family( $font__heading );
+		font-weight: bold;
+
+		.secondary-text {
+			display: none;
+
+			@include media(tablet) {
+				display: inline;
+			}
+		}
+
+		svg {
+			vertical-align: middle;
+			position: relative;
+			margin: 0 -0.35em;
+			top: -1px;
+		}
+	}
+
+	.nav-next {
+		text-align: right;
+	}
+}

wp-content/themes/twentynineteen/sass/site/_site.scss

@@ -0,0 +1,27 @@
+
+/*--------------------------------------------------------------
+## Header
+--------------------------------------------------------------*/
+@import "header/site-header";
+@import "header/site-featured-image";
+
+/*--------------------------------------------------------------
+## Posts and pages
+--------------------------------------------------------------*/
+@import "primary/posts-and-pages";
+
+/*--------------------------------------------------------------
+## Comments
+--------------------------------------------------------------*/
+@import "primary/comments";
+
+/*--------------------------------------------------------------
+## Archives
+--------------------------------------------------------------*/
+@import "primary/archives";
+
+/*--------------------------------------------------------------
+## Footer
+--------------------------------------------------------------*/
+@import "footer/site-footer";
+

wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss

@@ -0,0 +1,53 @@
+/* Site footer */
+
+#colophon {
+
+	.widget-area,
+	.site-info {
+		margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+
+		@include media(tablet) {
+			margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+		}
+	}
+
+	.widget-column {
+		display: flex;
+		flex-wrap: wrap;
+		.widget {
+			-webkit-hyphens: auto;
+			-moz-hyphens: auto;
+			-ms-hyphens: auto;
+			hyphens: auto;
+			width: 100%;
+			word-wrap: break-word;
+			@include media(desktop) {
+				margin-right: calc(3 * #{$size__spacing-unit});
+				width: calc(50% - (3 * #{$size__spacing-unit}));
+			}
+		}
+	}
+
+	.site-info {
+		color: $color__text-light;
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+		word-wrap: break-word;
+
+		a {
+			color: inherit;
+
+			&:hover {
+				text-decoration: none;
+				color: $color__link;
+			}
+		}
+
+		.imprint,
+		.privacy-policy-link {
+			margin-right: $size__spacing-unit;
+		}
+	}
+}

wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

@@ -0,0 +1,301 @@
+// Featured image styles
+
+.site-header.featured-image {
+
+	/* Hide overflow for overflowing featured image */
+	overflow: hidden;
+
+	/* Need relative positioning to properly align layers. */
+	position: relative;
+
+	/* Add text shadow to text, to increase readability. */
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+
+	/* Set white text color when featured image is set. */
+	.site-branding .site-title,
+	.site-branding .site-description,
+	.main-navigation a:after,
+	.main-navigation .main-menu > li.menu-item-has-children:after,
+	.main-navigation li,
+	.social-navigation li,
+	.entry-meta,
+	.entry-title {
+		color: $color__background-body;
+	}
+
+	.main-navigation a,
+	.main-navigation a + svg,
+	.social-navigation a,
+	.site-title a,
+	.site-featured-image a {
+		color: $color__background-body;
+		transition: opacity $link_transition ease-in-out;
+
+		&:hover,
+		&:active,
+		&:hover + svg,
+		&:active + svg {
+			color: $color__background-body;
+			opacity: 0.6;
+		}
+
+		&:focus,
+		&:focus + svg {
+			color: $color__background-body;
+		}
+	}
+
+	.main-navigation .sub-menu a {
+		opacity: inherit;
+	}
+
+	/* add focus state to social media icons */
+	.social-navigation a {
+		&:focus {
+			color: $color__background-body;
+			opacity: 1;
+			border-bottom: 1px solid $color__background-body;
+		}
+	}
+
+	.social-navigation svg,
+	.site-featured-image svg {
+		/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
+		-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
+				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
+	}
+
+	/* Entry header */
+	.site-featured-image {
+
+		/* First layer: grayscale. */
+		.post-thumbnail img {
+			height: auto;
+			left: 50%;
+			max-width: 1000%;
+			min-height: 100%;
+			min-width: 100vw;
+			position: absolute;
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			width: auto;
+			z-index: 1;
+
+			@supports ( object-fit: cover ) {
+				height: 100%;
+				left: 0;
+				object-fit: cover;
+				top: 0;
+				transform: none;
+				width: 100%;
+			}
+
+			/* When image filters are active, make it grayscale to colorize it blue. */
+			.image-filters-enabled & {
+				filter: grayscale(100%);
+			}
+		}
+
+		.entry-header {
+
+			margin-top: calc( 4 * #{$size__spacing-unit});
+			margin-bottom: 0;
+			margin-left: 0;
+			margin-right: 0;
+
+			@include media (tablet) {
+
+				margin-left: $size__site-margins;
+				margin-right: $size__site-margins;
+			}
+
+			.entry-title {
+
+				&:before {
+					background: $color__background-body;
+				}
+			}
+
+			/* Entry meta */
+
+			.entry-meta {
+
+				font-weight: 500;
+
+				> span {
+
+					margin-right: $size__spacing-unit;
+					display: inline-block;
+
+					&:last-child {
+						margin-right: 0;
+					}
+				}
+
+				a {
+
+					@include link-transition;
+					color: currentColor;
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+
+				.svg-icon {
+					position: relative;
+					display: inline-block;
+					vertical-align: middle;
+					margin-right: 0.5em;
+				}
+
+				.discussion-avatar-list {
+					display: none;
+				}
+			}
+
+			&.has-discussion {
+
+				@include media (tablet) {
+
+					.entry-meta {
+						display: flex;
+						position: relative;
+					}
+
+					.entry-title {
+						padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
+					}
+
+					.entry-meta .comment-count {
+						position: absolute;
+						right: 0;
+					}
+
+					.entry-meta .discussion-avatar-list {
+						display: block;
+						position: absolute;
+						bottom: 100%;
+					}
+				}
+			}
+		}
+	}
+
+	/* Custom Logo Link */
+
+	.custom-logo-link {
+
+		background: $color__background-body;
+		box-shadow: 0 0 0 0 rgba($color__background-body, 0);
+
+		&:hover,
+		&:active,
+		&:focus {
+			box-shadow: 0 0 0 2px rgba($color__background-body, 1);
+		}
+	}
+
+	/* Make sure important elements are above pseudo elements used for effects. */
+	.site-branding {
+		position: relative;
+		z-index: 10;
+	}
+
+	.site-featured-image .entry-header {
+		position: relative;
+		z-index: 9;
+	}
+
+	/* Set up image filter layer positioning */
+	.site-branding-container:after,
+	.site-featured-image:before,
+	.site-featured-image:after,
+	&:after {
+		display: block;
+		position: absolute;
+		top: 0; left: 0;
+		content: "\020";
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Background & Effects */
+	/* Shared background settings between pseudo elements. */
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+
+	/* The intensity of each blend mode is controlled via layer opacity. */
+
+	/* Second layer: screen. */
+	.image-filters-enabled & .site-featured-image:before {
+		background: $color__link;
+		mix-blend-mode: screen;
+		opacity: 0.1;
+	}
+
+	/* Third layer: multiply. */
+	/* When image filters are inactive, a black overlay is added. */
+	.site-featured-image:after {
+		background: #000;
+		mix-blend-mode: multiply;
+		opacity: .7;
+
+		/* When image filters are active, a blue overlay is added. */
+		.image-filters-enabled & {
+			background: $color__link;
+			opacity: .8;
+			z-index: 3;
+
+			/* Browsers supporting mix-blend-mode don't need opacity < 1 */
+			@supports (mix-blend-mode: multiply) {
+				opacity: 1;
+			}
+		}
+	}
+
+	/* Fourth layer: overlay. */
+	.image-filters-enabled & .site-branding-container:after {
+		background: rgba(0, 0, 0, 0.35);
+		mix-blend-mode: overlay;
+		opacity: 0.5;
+		z-index: 4;
+
+		/* Browsers supporting mix-blend-mode can have a light overlay */
+		@supports (mix-blend-mode: overlay) {
+			background: rgba($color__background-body, 0.35);
+		}
+	}
+
+	/* Fifth layer: readability overlay */
+	&:after {
+		background: #000;
+		/**
+		 * Add a transition to the readability overlay, to add a subtle
+		 * but smooth effect when resizing the screen.
+		 */
+		transition: opacity 1200ms ease-in-out;
+		opacity: 0.7;
+		z-index: 5;
+
+		/* When image filters are active, a blue overlay is added. */
+		.image-filters-enabled & {
+			background: mix($color__link, black, 12%);
+			opacity: 0.38;
+
+			@include media(tablet) {
+				opacity: 0.18;
+			}
+		}
+	}
+
+
+	::-moz-selection {
+		background: rgba($color__background-body, 0.17);
+	}
+
+	::selection {
+		background: rgba($color__background-body, 0.17);
+	}
+}

wp-content/themes/twentynineteen/sass/site/header/_site-header.scss

@@ -0,0 +1,139 @@
+// 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;
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
+	position: relative;
+	word-wrap: break-word;
+
+	@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;
+}

wp-content/themes/twentynineteen/sass/site/primary/_archives.scss

@@ -0,0 +1,65 @@
+.archive .page-header,
+.search .page-header,
+.error404 .page-header {
+
+	margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});
+
+	@include media(tablet) {
+		margin: 0 $size__site-margins calc(3 * #{$size__spacing-unit});
+	}
+
+	.page-title {
+
+		color: $color__text-light;
+		display: inline;
+		letter-spacing: normal;
+
+		&:before {
+			display: none;
+		}
+	}
+
+	.search-term,
+	.page-description {
+		display: inherit;
+		clear: both;
+	}
+}
+
+.archive .page-header .page-description,
+.search .page-header .page-description {
+	display: block;
+	color: $color__text-main;
+	font-size: 1em;
+}
+
+.hfeed .entry .entry-header {
+
+	@include media(tablet) {
+		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
+	}
+}
+
+/* 404 & Not found */
+
+.error-404.not-found,
+.no-results.not-found {
+
+	.page-content {
+
+		margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};
+
+		@include media(tablet) {
+			margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
+		}
+	}
+
+	.search-submit {
+		vertical-align: middle;
+		margin: $size__spacing-unit 0;
+	}
+
+	.search-field {
+		width: 100%;
+	}
+}

wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -0,0 +1,415 @@
+.comment-content a {
+	word-wrap: break-word;
+}
+
+.bypostauthor {
+	display: block;
+}
+
+.comments-area {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
+	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+	word-wrap: break-word;
+	@include postContentMaxWidth();
+
+	@include media(tablet) {
+		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+	}
+
+	& > * {
+		margin-top: calc(2 * #{$size__spacing-unit});
+		margin-bottom: calc(2 * #{$size__spacing-unit});
+
+		@include media(tablet) {
+			margin-top: calc(3 * #{$size__spacing-unit});
+			margin-bottom: calc(3 * #{$size__spacing-unit});
+		}
+	}
+
+	/* Add extra margin when the comments section is located immediately after the
+	 * post itself (this happens on pages).
+	 */
+	.entry + & {
+		margin-top: calc(3 * #{$size__spacing-unit});
+	}
+
+	.comments-title-wrap {
+
+		@include media(tablet) {
+			align-items: baseline;
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.comments-title {
+			@include post-section-dash;
+			margin: 0;
+
+			@include media(tablet) {
+				flex: 1 0 calc(3 * (100vw / 12));
+			}
+		}
+
+		.discussion-meta {
+			@include media(tablet) {
+				flex: 0 0 calc(2 * (100vw / 12));
+				margin-left: #{$size__spacing-unit};
+			}
+		}
+	}
+}
+
+#comment {
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+#respond {
+	position: relative;
+
+	.comment-user-avatar {
+		margin: $size__spacing-unit 0 -#{$size__spacing-unit};
+	}
+
+	.comment .comment-form {
+		padding-left: 0;
+	}
+
+	> small {
+		display: block;
+		font-size: $font__size_base;
+		position: absolute;
+		left: calc(#{$size__spacing-unit} + 100%);
+		top: calc(-3.5 * #{$size__spacing-unit});
+		width: calc(100vw / 12 );
+	}
+}
+
+#comments {
+
+	> .comments-title:last-child {
+		display: none;
+	}
+}
+
+.comment-form-flex {
+	display: flex;
+	flex-direction: column;
+
+	.comments-title {
+		display: none;
+		margin: 0;
+		order: 1;
+	}
+
+	#respond {
+		order: 2;
+
+		+ .comments-title {
+			display: block;
+		}
+	}
+}
+
+.comment-form-wrapper,
+.comment-form-wrapper .comments-title {
+	display: block;
+}
+
+.comment-list {
+	list-style: none;
+	padding: 0;
+
+	.children {
+		margin: 0;
+		padding: 0 0 0 $size__spacing-unit;
+	}
+
+	> .comment:first-child {
+		margin-top: 0;
+	}
+
+	.pingback,
+	.trackback {
+
+		.comment-body {
+			color: $color__text-light;
+			@include font-family( $font__heading );
+			font-size: $font__size-xs;
+			font-weight: 500;
+			margin-top: $size__spacing-unit;
+			margin-bottom: $size__spacing-unit;
+
+			a:not(.comment-edit-link) {
+				font-weight: bold;
+				font-size: $font__size-base / (1 * $font__size-ratio);
+				line-height: 1.5;
+				padding-right: #{0.5 * $size__spacing-unit};
+				display: block;
+			}
+
+			.comment-edit-link {
+				color: $color__text-light;
+				@include font-family( $font__heading );
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+.comment-reply {
+
+	#respond + & {
+		display: none;
+	}
+
+	.comment-reply-link {
+		display: inline-block;
+	}
+}
+
+.comment {
+	list-style: none;
+	position: relative;
+
+	@include media(tablet) {
+		padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
+
+		&.depth-1,
+		.children {
+			padding-left: 0;
+		}
+
+		&.depth-1 {
+			margin-left: calc(3.25 * #{$size__spacing-unit});
+		}
+	}
+
+	.comment-body {
+		margin: calc(2 * #{$size__spacing-unit}) 0 0;
+	}
+
+
+	.comment-meta {
+		position: relative;
+	}
+
+	.comment-author {
+
+		.avatar {
+			float: left;
+			margin-right: $size__spacing-unit;
+			position: relative;
+
+			@include media(tablet) {
+				float: inherit;
+				margin-right: inherit;
+				position: absolute;
+				top: 0;
+				right: calc(100% + #{$size__spacing-unit});
+			}
+		}
+
+		.fn {
+			position: relative;
+			display: block;
+
+			a {
+				color: inherit;
+
+				&:hover {
+					color: $color__link-hover;
+				}
+			}
+		}
+
+		.post-author-badge {
+			border-radius: 100%;
+			display: block;
+			height: 18px;
+			position: absolute;
+			background: lighten( $color__link, 8% );
+			right: calc(100% - #{$size__spacing-unit * 2.5});
+			top: -3px;
+			width: 18px;
+
+			@include media(tablet) {
+				right: calc(100% + #{$size__spacing-unit * .75});
+			}
+
+			svg {
+				width: inherit;
+				height: inherit;
+				display: block;
+				fill: white;
+				transform: scale(0.875);
+			}
+		}
+	}
+
+	.comment-metadata {
+
+		> a,
+		.comment-edit-link {
+			display: inline;
+			font-weight: 500;
+			color: $color__text-light;
+			vertical-align: baseline;
+
+			time {
+				vertical-align: baseline;
+			}
+
+			&:hover {
+				color: $color__link-hover;
+				text-decoration: none;
+			}
+		}
+
+		> * {
+			display: inline-block;
+		}
+
+		.edit-link-sep {
+			color: $color__text-light;
+			margin: 0 0.2em;
+			vertical-align: baseline;
+		}
+
+		.edit-link {
+			color: $color__text-light;
+
+			svg {
+				transform: scale(0.8);
+				vertical-align: baseline;
+				margin-right: 0.1em;
+			}
+		}
+
+		.comment-edit-link {
+			position: relative;
+			padding-left: $size__spacing-unit;
+			margin-left: -#{$size__spacing-unit};
+			z-index: 1;
+
+			&:hover {
+				color: $color__link;
+			}
+		}
+	}
+
+	.comment-content {
+
+		margin: $size__spacing-unit 0;
+
+		@include media(desktop) {
+			padding-right: $size__spacing-unit;
+		}
+
+		> *:first-child {
+			margin-top: 0;
+		}
+
+		> *:last-child {
+			margin-bottom: 0;
+		}
+
+		blockquote {
+			margin-left: 0;
+		}
+
+		a {
+			text-decoration: underline;
+			text-decoration-thickness: 2px;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+	}
+}
+
+.comment-reply-link,
+#cancel-comment-reply-link {
+	font-weight: 500;
+
+	&:hover {
+		color: $color__link-hover;
+	}
+}
+
+.discussion-avatar-list {
+	@include clearfix;
+
+	margin: 0;
+	padding: 0;
+
+	li {
+		position: relative;
+		list-style: none;
+		margin: 0 -8px 0 0;
+		padding: 0;
+		float: left;
+	}
+
+	.comment-user-avatar {
+
+		img {
+			height: calc(1.5 * #{$size__spacing-unit});
+			width: calc(1.5 * #{$size__spacing-unit});
+		}
+	}
+}
+
+.discussion-meta {
+
+	.discussion-meta-info {
+		margin: 0;
+
+		.svg-icon {
+			vertical-align: middle;
+			fill: currentColor;
+			transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
+			margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
+		}
+	}
+
+}
+
+.comment-form {
+
+	.comment-notes,
+	label {
+		@include font-family( $font__heading );
+		font-size: $font__size-xs;
+		color: $color__text-light;
+	}
+
+	#wp-comment-cookies-consent {
+		margin: 0 10px 0 0;
+	}
+
+	.comment-form-author,
+	.comment-form-email {
+		@include media(tablet) {
+			width: calc(50% - #{$size__spacing-unit / 2});
+			float: left;
+		}
+	}
+
+	.comment-form-email {
+		@include media(tablet) {
+			margin-left: $size__spacing-unit;
+		}
+	}
+
+	input[name="author"],
+	input[name="email"],
+	input[name="url"] {
+		display: block;
+		width: 100%;
+	}
+}

wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

@@ -0,0 +1,305 @@
+.sticky {
+	display: block;
+}
+
+.sticky-post {
+	background: $color__background-button;
+	color: #fff;
+	display: inline-block;
+	font-weight: bold;
+	line-height: 1;
+	padding: .25rem;
+	position: absolute;
+	text-transform: uppercase;
+	top: -$size__spacing-unit;
+	z-index: 1;
+}
+
+.updated:not(.published) {
+	display: none;
+}
+
+.page-links {
+	clear: both;
+	margin: 0 0 calc(1.5 * #{$size__spacing-unit});
+}
+
+.entry {
+
+	margin-top: calc(6 * #{$size__spacing-unit});
+
+	&:first-of-type {
+		margin-top: 0;
+	}
+
+	.entry-header {
+
+		margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
+		position: relative;
+
+		@include media(tablet) {
+			margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
+		}
+	}
+
+	.entry-title {
+
+		@include post-section-dash;
+		margin: 0;
+
+		a {
+			color: inherit;
+
+			&:hover {
+				color: $color__text-hover;
+			}
+		}
+	}
+
+	.entry-meta,
+	.entry-footer {
+
+		color: $color__text-light;
+		font-weight: 500;
+
+		> span {
+
+			margin-right: $size__spacing-unit;
+			display: inline-block;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
+		a {
+
+			@include link-transition;
+			color: currentColor;
+
+			&:hover {
+				text-decoration: none;
+				color: $color__link;
+			}
+		}
+
+		.svg-icon {
+			position: relative;
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: 0.5em;
+		}
+	}
+
+	.entry-meta {
+		margin: $size__spacing-unit 0;
+	}
+
+	.entry-footer {
+
+		margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
+
+		@include media(tablet) {
+			margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
+			max-width: $size__site-tablet-content;
+		}
+
+		@include media(tablet) {
+			max-width: $size__site-desktop-content;
+		}
+	}
+
+	.post-thumbnail {
+
+		margin: $size__spacing-unit;
+
+		@include media(tablet) {
+			margin: $size__spacing-unit $size__site-margins;
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		.post-thumbnail-inner {
+			display: block;
+
+			img {
+				position: relative;
+				display: block;
+				width: 100%;
+			}
+		}
+	}
+
+	.image-filters-enabled & {
+
+		.post-thumbnail {
+			position: relative;
+			display: block;
+
+			.post-thumbnail-inner {
+				filter: grayscale(100%);
+
+				&:after {
+					background: rgba(0, 0, 0, 0.35);
+					content: "";
+					display: block;
+					height: 100%;
+					opacity: .5;
+					pointer-events: none;
+					position: absolute;
+					top: 0;
+					width: 100%;
+					z-index: 4;
+
+					@supports (mix-blend-mode: multiply) {
+						display: none;
+					}
+				}
+			}
+
+			&:before,
+			&:after {
+				position: absolute;
+				display: block;
+				width: 100%;
+				height: 100%;
+				top: 0; left: 0;
+				content: "\020";
+				pointer-events: none;
+			}
+
+			@include filter-duotone;
+
+		}
+	}
+
+	.entry-content,
+	.entry-summary {
+		max-width: calc(100% - (2 * #{ $size__spacing-unit }));
+		margin: 0 $size__spacing-unit;
+
+		@include media(tablet) {
+			max-width: 80%;
+			margin: 0 10%;
+			padding: 0 60px;
+		}
+	}
+
+	.entry-content {
+
+		p {
+			word-wrap: break-word;
+		}
+
+		.more-link {
+			@include link-transition;
+			display: inline;
+			color: inherit;
+
+			&:after {
+				content: "\02192";
+				display: inline-block;
+				margin-left: 0.5em;
+			}
+
+			&:hover {
+				color: $color__link;
+				text-decoration: none;
+			}
+		}
+
+		a {
+			text-decoration: underline;
+			text-decoration-thickness: 2px;
+
+			&.button,
+			&:hover {
+				text-decoration: none;
+			}
+
+			&.button {
+				display: inline-block;
+			}
+
+			&.button:hover {
+				background: $color__background-button-hover;
+				color: $color__background-body;
+				cursor: pointer;
+			}
+		}
+
+		// Overwrite iframe embeds that have inline styles.
+		> iframe[style] {
+
+			margin: 32px 0 !important;
+			max-width: 100% !important;
+
+			@include media(tablet) {
+				max-width: $size__site-tablet-content !important;
+			}
+
+			@include media(desktop) {
+				max-width: $size__site-desktop-content !important;
+			}
+		}
+
+		// Page links
+		.page-links a {
+			margin: calc(0.5 * #{$size__spacing-unit});
+			text-decoration: none;
+		}
+
+		// Classic editor audio embeds.
+		.wp-audio-shortcode {
+			max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
+
+			@include media(tablet) {
+				max-width: $size__site-tablet-content;
+			}
+
+			@include media(desktop) {
+				max-width: $size__site-desktop-content;
+			}
+		}
+	}
+}
+
+/* Author description */
+
+.author-bio {
+	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
+
+	@include postContentMaxWidth();
+
+	@include media(tablet) {
+		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+	}
+
+	@include media(desktop) {
+		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+	}
+
+	.author-title {
+		@include post-section-dash;
+		display: inline;
+	}
+
+	.author-description {
+
+		display: inline;
+		color: $color__text-light;
+		font-size: $font__size-md;
+		line-height: $font__line-height-heading;
+
+		.author-link {
+			display: inline-block;
+
+			&:hover {
+				color: $color__link-hover;
+				text-decoration: none;
+			}
+		}
+	}
+}

wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss

@@ -0,0 +1,107 @@
+.widget {
+	margin: 0 0 #{$size__spacing-unit};
+
+	.widget-title {
+ 		font-size: $font__size-lg;
+ 	}
+
+	/* Make sure select elements fit in widgets. */
+	select {
+		max-width: 100%;
+	}
+
+	a {
+		color: $color__link;
+
+		&:hover {
+			color: $color__link-hover;
+		}
+	}
+}
+
+.widget_archive,
+.widget_categories,
+.widget_meta,
+.widget_nav_menu,
+.widget_pages,
+.widget_recent_comments,
+.widget_recent_entries,
+.widget_rss {
+
+	ul {
+		padding: 0;
+		list-style: none;
+
+		li {
+			color: $color__text-light;
+			@include font-family( $font__heading );
+			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
+			font-weight: 700;
+			line-height: $font__line-height-heading;
+			margin-top: #{0.5 * $size__spacing-unit};
+			margin-bottom: #{0.5 * $size__spacing-unit};
+		}
+
+		@include nestedSubMenuPadding();
+	}
+}
+
+.widget_tag_cloud {
+
+	.tagcloud {
+		@include font-family( $font__heading );
+		font-weight: 700;
+	}
+}
+
+
+.widget_search {
+
+	.search-field {
+		width: 100%;
+
+		@include media(mobile) {
+			width: auto;
+		}
+	}
+
+	.search-submit {
+		display: block;
+		margin-top: $size__spacing-unit;
+	}
+}
+
+.widget_calendar .calendar_wrap {
+	text-align: center;
+
+	table td,
+	table th {
+		border: none;
+	}
+
+	a {
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+	}
+
+	.wp-calendar-table {
+		margin-bottom: 0;
+	}
+
+	.wp-calendar-nav {
+		margin: 0 0 $size__spacing-unit;
+		display: table;
+		width: 100%;
+		@include font-family( $font__heading );
+
+		span {
+			display: table-cell;
+			padding: 0.5em;
+		}
+	}
+
+	.wp-calendar-nav-prev,
+	.wp-calendar-nav-next {
+		width: 40%;
+	}
+}

wp-content/themes/twentynineteen/sass/typography/_copy.scss

@@ -0,0 +1,63 @@
+p {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+dfn,
+cite,
+em,
+i {
+	font-style: italic;
+}
+
+blockquote {
+
+	cite {
+		font-size: $font__size-xs;
+		font-style: normal;
+		@include font-family( $font__heading );
+	}
+}
+
+pre {
+	font-size: $font__size-sm;
+	font-family: $font__pre;
+	line-height: $font__line-height-body;
+	overflow: auto;
+}
+
+code,
+kbd,
+tt,
+var {
+	font-size: $font__size-sm;
+	font-family: $font__code;
+}
+
+abbr, acronym {
+	border-bottom: 1px dotted #666;
+	cursor: help;
+}
+
+mark,
+ins {
+	background: #fff9c0;
+	text-decoration: none;
+}
+
+big {
+	font-size: 125%;
+}
+
+a {
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	&:focus {
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+	}
+}

wp-content/themes/twentynineteen/sass/typography/_headings.scss

@@ -0,0 +1,164 @@
+.author-description .author-link,
+.comment-metadata,
+.comment-reply-link,
+.comments-title,
+.comment-author .fn,
+.discussion-meta-info,
+.entry-meta,
+.entry-footer,
+.main-navigation,
+.no-comments,
+.not-found .page-title,
+.error-404 .page-title,
+.post-navigation .post-title,
+.page-links,
+.page-description,
+.pagination .nav-links,
+.sticky-post,
+.site-title,
+.site-info,
+#cancel-comment-reply-link,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include font-family( $font__heading );
+}
+
+.main-navigation,
+.page-description,
+.author-description .author-link,
+.not-found .page-title,
+.error-404 .page-title,
+.post-navigation .post-title,
+.pagination .nav-links,
+.comments-title,
+.comment-author .fn,
+.no-comments,
+.site-title,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	line-height: $font__line-height-heading;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.page-title {
+	@include font-family( $font__body );
+}
+
+.site-branding,
+.main-navigation ul.main-menu > li,
+.social-navigation,
+.author-description .author-bio,
+.nav-links {
+	line-height: 1.25;
+}
+
+h1 {
+	font-size: $font__size-xl;
+
+	@include media(tablet) {
+		font-size: $font__size-xxl;
+	}
+}
+
+.entry-title,
+.not-found .page-title,
+.error-404 .page-title,
+.has-larger-font-size,
+h2 {
+	font-size: $font__size-lg;
+
+	@include media(tablet) {
+		font-size: $font__size-xl;
+	}
+}
+
+.has-regular-font-size,
+.has-large-font-size,
+.comments-title,
+h3 {
+	font-size: $font__size-lg;
+}
+
+.site-title,
+.site-description,
+.main-navigation,
+.nav-links,
+.page-title,
+.page-description,
+.comment-author .fn,
+.no-comments,
+h2.author-title,
+p.author-bio,
+h4 {
+	font-size: $font__size-md;
+}
+
+.pagination .nav-links,
+.comment-content,
+h5 {
+	font-size: $font__size-sm;
+}
+
+.entry-meta,
+.entry-footer,
+.discussion-meta-info,
+.site-info,
+.has-small-font-size,
+.comment-reply-link,
+.comment-metadata,
+.comment-notes,
+.sticky-post,
+#cancel-comment-reply-link,
+img:after,
+h6 {
+	font-size: $font__size-xs;
+}
+
+.site-title,
+.page-title {
+	font-weight: normal;
+}
+
+.page-description,
+.page-links a {
+	font-weight: bold;
+}
+
+.site-description {
+	letter-spacing: -0.01em;
+}
+
+.post-navigation .post-title,
+.entry-title,
+.not-found .page-title,
+.error-404 .page-title,
+.comments-title,
+blockquote {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
+	word-break: break-word;
+	word-wrap: break-word;
+}
+
+/* Do not hyphenate entry title on tablet view and bigger. */
+.entry-title {
+	@include media(tablet) {
+		-webkit-hyphens: none;
+		-moz-hyphens: none;
+		-ms-hyphens: none;
+		hyphens: none;
+	}
+}

wp-content/themes/twentynineteen/sass/typography/_typography.scss

@@ -0,0 +1,33 @@
+
+html {
+	font-size: $font__size_base;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: $color__background-body;
+	color: $color__text-main;
+	@include font-family( $font__body );
+	font-weight: 400;
+	font-size: 1em;
+	line-height: $font__line-height-body;
+	margin: 0;
+	text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select,
+optgroup,
+textarea {
+	color: $color__text-main;
+	@include font-family( $font__body );
+	font-weight: 400;
+	line-height: $font__line-height-body;
+	text-rendering: optimizeLegibility;
+}
+
+@import "headings";
+
+@import "copy";

wp-content/themes/twentynineteen/sass/variables-site/_colors.scss

@@ -0,0 +1,34 @@
+
+// Backgrounds
+$color__background-body: #fff;
+$color__background-input: #fff;
+$color__background-screen: #f1f1f1;
+$color__background-hr: #ccc;
+$color__background-button: #0073aa;
+$color__background-button-hover: #111;
+$color__background-pre: #eee;
+$color__background-ins: #fff9c0;
+$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% );
+
+// Text
+$color__text-main: #111;
+$color__text-light: #767676;
+$color__text-hover: lighten( #111, 22.5% );
+$color__text-screen: #21759b;
+$color__text-input: #666;
+$color__text-input-focus: #111;
+
+// Links
+$color__link: #0073aa;
+$color__link-visited: #0073aa;
+$color__link-hover: darken( $color__link, 10% );
+
+// Borders
+$color__border: #ccc;
+$color__border-link: #0073aa;
+$color__border-link-hover: darken( $color__link, 10% );
+$color__border-button: #ccc #ccc #bbb;
+$color__border-button-hover: #ccc #bbb #aaa;
+$color__border-button-focus: #aaa #bbb #bbb;
+$color__border-input: $color__border;
+$color__border-abbr: #666;

wp-content/themes/twentynineteen/sass/variables-site/_columns.scss

@@ -0,0 +1,16 @@
+$columns: (
+	1: calc(1 * (100vw / 12)),
+	2: calc(2 * (100vw / 12)),
+	3: calc(3 * (100vw / 12)),
+	4: calc(4 * (100vw / 12)),
+	5: calc(5 * (100vw / 12)),
+	6: calc(6 * (100vw / 12)),
+	7: calc(7 * (100vw / 12)),
+	8: calc(8 * (100vw / 12)),
+	9: calc(9 * (100vw / 12)),
+	10: calc(10 * (100vw / 12)),
+	11: calc(11 * (100vw / 12)),
+	12: calc(12 * (100vw / 12))
+);
+
+$columns__margin: $size__spacing-unit;

wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss

@@ -0,0 +1,83 @@
+/*
+ * Chrome renders extra-wide   characters for the Hoefler Text font.
+ * This results in a jumping cursor when typing in both the Classic and block
+ * editors. The following font-face override fixes the issue by manually inserting
+ * a custom font that includes just a Hoefler Text space replacement for that
+ * character instead.
+ */
+@font-face {
+	font-family: 'NonBreakingSpaceOverride';
+	src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'),
+		 url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff');
+
+}
+
+// Font and typographic variables
+
+$font__body: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
+$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$font__fallbacks: (
+	/* Arabic */
+	ar: 'Tahoma, Arial, sans-serif',
+	ary: 'Tahoma, Arial, sans-serif',
+	azb: 'Tahoma, Arial, sans-serif',
+	ckb: 'Tahoma, Arial, sans-serif',
+	fa-IR: 'Tahoma, Arial, sans-serif',
+	haz: 'Tahoma, Arial, sans-serif',
+	ps: 'Tahoma, Arial, sans-serif',
+	/* Cyrillic */
+	be: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	bg-BG: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	kk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	mk-MK: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	mn: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	ru-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	sah: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	sr-RS: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	tt-RU: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	uk: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif',
+	/* Chinese (Hong Kong) */
+	zh-HK: '-apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
+	/* Chinese (Taiwan) */
+	zh-TW: '-apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
+	/* Chinese (China) */
+	zh-CN: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif',
+	/* Devanagari */
+	bn-BD: 'Arial, sans-serif',
+	hi-IN: 'Arial, sans-serif',
+	mr: 'Arial, sans-serif',
+	ne-NP: 'Arial, sans-serif',
+	/* Greek */
+	el: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+	/* Gujarati */
+	gu: 'Arial, sans-serif',
+	/* Hebrew */
+	he-IL: '"Arial Hebrew", Arial, sans-serif',
+	/* Japanese */
+	ja: '-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif',
+	/* Korean */
+	ko-KR: '"Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif',
+	/* Thai */
+	th: '"Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif',
+	/* Vietnamese */
+	vi: '"Libre Franklin", sans-serif',
+);
+$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
+$font__pre: "Courier 10 Pitch", Courier, monospace;
+
+$font__size_base: 22px;
+$font__size-ratio: 1.125;
+
+$font__size-xxs:   1em / (1.5 * $font__size-ratio);
+$font__size-xs:    1em / (1.25 * $font__size-ratio);
+$font__size-sm:    1em / (1 * $font__size-ratio);
+$font__size-md:    1em * (1 * $font__size-ratio);
+$font__size-lg:    1em * (1.5 * $font__size-ratio);
+$font__size-xl:    1em * (2 * $font__size-ratio);
+$font__size-xxl:   1em * (2.5 * $font__size-ratio);
+$font__size-xxxl:  1em * (3 * $font__size-ratio);
+
+$font__line-height-body: 1.8;
+$font__line-height-pre: 1.6;
+$font__line-height-heading: 1.2;
+$font__line-height-double:  2 * $font__line-height-heading;

wp-content/themes/twentynineteen/sass/variables-site/_structure.scss

@@ -0,0 +1,16 @@
+// Responsive widths.
+
+$size__spacing-unit: 1rem;
+$size__site-main: 100%;
+$size__site-sidebar: 25%;
+$size__site-margins: calc(10% + 60px);
+$size__site-tablet-content: calc(8 * (100vw / 12) - 28px);
+$size__site-desktop-content: calc(6 * (100vw / 12) - 28px);
+
+// Responsive widths.
+
+$mobile_width: 600px;
+$tablet_width: 768px;
+$desktop_width: 1168px;
+$wide_width: 1379px;
+

wp-content/themes/twentynineteen/sass/variables-site/_transitions.scss

@@ -0,0 +1,6 @@
+// Transition timeouts.
+
+$link_transition: 110ms;
+$icon_transition: 120ms;
+$button_transition: 150ms;
+$background_transition: 200ms;

wp-content/themes/twentynineteen/sass/variables-site/_variables-site.scss

@@ -0,0 +1,5 @@
+@import "colors";
+@import "fonts";
+@import "structure";
+@import "columns";
+@import "transitions";