mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
46 lines
34 KiB
HTML
46 lines
34 KiB
HTML
|
<style>*{font-family:-apple-system,BlinkMacSystemFont,sans-serif}body{margin:0 8vw;background-color:var(--background-color);color:var(--text-color);--text-color:rgba(0,0,0,0.87);--strong-text-color:black;--disabled-text-color:rgba(16,12,12,0.54);--hover-background-color:rgba(16,12,12,0.07);--image-placeholder-color:var(--hover-background-color);--background-color:white;--accent-color:#d42a20}.thumbnail{width:100%;padding-top:61.8%;max-height:1vh;background-size:cover;background-position:center;margin-bottom:1.3em;box-sizing:border-box}.description{white-space:pre-wrap}@media screen{.timer{white-space:nowrap;border-radius:2px;padding:0 .1em;margin:0 -0.1em;text-decoration-style:dotted;box-sizing:border-box;border-bottom-color:currentColor;font-weight:bold}.timer:hover,.timer.active{color:white;background-color:#0e638e;z-index:100;position:relative;border-bottom-color:transparent}.timer.active .label{opacity:.0}.timer .countdown{position:absolute;display:none;width:100%;text-align:center;left:0}.timer.active .countdown{display:inline-block}.timer svg{width:1em;vertical-align:sub;margin-bottom:1px}}@media print{.timer{font-weight:800}.timer svg{display:none}}img.publisher{max-width:8em;max-height:3em;transform:scale(0.7);transform-origin:left}.recipe{max-width:50em;margin:auto;line-height:125%}.columns{display:flex;gap:3em;margin-bottom:4em;align-content:center;justify-content:center}.headercolumns{display:flex;flex-direction:row-reverse}h1{margin-top:0;margin-bottom:0;line-height:125%;font-weight:500;font-size:2em}.noun.hovered{background-color:#fac22b;padding:0 2px 2px 2px;margin:-0 -2px -2px -2px;border-radius:2px}.step.hovered,.substep.hovered ~ *,.ingredient.hovered{background-color:#f1f1f1}.ingredient.hovered{background-color:#fac22b}.metadata{display:flex;flex-wrap:wrap;gap:.5em 1em;text-transform:uppercase;font-size:.88rem;font-weight:500;line-height:.8em;margin-top:.7em}ul.step{padding-inline-start:0;list-style-type:none;padding:0;margin:0}ul.step:after{content:"";display:none;width:5em;height:.5px;background-color:currentColor;opacity:1;border:0;margin:1em 0 .2em 0;print-color-adjust:exact;-webkit-print-color-adjust:exact}ul.step.header:after,ul.step:last-child:after{display:none}.instructions:not(.numbered) .number{display:none}.instructions.numbered .step{margin-bottom:1em}span.bullet{margin-left:-1.5rem;float:left;font-weight:600;border-radius:10em;width:16px;height:16px;text-align:center;opacity:1;user-select:none;color:var(--accent-color)}.instructions .step:not(:hover) span.bullet.substep{opacity:.3;color:var(--text-color)}@media screen{.complete span.bullet,li:hover span.bullet{color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M18.9 36.9 6.5 24.5 9.9 21.1 18.9 30.1 38.05 10.95 41.45 14.35Z'/%3E%3C/svg%3E");background-size:cover}.complete span.number{border-color:transparent}.complete .noun{color:var(--disabled-text-color)}.ingredient.complete,li.complete{text-decoration:line-through;color:var(--disabled-text-color);text-decoration:line-through;text-decoration:rgba(0,0,0,0.75) solid .5px line-through}}li{padding:.33em .5em;margin-left:-0.5em}.ingredient,li{border-radius:2px}.ingredient:hover,li:hover{background-color:rgba(0,0,0,0.1)}.spacer{flex-grow:1000}.metadata img{width:16px;vertical-align:middle;margin-top:-4px;margin-right:4px;opacity:.6}.time:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' fill='none' viewBox='0 0 18 22'%3E%3Cpath fill='%23000' d='M4.031 17.953C5.406 19.328 7.063 20.016 9 20.016c1.938 0 3.578-.688 4.922-2.063 1.375-1.375 2.062-3.031 2.062-4.969 0-1.937-.687-3.578-2.062-4.921C12.578 6.687 10.937 6 9 6c-1.938 0-3.594.688-4.969 2.063-1.343 1.343-2.015 2.984-2.015 4.921 0 1.938.671 3.594 2.015 4.97zm12-10.547c.532.688.985 1.578 1.36 2.672.406 1.063.609 2.031.609 2.906 0 2.47-.875 4.594-2.625 6.375-1.75 1.75-3.875 2.625-6.375 2.625s-4.625-.875-6.375-2.625C.875 17.58 0 15.453 0 12.984c0-2.468.875-4.578 2.625-6.328C4.375 4.875 6.5 3.984 9 3
|
|||
|
|
</style>
|
|||
|
|
<script >let reformat=true;let FRACTION_MAP={"1/4":"¼","1/2":"½","3/4":"¾","1/3":"⅓","2/3":"⅔","1/5":"⅕","2/5":"⅖","3/5":"⅗","4/5":"⅘","1/6":"⅙","5/6":"⅚","1/8":"⅛","3/8":"⅜","5/8":"⅝","7/8":"⅞",replace:function(string){return string.replace(/\d\/\d/g,(function(a,b,c){return FRACTION_MAP[a]}))}};var isWatch=window.outerWidth<220;if(isWatch)document.documentElement.classList.add("watch");let ignoredTerms=["but","broken","pieces","tbsp","tsp","peeled","then","can","oz","fresh","out","not","sprig","sprigs","room","temperature","still","see","notes","with","beat","together","crust","very","cold","hot","top","warm","one","note","teaspoon","teaspoons","tablespoon","tablespoons","cup","cups","taste","more","melted","into","wide","pound","pounds","gram","grams","you","ounce","ounces","thinly","sliced","pan","cube","cubes","finely","ground","garnish","about","cut","and","smashed","each","the","medium","large","small","for","chopped","minced","grated","box","softened","directed","shredded","cooked","from","frozen","thawed"];let emojiMap={grape:"🍇",watermelon:"🍉",melon:"🍈",orange:"🍊",lemon:"🍋",banana:"🍌",pineapple:"🍍",mango:"🥭",apple:"🍎",apple:"🍏",pear:"🍐",peach:"🍑",cherry:"🍒",strawberry:"🍓",blueberry:"🫐",kiwi:"🥝",garlic:"🧄",tomato:"🍅",olive:"🫒",coconut:"🥥",avocado:"🥑",eggplant:"🍆",potato:"🥔",carrot:"🥕",corn:"🌽",spicy:"🌶️","bell pepper":"🫑",cucumber:"🥒","leafy green":"🥬",broccoli:"🥦",onion:"🧅",mushroom:"🍄",peanut:"🥜",bean:"🫘",chestnut:"🌰",bread:"🍞",croissant:"🥐",baguette:"🥖",flatbread:"🫓",pretzel:"🥨",bagel:"🥯",pancake:"🥞",waffle:"🧇",cheese:"🧀",meat:"🍖",beef:"🥩",turkey:"🍗",chicken:"🍗",steak:"🥩",bacon:"🥓",hamburger:"🍔","french fries":"🍟",pizza:"🍕","hot dog":"🌭",sandwich:"🥪",taco:"🌮",burrito:"🌯",tamale:"🫔","stuffed flatbread":"🥙",falafel:"🧆",egg:"🥚",cooking:"🍳",pan:"🥘",pot:"🍲",soup:"🍲",fondue:"🫕",dip:"🫕",bowl:"🥣",salad:"🥗",popcorn:"🍿",butter:"🧈",salt:"🧂",can:"🥫","bento box":"🍱","rice cracker":"🍘","rice ball":"🍙",rice:"🍚",curry:"🍛","steaming bowl":"🍜",spaghetti:"🍝","roasted sweet potato":"🍠",oden:"🍢",sushi:"🍣","fried shrimp":"🍤","fish cake with swirl":"🍥","moon cake":"🥮",fruit:"🍓",dango:"🍡",dumpling:"🥟",oyster:"🦪",octopus:"🐙",fish:"🐟",salmon:"🐟",tuna:"🐟","soft ice cream":"🍦","shaved ice":"🍧","ice cream":"🍨",doughnut:"🍩",cookie:"🍪",birthday:"🎂",cake:"🍰",cupcake:"🧁",pie:"🥧",chocolate:"🍫",candy:"🍬",custard:"🍮",honey:"🍯",milk:"🥛",cream:"🥛",coffee:"☕",tea:"🫖",tea:"🍵",sake:"🍶",champagne:"🍾","wine glass":"🍷",cocktail:"🍸","tropical drink":"🍹",beer:"🍺","tumbler glass":"🥃","cup with straw":"🥤","bubble tea":"🧋","beverage box":"🧃",mate:"🧉",frozen:"🧊",chopsticks:"🥢","fork and knife":"🍴",spoon:"🥄"};let icons={public:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="public"><mask id="mask0_802_619" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_802_619)"><path id="public_2" d="M12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Zm-1-2.05V18c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 9 16v-1l-4.8-4.8c-.05.3-.096.6-.138.9-.041.3-.062.6-.062.9 0 2.017.663 3.783 1.988 5.3S8.983 19.7 11 19.95Zm6.9-2.55c.333-.367.633-.763.9-1.188.267-.425.488-.866.663-1.325a8.32 8.32 0 0 0 .4-1.412C19.954 12.992 20 12.5 20 12a7.847
|
|||
|
|
</script>
|
|||
|
|
<script>
|
|||
|
|
function loadScript(src, callback, type = "module") {
|
|||
|
|
let promise = new Promise((resolve, reject) => {
|
|||
|
|
let script = document.createElement("script")
|
|||
|
|
script.type = type;
|
|||
|
|
script.onload = resolve;
|
|||
|
|
script.src = src
|
|||
|
|
document.head.appendChild(script);
|
|||
|
|
console.log("script", script)
|
|||
|
|
})
|
|||
|
|
return callback ? promise.then(callback) : promise;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.addEventListener("message", function(e) {
|
|||
|
|
let data = e.data;
|
|||
|
|
// var base = el('base', {href: data.script});
|
|||
|
|
// console.log("MESSAGE", data, base, data.script);
|
|||
|
|
// document.head.appendChild(base);
|
|||
|
|
window.script = data.script
|
|||
|
|
console.log("data.script", data)
|
|||
|
|
window.params = data;
|
|||
|
|
window.params.origin = e.origin;
|
|||
|
|
console.log("🖊 Rendering with", {script:data.script, params:data})
|
|||
|
|
|
|||
|
|
render()
|
|||
|
|
|
|||
|
|
loadScript("../js/qrious.min.js", null, "").then(() => {
|
|||
|
|
console.log("qrious loaded", window.params, window.params.originalURL);
|
|||
|
|
var qr = new QRious({
|
|||
|
|
element: document.getElementById("qr"),
|
|||
|
|
background: 'transparent',
|
|||
|
|
foreground: 'currentColor',
|
|||
|
|
size: 512,
|
|||
|
|
value: params.originalURL.substring(0),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}, false);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|