html { overflow-y: scroll; /* force scrollbar to appear to stop elements jumping around when the scrollbar appears naturally */ } body { font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; background: #fafafa; margin: 0; } #main { flex-grow: 1; } h1 { margin: 0; padding: 20px 0; text-align: center; background: linear-gradient(to right, turquoise, transparent 80%); } h1.scrolling { position: fixed; top: 0; left: 0; right: 0; /* backdrop-filter: blur(5px); */ /* disabled because firefox (73) renders it weirdly */ } h1.invisible { position: relative; visibility: hidden; } h2 { padding-left: 10px; background: linear-gradient(to right, turquoise 5px, transparent 5px 100%); } h2.no-bg { background: none; } h1, h2, h3, h4, h5, h6 { font-weight: 400; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; margin: 0.75em 0; } .stars { font-family: 'stars'; } .ingredients li.optional::before { content: "(Optional) "; font-style: italic; } .subrecipe { background: #eee; padding: 10px; border-radius: 10px; } .subrecipe, p { margin-left: 10px; margin-right: 10px; } .subrecipe h3 { margin: 0; } .subrecipe-output { height: 0; overflow-y: hidden; } .subrecipe.open .subrecipe-output { height: min-content; } .subrecipe-heading h3 { display: inline-block; } .subrecipe-toggle { margin-left: 10px; } .subrecipe-toggle::after { font-style: italic; font-size: 0.75em; vertical-align: text-top; } .subrecipe .subrecipe-toggle::after { content: "Show"; } .subrecipe.open .subrecipe-toggle::after { content: "Hide"; } a { color: turquoise; text-decoration: none; } a.dark { filter: brightness(80%); } a:not(.recipe-listing):hover { text-decoration: underline; } ul { list-style-type: "- "; } ul, ol { list-style-position: inside; padding-left: 10px; } li { padding: 1px 0; } #recipes { display: flex; flex-flow: row wrap; } .recipe-listing { display: block; margin: 10px; height: min-content; padding: 0 5px; border-radius: 10px; background: linear-gradient(to right, turquoise 5px, #eee 5px 100%); max-width: 600px; flex: 1 0 400px; box-shadow: 0 0 3px #0003; transition: 0.2s all; } .recipe-listing:hover { box-shadow: 0 0 15px #0003; } a.recipe-listing { color: black; } .recipe-listing h3 { padding-left: 10px; } .method li input[type=checkbox]:checked + label { color: grey; text-decoration: line-through; } .excerpt { color: grey; position: relative; margin-bottom: 0; } .excerpt::after { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: absolute; font-size: 1em; background: linear-gradient(to top, #eee 1em, transparent); } table { border-collapse: collapse; width: max-content; min-width: 50%; max-width: 90%; margin: 0 auto; background: #0001; border-radius: 10px; } tr:nth-of-type(2n) { background: #0001; } td { padding: 10px; } td:last-of-type { text-align: right; } footer { text-align: center; background: #333; display: block; width: 100%; padding: 20px 0; margin: 30px 0 0 0; } footer, .subtle { color: grey; font-style: italic; } @font-face { font-family: 'stars'; src: url("/assets/fonts/stars.woff") format("woff"), url("/assets/fonts/stars.woff2") format("woff2"); }