diff --git a/core/themes/umami/css/base.css b/core/themes/umami/css/base.css
new file mode 100644
index 0000000000..20179044cc
--- /dev/null
+++ b/core/themes/umami/css/base.css
@@ -0,0 +1,227 @@
+/**
+ * @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;
+}
+a:hover,
+a:focus {
+ background-color: #e6eee0;
+ color: #cc2a00;
+}
+
+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%;
+ font-size: 1rem;
+ padding: 0.8rem 0.4rem;
+}
+
+label {
+ color: #464646;
+ display: block;
+ font-size: 1rem;
+ font-weight: bold;
+ margin: 0.25rem 0;
+}
+
+ol {
+ margin-bottom: 1.28rem;
+}
+ol ol,
+ol ul {
+ margin-bottom: 0;
+ margin-top: 0;
+}
+ul {
+ margin-bottom: 1.28rem;
+}
+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..8964047cea
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/banner/banner.css
@@ -0,0 +1,76 @@
+/**
+ * @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 {
+ /* todo: Discuss this approach of inline image plus background image */
+ 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;
+ 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;
+}
+
+/* 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..e388e11fec
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/footer-promo/footer-promo.css
@@ -0,0 +1,47 @@
+/**
+ * @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: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.css b/core/themes/umami/css/components/blocks/search/search.css
new file mode 100644
index 0000000000..cca971ee98
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/search/search.css
@@ -0,0 +1,87 @@
+/**
+ * @file
+ * This file is used to style the search block.
+ */
+
+.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;
+ align-items: center;
+}
+
+.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-search {
+ width: 20.5em;
+ height: auto;
+ padding: 0.5em 0.25em 0.5em 2.25em;
+ border: 1px solid #dbdbdb;
+ border-right: none;
+ border-radius: 3px 0 0 3px;
+ font-size: 0.875rem; /* 14px */
+ line-height: normal;
+ background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
+ background-size: 1.5em;
+ color: #464646;
+}
+.form-search::placeholder {
+ opacity: 1;
+}
+.form-type-search .form-search {
+ box-sizing: border-box; /* Override input[type="search"] of normalize.css */
+}
+
+/* Search submit */
+.form-actions {
+ display: inline-flex;
+}
+.form-submit {
+ padding: 0.6em 1.25em 0.4em;
+ border: 1px solid #dbdbdb;
+ border-radius: 0 3px 3px 0;
+ font-size: 0.875rem;
+ background-color: #fff;
+ color: #000;
+}
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..4424c34ae6
--- /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--middle {
+ margin-bottom: 2.369em;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--middle {
+ 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--middle .field--name-field-image img {
+ margin-bottom: 0;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--middle-first,
+.node--type-recipe.node--view-mode-full .layout__region--middle-second {
+ flex: 0 0 calc(50% - 1rem);
+}
+
+/* Recipe meta */
+.node--type-recipe.node--view-mode-full .layout__region--middle-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--middle-second {
+ align-self: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--middle-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--middle-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--middle-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--middle-second > .field--name-field-summary {
+ flex-basis: 90%;
+ text-align: center;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--middle-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--middle-second svg {
+ flex: 0 0 auto;
+ height: 47px;
+ margin-bottom: 0.889em;
+ }
+}
+
+.node--type-recipe.node--view-mode-full .layout__region--middle-second .field {
+ flex: 1 0 auto;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--type-recipe.node--view-mode-full .layout__region--middle-second .field {
+ flex: 0 0 100%;
+ }
+}
+.node--type-recipe.node--view-mode-full .layout__region--middle-second .field .field__label,
+.node--type-recipe.node--view-mode-full .layout__region--middle-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--middle-second .field .field__label,
+ .node--type-recipe.node--view-mode-full .layout__region--middle-second .field .field__item {
+ display: block;
+ }
+}
+.node--type-recipe.node--view-mode-full .layout__region--middle .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..06fc96e11f
--- /dev/null
+++ b/core/themes/umami/css/components/content/full/node-full.css
@@ -0,0 +1,66 @@
+/**
+ * @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 .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-right: 1rem;
+ }
+}
+
+/* TODO: How do we want to handle margin-bottom on images for content area? */
+/* TODO: This is too generic - we need to set it to the specific field (body?) */
+.node--view-mode-full img {
+ margin-bottom: 1.184rem;
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+ .node--view-mode-full img {
+ 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-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/contact.css b/core/themes/umami/css/components/forms/contact.css
new file mode 100644
index 0000000000..ba666560fd
--- /dev/null
+++ b/core/themes/umami/css/components/forms/contact.css
@@ -0,0 +1,16 @@
+/**
+ * @file
+ * This file is used to style the contact form.
+ */
+
+.contact-form {
+ margin: auto;
+ max-width: 600px;
+}
+.contact-form .form-item-copy {
+ margin-bottom: 0;
+}
+.contact-form .form-item-copy .form-checkbox {
+ margin: 0 5px 0 0;
+ min-width: auto;
+}
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..4952146da5
--- /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 .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..01102e76cb
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-footer/menu-footer.css
@@ -0,0 +1,35 @@
+/**
+ * @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__link:link,
+.menu-footer__link:hover {
+ background-color: inherit;
+ color: #fff;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+@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..48a6d87988
--- /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.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..bd5e0dad01
--- /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 a {
+ background-color: inherit;
+ position: relative;
+ display: inline-block;
+ padding-right: 20px;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.read-more a:focus,
+.read-more a:hover {
+ text-decoration: underline;
+}
+
+.read-more a::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/tabs/tabs.css b/core/themes/umami/css/components/navigation/tabs/tabs.css
new file mode 100644
index 0000000000..7bda48f1c0
--- /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;
+}
+ul.tabs {
+ display: flex;
+ list-style: none;
+ margin: 0 0 0.5em;
+ padding: 0;
+}
+.tabs li {
+ margin: 0;
+ background-color: #e6eee0;
+}
+.tabs li.is-active {
+ background-color: #fff;
+}
+.tabs a {
+ display: block;
+ padding: 0.2em 1em;
+ 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..6d2c2a4bbe
--- /dev/null
+++ b/core/themes/umami/css/components/views/promoted-items.css
@@ -0,0 +1,100 @@
+/**
+ * @file
+ * This file is used to style the 'Promoted Items' view.
+ */
+
+.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..c21ed4a4ad
--- /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..daf9b2bf70
--- /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);
+})();
\ No newline at end of file
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ì]`TUÖþ¦—ôÞC*Bï±¢b[\{ïëÚ°¯âÚû"VT,XAT:¡—$¤÷>½ÏÿÁuÿDÁí.O33¼yïͽçž{ι§|W‚8~Ôr•J¥êòo^ÑÚ.Ïwwýoþ¼p–tòXŽ¥K—búôéÇrËoâZ•Ëã8fbý&zþ+:¡ú5œõ+~ç7q‹"³~=ùtâg‰Øò5ë>Aà`¼sá=7þ·…÷ìT¾?‚`s-‚5‡þÍüùŸ¸ë®»º¼àÀðûýhmm=ò½ËåB0øS€³^¯‹ò}wÇQOCß‹· +´7¾¨<Ë÷Ä•€Ñíe꟥yw¿ý_wþ¨‰õ_׳Bƒÿ7XâD8ÏѪžÿ çý¦sœ³Žaxµ?wÖýs_ÿÓ¾n°#›·nAlt$vlߊ9Y(k±ÁëñB«Ñ"99CpfȘ©å¨ÕlmÐh5¨«¬@xT$´:½¬çôy¤"òSëÕV@R>¼Çc0à…Z«‡Ïã‚ËfEBzv—}ûEβïÝräF¿Ýzäó?ûƒ,ÀÊÊ+P“ Õ¿ŸêÝé²#ÎàEn¼ }SÈsÁRGÓÅcc¿=PyÐi:»”œB‚S[šáìh†Ûaás@BêžÓŸôÂå°£©®Û·~ˆ'îºk<Ž¶n»ö³œ%w…ä>r³&$ìÈçŇèP#í7ÖmÚG=:6™l»µ
+r–F~ïƒ×í€Æ`‚F•Aƒ 9“lËGG’s“‡‚p:p;ùœÈt´SVó?‹ÍcL~íÍ0„GÂ`2wÛµ_$–ƒ?0oÞø;jR3<&
j·^zŠK*ªÃ/¼HFˆiÖÃÞ‚¥`tÆdœÙõóxVå±5w»™µ³±q‰xsÇ&$‡G`rVïnöúBd–ÈŸââ
+M‘
+ÁU¶:¤§g’xáh¬8€„ìÂnN‘y>?¬Öv„D$ÐfVã¢3ÎÀ™'äáëÍÛqÛ/"<Ìk[F'\v/¶Y‹0p.§«¶v×3è9«0>YiÔEý‡wÛ¸Öå
HI„µµýúÀÑÞ=‘âÀÑRN«p*%4?9ôüÿÈR&Þ·ÛƒÁŒÜÔ$|¸l=<~Ÿ²àP}zíxñ«—ÑoÈP)DýwÛ×,Åé×sUÒÅÑ-gÉtyóöÉ3s¢²'°4»vÄ—úØS\Œ›GÄÄSN†Î˜ˆuóç¢hÝ~LŸÕ=§O…?¬ “¿¸ûÁ4ûCØÜè:¥ 6‡›
Öct¸ê‚ó`V[¥²ÃH¡[cqáµOV@Ök¶lA]“!§¤ ñI0™ô¨hí@F„™ÏPAC®‘ç˜CÍŠð–Éi¤Ü
+R)¸)çÜTJa±i°[Û`·‰&u >9ÖÆTíY‹Š0¦ô9~Ïãt¢¾²ùCÆtA*PtsÈR3?· ß¼ðRz}‡a¿»{×îDÆi÷`ýów᥉éXýÁ;5iN›6˜6g_Ó ÓnƒW
e#VÍZˆý›ŸCO
+¦ Õ6ŠÑRc‰¦
+Uxòî”icáÒz`¥°V:e‘4«±|í«PyàŠ}#PVãDþ !ÈÊ[ªP±þ;±…L^OÚQãù0fh¾ÜNÎ"u&ø© Œ¦0
+ïp^ã‡ËÚŒæºR˜|Líw! H³"àCs}5¿(÷võÒ½é@vvS¸W48˜•ƒN¹£®¸æíXuÛe(˜r®~÷[Ì?û,Ü;ç$”ì+Bô€©xrÆX4=;jküªPôv;4ôj/t¢È±B,–?MNÒðs¼I¶Iì ~¯|{ðñ·°©}"~k e
ðëÌh)/Æg}ˆüÞ}‰ôŒ,¤ò/%-aQ ÊíANW?5)YnšÁ€ÖæJxìmh©-E»·õ©)ðûäš Kv ,<ŒéŠNʹî‰%ÓúÑ«W,æ?ó1zš7-ápEQÕæ QpÝô±¨Í‹ÞÞ…‹eî%Wiaœq3*?yžO@¥‹„ªa9´íÛ ôѲaZrš"_ØÇFM:jìTZ}h´y:Ëëæœ~&µø|É{X¹f
fŸsŠ>xË=³zkñùÒå(/©Áæ5+Q¹e=Þ|û}4¶Z”ûUœæL¥ÒÀHŠˆáï©8åÜxåóUH£”ßkh¸ÆeöÁ¹Ï%{vþ|W¯ÝÊ,>»ß¿Q=òiËØžØÖÒ
ˆ)< Ag#VØöãþGâ›^C^²6¾™Ù0%Ñïå´BÕê’×áoo‚…™M‹Ä駆-qzýÊ´1QHŸ8nœn/Âô”Aä´¯WQ´aa¿a7¨«¥eÎy›E+ÛíGµ3ˆ:‹¿?e¶—Y‘“ƒÜ!'Àí¥-Å©wéYèM²ðùäb
+wpj9-m”a^øÈmE¥Ë°ôÛíضa/–½ºzS”"#¿\ö!`)¾þAW´ê^fцÅ-C‡{)(/ñÕûO"‚ê:誇«~#ö.Üw›
+ó?¼/͇¯š¬ÓáëØØjáñš æÒAվȡP»›8hUv€?˜Iò3 ÝBáïç”QûåLç1œš0&Ü[s
b#Íxs—M“Uð¸UXðÉ·š™‚Ö’´Ñ€;TŒ´ô ‰e0šH$…v»"ø¡QÐ’PMÕ1 o¢u 9º?žþð1Ü8}.Táé8éäÙp9¹èæè–éDtœwgôÀí ,¾7B’Á[ˆ°ž3ñû›/ǃãÐñ]Îûc\¹‰ò ~-^'=7Ü»ÿØçw"hٚNJŒ™¥&ëSPó*w9œhï°ÃOëÚnÿÑS?x&’g\‹ªžxm{‡2„”k€:WiTOëK«ðéÞj¬ÜQ)·=‡–„Nû+HA/#áö¸ñMÙG´Ü9püÁ„Œ|„G§£GFÔÐκþÜ{ ‰¦±++ NÝ駜ß
©~v†ËŸ¬Ä³†#H6ÖªÚñý}g"XõûßBpócè{Ù˜ót¶P¶3îxë6.†?$Ÿ~¼Ueu¨Yû¶=~+JŸ¿„„SwŠìl¸NÅg‡˜
7ia2šu¤±ï.^ˆ§î¿5•û•Å±Ze;HþéÈšUÔ°:®,´\%8œ-¨«*GA¿AÊý6»Û¶nàšÑg&~wóÅÊâ\Ö™7Ÿ-¹`àEð´ÕÁç耽±œúƳ‰ÙÍÑé ׇqÕžÐ{8ž¹¯^91‘tÔCæcÞg1wë½pþDÜüäkøø‚Ó0å”›ñòöEp}~οati3¸Ò7À4ÃÕÚÀË`‹w€ÜE$Ñ(¥ "øùo¾òºªnš*§ƒ|–¼É‹‡ßúº,~éqÚH#0},¹‡š-’V:ŒˆŠŠÇ¥×Ÿƒ›× Ïà ŠRÙY³{b´UˆOÁÎKaR>s$º9~–Xµ55XõÊŸqÛÛK1¦å;¨Ìé0D'Q®ã4»±YI()
â¾K¦`Å¢ÇùƒzTÛôÐeâ²Ë>Á7X0`8t±ù@8–ÔPÒZÜ?I±¸äEˆç‰ø—C…òòråÓ±¾ÈrG4\ï!ã•[i“"Ã~ò˜¨ÄL$÷ø“sòYkÊý]ÝÊ,Yô¾u÷%¸eñZ´¬¢IðÝ÷(¿÷J¼~ÛïáÕ$£ŠžUÖHô4¯~»!=ÆÅ«®6!}ú¸äÜ¡hâbZ•2Í»–Áëóþä÷ÕjrýPd.$“óƒ´(u$T$µß_ßmø«¿YõקŽéó®Ý;±uÛn¦cºùo.þiËþæK¤fÓÚú»ÍXõÉ2N'")¾ºï\Ì}c=6lß‚Ï݇ö¢wÑðÖï
+Ë¥ßI{ýNºô%¤
ÏE
¿¦°8r“ÂWÊä¨"Á^xüÔv¸aqùàà³hb~Ò
+K»#‡úÉ9 oÉrèhŽð°8EEEG.÷Ðb—Ð×Áƒœ“g>úè£GþÝÕ‡Ÿµ³Ê¾x/ü#‚N¤÷.›{Öoúp5À½ë/8ýÅ×^‹+_YJ÷EÔMßÃAÍ;&½›*
Rwtñ#i?Ñ4`„c™]¡N´â¨á}A¯"@3…F*¿ÛW´A¹î°§vݺu3fLWíïòœL#ªhÌQÿïûÃn¢ÿ÷Å_ènv+³DÌM¿õM¤
ÊÄGûêqmÙ¹xæÚÑ8ðæÅð5µâP³òûáà7Í0ip—~ˆ¢5E|æYØññCôWµbð¤©Hs]»:Š)iþYÚ¦¢…§‘£ˆ;Òô°xÊ1â3›5k>üðCœ~úér›r¼ðˆŽŽÆt½¼ùæ›8餓йÔ9|¼×××cíÚµô>pðÈMsçR˜óNÒˆ÷ðŽn9KÔúÎïbýÊUxµÈO»K&všu¤
+“ÆåsÁÚ}Òà«ã‚7§¶oñ pT4‘=é
£žšN–
+'±U¤U@8‹„t/=|?6¯x‡²Š6¿3ÒÙ×JmôñªoÂYÇÐåҟ㬣yVwœÕ½ÌbããÕñôú|ú̽èQ˜ÁÅó8ô‡Âs&bC»£Nœ‡ˆÔ~ˆv5^¹ý9ÜòÐ3p¸â8b!´WôŠ‡A´<éNÒÈìüÀÕ%–[¾zÅÖ H Z{.š Ü2Y<µ5ãÃ}ÛqÏêOQÞÞòãGùéòÏ¡ˆÞ„M5Êk+JðÔ†ÕGy÷O/ë–³ä²+ÞŸƒÌ÷Ê1nÜ`$÷ïÞúße‚1NhM4ªÜ»ao«Ä“3/A®>÷>þ2’¬Õ¸láh1ä*qÅ™ÈQœ]
+±ä3‰R¶ús<2ï&Ô9iÜ«0ëT§F½#€>ßü_ÆYd‡ñZÉáѸï¥ó^ÁÛšpðË-ØòÄðлÐ^Ro½¶lEÖ´[Ñ;Ê„™·Ü
oÐôB ±JV*¿
+—Þ~,AF@Ш¥zh‘ÿ§ÝOC¶ø¾Å¸ì†3s¡»cͨšœ„ü“/„ºg4Öþ>Æ5øpjE–}ù=âC1tx6BSÆ)>lá(ùOŽ ‰sä å|ý‰=1)^X-€Ojü¨p¨qÀ@€ÞÐRçíèÑí0J÷^ù=D¦å ï-^aÅÉØxh!®™z*W¯ƒ#4ùaFÜÈk‡Oø‚QˆHH:¢ódió·æPížíØkQa{—6$¨žæC§^(×z››¹N<6õ/%ëÏÊ,·_«È—LJ}öÈuûPY܈ .>C3z"ÎSDÎ1Á^W‹Ø¡³ŽJz!Âý¯?øW^~†B«óK7)™fÂA‚…êÔðÐgeâ(ͺôåw5ÚîµýÜ¿ýì÷9••š.å_sÈý]?K¬®nø_>÷³2ë™0]õý8±º¢J7çT©I±©¦ãºÎÉpQ4i:„p ¢xÚèo¯ø |Ô`n§±Q!p1Äd2¤åÝæE]46Ê5Ý-nÊ9qëŠßˆ0ÞK»ë?uqá£à£e¼Ïív"*4:lÁ(e1îU™(üÕôKiÑÆE£‘96—“š6j½ž3Ú[ËÛF¦ku^´XlˆÖ‡³ò}bBÃàf†Œ›m 5ÇïZÑÔ!I&:4Ò‰L‚™mppñ®x;ø\“L|ÁHÄq•âˆKIM9êA³wØñŒÓÎ@@DhãnìÝ‘SÒxÔòÇÄ5+ë(=m'-t†È¸jï°QˆJŒÄóºxJ›ÃGO&½´•<^Qk*ºf¤q~&e¸ áµüå}B3Þc·AØ6«
–¶Ø<*v^Ç°-y#š™©%L¾ƒÌMDXè¼0Ýnœg¡F¬³›9UÔIµ3|äa Âê´Ãîv‘`l$}ZZ
“É8òAŸ
vNÝ€ÏņûÐƤŠè&À‘@dF~/„¥i*döMYùi$t,ê™_IUÐK"›9 .øTFŧ”Û%\¦gÐ$„îGˆŽnO ñNqbÆИtr…>|3*BÉ%--™yèí K›DêpxØ׫^y²Ï‡xfÑÈÔUú!¾|Š ‰9