mnelson4
Custom Job for Missi from nanasrecipebox
Todos:
- [x] match blog's fonts
- [x] clarify book dimensions
- [x] style single-image recipe: center image vertically, fill width but dont exceed height
- [ ] style double-image recipe: center image vertically and fill half width each
- [x] style multi-image recipe and fill each page
- [x] organize content of book
- [ ] filesize: images should probably be reduced so the filesize isn't tremendous --> it's a GB, but considering we want high quality images for printing it might be unavoidable
On Dec 12 she suggested categories:
Breakfast
Lunch/Dinner
Beef Chicken Pork Lamb Shrimp CasserolesVegetables
Salads
Breads
Desserts
Cookies Bars Pies Cakes Candy
But then on January 19th she shared some pictures of a recipe book which only had 1 level of nesting.
Some articles (Eg "Cherry and Coconate Cake") have a tiny paragraph of text at the end about the contributor. This was messing up the image layout (the paragraph would end up on the next page). So I used some custom CSS to:
- set its visibility to hidden (so it doesn't appear in its usual spot)
- set a string with its content
- display that string in the center footer The only trouble was that if a subsequent article didn't have a paragraph tag, it would reuse the previous articles's paragraph tag in the footer. (Eg if article one was by Lucy C., all subsequetn articles that didn't mention the contributor would also be displayed as Lucy C in the footer). The fix was to use JS, added to the title page as custom HTML, to add empty p tags to all articles that didn't have one.
Here's the complete custom CSS, as of Dec 12 2024:
h1, h2, h3, h4, h5, h6{ color: #0f0097; } .pmb-article .post-inner .wp-block-image img{ max-height: 4in; height: auto; width: auto; max-width: 100%; } .pmb-recipe-notes{ -prince-flow: static(recipe-notes, start);
} .pmb-recipe-notes .line { border-bottom: 1px solid #ddd; height: 1em; } @page { margin: 1em; @bottom-center{ content: string(contributor); } }
.pmb-main-matter{ page: main-matter; } @page main-matter:left{ margin-left:8em; @left-top{ content: flow(recipe-notes); padding-left:1em; padding-right:1em; } } @page main-matter:right{ margin-right:8em; @right-top{ content: flow(recipe-notes); padding-left:1em; padding-right:1em; } }
.pmb-article .post-inner p{ /position: absolute; bottom:0px; left:-2em; padding:.5em; display:block; width:8.5in; text-align:center;/ /background:yellow;/ /float: footnote;/ /display:none;/
/* This content is hidden and then instead shown in the footer. For articles where there is no paragraphs, we use JS, located in the title page print material, to add an empty p tag so the string gets set back to blank*/ visibility:hidden; string-set: contributor content(); }
@page{ @footnote { position: absolute; bottom: -10px; /left:50%;/ padding-top:0; margin-top:0; background-color:gray; } }
.pmb-article .post-inner .pmb-image{ -prince-float: bottom; -prince-float-reference: page; position:relative; z-index:-1; }
And here's the JS added to the title page: