diff --git a/src/_data/site.json b/src/_data/site.json index 004b770..407a086 100644 --- a/src/_data/site.json +++ b/src/_data/site.json @@ -4,7 +4,8 @@ "author": "John Doe", "primaryColor": "#ffdb70", "secondaryColor": "#32816e", - "searchLabel": "Find recipes by name or ingredients", + "searchLabel": "Find recipes by name, tag or ingredients", + "searchContainsLabel": "Contains", "servingsLabel": "servings", "ingredientsLabel": "Ingredients" } \ No newline at end of file diff --git a/src/_includes/components/search.njk b/src/_includes/components/search.njk index f4cd196..218d030 100644 --- a/src/_includes/components/search.njk +++ b/src/_includes/components/search.njk @@ -2,25 +2,15 @@
- +
+ +
diff --git a/src/admin/config.yml b/src/admin/config.yml index a093f22..02943d5 100644 --- a/src/admin/config.yml +++ b/src/admin/config.yml @@ -42,6 +42,7 @@ collections: - {label: "Primary color", name: "primaryColor", widget: "color", hint: "make sure to choose a color that is light enough to display as a background behind dark text"} - {label: "Secondary color", name: "secondaryColor", widget: "color", hint: "used for links and focus styles"} - {label: "Search (label)", name: "searchLabel", widget: "string"} + - {label: "Search \"contains\" (label)", name: "searchContainsLabel", widget: "string"} - {label: "Servings (label)", name: "servingsLabel", widget: "string"} - {label: "Ingredients (label)", name: "ingredientsLabel", widget: "string"} - name: "nav" diff --git a/src/scss/components/_search.scss b/src/scss/components/_search.scss index fc2723f..abf3c86 100644 --- a/src/scss/components/_search.scss +++ b/src/scss/components/_search.scss @@ -27,7 +27,7 @@ background-color: var(--color-white); padding: 24px; border: 1px solid var(--color-grey-300); - border-radius: 6px; + border-radius: 10px; box-shadow: var(--shadow-xl); font-size: 1rem; @@ -101,24 +101,46 @@ } } -.c-search__search-results { +.c-search__results-wrapper { + position: relative; + margin: 0; +} + +.c-search__results { > * + * { margin-top: 10px; } } -.c-search__search-results { - margin-top: 30px; +.c-search__results.c-search__results--home { + position: absolute; + z-index: 10; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 500px; + padding: 24px; + background-color: var(--color-white); + border: 1px solid var(--color-grey-300); + box-shadow: var(--shadow-xl); + border-radius: 10px; } -.c-search__search-result-link--home { +.c-search__result-link { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.c-search__result-link--home { font-size: 1.2rem; } -.c-search__search-result-ingredients { +.c-search__result-ingredients { font-style: italic; } -.c-search__search-result-ingredients--home { +.c-search__result-ingredients--home { font-size: 1rem; } diff --git a/src/search.njk b/src/search.njk index 943ce04..33d78c3 100644 --- a/src/search.njk +++ b/src/search.njk @@ -7,7 +7,8 @@ permalink: search.json { "title" : "{{ recipe.data.title }}", "url" : "{{ recipe.url }}", - "ingredients" : [{% for ingredient in recipe.data.ingredients %}"{{ingredient}}"{% if not loop.last %},{% endif %}{% endfor %}] + "ingredients" : [{% for ingredient in recipe.data.ingredients %}"{{ingredient}}"{% if not loop.last %},{% endif %}{% endfor %}], + "tags" : [{% for tag in recipe.data.tags %}"{{tag}}"{% if not loop.last %},{% endif %}{% endfor %}] }{% if not loop.last %},{% endif %} {% endfor %} ] \ No newline at end of file