prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated recipe formatting

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-04-28 20:49:14 -06:00
parent 6553dd0f1c
commit b90d18948a
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
docs/render/recipe.css
View file

@ -3,7 +3,7 @@
}
body {
margin: 0 5vw;
margin: 0 8vw;
}
.thumbnail {
@ -18,6 +18,10 @@ body {
box-sizing: border-box;
}
.ingredients:hover .noun {
/* text-decoration:underline; */
}
img.publisher {
max-width: 5em;
/* margin-top: -0.5em; */
@ -61,6 +65,10 @@ h1 {
.ingredient.hovered {
background-color:#f1f1f1;
}
.ingredient.hovered {
background-color: rgba(255, 221, 0, 0.608);
}
.metadata {
display: flex;
flex-wrap: wrap;
@ -74,7 +82,7 @@ ul.step {
padding-inline-start: 0;
list-style-type:none;
}
padding: 0;margin: 0em;}
.instructions:not(.numbered) .number {
display: none;
@ -99,11 +107,11 @@ span.number {
li {
margin-bottom: 1em;
}
padding: 0.25em 0.5em;
margin-left: -0.5em;}
li:hover {
background-color:rgba(0,0,0,0.1);
}
border-radius: 2px;}
.spacer {
flex-grow: 1000;
@ -149,21 +157,21 @@ li:hover {
}
.ingredients {
font-weight: 400;
font-size: 100%;
font-weight: 700;
font-size: 90%;
/* padding-top: 1em; */
flex: 0 1 35%;
}
/* color: rgba(0,0,0,0.8); */}
.noun {
font-weight:600 ;
}
font-weight: 700;
color: rgba(0,0,0,1.0);}
.instructions {
white-space: pre-wrap;
/* line-height: 125%; */
/* font-size: 100%; */
flex: 0 1 65%;
margin-top: -1px;
margin-top: -0.4em;
}
.substep {
@ -172,11 +180,11 @@ li:hover {
}
.ingredient {
padding: .25em 0em;
margin: 0 -1em;
margin: 0 0em 0 -3em;
line-height: 1.25em;
opacity: 0.75;
cursor: pointer;
padding-left: 1em;
padding-left: 3em;
}
.ingredients .yield {
@ -193,7 +201,7 @@ li:hover {
}
.ingredient.complete,
.step.complete {
.substep.complete {
text-decoration: line-through;
opacity: 0.33;
}
@ -216,7 +224,7 @@ li:hover {
background-color: currentColor;
opacity: .3;
border:none;
margin: 0 0 1em 0;
margin: 0.25em 0;
}
hr {
/* width: 100px;

8
docs/render/recipe.js
View file

@ -130,7 +130,7 @@ function formatTime(time) {
}
function markIngredient(e) {
e.target.classList.toggle("complete")
e.target.closest(".ingredient").classList.toggle("complete")
}
function highlightStep(e) {
@ -138,7 +138,7 @@ function highlightStep(e) {
// e.target.parent.children.forEach((i,el) => {
// el.classList.toggle("complete", )
// }
e.target.closest(".step").classList.toggle("complete")
e.target.closest(".substep").classList.toggle("complete")
}
@ -230,7 +230,9 @@ function render() {
let text = (instruction.text || instruction);
if (text.startsWith("= ")) return m("h3", text.substring(2));
return m("li", { onclick: highlightStep }, m("span.number" + (step>9 ? ".big" : ""), `${step++}`), m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)}))
return m("li", { onclick: highlightStep },
m("span.number" + (step>9 ? ".big" : ""), `${step++}`),
m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)}))
}
function flattenInstructions(instruction) {