diff --git a/Francesco.Recipes.World/wwwroot/css/site.css b/Francesco.Recipes.World/wwwroot/css/site.css index a505610..b8d4e75 100644 --- a/Francesco.Recipes.World/wwwroot/css/site.css +++ b/Francesco.Recipes.World/wwwroot/css/site.css @@ -84,4 +84,102 @@ textarea.form-control { border-radius: 4px; cursor: pointer; margin-top: 10px; -} \ No newline at end of file +} + + +/* Recipe Instructions Grid Layout */ +.instructions-grid { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.instruction-row { + display: flex; + justify-content: space-between; + margin-bottom: 2.5rem; + flex-wrap: wrap; +} + +.instruction-card { + width: calc(33.333% - 20px); + margin-bottom: 1.5rem; +} + +@media (max-width: 992px) { + .instruction-card { + width: calc(50% - 15px); + } +} + +@media (max-width: 576px) { + .instruction-card { + width: 100%; + } +} + +.instruction-image { + position: relative; + width: 100%; + aspect-ratio: 1/1; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; + margin-bottom: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f9fa; +} + + .instruction-image img { + width: 100%; + height: 100%; + object-fit: cover; + } + +.placeholder-image { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: #aaa; +} + + .placeholder-image i { + font-size: 2rem; + } + +.step-number { + position: absolute; + bottom: 5px; + right: 10px; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-weight: bold; + padding: 3px 8px; + border-radius: 50%; +} + +.instruction-text { + font-size: 0.9rem; + line-height: 1.4; + color: #333; +} + +.recipe-instructions-section h3 { + margin-bottom: 1.5rem; + position: relative; + padding-bottom: 0.5rem; +} + + .recipe-instructions-section h3:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 50px; + height: 2px; + background-color: #007bff; + } +