diff --git a/core/themes/umami/.gitignore b/core/themes/umami/.gitignore
new file mode 100644
index 0000000000..921b8c9f0a
--- /dev/null
+++ b/core/themes/umami/.gitignore
@@ -0,0 +1,6 @@
+# Ignore the folder created by PhpStorm
+.idea/*
+
+# Ignore OSX generated files
+.DS_Store
+._*
diff --git a/core/themes/umami/README.md b/core/themes/umami/README.md
new file mode 100644
index 0000000000..f9f6568b02
--- /dev/null
+++ b/core/themes/umami/README.md
@@ -0,0 +1,94 @@
+# Umami
+
+This is a repository to store source code for the Umami theme, a part of the ['Out of the Box'](https://www.drupal.org/node/2847582) initiative for Drupal.
+
+## Designs
+Designs are attached to the summary of #2900720: Designs for the Out of the Box experience intiative and are also available in InVision.
+
+## Resources
+* There is a Google Drive folder with shared files (documents, assets etc.).
+* Here is a PDF Styleguide with colors, typography, etc. The latest version can be found in the issue.
+
+## Installing
+To work on the theme it is also necessary to have the [Installation profile](https://github.com/gareth-fivemile/demo_umami) and the default content we are on which we are basing our theming.
+
+### Installing the Umami Demo and Umami theme:
+To install the Umami Demo locally, you can use the Umami Build installer. This installer uses composer to install everything you need to get up and running (presuming you already have a local development environment for Drupal). You can find the installer here: https://github.com/gareth-fivemile/umami-build. This installer provisions Drupal, the Umami Demo installation profile, the sample content and the Umami theme by cloning the projects from Github. So once you have it installed you can start working on the project locally right away.
+
+#### Here are the steps to install
+* `git clone https://github.com/gareth-fivemile/umami-build.git`
+* `cd umami-build`
+* `composer install`
+* `cd web`
+* Install the Umami Demo (change to your email address): `drush si demo_umami --account-pass=admin --account-name=admin --account-mail="your-email@example.com"`
+* Install the sample content (temporarily a second manual step): `drush en demo_umami_content -y`
+To work on the profile find it in /profiles/contrib/demo_umami
+To work on the theme find it in /themes/contrib/umami
+
+### Updating the Umami Demo and Umami theme:
+Once you have the Umami Build installer running, you will want to keep it up to date. Follow these steps to update:
+If you are working on the installation profile, export any config from Drupal that you need to keep since following this process will delete and install a new version of the database
+If you have uncommitted changes in your local branches for the profile or the theme commit or stash them. You could also be working on local branches other than dev or master, these should not be affected by the update
+* Change directory to the umami-build directory
+* Get the latest changes for umami_build:
+* `git pull`
+* Update the dependencies: `composer install`
+* Reinstall the site (change to your email address): `drush si demo_umami -y --account-pass=admin --account-name=admin --account-mail="your-email@example.com"`
+* Reinstall the sample content (temporarily a manual step):`drush en demo_umami_content -y`
+* Continue as normal
+
+
+## Communication, discussions and help
+* Most communication happens on Slack in the #out-of-the-box channel. Feel free to join and ask for help.
+* There is a weekly meeting on Mondays 15:00h-16:00h UTC. [Notes.](https://docs.google.com/document/d/1mF2C3K7HGg5rFv7E3UpmGcobSjDQLo18TH3BLN4ZWRo/edit#)
+
+## Standard css
+
+### Breakpoints
+
+**Formatting**
+
+The CSS formatting guidlines require that breakpoints are as follows
+
+> Media queries should be written in the same style as ruleset. Any containing rulesets are indented by two spaces.
+
+> * One space between the media feature and the value.
+> * All values to be written in rems unless it is inappropriate.
+> * Add the pixel value in a comment directly after the the opening brace.
+
+```
+@media screen and (min-width: XXrem) { /* YYYpx */
+ .selector {
+ /* Styles */
+ }
+}
+```
+
+**Positioning**
+
+Place the media queries immediately after the selector to which they relate
+
+**Sizes**
+
+The following small, medium, large and extra large sizes can be ordinarily followed.
+
+If an element needs a custom breakpoint use it.
+
+```
+/* Small */
+@media screen and (min-width: 30rem) { /* 480px */
+
+}
+/* Medium */
+@media screen and (min-width: 48rem) { /* 768px */
+
+}
+/* Large */
+@media screen and (min-width: 60rem) { /* 960px */
+
+}
+/* Extra large */
+@media screen and (min-width: 75rem) { /* 1200px */
+
+}
+```
diff --git a/core/themes/umami/composer.json b/core/themes/umami/composer.json
new file mode 100644
index 0000000000..090c9654cf
--- /dev/null
+++ b/core/themes/umami/composer.json
@@ -0,0 +1,5 @@
+{
+ "name": "drupal/umami",
+ "type": "drupal-theme",
+ "description": "The theme used for the out of the box initiative."
+}
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..ecc8e60d2e
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/banner/banner.css
@@ -0,0 +1,77 @@
+/**
+ * @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..2778dfb250
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/branding/branding.css
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * This file is used to style the branding block.
+ */
+
+.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..2417b67fcd
--- /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..01e3b663d9
--- /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: 3rem 0 1rem;
+}
+
+.block-page-title-block {
+ margin: 3rem 0;
+ 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..dce761bbfd
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/quicklinks/quicklinks.css
@@ -0,0 +1,82 @@
+/**
+ * @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..c0b13b6a0d
--- /dev/null
+++ b/core/themes/umami/css/components/blocks/search/search.css
@@ -0,0 +1,60 @@
+/**
+ * @file
+ * This file is used to style the search block.
+ */
+
+.search-block-form form {
+ display: flex;
+ align-items: center;
+}
+
+/* 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..9009cf56d0
--- /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..023e847b1b
--- /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..10c8d687ab
--- /dev/null
+++ b/core/themes/umami/css/components/content/highlighted-top/highlighted-top.css
@@ -0,0 +1,82 @@
+/**
+ * @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/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..1a4e57e731
--- /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;
+ }
+}
\ No newline at end of file
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..81f3ae0bcc
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-account/menu-account.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * This file is used to style the account menu.
+ */
+
+.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..f925c3620f
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-footer/menu-footer.css
@@ -0,0 +1,36 @@
+/**
+ * @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..2121fb7e07
--- /dev/null
+++ b/core/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -0,0 +1,91 @@
+/**
+ * @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;
+ }
+}
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..242c0a61be
--- /dev/null
+++ b/core/themes/umami/css/components/regions/header/header.css
@@ -0,0 +1,114 @@
+/**
+ * @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;
+ }
+}
+
+.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;
+ }
+}
+
+.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;
+ }
+}
+
+
+.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-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;
+ }
+}
+
+.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;
+ }
+}
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..34b05d1dc8
--- /dev/null
+++ b/core/themes/umami/css/components/views/promoted-items.css
@@ -0,0 +1,102 @@
+/**
+ * @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/images/jpg/placeholder--atharva-lele-210748-pshopped.jpg b/core/themes/umami/images/jpg/placeholder--atharva-lele-210748-pshopped.jpg
new file mode 100644
index 0000000000..be8532e6ec
--- /dev/null
+++ b/core/themes/umami/images/jpg/placeholder--atharva-lele-210748-pshopped.jpg
@@ -0,0 +1,2334 @@
+ JFIF H H @Exif MM * i i 8Photoshop 3.0 8BIM 8BIM% ُ B~ i
+ } !1AQa"q2#BR$3br
+%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz
+ w !1AQaq"2B #3Rbr
+$4%&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz C C ? Pm'UDi`8p;mpbm?09BQ&ޞR|!.gߍkO:W^irmBHn")R!bm2yjv3>G,vKWBeg[yS͆lmo7W\
*gJs6@eq;vRk{;u]stkDgoK?OӮ#Y4'mK3nVdgle`0Tی2Wmhqwm{u.hjޯ}|mJ$f^+Ǒ(F N+ͫY8oEo=nzI9h->[=wѲ4/q3s,B/f} I$V*~y[pމI.RvO⑮_u$JFhV8
\&="ڋog{/3u6NkYqby F">X`Q#<ʜ`{ڴ}}y^6;avknWr/w"Ud$3F<n@a+
EW-W=nehytmt{+{̼7wS,0~\[lAN (jE}5m_5t{tN7ϩnE\`& ,jۊ9ے ~&Rm'^[ [t֫eӥl2%tO)Sc Ѹ>S(VJ/m_6V?tBۿ+i'vk]ߦRL/X#;aSn pmiM|l;'wvowvivؿjbD@"\1dži2jG*ʬv$"~Z}ZXujRvOEV G2\juH,.s kG Җ쭧vUc:[}um!^D!<ݤ'8eCjq}{ѧ(7}kfرՃZ\R\6a2IVbUW2{UF[~{]/98}?
^{yB"bfdVrnPB1 q0M5kuܾwDI E&w>s01*Af X7\.WtZ]]WLޗ]ﶮ}bDtk2+#)9u@pM]ZiztыTMoefGJ]U/68m$`(ې8^2_zV8s_Vӷ5M(ןYΞdRyWU>lBUFB眜w{tm~"-z65hZU9bX6]uo F9$V}>+ݖk EMГ]{ˬZI|Svߴ8(ru5zTbKM^k'-k(c
+#Vjhqc6GQᓍzkw3HunoBY]fYJlF