diff options
Diffstat (limited to 'Recipes/Nut Butter Balls.html')
| -rw-r--r-- | Recipes/Nut Butter Balls.html | 445 |
1 files changed, 239 insertions, 206 deletions
diff --git a/Recipes/Nut Butter Balls.html b/Recipes/Nut Butter Balls.html index b4c6c9e..1ab3bb4 100644 --- a/Recipes/Nut Butter Balls.html +++ b/Recipes/Nut Butter Balls.html @@ -1,256 +1,289 @@ -<!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/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/6D51F5DB-FAC5-4B11-9C5B-E0057622B1A2.jpg" itemprop="image" class="photo photoswipe"/> - </a> - </div> + <a href="#"> + <img + src="Images/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/6D51F5DB-FAC5-4B11-9C5B-E0057622B1A2.jpg" + itemprop="image" + class="photo photoswipe" + /> + </a> + </div> <!-- Name --> <h1 itemprop="name" class="name">Nut Butter Balls</h1> - + <!-- Info --> - + <!-- Rating, categories --> <p itemprop="aggregateRating" class="rating" value="0"></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>15</strong> soft dates, pitted </p><p class="line" itemprop="recipeIngredient"><strong>2</strong> tbsp coconut oil </p><p class="line" itemprop="recipeIngredient"><strong>2</strong> tbsp peanut butter </p><p class="line" itemprop="recipeIngredient"><strong>50</strong> g / 1/2 cup rolled oats </p><p class="line" itemprop="recipeIngredient"><strong>3</strong> tbsp desiccated coconut </p><p class="line" itemprop="recipeIngredient"><strong>3</strong> tbsp cacao powder </p><p class="line" itemprop="recipeIngredient"><strong>1</strong> pinch sea salt </p> - </div> + <h3 class="subhead">Ingredients</h3> + <div class="ingredients text"> + <p class="line" itemprop="recipeIngredient"> + <strong>15</strong> soft dates, pitted + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>2</strong> tbsp coconut oil + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>2</strong> tbsp peanut butter + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>50</strong> g / 1/2 cup rolled oats + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>3</strong> tbsp desiccated coconut + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>3</strong> tbsp cacao powder + </p> + <p class="line" itemprop="recipeIngredient"> + <strong>1</strong> pinch sea salt + </p> + </div> </div> - + <!-- Nutrition (in two-column mode it goes below the ingredients) --> + </div> - </div> - - <div class="right-column"> - - <!-- Description --> + <div class="right-column"> + <!-- Description --> + + <!-- Directions --> - <!-- Directions --> - <div class="directionsbox"> - <h3 class="subhead">Directions</h3> - <div itemprop="recipeInstructions" class="directions text"> - <p class="line">Add the ingredients to a food processor and mix until everything comes together into a sticky dough. Roll 20-25 small balls between the palms of your hand. Cover them in chopped hazelnuts or coconut. If it doesn’t stick, you can dip each ball in cold water before covering them with the nuts. Store in the fridge while preparing the other snack platter ingredients. </p> + <div class="directionsbox"> + <h3 class="subhead">Directions</h3> + <div itemprop="recipeInstructions" class="directions text"> + <p class="line"> + Add the ingredients to a food processor and mix until everything + comes together into a sticky dough. Roll 20-25 small balls between + the palms of your hand. Cover them in chopped hazelnuts or + coconut. If it doesn’t stick, you can dip each ball in cold water + before covering them with the nuts. Store in the fridge while + preparing the other snack platter ingredients. + </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/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/49DA38B1-1EB6-4D18-A45F-ABF09E842DA9.jpg', - src: 'Images/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/49DA38B1-1EB6-4D18-A45F-ABF09E842DA9.jpg', - w: 0, - h: 0, - title: '1' - }, + { + msrc: "Images/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/49DA38B1-1EB6-4D18-A45F-ABF09E842DA9.jpg", + src: "Images/9F0B9B6C-DE5F-4362-9776-DC3F80350E65/49DA38B1-1EB6-4D18-A45F-ABF09E842DA9.jpg", + w: 800.0, + h: 1198.0, + title: "1", + }, ]; - + 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> |