diff --git a/docs/render/recipe.css b/docs/render/recipe.css index 09ecda0..03f8100 100644 --- a/docs/render/recipe.css +++ b/docs/render/recipe.css @@ -9,7 +9,7 @@ body { --text-color: rgba(0,0,0,0.87); - --opaque-text-color:black; + --strong-text-color:black; --disabled-text-color: rgba(16, 12, 12, 0.54); --hover-background-color: @@ -17,8 +17,7 @@ body { --image-placeholder-color: var(--hover-background-color); --background-color:white; ---alt-text-color: - rgb(0, 33, 49); + --accent-color:#D42A20; } .thumbnail { @@ -180,6 +179,7 @@ span.number { /* line-height: 16px; */ opacity: 1; user-select: none; + color:var(--accent-color) /* background: black; */ } @@ -284,7 +284,7 @@ li:hover { .noun { font-weight: 700; - color: var(--alt-text-color); + color: var(--strong-text-color); } li:hover .noun { @@ -310,12 +310,16 @@ li:hover .noun { /* display: inline; */ } .ingredient { - padding: .33em 0em; - margin: 0 0em 0 -3em; - line-height: 1.25em; + padding: .4em 0.4em; + margin: 0 -.4em 1em -.4em; + line-height: 1em; /* opacity: 0.75; */ cursor: pointer; - padding-left: 3em; + margin-bottom:0.2em; +} +.hanging .ingredient { + margin-left:-3em; + padding-left: 3rem; } .ingredients .yield { @@ -324,7 +328,7 @@ li:hover .noun { text-transform: uppercase; margin-left:2em; } -.ingredients .quantity { +.ingredients.hanging .quantity { float: left; margin-left: -3rem; @@ -375,11 +379,13 @@ hr { margin-left: auto; } -a.action { - justify-content: center;border-radius:50%; +.action { + justify-content: center; + border-radius:50%; cursor: pointer; width: 44px; height: 44px; + color: var(--accent-color); /* display: flex; align-items: center; justify-content: center; */ @@ -391,16 +397,19 @@ a.action { align-items: center; } -a.action:hover { +.action:hover { background-color:var(--hover-background-color); + color:var(--strong-text-color) } -a.action:hover:not(:active) .icon { +.action:hover:not(:active) .icon { opacity:1.0; } -a.action .icon { +.action .icon { margin-right: 0; - opacity: 0.5; + /* opacity: 0.5; */ + width: 24px; + height: 24px; } @media screen and (max-width: 520px) { @@ -424,7 +433,7 @@ a.action .icon { .ingredient, .instructions, header { - padding: 0 0em; + /* padding: 0 .4em; */ } .ingredients { @@ -438,18 +447,18 @@ a.action .icon { display:none; } - .ingredient { + .hanging .ingredient { margin: 0; - margin-left: 3rem; - margin-bottom:0.67em; + /* margin-left: 3rem; */ + /* margin-bottom:0.67em; */ } + + .ingredients .yield { margin-left:3em; } - .ingredient .quantity { - /* text-align:left; */ - } + .instructions hr:first-child { display:none; @@ -461,17 +470,17 @@ a.action .icon { } .metadata .icon { - font-size: 15px; + /* font-size: 15px; */ vertical-align: middle; margin-top: -3px; margin-right: 4px; opacity: .6; - color: - transparent; + /* color: + transparent; */ user-select: none; /* float: left; */ display: inline-block; - -webkit-print-color-adjust: exact; + /* -webkit-print-color-adjust: exact; */ } @@ -494,6 +503,9 @@ a.action .icon { } @media not print { + body { + color:var(--text-color); + } .print-show { display:none; } @@ -518,7 +530,10 @@ img.qr { transform: none !important; } } - +.recipe-content { + max-width:50em; + padding: 1em 0; +} @media screen and (min-width: 1200px) { body { width:auto; @@ -550,22 +565,18 @@ img.qr { padding: 2em 4em; background-color: var(--background-color); margin-top: 35vh; + margin-bottom: 35vh; } } - -.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; + /* background-position: 0 -24px; */ width: 24px; height: 24px; } @@ -585,9 +596,10 @@ img.qr { height: 24px; } .icon.public { - background-position: -48px -24px; - width: 24px; - height: 24px; + /* background-position: -48px -24px; */ + /* width: 24px; */ + /* height: 24px; */ + /* border: 1px solid black; */ } .icon.servings { background-position: -72px 0; @@ -613,12 +625,12 @@ img.qr { @media (prefers-color-scheme: dark) { body { --text-color:white; - --opaque-text-color:white; + --strong-text-color:white; --hover-background-color:rgba(255,255,255, 0.14); --background-color:#222; --disabled-text-color: rgba(255,255,255, 0.54); - --alt-text-color:rgba(255,255,255, 0.7); + --accent-color:rgba(255,255,255, 0.7); } .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+"); @@ -641,7 +653,7 @@ hr:first-child { } span.number:after { - content: "."; + /* content: "."; */ } .ingredient .noun { @@ -658,7 +670,7 @@ section.ingredients caption { margin-bottom: 1.3rem; } -.ingredient .quantity:after { +.hanging .ingredient .quantity:after { content: "\00a0\00a0"; } diff --git a/docs/render/recipe.js b/docs/render/recipe.js index 1d52ff1..046ed3e 100644 --- a/docs/render/recipe.js +++ b/docs/render/recipe.js @@ -24,7 +24,7 @@ let FRACTION_MAP = { } let ignoredTerms = [ - "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", + "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 = { @@ -118,6 +118,10 @@ let emojiMap = { "dango": "🍡", "dumpling": "🥟", "oyster": "🦪", + "octopus": "🐙", + "fish": "🐟", + "salmon": "🐟", + "tuna": "🐟", "soft ice cream": "🍦", "shaved ice": "🍧", "ice cream": "🍨", @@ -150,8 +154,20 @@ let emojiMap = { "frozen": "🧊", "chopsticks": "🥢", "fork and knife": "🍴", - "spoon": "🥄" - + "spoon": "🥄" +} + +let icons = { + public:(''), + share_android:(''), + share:(` + + `), + print:(``), + checklist:(''), + servings:(''), + timer:(''), + rating:('') } const replacements = { @@ -515,6 +531,12 @@ function render() { thumbnail.style.filter = `blur(${thumbnailContainer.offsetHeight / bgImg.naturalHeight * 1}px)`; thumbnail.style.transform = `scale(1.1)`; setTimeout(() => thumbnail.style.opacity = 1.0, 100); + if (window.scrollY == 0) setTimeout(() => { + const yOffset = -10; + const element = document.querySelector('.recipe-content'); + const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset; + window.scrollTo({top: y, behavior: 'smooth'}); + }, 1000) }; bgImg.src = image; @@ -534,9 +556,9 @@ function render() { m(".headerleft", m("h1", title), m(".metadata", - (recipeYield) ? m("div", m("span.yield", m(".icon.servings"), recipeYield)) : null, + (recipeYield) ? m("div", m("span.yield", m(".icon.servings", {innerHTML:icons.servings}), recipeYield)) : null, json.totalTime ? m(".time", - m(".icon.time"), + m(".icon.time", {innerHTML:icons.timer}), json.totalTime ? m("span", formatTime(json.totalTime)) : undefined, // " (", @@ -545,23 +567,23 @@ function render() { // ")" ) : null, (rating) ? m("div.rating", - m(".icon.rating"), + m(".icon.rating", {innerHTML:icons.rating}), parseFloat(rating.ratingValue).toFixed(1), " ", // ratingCount ? m("span.count", ratingCount.toString()) : null ) : null, json.nutrition?.calories ? - m("div", m(".icon.info"), + m("div", m(".icon.info", {innerHTML:icons.info}), (json.nutrition?.calories.toString().replace("calories", "Cal").replace("kcal", "Cal")) + (isNaN(json.nutrition?.calories) ? '' : ' Cal')) : null, // m("div.spacer"), ), ), m(".actions.print-hide", - 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")), + originalURL ? m("a.action", { title:"Open original", href: originalURL, target:"_blank"}, m(".icon.public", {innerHTML:icons.public})) : null, + m("a.action", { title:"Share", onclick: share}, m(".icon.share", {innerHTML:icons.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")), + m("a.action", { title:"Print", onclick: () => {window.print(); return false;} }, m(".icon.print", {innerHTML:icons.print})), ) ), description ? m(".description", {innerHTML:description}, @@ -572,7 +594,7 @@ function render() { ), m(".columns", m("section.ingredients", - m("caption.ingredients-title", "Ingredients"), + m("caption.ingredients-title", {onclick:(e) => {e.target.closest("section").classList.toggle("hanging")}},"Ingredients"), ingredients, qrImage ? m("img.qr.print-show", {src:qrImage}) : null ), @@ -593,3 +615,26 @@ var cssURL = path + ".css"; loadSyle(cssURL).then(render); + +function keepAwake() { + let ctx = null; + let bufferSize = 2 * ctx.sampleRate, + emptyBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate), + output = emptyBuffer.getChannelData(0); + + for(let i = 0; i < bufferSize; i++) output[i] = 0; + + let source = ctx.createBufferSource(); + source.buffer = emptyBuffer; + source.loop = true; + + let node = ctx.createMediaStreamDestination(); + source.connect(node); + + let audio = document.createElement("audio"); + audio.style.display = "none"; + document.body.appendChild(audio); + + audio.srcObject = node.stream; + audio.play(); +}