diff options
Diffstat (limited to 'Recipes/Polenta with Sicilian Tomato Sauce.html')
| -rw-r--r-- | Recipes/Polenta with Sicilian Tomato Sauce.html | 520 |
1 files changed, 302 insertions, 218 deletions
diff --git a/Recipes/Polenta with Sicilian Tomato Sauce.html b/Recipes/Polenta with Sicilian Tomato Sauce.html index 2120668..2070041 100644 --- a/Recipes/Polenta with Sicilian Tomato Sauce.html +++ b/Recipes/Polenta with Sicilian Tomato Sauce.html @@ -1,269 +1,353 @@ -<!DOCTYPE html> +<!doctype html> <html> - <head> - <meta charset="UTF-8"> - <style type="text/css"> - /* Shared styles */ - body { - font-family: Helvetica, sans-serif; - font-size: 16px; - color: #34302e; - margin: 0.25in; - } - @page { - size: letter portrait; - margin: 0.25in; - } - .name { - font-size: 18px; - font-family: Helvetica, sans-serif; - font-weight: normal; - margin: 0 0 10px 0; - } - .categories { - color: #605D5D; - font-size: 14px; - font-family: Helvetica, sans-serif; - font-style: italic; - } - .rating { - color: #d10505; - font-size: 14px; - } - .metadata { - font-size: 14px; - } - .infobox p { - margin: 0; - line-height: 150%; - } - .subhead { - color: #d10505; - font-weight: bold; - font-size: 14px; - text-transform: uppercase; - margin: 10px 0; - } - - .ingredients p { - margin: 4px 0; - } - /* To prevent nutrition/directions from getting too close + <head> + <meta charset="UTF-8" /> + <style type="text/css"> + /* Shared styles */ + body { + font-family: Helvetica, sans-serif; + font-size: 16px; + color: #34302e; + margin: 0.25in; + } + .name { + font-size: 18px; + font-family: Helvetica, sans-serif; + font-weight: normal; + margin: 0 0 10px 0; + } + .categories { + color: #605d5d; + font-size: 14px; + font-family: Helvetica, sans-serif; + font-style: italic; + } + .rating { + color: #d10505; + font-size: 14px; + } + .metadata { + font-size: 14px; + } + .infobox p { + margin: 0; + line-height: 150%; + } + .subhead { + color: #d10505; + font-weight: bold; + font-size: 14px; + text-transform: uppercase; + margin: 10px 0; + } + + .ingredients p { + margin: 4px 0; + } + /* To prevent nutrition/directions from getting too close to ingredients */ - .ingredients { - padding-bottom: 10px; - } - .clear { - clear:both; - } - a { - color: #4990E2; - text-decoration: none; - } - /* Full page specific styles */ - .text { - line-height: 130%; - } - .photobox { - float: left; - margin-right: 14px; - } - .photo { - max-width: 140px; - max-height: 140px; - width: auto; - height: auto; - } - .inline-image { - max-width: 25%; - max-height: 25%; - width: auto; - height: auto; - } - .photoswipe { - border: 1px #dddddd solid; - cursor: pointer; - } - .pswp__caption__center { - text-align: center !important; - } - .recipe { - page-break-after: always; - } - .recipe:first-child { - border-top: 0 none; - margin-top: 0; - padding-top: 0; - } - </style> - </head> - <body> - <!-- Recipe --> -<div class="recipe" itemscope itemtype="http://schema.org/Recipe" > - - <div class="infobox"> + .ingredients { + padding-bottom: 10px; + } + .clear { + clear: both; + } + a { + color: #4990e2; + text-decoration: none; + } + /* Full page specific styles */ + .text { + line-height: 130%; + } + .photobox { + float: left; + margin-right: 14px; + } + .photo { + max-width: 140px; + max-height: 140px; + width: auto; + height: auto; + } + .inline-image { + max-width: 25%; + max-height: 25%; + width: auto; + height: auto; + } + .photoswipe { + border: 1px #dddddd solid; + cursor: pointer; + } + .pswp__caption__center { + text-align: center !important; + } + .recipe { + page-break-after: always; + } + .recipe:first-child { + border-top: 0 none; + margin-top: 0; + padding-top: 0; + } + </style> + </head> + <body> + <!-- Recipe --> + <div class="recipe" itemscope itemtype="http://schema.org/Recipe"> + <div class="infobox"> <!-- Image --> + <div class="photobox"> - <a href="#"> - <img src="Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/559DD1E3-D90C-4CB3-AD00-C660BF6405B0.jpg" itemprop="image" class="photo photoswipe"/> - </a> - </div> + <a href="#"> + <img + src="Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/559DD1E3-D90C-4CB3-AD00-C660BF6405B0.jpg" + itemprop="image" + class="photo photoswipe" + /> + </a> + </div> <!-- Name --> <h1 itemprop="name" class="name">Polenta with Sicilian Tomato Sauce</h1> - + <!-- Info --> - + <!-- Rating, categories --> <p itemprop="aggregateRating" class="rating" value="5">★★★★★</p> - - <p class="metadata"> - - <!-- Cook time, prep time, servings, difficulty --> - <!-- Source --> + <p class="metadata"> + <!-- Cook time, prep time, servings, difficulty --> + <!-- Source --> </p> - - <div class="clear"></div> - </div> - - <div class="left-column"> + <div class="clear"></div> + </div> + <div class="left-column"> <!-- Ingredients --> + <div class="ingredientsbox"> - <h3 class="subhead">Ingredients</h3> - <div class="ingredients text"> - <p class="line" itemprop="recipeIngredient"><strong>1</strong> litre water</p><p class="line" itemprop="recipeIngredient">salt</p><p class="line" itemprop="recipeIngredient"><strong>175</strong>g polenta</p><p class="line" itemprop="recipeIngredient"><strong>25</strong>g unsalted butter</p><p class="line" itemprop="recipeIngredient">olive oil for frying</p><p class="line" itemprop="recipeIngredient">grated parmesan</p><p class="line" itemprop="recipeIngredient">basil</p><br/><p class="line" itemprop="recipeIngredient"><strong>3</strong> tbsp olive oil</p><p class="line" itemprop="recipeIngredient"><strong>1</strong> small onion, chopped</p><p class="line" itemprop="recipeIngredient"><strong>2</strong> garlic cloves, crushed</p><p class="line" itemprop="recipeIngredient"><strong>1</strong> red chilli, seeded and finely chopped</p><p class="line" itemprop="recipeIngredient"><strong>450</strong>g plum tomatoes, seeded and chopped</p><p class="line" itemprop="recipeIngredient"><strong>2</strong> tbsp capers</p><p class="line" itemprop="recipeIngredient"><strong>2</strong> tbsp pine nuts</p><p class="line" itemprop="recipeIngredient"><strong>115</strong> g kalamata olives</p><br/><br/><p></p> - </div> + <h3 class="subhead">Ingredients</h3> + <div class="ingredients text"> + <p class="line" itemprop="recipeIngredient"> + <strong>1</strong> litre water + </p> + <p class="line" itemprop="recipeIngredient">salt</p> + <p class="line" itemprop="recipeIngredient"> + <strong>175</strong>g polenta + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>25</strong>g unsalted butter + </p> + <p class="line" itemprop="recipeIngredient">olive oil for frying</p> + <p class="line" itemprop="recipeIngredient">grated parmesan</p> + <p class="line" itemprop="recipeIngredient">basil</p> + <br /> + <p class="line" itemprop="recipeIngredient"> + <strong>3</strong> tbsp olive oil + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>1</strong> small onion, chopped + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>2</strong> garlic cloves, crushed + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>1</strong> red chilli, seeded and finely chopped + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>400</strong>g can chopped tomatoes + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>2</strong> tbsp capers + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>2</strong> tbsp pine nuts + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>115</strong> g kalamata olives + </p> + </div> </div> - + <!-- Nutrition (in two-column mode it goes below the ingredients) --> + </div> - </div> - - <div class="right-column"> - - <!-- Description --> - <div class="descriptionbox"> - <h3 class="subhead">Description</h3> - <div itemprop="description" class="description text"> - <p>Traditionally polenta is peasant food - hearty and rustic.</p><p>However, it has now become an elegant and fashionable dish, toasted or fried in good olive oil or butter. You can serve it either way in this recipe, soft or fried, with a piquant fresh tomato and chilli sauce. </p><p>To make soft polenta decadently rich and wonderful, stir in some mascarpone, sliced Taleggio or crumbled gorgonzola cheese before serving.</p> + <div class="right-column"> + <!-- Description --> + + <div class="descriptionbox"> + <h3 class="subhead">Description</h3> + <div itemprop="description" class="description text"> + <p>Traditionally polenta is peasant food - hearty and rustic.</p> + <p> + However, it has now become an elegant and fashionable dish, + toasted or fried in good olive oil or butter. You can serve it + either way in this recipe, soft or fried, with a piquant fresh + tomato and chilli sauce. + </p> + <p> + To make soft polenta decadently rich and wonderful, stir in some + mascarpone, sliced Taleggio or crumbled gorgonzola cheese before + serving. + </p> + </div> </div> - </div> - <!-- Directions --> - <div class="directionsbox"> - <h3 class="subhead">Directions</h3> - <div itemprop="recipeInstructions" class="directions text"> - <p class="line">1. Make the polenta: bring the water and salt to the boil in a large saucepan. Add the polenta gradually in a thin, steady stream, whisking all the time. Reduce the heat as low as it will go and continue stirring the polenta with a wooden spoon until it is thick and smooth and has absorbed all the liquid. This takes about 15-20 minutes.</p><p class="line">2. When the polenta leaves the sides of the pan clean, stir in the butter. You can serve the polenta like this - all fluffed up like mashed potato, adding some grated cheese and black pepper, if wished, or you can pour it into an oiled tin and leave to cool. When cold, cut into squares and fry in olive oil or butter until crisp and golden.</p><p class="line">3. To make the tomato sauce, heat the olive oil and gently sweat the onion and garlic until soft. Add the chilli and cook for 2 minutes. Stir in the tomatoes, capers, pine nuts and olives and simmer gently, uncovered, for 30 minutes, until reduced and thickened. Stir in the torn basil leaves and season.</p><p class="line">4. Serve the sauce with the polenta, sprinkled with some freshly grated Parmesan cheese and garnish with more basil.</p> + <!-- Directions --> + + <div class="directionsbox"> + <h3 class="subhead">Directions</h3> + <div itemprop="recipeInstructions" class="directions text"> + <p class="line"><strong>Tomato Sauce</strong></p> + <p class="line"> + 1. To make the tomato sauce, heat the olive oil and gently sweat + the onion and garlic until soft. Add the chilli and cook for 2 + minutes. Stir in the tomatoes, capers, pine nuts and olives and + simmer gently, uncovered, for 30 minutes, until reduced and + thickened. Stir in the torn basil leaves and season. + </p> + <p class="line"><strong>Polenta</strong></p> + <p class="line"> + 2. Make the polenta: bring the water and salt to the boil in a + large saucepan. Add the polenta gradually in a thin, steady + stream, whisking all the time. Reduce the heat as low as it will + go and continue stirring the polenta with a wooden spoon until it + is thick and smooth and has absorbed all the liquid. This takes + about 15-20 minutes. + </p> + <p class="line"> + 3. When the polenta leaves the sides of the pan clean, stir in the + butter. You can serve the polenta like this - all fluffed up like + mashed potato, adding some grated cheese and black pepper, if + wished, or you can pour it into an oiled tin and leave to cool. + When cold, cut into squares and fry in olive oil or butter until + crisp and golden. + </p> + <p class="line"> + 4. Serve the sauce with the polenta, sprinkled with some freshly + grated Parmesan cheese and garnish with more basil. + </p> + </div> </div> - </div> - <!-- Notes --> + <!-- Notes --> + <!-- Nutrition (in regular mode it goes below the notes) --> - <!-- Nutrition (in regular mode it goes below the notes) --> <!-- Used in two different places depending on the recipe layout --> + </div> - + <div class="clear"></div> </div> - - <div class="clear"></div> -</div> + <!-- Photo gallery is only included when exporting. --> + <!-- PhotoSwipe gallery --> -<!-- Photo gallery is only included when exporting. --> -<!-- PhotoSwipe gallery --> + <link rel="stylesheet" href="Resources/PhotoSwipe/photoswipe.css" /> + <link + rel="stylesheet" + href="Resources/PhotoSwipe/default-skin/default-skin.css" + /> + <script src="Resources/PhotoSwipe/photoswipe.min.js"></script> + <script src="Resources/PhotoSwipe/photoswipe-ui-default.min.js"></script> -<link rel="stylesheet" href="Resources/PhotoSwipe/photoswipe.css"> -<link rel="stylesheet" href="Resources/PhotoSwipe/default-skin/default-skin.css"> -<script src="Resources/PhotoSwipe/photoswipe.min.js"></script> -<script src="Resources/PhotoSwipe/photoswipe-ui-default.min.js"></script> - -<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="pswp__bg"></div> - <div class="pswp__scroll-wrap"> + <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> + <div class="pswp__bg"></div> + <div class="pswp__scroll-wrap"> <div class="pswp__container"> - <div class="pswp__item"></div> - <div class="pswp__item"></div> - <div class="pswp__item"></div> + <div class="pswp__item"></div> + <div class="pswp__item"></div> + <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> - <div class="pswp__top-bar"> - <div class="pswp__counter"></div> - <button class="pswp__button pswp__button--close" title="Close"></button> - </div> - <button class="pswp__button pswp__button--arrow--left" title="Previous"> - </button> - <button class="pswp__button pswp__button--arrow--right" title="Next"> - </button> - <div class="pswp__caption"> - <div class="pswp__caption__center"></div> - </div> + <div class="pswp__top-bar"> + <div class="pswp__counter"></div> + <button + class="pswp__button pswp__button--close" + title="Close" + ></button> + </div> + <button + class="pswp__button pswp__button--arrow--left" + title="Previous" + ></button> + <button + class="pswp__button pswp__button--arrow--right" + title="Next" + ></button> + <div class="pswp__caption"> + <div class="pswp__caption__center"></div> + </div> </div> + </div> </div> -</div> -<script type="text/javascript"> - var openPhotoSwipe = function(event) { - var pswp = document.querySelector('.pswp'); - + <script type="text/javascript"> + var openPhotoSwipe = function (event) { + var pswp = document.querySelector(".pswp"); + var element = event.target; - var src = element.getAttribute('src'); - + var src = element.getAttribute("src"); + // build items array var items = [ - { - msrc: 'Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/A4EB2729-8B26-454B-A9B4-E7A1ED41042E.jpg', - src: 'Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/A4EB2729-8B26-454B-A9B4-E7A1ED41042E.jpg', - w: 0, - h: 0, - title: '1' - }, - { - msrc: 'Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/355FC163-D56A-46B2-B38F-9A715972C3B5.jpg', - src: 'Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/355FC163-D56A-46B2-B38F-9A715972C3B5.jpg', - w: 0, - h: 0, - title: '2' - }, + { + msrc: "Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/A4EB2729-8B26-454B-A9B4-E7A1ED41042E.jpg", + src: "Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/A4EB2729-8B26-454B-A9B4-E7A1ED41042E.jpg", + w: 1536.0, + h: 2048.0, + title: "1", + }, + + { + msrc: "Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/355FC163-D56A-46B2-B38F-9A715972C3B5.jpg", + src: "Images/518A4E06-852D-41E7-B2FD-842F8C1DF73B/355FC163-D56A-46B2-B38F-9A715972C3B5.jpg", + w: 1536.0, + h: 2048.0, + title: "2", + }, ]; - + var index = 0; - for (var i=0; i<items.length; i++) { - var item = items[i]; - if (item.src == src) { - index = i; - } + for (var i = 0; i < items.length; i++) { + var item = items[i]; + if (item.src == src) { + index = i; + } } - + var options = { - index: index, - history: false, - focus: true, - captionEl: true, - fullscreenEl: false, - zoomEl: false, - shareEl: false, - preloaderEl: false, - bgOpacity: 0.9, - showHideOpacity: true + index: index, + history: false, + focus: true, + captionEl: true, + fullscreenEl: false, + zoomEl: false, + shareEl: false, + preloaderEl: false, + bgOpacity: 0.9, + showHideOpacity: true, }; - - var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options); + + var gallery = new PhotoSwipe( + pswp, + PhotoSwipeUI_Default, + items, + options, + ); gallery.init(); - }; + }; - var elements = document.querySelectorAll('.photoswipe'); - for (var i=0; i<elements.length; i++) { + var elements = document.querySelectorAll(".photoswipe"); + for (var i = 0; i < elements.length; i++) { var element = elements[i]; - element.addEventListener('click', openPhotoSwipe); - } -</script> - - - </body> + element.addEventListener("click", openPhotoSwipe); + } + </script> + </body> </html> |