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%); } h2 { padding-left: 10px; background: linear-gradient(to right, turquoise 5px, transparent 5px 100%); } h1, h2, h3, h4, h5, h6 { font-weight: 400; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; margin: 0.75em 0; } .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:not(.recipe-listing):hover { text-decoration: underline; } ul { list-style-type: "- "; } ul, ol { list-style-position: inside; padding-left: 10px; } #recipes { display: flex; flex-flow: row wrap; } .recipe-listing { display: block; margin: 10px; padding: 5px; border-radius: 10px; background: linear-gradient(to right, turquoise 5px, #eee 5px 100%); max-width: 600px; flex: 1 0 300px; } a.recipe-listing { color: black; } .recipe-listing h2 { background: none; } .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); } footer { text-align: center; background: #333; display: block; width: 100%; padding: 20px 0; margin: 0; } footer, .subtle { color: grey; font-style: italic; }