diff --git a/docs/render/recipe.css b/docs/render/recipe.css index ab4c174..0e16b6a 100644 --- a/docs/render/recipe.css +++ b/docs/render/recipe.css @@ -39,12 +39,21 @@ body { /* text-decoration:underline; */ } +.time-button { + /* background-color:cyan; */ + white-space: nowrap; + border-radius:1em; + /* padding:0 0.3em; */ + /* border:1px solid currentColor; */ + text-decoration:underline; +} + img.publisher { max-width: 5em; /* margin-top: -0.5em; */ /* transform:scale(0.7); */ - - float:right; + float: + right; } .recipe { @@ -60,7 +69,9 @@ img.publisher { margin-bottom: 4em; align-content: center; justify-content: center; -flex-direction: row-reverse;margin-top: 1em;} + flex-direction: row; + margin-top: 1em; + } header { gap: 2em; @@ -69,8 +80,8 @@ header { } h1 { - margin-top: 0.3em; - margin-bottom:0.3em; + margin-top: 0; + margin-bottom: 0; line-height:125%; font-weight:500; } @@ -90,7 +101,7 @@ background-color:#f1f1f1; display: flex; flex-wrap: wrap; gap: 0.5em 1em; - margin-bottom: 1em; + /* margin-bottom: 1em; */ line-height:24px; } @@ -195,15 +206,14 @@ li:hover { } .ingredients { - font-weight: 600; - font-size: 80%; + /* font-weight: 600; */ + font-size: 88%; /* position:sticky; */ /* top: 0px; */ /* padding-top: 1em; */ flex: 0 1 35%; -/* color: rgba(0,0,0,0.8); */ -/* color:rgb(0, 118, 173); */ - + /* color: rgba(0,0,0,0.8); */ + /* color:rgb(0, 118, 173); */ } .noun { font-weight: 600; @@ -306,21 +316,24 @@ hr { display: flex; gap: 0.5em 1em; line-height:24px; - margin-left: -4px; + /* margin-left: -4px; */ + margin: 10px 0; } a.action { - border-radius:50%; + justify-content: center;border-radius:50%; cursor: pointer; - width: 1.5em; - height: 1.5em; + width: 44px; + height: 44px; /* display: flex; align-items: center; justify-content: center; */ - text-align: center; - line-height: 1.5em; + /* text-align: center; */ + /* line-height: 1.5em; */ background-color: var(--hover-background-color); + display: flex; + align-items: center; } a.action:hover { @@ -369,21 +382,16 @@ a.action .icon { } .metadata .icon { - font-size: 15px;vertical-align: middle;margin-top: -4px;margin-right: 4px;opacity: .6; -color:var(--text-color); -user-select: none; -} - - -@media (prefers-color-scheme: dark) { - body { - --text-color:white; - --opaque-text-color:white; - --hover-background-color:rgba(255,255,255, 0.14); - --background-color:#222; - --disabled-text-color: - rgba(255,255,255, 0.54); - } + font-size: 15px; + vertical-align: middle; + margin-top: -3px; + margin-right: 4px; + opacity: .6; + color: + transparent; + user-select: none; + /* float: left; */ + display: inline-block; } @@ -455,4 +463,84 @@ img.qr { max-width:50em; padding: 4em; } + +} + + +.icon { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDQiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDQgNDgiPjxtYXNrIGlkPSJhIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjAiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L21hc2s+PGcgbWFzaz0idXJsKCNhKSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2IDhWNUg4djNINlYzaDEydjVoLTJabTIgNC41Yy4yODMgMCAuNTItLjA5Ni43MTItLjI4OEEuOTY1Ljk2NSAwIDAgMCAxOSAxMS41YS45NjguOTY4IDAgMCAwLS4yODgtLjcxM0EuOTY3Ljk2NyAwIDAgMCAxOCAxMC41YS45NjcuOTY3IDAgMCAwLS43MTIuMjg3Ljk2OC45NjggMCAwIDAtLjI4OC43MTNjMCAuMjgzLjA5Ni41Mi4yODguNzEyQS45NjUuOTY1IDAgMCAwIDE4IDEyLjVaTTE2IDE5di00SDh2NGg4Wm0yIDJINnYtNEgydi02YzAtLjg1LjI5Mi0xLjU2Mi44NzUtMi4xMzdTNC4xNjcgOCA1IDhoMTRjLjg1IDAgMS41NjMuMjg4IDIuMTM4Ljg2M1MyMiAxMC4xNSAyMiAxMXY2aC00djRabTItNnYtNGEuOTY4Ljk2OCAwIDAgMC0uMjg4LS43MTNBLjk2Ny45NjcgMCAwIDAgMTkgMTBINWEuOTcuOTcgMCAwIDAtLjcxMy4yODdBLjk3Ljk3IDAgMCAwIDQgMTF2NGgydi0yaDEydjJoMloiLz48L2c+PG1hc2sgaWQ9ImIiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMCIgeT0iMjQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0wIDI0aDI0djI0SDB6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjYikiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xOCA0NmEyLjg5MyAyLjg5MyAwIDAgMS0yLjEyNS0uODc1QTIuODkzIDIuODkzIDAgMCAxIDE1IDQzYzAtLjExNy4wMDgtLjIzOC4wMjUtLjM2M3MuMDQyLS4yMzcuMDc1LS4zMzdsLTcuMDUtNC4xYy0uMjgzLjI1LS42LjQ0Ni0uOTUuNTg3QTIuOSAyLjkgMCAwIDEgNiAzOWEyLjg5MyAyLjg5MyAwIDAgMS0yLjEyNS0uODc1QTIuODkzIDIuODkzIDAgMCAxIDMgMzZjMC0uODMzLjI5Mi0xLjU0Mi44NzUtMi4xMjVBMi44OTMgMi44OTMgMCAwIDEgNiAzM2MuMzgzIDAgLjc1LjA3IDEuMS4yMTIuMzUuMTQyLjY2Ny4zMzguOTUuNTg4bDcuMDUtNC4xYTEuODQyIDEuODQyIDAgMCAxLS4wNzUtLjMzN0EyLjc0OCAyLjc0OCAwIDAgMSAxNSAyOWMwLS44MzMuMjkyLTEuNTQyLjg3NS0yLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCAyNmMuODMzIDAgMS41NDIuMjkyIDIuMTI1Ljg3NVMyMSAyOC4xNjcgMjEgMjlzLS4yOTIgMS41NDItLjg3NSAyLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCAzMmEyLjkgMi45IDAgMCAxLTEuMS0uMjEzIDMuMjgzIDMuMjgzIDAgMCAxLS45NS0uNTg3TDguOSAzNS4zYy4wMzMuMS4wNTguMjEyLjA3NS4zMzdhMi43NTMgMi43NTMgMCAwIDEgMCAuNzI1IDEuODM4IDEuODM4IDAgMCAxLS4wNzUuMzM4bDcuMDUgNC4xYy4yODMtLjI1LjYtLjQ0Ni45NS0uNTg4LjM1LS4xNDEuNzE3LS4yMTIgMS4xLS4yMTIuODMzIDAgMS41NDIuMjkyIDIuMTI1Ljg3NVMyMSA0Mi4xNjcgMjEgNDNzLS4yOTIgMS41NDItLjg3NSAyLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCA0NlptMC0xNmEuOTcuOTcgMCAwIDAgLjcxMi0uMjg3QS45NjguOTY4IDAgMCAwIDE5IDI5YS45NjguOTY4IDAgMCAwLS4yODgtLjcxM0EuOTY3Ljk2NyAwIDAgMCAxOCAyOGEuOTY3Ljk2NyAwIDAgMC0uNzEyLjI4N0EuOTY4Ljk2OCAwIDAgMCAxNyAyOWMwIC4yODMuMDk2LjUyMS4yODguNzEzQS45NjcuOTY3IDAgMCAwIDE4IDMwWk02IDM3YS45NjguOTY4IDAgMCAwIC43MTMtLjI4OEEuOTY3Ljk2NyAwIDAgMCA3IDM2YS45Ny45NyAwIDAgMC0uMjg3LS43MTNBLjk3Ljk3IDAgMCAwIDYgMzVhLjk3Ljk3IDAgMCAwLS43MTMuMjg3QS45Ny45NyAwIDAgMCA1IDM2YzAgLjI4My4wOTYuNTIuMjg3LjcxMi4xOTIuMTkyLjQzLjI4OC43MTMuMjg4Wm0xMiA3Yy4yODMgMCAuNTItLjA5Ni43MTItLjI4OEEuOTY1Ljk2NSAwIDAgMCAxOSA0M2EuOTY1Ljk2NSAwIDAgMC0uMjg4LS43MTJBLjk2NS45NjUgMCAwIDAgMTggNDJhLjk2NS45NjUgMCAwIDAtLjcxMi4yODhBLjk2NS45NjUgMCAwIDAgMTcgNDNjMCAuMjgzLjA5Ni41Mi4yODguNzEyQS45NjUuOTY1IDAgMCAwIDE4IDQ0WiIvPjwvZz48bWFzayBpZD0iYyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIyNCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTI0IDBoMjR2MjRIMjR6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjYykiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0zMCAyM2MtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMjggMjFWMTBjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNSAxLjkyNSAwIDAgMSAzMCA4aDN2MmgtM3YxMWgxMlYxMGgtM1Y4aDNjLjU1IDAgMS4wMjEuMTk2IDEuNDEzLjU4Ny4zOTEuMzkyLjU4Ny44NjMuNTg3IDEuNDEzdjExYTEuOTMgMS45MyAwIDAgMS0uNTg3IDEuNDEzQTEuOTI4IDEuOTI4IDAgMCAxIDQyIDIzSDMwWm01LTdWNC44MjVsLTEuNiAxLjZMMzIgNWw0LTQgNCA0LTEuNCAxLjQyNS0xLjYtMS42VjE2aC0yWiIvPjwvZz48bWFzayBpZD0iZCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIyNCIgeT0iMjQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0yNCAyNGgyNHYyNEgyNHoiLz48L21hc2s+PGcgbWFzaz0idXJsKCNkKSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI5LjU1IDQzIDI2IDM5LjQ1bDEuNC0xLjQgMi4xMjUgMi4xMjUgNC4yNS00LjI1IDEuNCAxLjQyNUwyOS41NSA0M1ptMC04TDI2IDMxLjQ1bDEuNC0xLjQgMi4xMjUgMi4xMjUgNC4yNS00LjI1IDEuNCAxLjQyNUwyOS41NSAzNVpNMzcgNDF2LTJoOXYyaC05Wm0wLTh2LTJoOXYyaC05WiIvPjwvZz48bWFzayBpZD0iZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSI0OCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTQ4IDBoMjR2MjRINDh6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjZSkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik02MCAyMGMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgNTggMThjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNSAxLjkyNSAwIDAgMSA2MCAxNmMuNTUgMCAxLjAyMS4xOTYgMS40MTMuNTg3LjM5MS4zOTIuNTg3Ljg2My41ODcgMS40MTNzLS4xOTYgMS4wMjEtLjU4NyAxLjQxM0ExLjkyOCAxLjkyOCAwIDAgMSA2MCAyMFptMC02Yy0uNTUgMC0xLjAyLS4xOTYtMS40MTItLjU4OEExLjkyMyAxLjkyMyAwIDAgMSA1OCAxMmMwLS41NS4xOTYtMS4wMjEuNTg4LTEuNDEzQTEuOTI1IDEuOTI1IDAgMCAxIDYwIDEwYy41NSAwIDEuMDIxLjE5NiAxLjQxMy41ODcuMzkxLjM5Mi41ODcuODYzLjU4NyAxLjQxM3MtLjE5NiAxLjAyLS41ODcgMS40MTJBMS45MjcgMS45MjcgMCAwIDEgNjAgMTRabTAtNmMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODhBMS45MjMgMS45MjMgMCAwIDEgNTggNmMwLS41NS4xOTYtMS4wMi41ODgtMS40MTJBMS45MjMgMS45MjMgMCAwIDEgNjAgNGMuNTUgMCAxLjAyMS4xOTYgMS40MTMuNTg4LjM5MS4zOTEuNTg3Ljg2Mi41ODcgMS40MTIgMCAuNTUtLjE5NiAxLjAyLS41ODcgMS40MTJBMS45MjcgMS45MjcgMCAwIDEgNjAgOFoiLz48L2c+PG1hc2sgaWQ9ImYiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iNDgiIHk9IjI0IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIj48cGF0aCBmaWxsPSIjRDlEOUQ5IiBkPSJNNDggMjRoMjR2MjRINDh6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjZikiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik02MCA0NmE5LjczMyA5LjczMyAwIDAgMS0zLjktLjc4OCAxMC4wOTIgMTAuMDkyIDAgMCAxLTMuMTc1LTIuMTM3Yy0uOS0uOS0xLjYxMi0xLjk1OC0yLjEzNy0zLjE3NUE5LjczMyA5LjczMyAwIDAgMSA1MCAzNmE5Ljc0IDkuNzQgMCAwIDEgLjc4OC0zLjkgMTAuMDkyIDEwLjA5MiAwIDAgMSAyLjEzNy0zLjE3NWMuOS0uOSAxLjk1OC0xLjYxMyAzLjE3NS0yLjEzOEE5Ljc0MyA5Ljc0MyAwIDAgMSA2MCAyNmE5Ljc0IDkuNzQgMCAwIDEgMy45Ljc4NyAxMC4xMDUgMTAuMTA1IDAgMCAxIDMuMTc1IDIuMTM4Yy45LjkgMS42MTIgMS45NTggMi4xMzcgMy4xNzVBOS43MzMgOS43MzMgMCAwIDEgNzAgMzZhOS43MzMgOS43MzMgMCAwIDEtLjc4OCAzLjkgMTAuMDkyIDEwLjA5MiAwIDAgMS0yLjEzNyAzLjE3NWMtLjkuOS0xLjk1OCAxLjYxMi0zLjE3NSAyLjEzN0E5LjczMyA5LjczMyAwIDAgMSA2MCA0NlptLTEtMi4wNVY0MmMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgNTcgNDB2LTFsLTQuOC00LjhjLS4wNS4zLS4wOTYuNi0uMTM4LjktLjA0MS4zLS4wNjIuNi0uMDYyLjkgMCAyLjAxNy42NjMgMy43ODMgMS45ODggNS4zczIuOTk1IDIuNCA1LjAxMiAyLjY1Wm02LjktMi41NWMuMzMzLS4zNjcuNjMzLS43NjMuOS0xLjE4OC4yNjctLjQyNS40ODgtLjg2Ni42NjMtMS4zMjVhOC4zMiA4LjMyIDAgMCAwIC40LTEuNDEyQzY3Ljk1NCAzNi45OTIgNjggMzYuNSA2OCAzNmE3Ljg0NyA3Ljg0NyAwIDAgMC0xLjM2Mi00LjQ3NUE3LjcwNCA3LjcwNCAwIDAgMCA2MyAyOC42di40YzAgLjU1LS4xOTYgMS4wMi0uNTg3IDEuNDEyQTEuOTI3IDEuOTI3IDAgMCAxIDYxIDMxaC0ydjJhLjk3Ljk3IDAgMCAxLS4yODcuNzEyQS45NjguOTY4IDAgMCAxIDU4IDM0aC0ydjJoNmEuOTcuOTcgMCAwIDEgLjcxMy4yODdBLjk3Ljk3IDAgMCAxIDYzIDM3djNoMWMuNDMzIDAgLjgyNS4xMjkgMS4xNzUuMzg3LjM1LjI1OS41OTIuNTk2LjcyNSAxLjAxM1oiLz48L2c+PG1hc2sgaWQ9ImciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iNzIiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik03MiAwaDE2djE2SDcyeiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2cpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNODMuMzMzIDE0LjY2N1Y5LjMzM2gtMlY0LjY2N2MwLS45MjMuMzI1LTEuNzA5Ljk3Ni0yLjM1OGEzLjIxIDMuMjEgMCAwIDEgMi4zNTgtLjk3NnYxMy4zMzRoLTEuMzM0Wm0tNi42NjYgMHYtNi4xYTIuNzQ3IDIuNzQ3IDAgMCAxLTEuNDI1LS45MzRBMi40OTUgMi40OTUgMCAwIDEgNzQuNjY3IDZWMS4zMzNINzZWNmguNjY3VjEuMzMzSDc4VjZoLjY2N1YxLjMzM0g4MFY2YzAgLjYyMi0uMTkyIDEuMTY3LS41NzUgMS42MzNBMi43NDcgMi43NDcgMCAwIDEgNzggOC41Njd2Ni4xaC0xLjMzM1oiLz48L2c+PG1hc2sgaWQ9ImgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iNzIiIHk9IjE2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIj48cGF0aCBmaWxsPSIjRDlEOUQ5IiBkPSJNNzIgMTZoMTZ2MTZINzJ6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjaCkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik03OCAxOHYtMS4zMzNoNFYxOGgtNFptMS4zMzMgNy4zMzNoMS4zMzR2LTRoLTEuMzM0djRaTTgwIDMwLjY2N2E1Ljc3IDUuNzcgMCAwIDEtMi4zMjUtLjQ3NSA2LjEzNCA2LjEzNCAwIDAgMS0xLjkwOC0xLjI5MiA2LjEzMyA2LjEzMyAwIDAgMS0xLjI5Mi0xLjkwOEE1Ljc2OSA1Ljc2OSAwIDAgMSA3NCAyNC42NjdjMC0uODIzLjE1OC0xLjU5OC40NzUtMi4zMjZhNi4xMzUgNi4xMzUgMCAwIDEgMS4yOTItMS45MDggNi4xMjQgNi4xMjQgMCAwIDEgMS45MDgtMS4yOTFBNS43NjIgNS43NjIgMCAwIDEgODAgMTguNjY3Yy42ODkgMCAxLjM1LjExIDEuOTgzLjMzM2E2LjQ4IDYuNDggMCAwIDEgMS43ODQuOTY3bC45MzMtLjkzNC45MzMuOTM0LS45MzMuOTMzYy40MjIuNTU2Ljc0NCAxLjE1Ljk2NyAxLjc4My4yMjIuNjM0LjMzMyAxLjI5NS4zMzMgMS45ODRhNS43NiA1Ljc2IDAgMCAxLS40NzUgMi4zMjUgNi4xMzMgNi4xMzMgMCAwIDEtMS4yOTIgMS45MDggNi4xMzQgNi4xMzQgMCAwIDEtMS45MDggMS4yOTIgNS43NyA1Ljc3IDAgMCAxLTIuMzI1LjQ3NVptMC0xLjMzNGMxLjI4OSAwIDIuMzg5LS40NTUgMy4zLTEuMzY2czEuMzY3LTIuMDExIDEuMzY3LTMuM2MwLTEuMjktLjQ1Ni0yLjM5LTEuMzY3LTMuM0M4Mi4zODkgMjAuNDU2IDgxLjI4OSAyMCA4MCAyMGMtMS4yODkgMC0yLjM4OS40NTYtMy4zIDEuMzY3LS45MTEuOTEtMS4zNjcgMi4wMS0xLjM2NyAzLjMgMCAxLjI4OS40NTYgMi4zODkgMS4zNjcgMy4zLjkxMS45MSAyLjAxMSAxLjM2NiAzLjMgMS4zNjZaIi8+PC9nPjxtYXNrIGlkPSJpIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjcyIiB5PSIzMiIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTcyIDMyaDE2djE2SDcyeiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2kpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNNzkuMzMzIDQzLjMzM2gxLjMzNHYtNGgtMS4zMzR2NFpNODAgMzhhLjY0NS42NDUgMCAwIDAgLjQ3NS0uMTkyLjY0NS42NDUgMCAwIDAgLjE5Mi0uNDc1LjY0Ny42NDcgMCAwIDAtLjE5Mi0uNDc1LjY0Ni42NDYgMCAwIDAtLjQ3NS0uMTkxLjY0NC42NDQgMCAwIDAtLjQ3NS4xOTEuNjQ1LjY0NSAwIDAgMC0uMTkyLjQ3NWMwIC4xOS4wNjQuMzQ3LjE5Mi40NzVBLjY0NC42NDQgMCAwIDAgODAgMzhabTAgOC42NjdhNi40ODcgNi40ODcgMCAwIDEtMi42LS41MjYgNi43MjcgNi43MjcgMCAwIDEtMi4xMTctMS40MjRBNi43MjcgNi43MjcgMCAwIDEgNzMuODYgNDIuNmE2LjQ4NyA2LjQ4NyAwIDAgMS0uNTI2LTIuNmMwLS45MjIuMTc1LTEuNzg5LjUyNi0yLjZhNi43MjcgNi43MjcgMCAwIDEgMS40MjQtMi4xMTdjLjYtLjYgMS4zMDYtMS4wNzUgMi4xMTctMS40MjVhNi40OTUgNi40OTUgMCAwIDEgMi42LS41MjVjLjkyMiAwIDEuNzg5LjE3NSAyLjYuNTI1LjgxMS4zNSAxLjUxNy44MjUgMi4xMTcgMS40MjUuNi42IDEuMDc1IDEuMzA2IDEuNDI0IDIuMTE3LjM1LjgxMS41MjYgMS42NzguNTI2IDIuNiAwIC45MjItLjE3NSAxLjc4OS0uNTI2IDIuNmE2LjcyNyA2LjcyNyAwIDAgMS0xLjQyNCAyLjExN2MtLjYuNi0xLjMwNiAxLjA3NS0yLjExNyAxLjQyNGE2LjQ4NyA2LjQ4NyAwIDAgMS0yLjYuNTI2Wm0wLTEuMzM0YzEuNDg5IDAgMi43NS0uNTE2IDMuNzgzLTEuNTUgMS4wMzQtMS4wMzMgMS41NS0yLjI5NCAxLjU1LTMuNzgzIDAtMS40ODktLjUxNi0yLjc1LTEuNTUtMy43ODMtMS4wMzMtMS4wMzQtMi4yOTQtMS41NS0zLjc4My0xLjU1LTEuNDg5IDAtMi43NS41MTYtMy43ODMgMS41NS0xLjAzNCAxLjAzMy0xLjU1IDIuMjk0LTEuNTUgMy43ODMgMCAxLjQ4OS41MTYgMi43NSAxLjU1IDMuNzgzIDEuMDMzIDEuMDM0IDIuMjk0IDEuNTUgMy43ODMgMS41NVoiLz48L2c+PG1hc2sgaWQ9ImoiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iODgiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik04OCAwaDE2djE2SDg4eiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2opIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNOTIuNyAxNC4wMzNjLS4xMjIuMS0uMjUzLjEwNi0uMzkxLjAxNy0uMTQtLjA4OS0uMTgxLS4yMTEtLjEyNi0uMzY3bDEuMjUtNC4wODMtMy4yNS0yLjMzM2MtLjEzMy0uMDktLjE3NS0uMjExLS4xMjQtLjM2Ny4wNS0uMTU2LjE1Mi0uMjMzLjMwOC0uMjMzSDk0LjRMOTUuNjgzIDIuNGMuMDIzLS4wODkuMDY0LS4xNS4xMjYtLjE4M2EuMzkzLjM5MyAwIDAgMSAuMzgzIDBjLjA2LjAzMy4xMDMuMDk0LjEyNS4xODNMOTcuNiA2LjY2N2g0LjAzM2MuMTU2IDAgLjI1OS4wNzcuMzA5LjIzMy4wNS4xNTYuMDA4LjI3OC0uMTI1LjM2N0w5OC41NjcgOS42bDEuMjUgNC4wODNjLjA1NS4xNTYuMDE0LjI3OC0uMTI1LjM2Ny0uMTQuMDg5LS4yNy4wODMtLjM5Mi0uMDE3bC0zLjMtMi41LTMuMyAyLjVabTEuNy0yLjkzM0w5NiA5Ljg2N2wxLjYgMS4yMzMtLjYtMi4wMzNMOTguNSA4aC0xLjg2N0w5NiA1LjkzMyA5NS4zNjcgOEg5My41TDk1IDkuMDY3bC0uNiAyLjAzM1oiLz48L2c+PC9zdmc+"); +} + +.icon.print { + background-position: 0 0; + width: 24px; + height: 24px; +} +.icon.share { + background-position: 0 -24px; + width: 24px; + height: 24px; +} +.icon.iosshare { + background-position: -24px 0; + width: 24px; + height: 24px; +} +.icon.checklist { + background-position: -24px -24px; + width: 24px; + height: 24px; +} +.icon.more { + background-position: -48px 0; + width: 24px; + height: 24px; +} +.icon.public { + background-position: -48px -24px; + width: 24px; + height: 24px; +} +.icon.servings { + background-position: -72px 0; + width: 16px; + height: 16px; +} +.icon.timer { + background-position: -72px -16px; + width: 16px; + height: 16px; +} +.icon.info { + background-position: -72px -32px; + width: 16px; + height: 16px; +} +.icon.rating { + background-position: -88px 0; + width: 16px; + height: 16px; +} + +@media (prefers-color-scheme: dark) { + body { + --text-color:white; + --opaque-text-color:white; + --hover-background-color:rgba(255,255,255, 0.14); + --background-color:#222; + --disabled-text-color: + rgba(255,255,255, 0.54); + } + .icon { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDQiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDQgNDgiPjxtYXNrIGlkPSJhIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjAiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L21hc2s+PGcgbWFzaz0idXJsKCNhKSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2IDhWNUg4djNINlYzaDEydjVoLTJabTIgNC41Yy4yODMgMCAuNTItLjA5Ni43MTItLjI4OEEuOTY1Ljk2NSAwIDAgMCAxOSAxMS41YS45NjguOTY4IDAgMCAwLS4yODgtLjcxM0EuOTY3Ljk2NyAwIDAgMCAxOCAxMC41YS45NjcuOTY3IDAgMCAwLS43MTIuMjg3Ljk2OC45NjggMCAwIDAtLjI4OC43MTNjMCAuMjgzLjA5Ni41Mi4yODguNzEyQS45NjUuOTY1IDAgMCAwIDE4IDEyLjVaTTE2IDE5di00SDh2NGg4Wm0yIDJINnYtNEgydi02YzAtLjg1LjI5Mi0xLjU2Mi44NzUtMi4xMzdTNC4xNjcgOCA1IDhoMTRjLjg1IDAgMS41NjMuMjg4IDIuMTM4Ljg2M1MyMiAxMC4xNSAyMiAxMXY2aC00djRabTItNnYtNGEuOTY4Ljk2OCAwIDAgMC0uMjg4LS43MTNBLjk2Ny45NjcgMCAwIDAgMTkgMTBINWEuOTcuOTcgMCAwIDAtLjcxMy4yODdBLjk3Ljk3IDAgMCAwIDQgMTF2NGgydi0yaDEydjJoMloiLz48L2c+PG1hc2sgaWQ9ImIiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMCIgeT0iMjQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0wIDI0aDI0djI0SDB6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjYikiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOCA0NmEyLjg5MyAyLjg5MyAwIDAgMS0yLjEyNS0uODc1QTIuODkzIDIuODkzIDAgMCAxIDE1IDQzYzAtLjExNy4wMDgtLjIzOC4wMjUtLjM2M3MuMDQyLS4yMzcuMDc1LS4zMzdsLTcuMDUtNC4xYy0uMjgzLjI1LS42LjQ0Ni0uOTUuNTg3QTIuOSAyLjkgMCAwIDEgNiAzOWEyLjg5MyAyLjg5MyAwIDAgMS0yLjEyNS0uODc1QTIuODkzIDIuODkzIDAgMCAxIDMgMzZjMC0uODMzLjI5Mi0xLjU0Mi44NzUtMi4xMjVBMi44OTMgMi44OTMgMCAwIDEgNiAzM2MuMzgzIDAgLjc1LjA3IDEuMS4yMTIuMzUuMTQyLjY2Ny4zMzguOTUuNTg4bDcuMDUtNC4xYTEuODQyIDEuODQyIDAgMCAxLS4wNzUtLjMzN0EyLjc0OCAyLjc0OCAwIDAgMSAxNSAyOWMwLS44MzMuMjkyLTEuNTQyLjg3NS0yLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCAyNmMuODMzIDAgMS41NDIuMjkyIDIuMTI1Ljg3NVMyMSAyOC4xNjcgMjEgMjlzLS4yOTIgMS41NDItLjg3NSAyLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCAzMmEyLjkgMi45IDAgMCAxLTEuMS0uMjEzIDMuMjgzIDMuMjgzIDAgMCAxLS45NS0uNTg3TDguOSAzNS4zYy4wMzMuMS4wNTguMjEyLjA3NS4zMzdhMi43NTMgMi43NTMgMCAwIDEgMCAuNzI1IDEuODM4IDEuODM4IDAgMCAxLS4wNzUuMzM4bDcuMDUgNC4xYy4yODMtLjI1LjYtLjQ0Ni45NS0uNTg4LjM1LS4xNDEuNzE3LS4yMTIgMS4xLS4yMTIuODMzIDAgMS41NDIuMjkyIDIuMTI1Ljg3NVMyMSA0Mi4xNjcgMjEgNDNzLS4yOTIgMS41NDItLjg3NSAyLjEyNUEyLjg5MyAyLjg5MyAwIDAgMSAxOCA0NlptMC0xNmEuOTcuOTcgMCAwIDAgLjcxMi0uMjg3QS45NjguOTY4IDAgMCAwIDE5IDI5YS45NjguOTY4IDAgMCAwLS4yODgtLjcxM0EuOTY3Ljk2NyAwIDAgMCAxOCAyOGEuOTY3Ljk2NyAwIDAgMC0uNzEyLjI4N0EuOTY4Ljk2OCAwIDAgMCAxNyAyOWMwIC4yODMuMDk2LjUyMS4yODguNzEzQS45NjcuOTY3IDAgMCAwIDE4IDMwWk02IDM3YS45NjguOTY4IDAgMCAwIC43MTMtLjI4OEEuOTY3Ljk2NyAwIDAgMCA3IDM2YS45Ny45NyAwIDAgMC0uMjg3LS43MTNBLjk3Ljk3IDAgMCAwIDYgMzVhLjk3Ljk3IDAgMCAwLS43MTMuMjg3QS45Ny45NyAwIDAgMCA1IDM2YzAgLjI4My4wOTYuNTIuMjg3LjcxMi4xOTIuMTkyLjQzLjI4OC43MTMuMjg4Wm0xMiA3Yy4yODMgMCAuNTItLjA5Ni43MTItLjI4OEEuOTY1Ljk2NSAwIDAgMCAxOSA0M2EuOTY1Ljk2NSAwIDAgMC0uMjg4LS43MTJBLjk2NS45NjUgMCAwIDAgMTggNDJhLjk2NS45NjUgMCAwIDAtLjcxMi4yODhBLjk2NS45NjUgMCAwIDAgMTcgNDNjMCAuMjgzLjA5Ni41Mi4yODguNzEyQS45NjUuOTY1IDAgMCAwIDE4IDQ0WiIvPjwvZz48bWFzayBpZD0iYyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIyNCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTI0IDBoMjR2MjRIMjR6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjYykiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zMCAyM2MtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMjggMjFWMTBjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNSAxLjkyNSAwIDAgMSAzMCA4aDN2MmgtM3YxMWgxMlYxMGgtM1Y4aDNjLjU1IDAgMS4wMjEuMTk2IDEuNDEzLjU4Ny4zOTEuMzkyLjU4Ny44NjMuNTg3IDEuNDEzdjExYTEuOTMgMS45MyAwIDAgMS0uNTg3IDEuNDEzQTEuOTI4IDEuOTI4IDAgMCAxIDQyIDIzSDMwWm01LTdWNC44MjVsLTEuNiAxLjZMMzIgNWw0LTQgNCA0LTEuNCAxLjQyNS0xLjYtMS42VjE2aC0yWiIvPjwvZz48bWFzayBpZD0iZCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIyNCIgeT0iMjQiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik0yNCAyNGgyNHYyNEgyNHoiLz48L21hc2s+PGcgbWFzaz0idXJsKCNkKSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI5LjU1IDQzIDI2IDM5LjQ1bDEuNC0xLjQgMi4xMjUgMi4xMjUgNC4yNS00LjI1IDEuNCAxLjQyNUwyOS41NSA0M1ptMC04TDI2IDMxLjQ1bDEuNC0xLjQgMi4xMjUgMi4xMjUgNC4yNS00LjI1IDEuNCAxLjQyNUwyOS41NSAzNVpNMzcgNDF2LTJoOXYyaC05Wm0wLTh2LTJoOXYyaC05WiIvPjwvZz48bWFzayBpZD0iZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSI0OCIgeT0iMCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTQ4IDBoMjR2MjRINDh6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjZSkiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik02MCAyMGMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgNTggMThjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNSAxLjkyNSAwIDAgMSA2MCAxNmMuNTUgMCAxLjAyMS4xOTYgMS40MTMuNTg3LjM5MS4zOTIuNTg3Ljg2My41ODcgMS40MTNzLS4xOTYgMS4wMjEtLjU4NyAxLjQxM0ExLjkyOCAxLjkyOCAwIDAgMSA2MCAyMFptMC02Yy0uNTUgMC0xLjAyLS4xOTYtMS40MTItLjU4OEExLjkyMyAxLjkyMyAwIDAgMSA1OCAxMmMwLS41NS4xOTYtMS4wMjEuNTg4LTEuNDEzQTEuOTI1IDEuOTI1IDAgMCAxIDYwIDEwYy41NSAwIDEuMDIxLjE5NiAxLjQxMy41ODcuMzkxLjM5Mi41ODcuODYzLjU4NyAxLjQxM3MtLjE5NiAxLjAyLS41ODcgMS40MTJBMS45MjcgMS45MjcgMCAwIDEgNjAgMTRabTAtNmMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODhBMS45MjMgMS45MjMgMCAwIDEgNTggNmMwLS41NS4xOTYtMS4wMi41ODgtMS40MTJBMS45MjMgMS45MjMgMCAwIDEgNjAgNGMuNTUgMCAxLjAyMS4xOTYgMS40MTMuNTg4LjM5MS4zOTEuNTg3Ljg2Mi41ODcgMS40MTIgMCAuNTUtLjE5NiAxLjAyLS41ODcgMS40MTJBMS45MjcgMS45MjcgMCAwIDEgNjAgOFoiLz48L2c+PG1hc2sgaWQ9ImYiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iNDgiIHk9IjI0IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIj48cGF0aCBmaWxsPSIjRDlEOUQ5IiBkPSJNNDggMjRoMjR2MjRINDh6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjZikiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik02MCA0NmE5LjczMyA5LjczMyAwIDAgMS0zLjktLjc4OCAxMC4wOTIgMTAuMDkyIDAgMCAxLTMuMTc1LTIuMTM3Yy0uOS0uOS0xLjYxMi0xLjk1OC0yLjEzNy0zLjE3NUE5LjczMyA5LjczMyAwIDAgMSA1MCAzNmE5Ljc0IDkuNzQgMCAwIDEgLjc4OC0zLjkgMTAuMDkyIDEwLjA5MiAwIDAgMSAyLjEzNy0zLjE3NWMuOS0uOSAxLjk1OC0xLjYxMyAzLjE3NS0yLjEzOEE5Ljc0MyA5Ljc0MyAwIDAgMSA2MCAyNmE5Ljc0IDkuNzQgMCAwIDEgMy45Ljc4NyAxMC4xMDUgMTAuMTA1IDAgMCAxIDMuMTc1IDIuMTM4Yy45LjkgMS42MTIgMS45NTggMi4xMzcgMy4xNzVBOS43MzMgOS43MzMgMCAwIDEgNzAgMzZhOS43MzMgOS43MzMgMCAwIDEtLjc4OCAzLjkgMTAuMDkyIDEwLjA5MiAwIDAgMS0yLjEzNyAzLjE3NWMtLjkuOS0xLjk1OCAxLjYxMi0zLjE3NSAyLjEzN0E5LjczMyA5LjczMyAwIDAgMSA2MCA0NlptLTEtMi4wNVY0MmMtLjU1IDAtMS4wMi0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgNTcgNDB2LTFsLTQuOC00LjhjLS4wNS4zLS4wOTYuNi0uMTM4LjktLjA0MS4zLS4wNjIuNi0uMDYyLjkgMCAyLjAxNy42NjMgMy43ODMgMS45ODggNS4zczIuOTk1IDIuNCA1LjAxMiAyLjY1Wm02LjktMi41NWMuMzMzLS4zNjcuNjMzLS43NjMuOS0xLjE4OC4yNjctLjQyNS40ODgtLjg2Ni42NjMtMS4zMjVhOC4zMiA4LjMyIDAgMCAwIC40LTEuNDEyQzY3Ljk1NCAzNi45OTIgNjggMzYuNSA2OCAzNmE3Ljg0NyA3Ljg0NyAwIDAgMC0xLjM2Mi00LjQ3NUE3LjcwNCA3LjcwNCAwIDAgMCA2MyAyOC42di40YzAgLjU1LS4xOTYgMS4wMi0uNTg3IDEuNDEyQTEuOTI3IDEuOTI3IDAgMCAxIDYxIDMxaC0ydjJhLjk3Ljk3IDAgMCAxLS4yODcuNzEyQS45NjguOTY4IDAgMCAxIDU4IDM0aC0ydjJoNmEuOTcuOTcgMCAwIDEgLjcxMy4yODdBLjk3Ljk3IDAgMCAxIDYzIDM3djNoMWMuNDMzIDAgLjgyNS4xMjkgMS4xNzUuMzg3LjM1LjI1OS41OTIuNTk2LjcyNSAxLjAxM1oiLz48L2c+PG1hc2sgaWQ9ImciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iNzIiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik03MiAwaDE2djE2SDcyeiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2cpIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNODMuMzMzIDE0LjY2N1Y5LjMzM2gtMlY0LjY2N2MwLS45MjMuMzI1LTEuNzA5Ljk3Ni0yLjM1OGEzLjIxIDMuMjEgMCAwIDEgMi4zNTgtLjk3NnYxMy4zMzRoLTEuMzM0Wm0tNi42NjYgMHYtNi4xYTIuNzQ3IDIuNzQ3IDAgMCAxLTEuNDI1LS45MzRBMi40OTUgMi40OTUgMCAwIDEgNzQuNjY3IDZWMS4zMzNINzZWNmguNjY3VjEuMzMzSDc4VjZoLjY2N1YxLjMzM0g4MFY2YzAgLjYyMi0uMTkyIDEuMTY3LS41NzUgMS42MzNBMi43NDcgMi43NDcgMCAwIDEgNzggOC41Njd2Ni4xaC0xLjMzM1oiLz48L2c+PG1hc2sgaWQ9ImgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iNzIiIHk9IjE2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIj48cGF0aCBmaWxsPSIjRDlEOUQ5IiBkPSJNNzIgMTZoMTZ2MTZINzJ6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjaCkiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03OCAxOHYtMS4zMzNoNFYxOGgtNFptMS4zMzMgNy4zMzNoMS4zMzR2LTRoLTEuMzM0djRaTTgwIDMwLjY2N2E1Ljc3IDUuNzcgMCAwIDEtMi4zMjUtLjQ3NSA2LjEzNCA2LjEzNCAwIDAgMS0xLjkwOC0xLjI5MiA2LjEzMyA2LjEzMyAwIDAgMS0xLjI5Mi0xLjkwOEE1Ljc2OSA1Ljc2OSAwIDAgMSA3NCAyNC42NjdjMC0uODIzLjE1OC0xLjU5OC40NzUtMi4zMjZhNi4xMzUgNi4xMzUgMCAwIDEgMS4yOTItMS45MDggNi4xMjQgNi4xMjQgMCAwIDEgMS45MDgtMS4yOTFBNS43NjIgNS43NjIgMCAwIDEgODAgMTguNjY3Yy42ODkgMCAxLjM1LjExIDEuOTgzLjMzM2E2LjQ4IDYuNDggMCAwIDEgMS43ODQuOTY3bC45MzMtLjkzNC45MzMuOTM0LS45MzMuOTMzYy40MjIuNTU2Ljc0NCAxLjE1Ljk2NyAxLjc4My4yMjIuNjM0LjMzMyAxLjI5NS4zMzMgMS45ODRhNS43NiA1Ljc2IDAgMCAxLS40NzUgMi4zMjUgNi4xMzMgNi4xMzMgMCAwIDEtMS4yOTIgMS45MDggNi4xMzQgNi4xMzQgMCAwIDEtMS45MDggMS4yOTIgNS43NyA1Ljc3IDAgMCAxLTIuMzI1LjQ3NVptMC0xLjMzNGMxLjI4OSAwIDIuMzg5LS40NTUgMy4zLTEuMzY2czEuMzY3LTIuMDExIDEuMzY3LTMuM2MwLTEuMjktLjQ1Ni0yLjM5LTEuMzY3LTMuM0M4Mi4zODkgMjAuNDU2IDgxLjI4OSAyMCA4MCAyMGMtMS4yODkgMC0yLjM4OS40NTYtMy4zIDEuMzY3LS45MTEuOTEtMS4zNjcgMi4wMS0xLjM2NyAzLjMgMCAxLjI4OS40NTYgMi4zODkgMS4zNjcgMy4zLjkxMS45MSAyLjAxMSAxLjM2NiAzLjMgMS4zNjZaIi8+PC9nPjxtYXNrIGlkPSJpIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjcyIiB5PSIzMiIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSI+PHBhdGggZmlsbD0iI0Q5RDlEOSIgZD0iTTcyIDMyaDE2djE2SDcyeiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2kpIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNzkuMzMzIDQzLjMzM2gxLjMzNHYtNGgtMS4zMzR2NFpNODAgMzhhLjY0NS42NDUgMCAwIDAgLjQ3NS0uMTkyLjY0NS42NDUgMCAwIDAgLjE5Mi0uNDc1LjY0Ny42NDcgMCAwIDAtLjE5Mi0uNDc1LjY0Ni42NDYgMCAwIDAtLjQ3NS0uMTkxLjY0NC42NDQgMCAwIDAtLjQ3NS4xOTEuNjQ1LjY0NSAwIDAgMC0uMTkyLjQ3NWMwIC4xOS4wNjQuMzQ3LjE5Mi40NzVBLjY0NC42NDQgMCAwIDAgODAgMzhabTAgOC42NjdhNi40ODcgNi40ODcgMCAwIDEtMi42LS41MjYgNi43MjcgNi43MjcgMCAwIDEtMi4xMTctMS40MjRBNi43MjcgNi43MjcgMCAwIDEgNzMuODYgNDIuNmE2LjQ4NyA2LjQ4NyAwIDAgMS0uNTI2LTIuNmMwLS45MjIuMTc1LTEuNzg5LjUyNi0yLjZhNi43MjcgNi43MjcgMCAwIDEgMS40MjQtMi4xMTdjLjYtLjYgMS4zMDYtMS4wNzUgMi4xMTctMS40MjVhNi40OTUgNi40OTUgMCAwIDEgMi42LS41MjVjLjkyMiAwIDEuNzg5LjE3NSAyLjYuNTI1LjgxMS4zNSAxLjUxNy44MjUgMi4xMTcgMS40MjUuNi42IDEuMDc1IDEuMzA2IDEuNDI0IDIuMTE3LjM1LjgxMS41MjYgMS42NzguNTI2IDIuNiAwIC45MjItLjE3NSAxLjc4OS0uNTI2IDIuNmE2LjcyNyA2LjcyNyAwIDAgMS0xLjQyNCAyLjExN2MtLjYuNi0xLjMwNiAxLjA3NS0yLjExNyAxLjQyNGE2LjQ4NyA2LjQ4NyAwIDAgMS0yLjYuNTI2Wm0wLTEuMzM0YzEuNDg5IDAgMi43NS0uNTE2IDMuNzgzLTEuNTUgMS4wMzQtMS4wMzMgMS41NS0yLjI5NCAxLjU1LTMuNzgzIDAtMS40ODktLjUxNi0yLjc1LTEuNTUtMy43ODMtMS4wMzMtMS4wMzQtMi4yOTQtMS41NS0zLjc4My0xLjU1LTEuNDg5IDAtMi43NS41MTYtMy43ODMgMS41NS0xLjAzNCAxLjAzMy0xLjU1IDIuMjk0LTEuNTUgMy43ODMgMCAxLjQ4OS41MTYgMi43NSAxLjU1IDMuNzgzIDEuMDMzIDEuMDM0IDIuMjk0IDEuNTUgMy43ODMgMS41NVoiLz48L2c+PG1hc2sgaWQ9ImoiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iODgiIHk9IjAiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiPjxwYXRoIGZpbGw9IiNEOUQ5RDkiIGQ9Ik04OCAwaDE2djE2SDg4eiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2opIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOTIuNyAxNC4wMzNjLS4xMjIuMS0uMjUzLjEwNi0uMzkxLjAxNy0uMTQtLjA4OS0uMTgxLS4yMTEtLjEyNi0uMzY3bDEuMjUtNC4wODMtMy4yNS0yLjMzM2MtLjEzMy0uMDktLjE3NS0uMjExLS4xMjQtLjM2Ny4wNS0uMTU2LjE1Mi0uMjMzLjMwOC0uMjMzSDk0LjRMOTUuNjgzIDIuNGMuMDIzLS4wODkuMDY0LS4xNS4xMjYtLjE4M2EuMzkzLjM5MyAwIDAgMSAuMzgzIDBjLjA2LjAzMy4xMDMuMDk0LjEyNS4xODNMOTcuNiA2LjY2N2g0LjAzM2MuMTU2IDAgLjI1OS4wNzcuMzA5LjIzMy4wNS4xNTYuMDA4LjI3OC0uMTI1LjM2N0w5OC41NjcgOS42bDEuMjUgNC4wODNjLjA1NS4xNTYuMDE0LjI3OC0uMTI1LjM2Ny0uMTQuMDg5LS4yNy4wODMtLjM5Mi0uMDE3bC0zLjMtMi41LTMuMyAyLjVabTEuNy0yLjkzM0w5NiA5Ljg2N2wxLjYgMS4yMzMtLjYtMi4wMzNMOTguNSA4aC0xLjg2N0w5NiA1LjkzMyA5NS4zNjcgOEg5My41TDk1IDkuMDY3bC0uNiAyLjAzM1oiLz48L2c+PC9zdmc+"); + } +} + + +.headerflex { + display: flex; + clear: both; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 1em; } \ No newline at end of file diff --git a/docs/render/recipe.js b/docs/render/recipe.js index aa1cf13..66ae54c 100644 --- a/docs/render/recipe.js +++ b/docs/render/recipe.js @@ -1,4 +1,4 @@ -let reformat = true; +let reformat = false; let FRACTION_MAP = { '1/4': '\u00BC', @@ -24,7 +24,7 @@ let FRACTION_MAP = { } let ignoredTerms = [ - "with", "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", + "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" ] @@ -46,10 +46,10 @@ window.addEventListener("mouseover", (e) => { } } }) + window.addEventListener("mouseout", (e) => { let target = e.target; - if (target.classList.contains("noun")) { let els = document.querySelectorAll("#" + e.target.id); @@ -129,6 +129,7 @@ function formatTime(time) { } function markIngredient(e) { + if (e.target.classList.contains("noun")) return; e.target.closest(".ingredient").classList.toggle("complete") } @@ -137,6 +138,7 @@ function highlightStep(e) { // e.target.parent.children.forEach((i,el) => { // el.classList.toggle("complete", ) // } + if (e.target.classList.contains("noun")) return; e.target.closest("li").classList.toggle("complete") } @@ -163,6 +165,13 @@ function highlightTerms(string, terms) { return string.replace(pattern, match => `${match}`); } +function highlightTimes(string) { + const pattern = /([0-9]+) ?(minutes|hours)/g; + return string.replace(pattern, match => { + return `${match}` + }); +} + function share() { parent.postMessage({share:{}}, "*"); } @@ -236,7 +245,7 @@ function render() { if (!text) return; return m("li", { onclick: highlightStep }, m("span.number" + (step>9 ? ".big" : ""), `${step++}`), - m("span.substep",{innerHTML:highlightTerms(FRACTION_MAP.replace(text.trim()), terms)})) + m("span.substep",{innerHTML:highlightTimes(highlightTerms(FRACTION_MAP.replace(text.trim()), terms))})) } function flattenInstructions(instruction) { @@ -251,6 +260,7 @@ function render() { let text = (instruction.text || instruction); + console.log() if (reformat) { text = text.match( /[0-9\. ]{0,6}[^\.!\?]+[\.!\?]+/g ); } else { @@ -301,37 +311,41 @@ function render() { image ? m("#thumbnail-container", m("#thumbnail.thumbnail.print-hide", { style: "background-image:url(" + ");" })) : null, m(".recipe-content", m("header", - m("a", {href:originalURL, target:"_blank"}, + m("a.publisherlink", {href:originalURL, target:"_blank"}, m("img.publisher", { src: json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url }), ), - m("h1", title), - m(".metadata", - (recipeYield) ? m("div", m("span.yield", m(".icon.material-icons-outlined", "restaurant"), recipeYield)) : null, - json.totalTime ? m(".time", - m(".icon.material-icons-outlined", "timer"), + m(".headerflex", + m(".headerleft", + m("h1", title), + m(".metadata", + (recipeYield) ? m("div", m("span.yield", m(".icon.servings"), recipeYield)) : null, + json.totalTime ? m(".time", + m(".icon.timer"), - json.totalTime ? m("span", formatTime(json.totalTime)) : undefined, - // " (", - // json.prepTime ? m("span", formatTime(json.prepTime), " prep") : undefined, - // json.cookTime ? m("span", ", ", formatTime(json.cookTime), " cook") : undefined, - // ")" - ) : null, - (rating) ? m("div.rating", - m(".icon.material-icons-outlined", "grade"), - parseFloat(rating.ratingValue).toFixed(1), " ", - // ratingCount ? m("span.count", ratingCount.toString()) : null - ) - : null, - json.nutrition?.calories ? - m("div", m(".icon.material-icons-outlined", "info"), - (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, + json.totalTime ? m("span", formatTime(json.totalTime)) : undefined, + // " (", + // json.prepTime ? m("span", formatTime(json.prepTime), " prep") : undefined, + // json.cookTime ? m("span", ", ", formatTime(json.cookTime), " cook") : undefined, + // ")" + ) : null, + (rating) ? m("div.rating", + m(".icon.rating"), + parseFloat(rating.ratingValue).toFixed(1), " ", + // ratingCount ? m("span.count", ratingCount.toString()) : null + ) + : null, + json.nutrition?.calories ? + m("div", m(".icon.info"), + (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, - m("div.spacer"), + // m("div.spacer"), + ), + ), m(".actions.print-hide", - originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.material-icons-outlined", "public")) : null, - m("a.action", { title:"Share", onclick: share}, m(".icon.material-icons-outlined", "share")), - m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.material-icons-outlined", "notes")), - m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.material-icons-outlined", "print")), + originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.public")) : null, + m("a.action", { title:"Share", onclick: share}, m(".icon.share")), + m("a.action", { title:"Show steps as list", onclick: () => {reformat = !reformat; render(); return false;}}, m(".icon.checklist")), + m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.print")), ) ), description ? m(".description", {innerHTML:description}, @@ -351,7 +365,6 @@ function render() { var path = window.script.substring(0, window.script.lastIndexOf(".")); var cssURL = path + ".css"; -loadSyle("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined") -.then(() => loadSyle(cssURL)).then(render); +loadSyle(cssURL).then(render);