diff --git a/core/themes/umami/css/base.css b/core/themes/umami/css/base.css
new file mode 100644
index 0000000000..a8ef6a2fa7
--- /dev/null
+++ b/core/themes/umami/css/base.css
@@ -0,0 +1,225 @@
+/**
+ * @file
+ * This is the base CSS file, for styling elements.
+ */
+
+html {
+ box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+ margin-top: 0; /* This allows us to ensure that items side-by-side line up nicely. */
+}
+
+a {
+ color: #00836D;
+ text-decoration: underline;
+}
+a:hover,
+a:focus {
+ background-color: #e6eee0;
+ color: #444444;
+ text-decoration: none;
+}
+
+body {
+ background: #fbf5ee;
+ color: #464646;
+ font-family: 'Open Sans', Verdana, sans-serif;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ margin: 0;
+}
+
+blockquote {
+ background: #f4f2e9;
+ margin-bottom: 1.28rem;
+ padding: 3rem;
+}
+blockquote > * {
+ color: #000;
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.266rem;
+ font-weight: 400;
+ line-height: 1.5;
+}
+blockquote a {
+ /* Tweak default link colour to improve contrast for accessibility */
+ color: #057d6d;
+}
+blockquote a:hover,
+blockquote a:focus {
+ background-color: #fdfcf9;
+}
+
+button,
+.button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ background-color: #00836d;
+ border: 3px solid #00836d;
+ border-radius: 4px;
+ color: #fff;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0.4em 1.5em;
+ text-align: center;
+ text-decoration: none;
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.2rem;
+ font-weight: 400;
+ font-weight: normal;
+ transition: background-color 0.5s ease;
+}
+button:hover,
+button:active,
+button:focus,
+.button:hover,
+.button:active,
+.button:focus {
+ background-color: #e6eee0;
+ border: 3px solid #00836d;
+ color: #000000;
+ text-decoration: none;
+ transition: background-color 0.5s ease;
+}
+button[disabled]:hover,
+button[disabled]:active,
+button[disabled]:focus,
+button[disabled],
+.button[disabled]:hover,
+.button[disabled]:active,
+.button[disabled]:focus,
+.button[disabled] {
+ background: #767775;
+ color: #464646;
+ cursor: default;
+}
+
+h1 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem; /* +3 based on 1.125 modular scale (major second) */
+ font-weight: 400;
+ line-height: 1.2;
+ margin: 0 0 1.07rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h1 {
+ font-size: 2.369rem;
+ }
+}
+
+h2 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.266rem; /* +2 based on 1.125 modular scale (major second) */
+ font-weight: 400;
+ line-height: 1.2;
+ margin: 0 0 0.7rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h2 {
+ font-size: 1.77rem;
+ }
+}
+
+h3 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.125rem;/* +1 based on 1.125 modular scale (major second) */
+ font-weight: 400;
+ line-height: 1.2;
+ margin: 0 0 0.96rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h3 {
+ font-size: 1.5rem;
+ }
+}
+
+h4 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.2;
+ margin: 0 0 1.28rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h4 {
+ font-size: 1.33rem;
+ }
+}
+
+h5 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 0.889rem; /* -1 based on 1.125 modular scale (major second) */
+ font-weight: 700;
+ line-height: 1.2;
+ margin: 0 0 1.28rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h5 {
+ font-size: 1.25rem;
+ font-weight: 400;
+ }
+}
+
+h6 {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 0.79rem; /* -1 based on 1.125 modular scale (major second) */
+ font-weight: 700;
+ line-height: 1.2;
+ margin: 0 0 1.28rem 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ h6 {
+ font-size: 1rem;
+ font-weight: 400;
+ }
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+input {
+ border: 2px solid #767775;
+ color: #000;
+ margin: 0.25rem 0;
+ min-width: 100%;
+ max-width: 100%;
+ font-size: 1rem;
+ padding: 0.8rem 0.4rem;
+}
+
+label {
+ color: #464646;
+ display: block;
+ font-size: 1rem;
+ font-weight: bold;
+ margin: 0.25rem 0;
+}
+
+ul,
+ol {
+ margin-bottom: 1.28rem;
+}
+ol ol,
+ol ul,
+ul ul,
+ul ol {
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+p {
+ margin-bottom: 1.28rem;
+}
diff --git a/core/themes/umami/css/components/blocks/articles-aside/articles-aside.css b/core/themes/umami/css/components/blocks/articles-aside/articles-aside.css
new file mode 100644
index 0000000000..9a71cbb61a
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/articles-aside/articles-aside.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * This file is used to style the 'Articles Aside' view.
+ */
+
+.block-views-blockarticles-aside-block-1 > .block__title {
+ margin: 0 0 1.562rem;
+}
+
+.block-views-blockarticles-aside-block-1 .views-row {
+ margin-bottom: 1.562rem;
+}
diff --git a/core/themes/umami/css/components/blocks/banner/banner.css b/core/themes/umami/css/components/blocks/banner/banner.css
new file mode 100644
index 0000000000..4dfaad89b6
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/banner/banner.css
@@ -0,0 +1,82 @@
+/**
+ * @file
+ * This file is used to style the banner block.
+ */
+
+.cover-image {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.block-banner-block {
+ background-size: 0 0;
+ background-position: 0 0;
+}
+
+.block-banner-block .summary {
+ margin: 1em;
+}
+
+.block-banner-block .field--name-field-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+ margin: 0 0 1.07em 0;
+}
+
+.block-banner-block .field--name-field-summary {
+ margin-bottom: 1.28em;
+}
+
+.block-banner-block .field--name-field-content-link a {
+ display: inline-block;
+ padding: 0.5em 1.5em 0.4em;
+ border: 0;
+ border-radius: 4px;
+ background-color: #E84265;
+ color: #fff;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.2rem;
+ font-weight: 400;
+ font-weight: normal;
+ transition: background-color 0.5s ease;
+}
+
+.block-banner-block .field--name-field-content-link a:focus,
+.block-banner-block .field--name-field-content-link a:hover {
+ background-color: #00836D;
+ color: #fff;
+ text-decoration: underline;
+}
+
+/* 768px */
+@media screen and (min-width: 48rem) { /* 768px */
+ .block-banner-block {
+ background-size: cover;
+ background-position: left center;
+ /* Image ratio 7:3 */
+ }
+
+ .block-banner-block .block-inner {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ padding: 0 1em;
+ min-height: 43vw;
+ align-items: center;
+ }
+
+ .block-banner-block .summary {
+ margin: 0;
+ flex: 0 0 30%;
+ color: #ffffff;
+ }
+
+ .block-banner-block .field--name-field-banner-image {
+ display: none;
+ }
+}
diff --git a/core/themes/umami/css/components/blocks/branding/branding.css b/core/themes/umami/css/components/blocks/branding/branding.css
new file mode 100644
index 0000000000..7337752433
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/branding/branding.css
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * This file is used to style the branding block.
+ */
+
+.block-system-branding-block {
+ flex: 0 1 40%;
+ order: 2;
+ text-align: center;
+}
+
+@media screen and (min-width: 48em) {
+ .block-system-branding-block {
+ flex: 0 1 220px;
+ order: 3;
+ margin: 2.5rem 0;
+ text-align: left;
+ }
+}
+.site-logo {
+ display: inline-block;
+ width: 100%;
+ max-width: 205px;
+ background-color: inherit;
+}
+.site-logo:hover {
+ background-color: inherit;
+}
+
+.site-logo svg {
+ width: 100%;
+ max-width: 205px;
+ height: auto;
+}
diff --git a/core/themes/umami/css/components/blocks/footer-promo/footer-promo.css b/core/themes/umami/css/components/blocks/footer-promo/footer-promo.css
new file mode 100644
index 0000000000..394c139e21
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/footer-promo/footer-promo.css
@@ -0,0 +1,54 @@
+/**
+ * @file
+ * This file is used to style the Footer promo block.
+ */
+
+.footer-promo {
+ padding-top: 250px;
+ background: url('../../../../images/png/umami-bundle.png') no-repeat center top;
+}
+
+.footer-promo__title {
+ font-size: 1.5rem;
+ font-weight: normal;
+}
+
+.footer-promo__text a {
+ background-color: inherit;
+ clear: left;
+ display: block;
+ color: #fff;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+.footer-promo__text a:active,
+.footer-promo__text a:focus,
+.footer-promo__text a:hover {
+ background-color: transparent;
+ text-decoration: underline;
+}
+
+.footer-promo__text a:after {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ content: '';
+ background: url('../../../../images/svg/pointer--white.svg') no-repeat center center;
+ vertical-align: middle;
+}
+
+@media screen and (min-width: 60rem) {
+ .footer-promo {
+ flex-basis: 60%;
+ height: 200px;
+ padding-top: 0;
+ padding-left: 280px;
+ background-position: left top;
+ font-size: 0.9rem;
+ }
+
+ .footer-promo__title {
+ padding-top: 2rem;
+ }
+}
diff --git a/core/themes/umami/css/components/blocks/page-title/page-title.css b/core/themes/umami/css/components/blocks/page-title/page-title.css
new file mode 100644
index 0000000000..aac82bf22e
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/page-title/page-title.css
@@ -0,0 +1,17 @@
+/**
+ * @file
+ * This file is used to style the page title block.
+ *
+ * Note: This only styles the page title block itself. We do not use this block
+ * node pages (the titles are printed in the node.html.twig template), so
+ * styling for that will be in other files such as full.css.
+ */
+
+.is-front .block-page-title-block {
+ margin: 1rem 0;
+}
+
+.block-page-title-block {
+ margin: 1rem 0 3rem;
+ text-align: center;
+}
diff --git a/core/themes/umami/css/components/blocks/quicklinks/quicklinks.css b/core/themes/umami/css/components/blocks/quicklinks/quicklinks.css
new file mode 100644
index 0000000000..d9fe06b84f
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/quicklinks/quicklinks.css
@@ -0,0 +1,83 @@
+/**
+ * @file
+ * This file is used to style the Quick Links block.
+ */
+
+.quicklinks {
+ background-color: #fff;
+}
+
+@media screen and (min-width: 60rem) { /* 960px */
+ .quicklinks {
+ padding: 2rem 0;
+ }
+}
+
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .quicklinks__content {
+ display: flex;
+ flex-wrap: wrap;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .quicklinks__content {
+ flex-wrap: nowrap;
+ }
+}
+
+.quicklinks__col {
+ position: relative;
+ min-height: 9rem;
+ padding: 1.5rem 0.25rem;
+ text-align: center;
+}
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .quicklinks__col {
+ flex-basis: 50%;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+}
+
+.quicklinks__col::after {
+ position: absolute;
+ display: block;
+ bottom: 0;
+ right: 10%;
+ height: 1px;
+ width: 80%;
+ content: '';
+ background-color: #E6EEE0;
+}
+.quicklinks__col:last-child::after {
+ display: none;
+}
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .quicklinks__col:nth-child(3)::after {
+ display: none;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .quicklinks__col::after {
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 1px;
+ content: '';
+ background-color: #E6EEE0;
+ }
+ .quicklinks__col:nth-child(3)::after {
+ display: block;
+ }
+}
+
+.quicklinks__img {
+ margin-bottom: 1rem;
+}
diff --git a/core/themes/umami/css/components/blocks/search/search-results.css b/core/themes/umami/css/components/blocks/search/search-results.css
new file mode 100644
index 0000000000..06c1963812
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/search/search-results.css
@@ -0,0 +1,108 @@
+/**
+ * @file
+ * Stylesheet for results generated by the Search module.
+ */
+
+.search-form {
+ display: flex;
+ align-items: flex-end;
+ flex-wrap: wrap;
+ margin: 0 0 1rem;
+}
+
+.search-form #edit-basic {
+ background: #fff;
+ border: 1px solid #fcece7;
+ padding: 1.28rem;
+ margin: 0 1rem 1rem 0;
+}
+.search-form #edit-basic {
+ display: flex;
+ align-items: flex-end;
+}
+.search-form .form-type-search {
+ margin: 0;
+ padding: 0;
+}
+.search-form .form-type-search label {
+ display: inline-block;
+ margin: 0 0 1ex;
+ padding: 0;
+}
+.search-form .button {
+ min-width: 0;
+ position: relative;
+ z-index: 1;
+}
+.search-form #edit-basic .button {
+ width: 80px;
+ height: 35px;
+ margin-left: -80px;
+}
+
+.search-form .search-help-link {
+ padding: 1.28rem;
+ margin: 0 1rem 1rem 0;
+}
+
+.search-form #edit-advanced {
+ background: #fff;
+ border: 1px solid #fcece7;
+ padding: 1.28rem;
+ margin: 0 1rem 1rem 0;
+}
+.search-form .search-advanced {
+ width: 100%;
+}
+.search-form .search-advanced .details-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 1rem;
+}
+.search-form .search-advanced .details-wrapper fieldset {
+ width: 28%;
+ margin: 0 0 1rem;
+ padding: 1rem;
+}
+.search-form .search-advanced .action {
+ width: 100%;
+}
+
+.search-form .search-advanced .form-text {
+ margin: 0;
+ padding: 0.5em 2.25em 0.5em 2.25em;
+ border: 1px solid #dbdbdb;
+ min-width: calc(100% - 80px);
+}
+
+/*
+ Search results
+*/
+.search-results {
+ margin: 0 14px 28px;
+ padding: 0;
+ list-style: none;
+}
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .search-results {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+.search-results li {
+ background: #fff;
+ border: 1px solid #fcece7;
+ padding: 1.28rem;
+ margin: 0 0 1rem 0;
+}
+
+.search-results .search-result__snippet {
+ margin-bottom: 0;
+}
+.search-results .search-result__info {
+ margin-top: 1.28rem;
+ margin-bottom: 0;
+}
diff --git a/core/themes/umami/css/components/blocks/search/search.css b/core/themes/umami/css/components/blocks/search/search.css
new file mode 100644
index 0000000000..360f629e33
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/search/search.css
@@ -0,0 +1,106 @@
+/**
+ * @file
+ * This file is used to style the search block.
+ */
+
+.search-form + h2 {
+ margin: 0 14px 1rem;
+}
+
+.search-block-form {
+ display: none;
+}
+
+@media screen and (min-width: 48em) {
+ .search-block-form {
+ flex: 0 1 50%;
+ order: 1;
+ display: block;
+ border-bottom: 1px solid #E6EEE0;
+ }
+}
+
+.search-block-form form {
+ display: flex;
+ margin-top: 1.3rem;
+ margin-bottom: 1.2rem;
+}
+
+.search-iconwrap {
+ flex: 0 1 30%;
+ order: 3;
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+ .search-iconwrap {
+ display: none;
+ }
+}
+
+/* Search icon for mobile */
+.search-link {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ /* Centres the icon when focused/hovered */
+ padding-right: 7px;
+ margin-right: -7px;
+}
+.search-link svg {
+ display: block;
+ width: 26px;
+ height: auto;
+}
+
+/* Search input */
+.form-type-search {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.form-search {
+ width: 26em;
+ max-width: calc(100vw - 6.25em);
+ height: auto;
+ margin: 0;
+ padding: 0.5em 6.25em 0.5em 2.25em;
+ border: 1px solid #dbdbdb;
+ border-right: none;
+ border-radius: 3px;
+ font-size: 0.875rem;
+ line-height: normal;
+ background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
+ background-size: 1.5em;
+ color: #464646;
+}
+.form-search:focus {
+ outline: none;
+ box-shadow: 0 0 1px 1px #d62e5f;
+}
+
+.form-search::placeholder {
+ opacity: 1;
+}
+.form-type-search .form-search {
+ box-sizing: border-box; /* Override input[type="search"] of normalize.css */
+}
+
+/* Search submit */
+.search-block-form .form-actions {
+ margin-top: 0;
+ margin-bottom: 0;
+ width: 80px;
+ margin-left: -80px;
+ position: relative;
+ z-index: 1;
+}
+.search-block-form .form-submit,
+.search-form .form-submit {
+ /* Take off the border radius on the left side as it bumps into the search field */
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
diff --git a/core/themes/umami/css/components/content-types/article/article.css b/core/themes/umami/css/components/content-types/article/article.css
new file mode 100644
index 0000000000..77baa19e4c
--- /dev/null
+++ b/core/themes/umami/css/components/content-types/article/article.css
@@ -0,0 +1,25 @@
+/**
+ * @file
+ * This file is used to style the article content type using the 'full' view mode.
+ */
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-article.node--view-mode-full .node__header {
+ padding-right: 2.75rem;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-article.node--view-mode-full .node__content {
+ padding: 0 2.75rem 2.4rem 10.2rem;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-article.node--view-mode-full .field--name-field-image {
+ margin-left: -12.6rem;
+ }
+}
diff --git a/core/themes/umami/css/components/content-types/recipe/recipe.css b/core/themes/umami/css/components/content-types/recipe/recipe.css
new file mode 100644
index 0000000000..43de426cbb
--- /dev/null
+++ b/core/themes/umami/css/components/content-types/recipe/recipe.css
@@ -0,0 +1,227 @@
+/**
+ * @file
+ * This file is used to style the recipe using the 'full' view mode.
+ */
+
+.node--type-recipe.node--view-mode-full .field--name-field-recipe-category {
+ flex: 0 0 100%;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .field--name-field-recipe-category {
+ flex: 0 1 auto;
+ margin-right: 1em;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top {
+ margin-bottom: 2.369em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+}
+
+/* Override the recipe's img margin-bottom on larger displays */
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top .field--name-field-image img {
+ margin-bottom: 0;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top-first,
+.node--type-recipe.node--view-mode-full .layout__region--top-second {
+ flex: 0 0 calc(50% - 1rem);
+}
+
+/* Recipe meta */
+.node--type-recipe.node--view-mode-full .layout__region--top-second {
+ display: flex;
+ flex-direction: column;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ /* Recipe meta */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second {
+ align-self: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ margin-bottom: 1em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
+ align-items: center;
+ flex: 0 0 40%;
+ flex-direction: column;
+ margin-bottom: 2em;
+ text-align: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
+ flex-basis: 100%;
+ text-align: left;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
+ flex-basis: 90%;
+ text-align: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top-second svg {
+ flex: 0 0 26px;
+ height: 26px;
+ margin-bottom: 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second svg {
+ flex: 0 0 auto;
+ height: 47px;
+ margin-bottom: 0.889em;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--top-second .field {
+ flex: 1 0 auto;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second .field {
+ flex: 0 0 100%;
+ }
+}
+.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
+.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
+ display: inline-block;
+ padding-left: 0.5em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
+ .node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
+ display: block;
+ }
+}
+.node--type-recipe.node--view-mode-full .layout__region--top .field__label {
+ font-family: 'Open Sans', Verdana, sans-serif;
+ font-size: 1rem;
+ line-height: 1.5;
+ margin: 0;
+ font-weight: 700;
+}
+
+/* Recipe instructions */
+.node--type-recipe.node--view-mode-full .layout__region--bottom {
+ background-color: #f4f2e9;
+ border: 1px solid #e6eee0;
+ margin: 0 -1.266em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--bottom {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin: 0;
+ }
+}
+.node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
+ flex: 0 0 100%;
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424em;
+ font-weight: 400;
+ line-height: 1.2;
+ padding: 1.266rem 1.266rem 1em 1.266rem;
+ text-align: left;
+ margin: 0;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
+ font-size: 2.369rem;
+ padding: 1.2em;
+ text-align: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--bottom-first {
+ padding: 0 1.266em 1.266em 1.266em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--bottom-first {
+ flex: 0 0 33%;
+ padding: 0 2.369em 2.369em 2.369em;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--bottom-second {
+ padding: 0 1.266em 1.266em 1.266em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--bottom-second {
+ flex: 0 0 67%;
+ padding: 0 2.369em 2.369em 2.369em;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.266rem;
+ font-weight: 400;
+ line-height: 1.2;
+ padding: 0 0 0.6em 0;
+ margin: 0 0 1em 0;
+ border-bottom: 1px solid #EEC2CB;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
+ font-size: 1.77rem;
+ margin: 0 0 1.5em 0;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .field--name-field-ingredients .field__item {
+ border-bottom: 1px solid #eec2cb;
+ padding: 0 0 0.6em 0;
+ margin: 0 0 0.6em 0;
+}
+.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
+ margin-left: 0;
+ padding-left: 0;
+ list-style-type: none;
+}
+.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li {
+ counter-increment: step-counter;
+ padding: 0 0 0.6em 2.5em;
+ min-height: 1.5em;
+ list-style: none;
+ position: relative;
+}
+.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li::before {
+ content: counter(step-counter);
+ color: #cc2a00;
+ font-size: 1.5rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
diff --git a/core/themes/umami/css/components/content/full/node-full.css b/core/themes/umami/css/components/content/full/node-full.css
new file mode 100644
index 0000000000..5d8c6cf572
--- /dev/null
+++ b/core/themes/umami/css/components/content/full/node-full.css
@@ -0,0 +1,72 @@
+/**
+ * @file
+ * This file is used to style the 'full' view mode.
+ */
+.node--view-mode-full {
+ background-color: #ffffff;
+ border-bottom: 1px solid #fcece7;
+ border-left: none;
+ border-right: none;
+ border-top: 1px solid #fcece7;
+ margin: 0 auto 2.37rem;
+ padding: 1.266rem;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--view-mode-full {
+ border-left: 1px solid #fcece7;
+ border-right: 1px solid #fcece7;
+ padding: 2.37rem;
+ }
+}
+
+.node--view-mode-full > .node__header {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.node--view-mode-full .page-title {
+ flex: 0 0 100%;
+}
+
+.node--view-mode-full .node__submitted {
+ flex: 0 0 100%;
+ font-size: 0.889em;
+ margin-bottom: 1.2em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--view-mode-full .node__submitted {
+ flex: 0 1 auto;
+ margin-right: 2rem;
+ }
+}
+.node--view-mode-full .by-author::after {
+ content: "•";
+ font-size: 2em;
+ vertical-align: middle;
+ display: inline-block;
+ margin: 0 0.25ex;
+ color: #7CBE8C;
+}
+
+.node--view-mode-full .field--name-field-tags {
+ flex: 0 0 100%;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--view-mode-full .field--name-field-tags {
+ flex: 0 1 auto;
+ margin-left: auto;
+ }
+}
+
+.node--view-mode-full .field--name-field-image {
+ margin-bottom: 1.184rem;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--view-mode-full .field--name-field-image {
+ margin-bottom: 2.369rem;
+ }
+}
diff --git a/core/themes/umami/css/components/content/highlighted-bottom/highlighted-bottom.css b/core/themes/umami/css/components/content/highlighted-bottom/highlighted-bottom.css
new file mode 100644
index 0000000000..a7eb84f07a
--- /dev/null
+++ b/core/themes/umami/css/components/content/highlighted-bottom/highlighted-bottom.css
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * This file is used to style the 'highlighted-bottom' view mode.
+ */
+
+.node--view-mode-highlighted-bottom {
+ border: 1px solid #fcece7;
+ width: 100%;
+}
+
+.node--view-mode-highlighted-bottom .node__meta {
+ padding: 1.5rem;
+}
+
+.node--view-mode-highlighted-bottom .node__title {
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+.node--view-mode-highlighted-bottom .field--name-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.node--view-mode-highlighted-bottom .node__title .node__link {
+ background-color: inherit;
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-bottom .node__title .node__link:focus,
+.node--view-mode-highlighted-bottom .node__title .node__link:hover {
+ color: #000;
+ text-decoration: underline;
+}
+
+.node--view-mode-highlighted-bottom .node__link .field--name-title {
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-bottom .field--name-field-image img {
+ width: 100%;
+}
+
+.node--view-mode-highlighted-bottom .field--name-field-difficulty {
+ color: #5f635d;
+ font-size: 0.889rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/core/themes/umami/css/components/content/highlighted-medium/highlighted-medium.css b/core/themes/umami/css/components/content/highlighted-medium/highlighted-medium.css
new file mode 100644
index 0000000000..bfbb16de4b
--- /dev/null
+++ b/core/themes/umami/css/components/content/highlighted-medium/highlighted-medium.css
@@ -0,0 +1,59 @@
+/**
+ * @file
+ * This file is used to style the 'highlighted-medium' view mode.
+ */
+
+.node--view-mode-highlighted-medium {
+ border: 1px solid #fcece7;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.node--view-mode-highlighted-medium .node__meta {
+ padding: 1rem 1.5rem 0 1.5rem;
+}
+
+.node--view-mode-highlighted-medium .read-more {
+ margin-top: auto;
+ padding: 0 1.5rem 1.5rem 1.5rem;
+}
+
+.node--view-mode-highlighted-medium .node__title {
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+.node--view-mode-highlighted-medium .field--name-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.node--view-mode-highlighted-medium .node__title .node__link {
+ color: #000;
+ text-decoration: none;
+ background-color: inherit;
+}
+
+.node--view-mode-highlighted-medium .node__title .node__link:focus,
+.node--view-mode-highlighted-medium .node__title .node__link:hover {
+ color: #000;
+ text-decoration: underline;
+}
+
+.node--view-mode-highlighted-medium .node__link .field--name-title {
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-medium .field--name-field-image img {
+ display: block;
+ width: 100%;
+}
+
+.node--view-mode-highlighted-medium .field--name-field-difficulty {
+ color: #5f635d;
+ font-size: 0.889rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/core/themes/umami/css/components/content/highlighted-small/highlighted-small.css b/core/themes/umami/css/components/content/highlighted-small/highlighted-small.css
new file mode 100644
index 0000000000..2a0d11dedd
--- /dev/null
+++ b/core/themes/umami/css/components/content/highlighted-small/highlighted-small.css
@@ -0,0 +1,59 @@
+/**
+ * @file
+ * This file is used to style the 'highlighted-small' view mode.
+ */
+
+.node--view-mode-highlighted-small {
+ border: 1px solid #fcece7;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.node--view-mode-highlighted-small .node__meta {
+ padding: 1rem 1.5rem 0 1.5rem;
+}
+
+.node--view-mode-highlighted-small .read-more {
+ margin-top: auto;
+ padding: 0 1.5rem 1.5rem 1.5rem;
+}
+
+.node--view-mode-highlighted-small .node__title {
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+.node--view-mode-highlighted-small .field--name-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.node--view-mode-highlighted-small .node__title .node__link {
+ color: #000;
+ text-decoration: none;
+ background-color: inherit;
+}
+
+.node--view-mode-highlighted-small .node__title .node__link:focus,
+.node--view-mode-highlighted-small .node__title .node__link:hover {
+ color: #000;
+ text-decoration: underline;
+}
+
+.node--view-mode-highlighted-small .node__link .field--name-title {
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-small .field--name-field-image img {
+ display: block;
+ width: 100%;
+}
+
+.node--view-mode-highlighted-small .field--name-field-difficulty {
+ color: #5f635d;
+ font-size: 0.889rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/core/themes/umami/css/components/content/highlighted-top/highlighted-top.css b/core/themes/umami/css/components/content/highlighted-top/highlighted-top.css
new file mode 100644
index 0000000000..1811aa3b75
--- /dev/null
+++ b/core/themes/umami/css/components/content/highlighted-top/highlighted-top.css
@@ -0,0 +1,80 @@
+/**
+ * @file
+ * This file is used to style the 'highlighted-top' view mode.
+ */
+
+.node--view-mode-highlighted-top {
+ border: 1px solid #fcece7;
+ width: 100%;
+}
+
+/* Tweaks to the layout when promoted */
+/* Custom */
+@media screen and (min-width: 40rem) { /* 640px */
+ .view-promoted-items--single .node--view-mode-highlighted-top {
+ display: flex;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .node--view-mode-highlighted-top {
+ flex-direction: column;
+ }
+}
+
+/* Custom */
+@media screen and (min-width: 40rem) { /* 640px */
+ .view-promoted-items--single .node--view-mode-highlighted-top .node__content {
+ flex: 1 0 50%;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .node--view-mode-highlighted-top .node__meta {
+ order: -1;
+ }
+}
+
+.node--view-mode-highlighted-top .node__meta {
+ padding: 1.5rem;
+}
+
+.node--view-mode-highlighted-top .node__title {
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+.node--view-mode-highlighted-top .field--name-title {
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.424rem;
+ font-weight: 400;
+}
+
+.node--view-mode-highlighted-top .node__title .node__link {
+ color: #000;
+ text-decoration: none;
+ background-color: inherit;
+}
+
+.node--view-mode-highlighted-top .node__title .node__link:focus,
+.node--view-mode-highlighted-top .node__title .node__link:hover {
+ color: #000;
+ text-decoration: underline;
+}
+
+.node--view-mode-highlighted-top .node__link .field--name-title {
+ color: #000;
+ text-decoration: none;
+}
+
+.node--view-mode-highlighted-top .field--name-field-image img {
+ display: block;
+ width: 100%;
+}
+
+.node--view-mode-highlighted-top .field--name-field-difficulty {
+ color: #5f635d;
+ font-size: 0.889rem;
+ margin-bottom: 0.5rem;
+}
diff --git a/core/themes/umami/css/components/content/node.css b/core/themes/umami/css/components/content/node.css
new file mode 100644
index 0000000000..230f740485
--- /dev/null
+++ b/core/themes/umami/css/components/content/node.css
@@ -0,0 +1,9 @@
+/**
+ * @file
+ * This file is used to high-level node styling. Individual view modes or
+ * content types may override this.
+ */
+
+.node {
+ background: #fff;
+}
diff --git a/core/themes/umami/css/components/fields/label-items.css b/core/themes/umami/css/components/fields/label-items.css
new file mode 100644
index 0000000000..d8e8b99bf2
--- /dev/null
+++ b/core/themes/umami/css/components/fields/label-items.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * This file is used to style fields with class 'label-items' eg: Recipe
+ * category
+ */
+.label-items {
+ margin-bottom: 1.2em;
+ font-size: 0.889rem;
+}
+
+.label-items .field__label,
+.label-items .field__items,
+.label-items .field__item {
+ display: inline;
+}
+
+.label-items .field__label,
+.label-items .field__item {
+ margin-right: 0.6rem;
+}
+
+.label-items .field__label {
+ font-weight: normal;
+}
diff --git a/core/themes/umami/css/components/forms/buttons.css b/core/themes/umami/css/components/forms/buttons.css
new file mode 100644
index 0000000000..d820341b7a
--- /dev/null
+++ b/core/themes/umami/css/components/forms/buttons.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * This file is used to style form buttons generically, with overrides per form
+ */
+.form-actions {
+ display: inline-flex;
+}
+
+.form-actions .button {
+ margin-left: 1em;
+}
+.form-actions .button:first-child {
+ margin-left: 0;
+}
+
+.form-submit {
+ padding: 0.6em 1.25em 0.4em;
+ margin: 0;
+ border: 1px solid #dbdbdb;
+ font-size: 0.875rem;
+ background-color: #fff;
+ color: #000;
+}
+.form-submit:hover,
+.form-submit:focus {
+ padding: calc(0.6em - 2px) calc(1.25em - 2px) calc(0.4em - 2px) calc(1.25em - 2px);
+}
diff --git a/core/themes/umami/css/components/forms/contact.css b/core/themes/umami/css/components/forms/contact.css
new file mode 100644
index 0000000000..5ba7810ce6
--- /dev/null
+++ b/core/themes/umami/css/components/forms/contact.css
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * This file is used to style the contact form.
+ */
+
+.contact-form {
+ margin: auto auto 1rem;
+ max-width: 600px;
+}
+
+@media screen and (min-width: 30rem) { /* 480px */
+ .contact-form {
+ margin-bottom: 2rem;
+ }
+}
+
+@media screen and (min-width: 60rem) { /* 960px */
+ .contact-form {
+ margin-bottom: 3rem;
+ }
+}
+.contact-form .form-item-copy {
+ margin-bottom: 0;
+}
+.contact-form .form-item-copy .form-checkbox {
+ margin: 0 5px 0 0;
+ min-width: auto;
+}
+.contact-form .form-actions {
+ display: block;
+}
+
+@media screen and (min-width: 30rem) { /* 480px */
+ .contact-form .form-actions {
+ display: inline-flex;
+ }
+}
+.contact-form .form-actions .button {
+ margin-left: 0;
+}
+
+@media screen and (min-width: 30rem) { /* 480px */
+ .contact-form .form-actions .button {
+ margin-left: 1em;
+ }
+}
diff --git a/core/themes/umami/css/components/messages/messages.css b/core/themes/umami/css/components/messages/messages.css
new file mode 100644
index 0000000000..d7a4f04987
--- /dev/null
+++ b/core/themes/umami/css/components/messages/messages.css
@@ -0,0 +1,56 @@
+/**
+ * @file
+ * Styles for system messages.
+ */
+
+.messages {
+ padding: 20px;
+ color: inherit;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+[dir="rtl"] .messages {
+ background-position: right 10px top 17px;
+ text-align: right;
+}
+.messages + .messages {
+ margin-top: 1.538em;
+}
+.messages__content {
+ background: no-repeat 0 center;
+}
+.messages--status {
+ background-color: #e6eee0;
+}
+.messages--status .messages__content {
+ background-image: url(/core/misc/icons/73b355/check.svg);
+}
+.messages--warning {
+ background-color: #fcf1d4;
+}
+.messages--warning .messages__content {
+ background-image: url(/core/misc/icons/e29700/warning.svg);
+}
+.messages--error {
+ background-color: #f9e6eb;
+}
+.messages--error .messages__content {
+ background-image: url(/core/misc/icons/e32700/error.svg);
+}
+.messages--error .error {
+ color: inherit;
+}
+.messages a {
+ color: #cc2a00;
+}
+.messages__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.messages__item {
+ margin-left: 24px;
+}
+.messages__item + .messages__item {
+ margin-top: 0.769em;
+}
diff --git a/core/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css b/core/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
new file mode 100644
index 0000000000..f04578f0ea
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * This file is used to style the breadcrumbs.
+ */
+.breadcrumb {
+ padding: 0.79rem 1.266rem;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .breadcrumb {
+ padding-left: 2.37rem;
+ padding-right: 2.37rem;
+ }
+}
diff --git a/core/themes/umami/css/components/navigation/menu-account/menu-account.css b/core/themes/umami/css/components/navigation/menu-account/menu-account.css
new file mode 100644
index 0000000000..eadd7dc114
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-account/menu-account.css
@@ -0,0 +1,35 @@
+/**
+ * @file
+ * This file is used to style the account menu.
+ */
+
+.menu--account {
+ display: none;
+}
+
+@media screen and (min-width: 48em) {
+ .menu--account {
+ flex: 0 1 50%;
+ order: 2;
+ display: block;
+ border-bottom: 1px solid #E6EEE0;
+ text-align: right;
+ }
+}
+
+.menu-account {
+ display: inline-flex;
+ margin: 1.6em 0;
+ padding: 0;
+ line-height: 1.5;
+ list-style-type: none;
+}
+.menu-account__item + .menu-account__item {
+ margin-left: 1em;
+}
+.menu-account__link,
+.menu-account__link:hover {
+ color: inherit;
+ text-decoration: none;
+ background-color: inherit;
+}
diff --git a/core/themes/umami/css/components/navigation/menu-footer/menu-footer.css b/core/themes/umami/css/components/navigation/menu-footer/menu-footer.css
new file mode 100644
index 0000000000..9749c93a6f
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-footer/menu-footer.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * This file is used to style the main menu.
+ */
+
+.menu-footer {
+ padding: 0;
+}
+
+.menu-footer__title {
+ font-size: 1.5rem;
+ font-weight: normal;
+}
+
+.menu-footer__item {
+ list-style: none;
+}
+
+.menu-footer .menu-footer__link {
+ background-color: transparent;
+ text-decoration: none;
+ font-weight: bold;
+ color: #ffffff;
+}
+
+.menu-footer .menu-footer__link:active,
+.menu-footer .menu-footer__link:focus,
+.menu-footer .menu-footer__link:hover {
+ background-color: transparent;
+ text-decoration: underline;
+}
+
+@media screen and (min-width: 60rem) {
+ .menu-footer__title {
+ padding-top: 2rem;
+ }
+
+ .menu-footer-wrapper {
+ flex-basis: 25%;
+ }
+}
diff --git a/core/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/themes/umami/css/components/navigation/menu-main/menu-main.css
new file mode 100644
index 0000000000..e88b095ae6
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -0,0 +1,124 @@
+/**
+ * @file
+ * This file is used to style the main menu.
+ */
+
+.menu-main {
+ color: #000;
+ margin: 0;
+ list-style-type: none;
+ font-family: 'Scope One', Georgia, serif;
+ font-size: 1.266rem;
+ font-weight: 400;
+ line-height: 1.2;
+ max-height: 0;
+ overflow: hidden;
+ padding: 0;
+ transition: max-height 0.5s ease-in;
+}
+.menu-main--active {
+ /**
+ * An exact max-height value must be set to make possible to animate the menu display.
+ * It my not be much larger than the content because that would break the animation.
+ * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
+ */
+ max-height: 18.75rem;
+ overflow-y: auto;
+}
+.menu-main-toggle {
+ width: 41px;
+ height: 41px;
+ line-height: 1;
+ /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
+ padding: 0 6px;
+ margin-left: -9px;
+ border: 3px solid transparent;
+ border-radius: 0;
+ text-align: left;
+ background-color: transparent;
+}
+.menu-main-toggle:hover {
+ background-color: transparent;
+}
+.menu-main-toggle svg {
+ display: block;
+}
+.menu-main__item {
+ margin-top: 0.8em;
+ text-align: center;
+}
+.menu-main__link {
+ background-color: inherit;
+ display: inline-block;
+ padding-bottom: 0.15em;
+ text-decoration: none;
+ border-bottom: solid 0.15em transparent;
+ color: inherit;
+ transition: all 0.2s;
+}
+.menu-main__link:hover,
+.menu-main__link.is-active:hover,
+.menu-main__link:focus {
+ background-color: inherit;
+ text-decoration: none;
+ border-bottom-color: rgba(255, 97, 56, 0.3);
+ color: #ff6138;
+}
+.menu-main__link:active,
+.menu-main__link.is-active {
+ text-decoration: none;
+ border-bottom-color: #ff6138;
+}
+
+@media screen and (min-width: 48em) {
+ .menu-main {
+ display: flex;
+ justify-content: flex-end;
+ flex-wrap: wrap;
+ max-height: initial;
+ overflow: auto;
+ }
+ .menu-main-toggle {
+ display: none;
+ }
+ .menu-main__item {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .menu-main__item + .menu-main__item {
+ margin-left: 2.5em;
+ }
+}
+
+.menu-main-togglewrap {
+ flex: 0 1 30%;
+ order: 1;
+ padding-left: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+ .menu-main-togglewrap {
+ display: none;
+ }
+}
+
+.menu-main__wrapper {
+ order: 4;
+ flex: 0 1 100%;
+ text-align: center;
+}
+
+@media screen and (min-width: 48em) {
+ .menu-main__wrapper {
+ order: 4;
+ flex: 0 1 calc(100% - 220px);
+ text-align: right;
+ }
+}
+
+@media screen and (min-width: 48em) {
+ .menu-main {
+ display: flex;
+ justify-content: flex-end;
+ }
+}
diff --git a/core/themes/umami/css/components/navigation/more-link/more-link.css b/core/themes/umami/css/components/navigation/more-link/more-link.css
new file mode 100644
index 0000000000..331b225ef9
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/more-link/more-link.css
@@ -0,0 +1,32 @@
+/**
+ * @file
+ * This file is used to style the more link.
+ */
+
+.read-more__link {
+ background-color: inherit;
+ position: relative;
+ display: inline-block;
+ padding-right: 20px;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.read-more__link:focus,
+.read-more__link:hover {
+ text-decoration: underline;
+}
+
+.read-more__link:before {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ width: 14px;
+ height: 14px;
+ margin-top: -7px;
+ content: '';
+ background-image: url('../../../../images/svg/pointer.svg');
+ background-repeat: no-repeat;
+ background-position: 0 0;
+ background-size: contain;
+}
diff --git a/core/themes/umami/css/components/navigation/skip-link/skip-link.css b/core/themes/umami/css/components/navigation/skip-link/skip-link.css
new file mode 100644
index 0000000000..f23e16028b
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/skip-link/skip-link.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Styles for the skip link.
+ */
+
+.skip-link {
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+ z-index: 50;
+ background: #444;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 1px 10px 2px;
+ border-radius: 0 0 10px 10px;
+ border: 1px solid #444;
+ border-top-width: 0;
+ outline: 0;
+}
+.skip-link.visually-hidden.focusable:focus {
+ position: absolute !important;
+}
diff --git a/core/themes/umami/css/components/navigation/tabs/tabs.css b/core/themes/umami/css/components/navigation/tabs/tabs.css
new file mode 100644
index 0000000000..79cc1194cd
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/tabs/tabs.css
@@ -0,0 +1,35 @@
+/**
+ * @file
+ * Visual styles for tabs.
+ */
+
+.layout-tabs {
+ background-color: #79bd8f;
+}
+.tabs.primary {
+ display: flex;
+ list-style: none;
+ margin: 0 0 0.5em;
+ padding: 0;
+}
+.tabs .tab {
+ margin: 0;
+ background-color: #e6eee0;
+}
+.tabs .tab.is-active {
+ background-color: #fff;
+}
+.tabs a {
+ display: block;
+ padding: 0.75rem 1rem;
+ background-color: inherit;
+ color: inherit;
+ text-decoration: none;
+}
+.tabs a.is-active {
+ background-color: inherit;
+}
+.tabs a:focus,
+.tabs a:hover {
+ background-color: #fff;
+}
diff --git a/core/themes/umami/css/components/regions/bottom/bottom.css b/core/themes/umami/css/components/regions/bottom/bottom.css
new file mode 100644
index 0000000000..19ca321db7
--- /dev/null
+++ b/core/themes/umami/css/components/regions/bottom/bottom.css
@@ -0,0 +1,42 @@
+/**
+ * @file
+ * This file is used to style the bottom region.
+ */
+
+.layout-bottom {
+ background: #fff;
+ padding: 2rem 1rem;
+ overflow: hidden;
+}
+
+.umami-disclaimer,
+.umami-copyright {
+ display: block;
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 0.94rem;
+}
+
+@media screen and (min-width: 75rem) {
+ .layout-bottom {
+ padding: 3rem 0;
+ }
+
+ .umami-disclaimer,
+ .umami-copyright {
+ margin-bottom: 0;
+ }
+
+ .umami-disclaimer {
+ float: left;
+ max-width: 40%;
+ text-align: left;
+ margin-left: 0.5rem;
+ }
+
+ .umami-copyright {
+ float: right;
+ width: 25%;
+ text-align: left;
+ }
+}
diff --git a/core/themes/umami/css/components/regions/footer/footer.css b/core/themes/umami/css/components/regions/footer/footer.css
new file mode 100644
index 0000000000..421f09e9d9
--- /dev/null
+++ b/core/themes/umami/css/components/regions/footer/footer.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * This file is used to style the footer.
+ *
+ * It styles the footer as a global component; it does not style individual
+ * footer items, such as a menu, which are styled by their own CSS files.
+ */
+
+.footer {
+ padding: 2rem 1rem;
+ background-color: #5f635d;
+ color: #fff;
+ text-align: center;
+ font-size: 0.9rem;
+}
+
+@media screen and (min-width: 60rem) {
+ .footer {
+ padding: 1rem 1rem 0;
+ text-align: left;
+ }
+
+ .region-footer {
+ display: flex;
+ justify-content: space-between;
+ }
+}
diff --git a/core/themes/umami/css/components/regions/header/header.css b/core/themes/umami/css/components/regions/header/header.css
new file mode 100644
index 0000000000..35f75c45c3
--- /dev/null
+++ b/core/themes/umami/css/components/regions/header/header.css
@@ -0,0 +1,32 @@
+/**
+ * @file
+ * This file is used to style the header.
+ *
+ * It styles the header as a global component; it does not style individual
+ * header items, such as a menu, which are styled by their own CSS files.
+ */
+
+.layout-header {
+ background: #fff;
+ padding: 0;
+}
+
+.region-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ padding: 0.75rem 0;
+}
+
+@media screen and (min-width: 48em) {
+ .region-header {
+ padding: 0 1rem;
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .region-header {
+ padding: 0;
+ }
+}
diff --git a/core/themes/umami/css/components/views/frontpage.css b/core/themes/umami/css/components/views/frontpage.css
new file mode 100644
index 0000000000..e89338e1de
--- /dev/null
+++ b/core/themes/umami/css/components/views/frontpage.css
@@ -0,0 +1,23 @@
+/**
+ * @file
+ * This file is used to style the 'Frontpage' view.
+ */
+
+.view-frontpage .view-header {
+ padding: 0 1.266rem;
+ margin-bottom: 2rem;
+}
+
+@media screen and (min-width: 30em) {
+ .view-frontpage .view-header {
+ margin-bottom: 3rem;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .view-frontpage .view-header {
+ margin-bottom: 4rem;
+ padding-left: 2.37rem;
+ padding-right: 2.37rem;
+ }
+}
diff --git a/core/themes/umami/css/components/views/promoted-items.css b/core/themes/umami/css/components/views/promoted-items.css
new file mode 100644
index 0000000000..b81adae592
--- /dev/null
+++ b/core/themes/umami/css/components/views/promoted-items.css
@@ -0,0 +1,116 @@
+/**
+ * @file
+ * This file is used to style the 'Promoted Items' view.
+ */
+
+.block-views-blockpromoted-items-block-1 {
+ margin-top: 1rem;
+}
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .block-views-blockpromoted-items-block-1 {
+ margin-top: 2rem;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .block-views-blockpromoted-items-block-1 {
+ margin-top: 3rem;
+ }
+}
+
+.view-promoted-items--single {
+ padding: 1rem 14px 2rem;
+}
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .view-promoted-items--single {
+ padding-top: 2rem;
+ padding-bottom: 3rem;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single {
+ display: flex;
+ }
+}
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .view-promoted-items--single {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single > .view-content {
+ flex: 0 0 50%;
+ margin-right: 14px;
+ display: flex;
+ }
+}
+
+.view-promoted-items--single > .view-content .views-row {
+ margin-bottom: 14px;
+}
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .view-promoted-items--single > .view-content .views-row {
+ margin-bottom: 28px;
+ display: flex;
+ }
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single > .view-content .views-row {
+ margin-bottom: 0;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single > .attachment-after {
+ margin-left: 14px;
+ display: flex;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .attachment-after .views-element-container {
+ display: flex;
+ }
+}
+
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .view-promoted-items--single .attachment-after .view-promoted-items--double {
+ display: flex;
+ }
+}
+
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .view-promoted-items--double {
+ overflow-x: hidden;
+ }
+}
+
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .view-promoted-items--double .view-content {
+ display: flex;
+ margin: 0 -14px;
+ }
+}
+
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+ .view-promoted-items--double .views-row {
+ display: flex;
+ margin: 0 14px;
+ width: calc(50% - 28px);
+ }
+}
diff --git a/core/themes/umami/css/layout/grid-2.css b/core/themes/umami/css/layout/grid-2.css
new file mode 100644
index 0000000000..0efe459198
--- /dev/null
+++ b/core/themes/umami/css/layout/grid-2.css
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * This file is used to create a 3 column grid layout.
+ */
+
+.grid--2 .views-row {
+ margin-bottom: 28px;
+ padding: 0 14px;
+}
+
+@media screen and (min-width: 30em) {
+ .grid--2 {
+ overflow-x: hidden;
+ }
+ .grid--2 .view-content {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ }
+ .grid--2 .views-row {
+ display: flex;
+ flex: 0 0 calc(50% - 28px);
+ margin: 0 14px 28px;
+ padding: 0;
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .grid--2 .view-content {
+ margin-left: -14px;
+ margin-right: -14px;
+ }
+}
diff --git a/core/themes/umami/css/layout/grid-3.css b/core/themes/umami/css/layout/grid-3.css
new file mode 100644
index 0000000000..6c881a799b
--- /dev/null
+++ b/core/themes/umami/css/layout/grid-3.css
@@ -0,0 +1,40 @@
+/**
+ * @file
+ * This file is used to create a 3 column grid layout.
+ */
+
+.grid--3 .views-row {
+ margin-bottom: 28px;
+ padding: 0 14px;
+}
+
+@media screen and (min-width: 30em) {
+ .grid--3 {
+ overflow-x: hidden;
+ }
+ .grid--3 .view-content {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ }
+ .grid--3 .views-row {
+ display: flex;
+ flex: 0 0 calc(50% - 28px);
+ margin: 0 14px 28px;
+ padding: 0;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .grid--3 .views-row {
+ flex: 0 0 calc(33% - 28px);
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .grid--3 .view-content {
+ margin-left: -14px;
+ margin-right: -14px;
+ }
+}
diff --git a/core/themes/umami/css/layout/grid-4.css b/core/themes/umami/css/layout/grid-4.css
new file mode 100644
index 0000000000..dd0d1e884c
--- /dev/null
+++ b/core/themes/umami/css/layout/grid-4.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * This file is used to create a 4 column grid layout.
+ */
+
+.grid--4 .views-row {
+ margin-bottom: 28px;
+ padding: 0 14px;
+}
+
+@media screen and (min-width: 30em) {
+ .grid--4 {
+ overflow-x: hidden;
+ }
+ .grid--4 .view-content {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ }
+
+ .grid--4 .views-row {
+ display: flex;
+ flex: 0 0 calc(50% - 28px);
+ margin: 0 14px 28px;
+ padding: 0;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .grid--4 .views-row {
+ flex: 0 0 calc(25% - 28px);
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .grid--4 .view-content {
+ margin-left: -14px;
+ margin-right: -14px;
+ }
+}
diff --git a/core/themes/umami/css/layout/layout-2-col.css b/core/themes/umami/css/layout/layout-2-col.css
new file mode 100644
index 0000000000..64203d6d9b
--- /dev/null
+++ b/core/themes/umami/css/layout/layout-2-col.css
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * This file is used to create the layout when the theme has 2 columns.
+ */
+.layout-sidebar {
+ margin: 0 1.562rem;
+}
+
+@media screen and (min-width: 60em) {
+ .two-columns .main {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .layout-sidebar {
+ min-width: 300px;
+ width: 25%;
+ }
+}
diff --git a/core/themes/umami/css/layout/layout.css b/core/themes/umami/css/layout/layout.css
new file mode 100644
index 0000000000..090e6c87a6
--- /dev/null
+++ b/core/themes/umami/css/layout/layout.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * This file is used to create generic layout styles.
+ *
+ * More specific layout items may be found within their respective files, e.g.
+ * the layout for two columns is in the layout-2-cols.css file.
+ */
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+}
diff --git a/core/themes/umami/js/components/navigation/menu-main/menu-main.es6.js b/core/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
new file mode 100644
index 0000000000..38d50d8cda
--- /dev/null
+++ b/core/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
@@ -0,0 +1,17 @@
+/**
+ * @file
+ * This file is used to add any javascrip that is needed for the main menu.
+ */
+
+ (function () {
+ const toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
+ const menu = document.querySelector('[data-drupal-selector="menu-main"]');
+
+ function toggleMenu() {
+ toggler.classList.toggle('menu-main-toggle--active');
+ menu.classList.toggle('menu-main--active');
+ return false;
+ }
+
+ toggler.addEventListener('click', toggleMenu);
+ }());
diff --git a/core/themes/umami/js/components/navigation/menu-main/menu-main.js b/core/themes/umami/js/components/navigation/menu-main/menu-main.js
new file mode 100644
index 0000000000..b4e976fb96
--- /dev/null
+++ b/core/themes/umami/js/components/navigation/menu-main/menu-main.js
@@ -0,0 +1,19 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function () {
+ var toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
+ var menu = document.querySelector('[data-drupal-selector="menu-main"]');
+
+ function toggleMenu() {
+ toggler.classList.toggle('menu-main-toggle--active');
+ menu.classList.toggle('menu-main--active');
+ return false;
+ }
+
+ toggler.addEventListener('click', toggleMenu);
+})();
diff --git a/core/themes/umami/logo.svg b/core/themes/umami/logo.svg
new file mode 100644
index 0000000000..54d5b382ff
--- /dev/null
+++ b/core/themes/umami/logo.svg
@@ -0,0 +1,17 @@
+
+
\ No newline at end of file
diff --git a/core/themes/umami/screenshot.png b/core/themes/umami/screenshot.png
new file mode 100644
index 0000000000..aeb699e09e
--- /dev/null
+++ b/core/themes/umami/screenshot.png
@@ -0,0 +1,1608 @@
+PNG
+
+
IHDR X Dt gAMA a @ IDATx]`TUC*Bb[\{ڰ"VT,XAT:$>uD.O33yͽ{ι|W8~rJo^.wwoptXKbroZ8fb&z+:5+~7q"~=tg5>A`s=7T?`s-5뮻hmm=B0S^}wQOCߋ +7<ĕeyw_w_׳B7XD8Ѫsax?ws_Ӿn#nAlt$vlߊ9Y(kB"99CpfȘlmh5@xT$:y"SV@R>c0ZfEBzv}EβrFz?,+P տ#En }SsRGcc=Pyi:BS[has@Bꐞӟ尣۷~'kr&$ŇP#7mG=:6l
+rF~`FA 9lGGsp:p;tSV?cL~0G`2w۵_$?0o;jR3<&
j^zK*/HFi`tdxV5wqxs&$G`rVnBdȟ
+M
+U:gxh8nNy>?vD$fV3'q/"<k[F'\v/Y0p.v390>YiEw۸
HI=RNp*%4?9R&$|l=<~P}zxoP)Dw,sU-gty3s'4vėS\GSNΘuh~L=O? 4C: 6
ct`V[H[cqOV@klA]! I0h@FPACC͊i
+R))TJai[`&u >9TY09~tCtA*PtsR3? Rz}a{Di`w᥉X;5iN66g_ nW
e#VZCO
+ 6Rc
+Uxicz`V:e4|Py}#PVD![P;L^OQ0fhN"u&