diff --git a/src/components/RecipeCard.vue b/src/components/RecipeCard.vue index 9f4a1a93ce19aa8d890df71d2a24d420f85aa6ed..1e50a1b0c737c407707ca7330b2c408b01845bf5 100644 --- a/src/components/RecipeCard.vue +++ b/src/components/RecipeCard.vue @@ -16,7 +16,7 @@ export default { </script> <template> - <h3>{{recipe.day}}</h3> + <h3 class="recipe-day">{{recipe.day}}</h3> <div class="recipe-card" @click="redirectToRecipe"> <div class="recipe-details"> @@ -34,7 +34,12 @@ export default { <style scoped lang="scss"> @import "../style.scss"; - +.recipe-day { + /* + text-align: center; + */ + margin-bottom: 5px; +} .recipe-card { align-content: center; cursor: pointer; @@ -47,9 +52,9 @@ export default { overflow: hidden; margin-bottom: 20px; box-shadow: 2px 2px $green; - transition: all ease 150ms; + &:hover { box-shadow: 4px 4px $green; } @@ -63,7 +68,7 @@ export default { .recipe-details { margin-top: .4em; margin-inline: 1em; - + align-items: center; display: flex; flex-direction: row; justify-content: space-between;