Custom Job for Missi from nanasrecipebox

[mnelson4]

Todos:

• match blog's fonts
• clarify book dimensions
• 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
• style multi-image recipe and fill each page
• 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
Casseroles

Vegetables

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.

[mnelson4]

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:

<script> // because we are putting each article's p tags into the footer, otherwise the previous footer will get repeated until a new p tag is found jQuery(document).ready(function(){ jQuery('.pmb-article .post-inner .entry-content').each(function() { // Check if the current has any

tags if (jQuery(this).find('p').length === 0) { // Add a new

tag if none are found jQuery(this).append('

 

'); } }); });

[mnelson4]

I message'd Missi and asked her if there's anything she think is missing