An experiment is pure CSS styling of a basic recipe content.
Inspired by posts from https://www.reddit.com/r/Old_Recipes/
A Pen by James Holmes on CodePen.
<article class="recipe recipe--old-style"> | |
<h1>Neapolitan Pizza Dough</h1> | |
<h2><data class="servings" value="12">about twelve servings</data></h2> | |
<main> | |
<ul class="ingredients"> | |
<li><data value='[1500, "g", "Bread Flour"]'>1500 g Bread Flour</data></li> | |
<li><data value='[5, "g", "Yeast"]'>5 g Yeast</data></li> | |
<li><data value='[10, "g", "Honey"]'>10 g Honey</data></li> | |
<li><data value='[25, "g", "Salt"]'>25 g Salt</data></li> | |
<li><data value='[50, "g", "Olive Oil"]'>50 g Olive Oil</data></li> | |
<li><data value='[1000, "g", "Water"]'>1000 g Water</data></li> | |
</ul> | |
<div class="instructions"> | |
<ol class="instructions__step"> | |
<li><small>Mix</small> water, yeast, and honey in a large bowl.</li> | |
<li>Let yeast mixture bloom for <data class="duration" value="PT10M">10 minutes</data>.</li> | |
</ol> | |
<ol class="instructions__step"> | |
<li><small>Combine</small> flour and salt in a large bowl.</li> | |
<li>Pour the yeast mixture into the flour mixture.</li> | |
<li>Drizzle on the olive oil.</li> | |
<li>Knead with hands or dough scraper until combined, <data class="duration" value="PT5M">about 5 minutes</data>.</li> | |
<li>Then let dough rest for <data class="duration" value="PT30M">30 minutes</data>.</li> | |
</ol> | |
<ol class="instructions__step"> | |
<li><small>Remove</small> rested dough from bowl and knead for <data class="duration" value="PT15M">15 minutes</data>.</li> | |
<li>Form into a large ball and lightly coat with olive oil.</li> | |
<li>Cover dough with plastic wrap and let rise for <data class="duration" value="PT1H">1 hour</data>.</li> | |
</ol> | |
<ol class="instructions__step"> | |
<li><small>Lightly</small> dust a large sheetpan with flour.</li> | |
<li>Remove plastic wrap and form into <data class="portion" value='[220, "g", "balls"]'>220g portions.</li> | |
<li> | |
Let the dough rise for | |
<data class="duration" value='["PT3H","PT4H"]'>3 to 4 hours</data> | |
at room temperature, or | |
<data class="duration" value='["PT8H","PT24H"]'>8 to 24 hours</data> | |
in the refrigerator. | |
</li> | |
</ol> | |
<ol class="instructions__step"> | |
<li><small>Preheat</small> oven at <data class='temp' value='[500, "F"]'>500°F</data>.</li> | |
<li> | |
Place single dough ball onto a floured work surface and | |
stretch. | |
</li> | |
<li>Top and bake.</li> | |
</ol> | |
</div> | |
</main> | |
</article> | |
<!-- END OF CODE --> | |
<select id="select_style"> | |
<option value="old-style" selected>Old-Style</option> | |
<option value="modern">Modern</option> | |
<option value="none">[NONE]</option> | |
</select> |
An experiment is pure CSS styling of a basic recipe content.
Inspired by posts from https://www.reddit.com/r/Old_Recipes/
A Pen by James Holmes on CodePen.
const recipe = document.querySelector('.recipe'); | |
const el = document.getElementById('select_style'); | |
el.addEventListener('change', (e) => { | |
recipe.classList.remove('recipe--old-style', 'recipe--modern') | |
recipe.classList.add(`recipe--${e.target.value}`); | |
}) |
@charset "UTF-8"; | |
@font-face { | |
font-family: "Cardo"; | |
font-style: normal; | |
font-weight: 700; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Bold.woff) format("woff2"); | |
} | |
@font-face { | |
font-family: "Cardo"; | |
font-style: normal; | |
font-weight: 400; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Regular.woff) format("woff2"); | |
} | |
@font-face { | |
font-family: "Cardo"; | |
font-style: italic; | |
font-weight: 400; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Italic.woff) format("woff2"); | |
} | |
:root, body { | |
font: normal normal 14pt / 1 system-ui, sans-serif; | |
} | |
.recipe.recipe--old-style small, .recipe.recipe--old-style h1 { | |
font-variant: small-caps; | |
font-feature-settings: "liga"; | |
} | |
@supports (font-feature-settings: "smcp") { | |
.recipe.recipe--old-style small, .recipe.recipe--old-style h1 { | |
font-variant: normal; | |
font-feature-settings: "smcp", "liga"; | |
} | |
} | |
.recipe.recipe--old-style { | |
font-family: 14pt; | |
line-height: 1.6180339888rem; | |
font-family: "Cardo", sans-serif; | |
font-feature-settings: "liga", "clig", "pnum"; | |
} | |
.recipe.recipe--old-style::after, .recipe.recipe--old-style:before { | |
display: block; | |
content: "⁂"; | |
text-align: center; | |
margin-top: 3.2360679775rem; | |
margin-bottom: 3.2360679775rem; | |
font-size: 1.9998997578rem; | |
} | |
.recipe.recipe--old-style h1 { | |
text-align: center; | |
margin-bottom: 1.6180339888rem; | |
font-size: 1.9998997578rem; | |
} | |
.recipe.recipe--old-style h2 { | |
font-style: italic; | |
text-align: center; | |
margin-top: -0.8090169944rem; | |
margin-bottom: 2.4270509831rem; | |
} | |
.recipe.recipe--old-style em { | |
font-style: italic; | |
font-feature-settings: "liga", "ss01", "ss03"; | |
} | |
.recipe.recipe--old-style small { | |
font-feature-settings: "smcp", "liga"; | |
} | |
.recipe.recipe--old-style .servings { | |
quotes: "(" ")"; | |
} | |
.recipe.recipe--old-style .servings::before { | |
content: open-quote; | |
} | |
.recipe.recipe--old-style .servings::after { | |
content: close-quote; | |
} | |
.recipe.recipe--old-style .ingredients { | |
max-width: 50ch; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 1.6180339888rem; | |
-moz-columns: 2; | |
columns: 2; | |
-moz-column-fill: balance; | |
column-fill: balance; | |
-moz-column-rule: 3px double currentColor; | |
column-rule: 3px double currentColor; | |
-moz-column-gap: 1.5ch; | |
column-gap: 1.5ch; | |
} | |
.recipe.recipe--old-style .ingredients > li { | |
padding-left: 1.5ch; | |
text-indent: -1.5ch; | |
margin-left: 1.5ch; | |
} | |
.recipe.recipe--old-style .instructions { | |
max-width: 65ch; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.recipe.recipe--old-style .instructions ol { | |
margin-bottom: 1.6180339888rem; | |
text-indent: 2ch; | |
text-align: justify; | |
} | |
.recipe.recipe--old-style .instructions li { | |
display: inline; | |
} | |
.recipe.recipe--modern { | |
margin-top: 3.2360679775rem; | |
margin-bottom: 3.2360679775rem; | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 60ch; | |
line-height: 1.4; | |
} | |
.recipe.recipe--modern h1 { | |
font-size: 1.9998997578rem; | |
font-weight: 900; | |
} | |
.recipe.recipe--modern h2 { | |
margin-bottom: 1.6180339888rem; | |
} | |
.recipe.recipe--modern .servings::before { | |
content: "Makes "; | |
} | |
.recipe.recipe--modern .servings::after { | |
content: "."; | |
} | |
.recipe.recipe--modern main { | |
display: grid; | |
grid-template-columns: 12rem 1fr; | |
grid-gap: 0 2ch; | |
} | |
.recipe.recipe--modern .instructions::before, .recipe.recipe--modern .ingredients::before { | |
display: block; | |
font-weight: 100; | |
letter-spacing: 0.06em; | |
text-transform: uppercase; | |
font-size: 1.2599rem; | |
line-height: 1; | |
margin-bottom: 0.8090169944rem; | |
padding-bottom: 0.8090169944rem; | |
border-bottom: 1px dashed currentColor; | |
} | |
.recipe.recipe--modern .ingredients { | |
font-feature-settings: "tnum"; | |
list-style-type: disc; | |
margin-bottom: 1.6180339888rem; | |
} | |
.recipe.recipe--modern .ingredients::before { | |
content: "Ingredients"; | |
padding-left: 0.5ch; | |
} | |
.recipe.recipe--modern .ingredients li { | |
margin-left: 3ch; | |
} | |
.recipe.recipe--modern .instructions { | |
counter-reset: steps; | |
} | |
.recipe.recipe--modern .instructions::before { | |
content: "Preparation"; | |
padding-left: 0.5ch; | |
} | |
.recipe.recipe--modern .instructions__step { | |
counter-increment: steps; | |
margin-bottom: 0.8090169944rem; | |
} | |
.recipe.recipe--modern .instructions__step::before { | |
display: block; | |
content: "Step " counter(steps, upper-roman); | |
font-weight: 900; | |
margin-bottom: 0.8090169944rem; | |
} | |
.recipe.recipe--modern .instructions__step li { | |
margin-left: 3.5ch; | |
text-indent: -2ch; | |
} | |
.recipe.recipe--modern .instructions__step li::before { | |
content: "☐" " "; | |
} | |
#select_style { | |
position: fixed; | |
top: 1rem; | |
right: 1rem; | |
} |
@font-face { | |
font-family: 'Cardo'; | |
font-style: normal; | |
font-weight: 700; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Bold.woff) format('woff2'); | |
} | |
@font-face { | |
font-family: 'Cardo'; | |
font-style: normal; | |
font-weight: 400; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Regular.woff) format('woff2'); | |
} | |
@font-face { | |
font-family: 'Cardo'; | |
font-style: italic; | |
font-weight: 400; | |
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/Cardo-Italic.woff) format('woff2'); | |
} | |
$lh: 1.61803398875rem; | |
$fs--R: 1.2599; // r = 2^(4/12) | |
$fs--S: 1rem/$fs--R; // S = r^-1 | |
$fs--M: 1rem; // M = r^0 | |
$fs--L: 1rem * $fs--R; // L = r^1 | |
$fs--XL: $fs--L * $fs--R; // XL = r^2 | |
$fs--XXL: $fs--XL * $fs--R; // XXL = r^3 | |
$fs--XXXL: $fs--XXL * $fs--R; // XXXL = r^4 | |
:root, body { | |
font: normal normal 14pt #{'/'} 1 system-ui, sans-serif; | |
} | |
%smcaps { | |
font-variant: small-caps; | |
font-feature-settings: "liga"; | |
@supports(font-feature-settings: 'smcp') { | |
font-variant: normal; | |
font-feature-settings: "smcp", "liga"; | |
} | |
} | |
%smcaps-all { | |
@extend %smcaps; | |
} | |
.recipe.recipe--old-style { | |
font-family: 14pt; | |
line-height: $lh; | |
font-family: 'Cardo', sans-serif; | |
font-feature-settings: 'liga', "clig", 'pnum'; | |
&::after, &:before { | |
display: block; | |
content: '\2042'; | |
text-align: center; | |
margin-top: $lh * 2; | |
margin-bottom: $lh * 2; | |
font-size: $fs--XXL; | |
} | |
h1 { | |
@extend %smcaps-all; | |
text-align: center; | |
margin-bottom: $lh; | |
font-size: $fs--XXL; | |
} | |
h2 { | |
font-style: italic; | |
text-align: center; | |
margin-top: $lh * -1/2; | |
margin-bottom: $lh * 3/2; | |
} | |
em { | |
font-style: italic; | |
font-feature-settings: 'liga', 'ss01', 'ss03'; | |
} | |
small { | |
@extend %smcaps; | |
font-feature-settings: "smcp", "liga"; | |
} | |
.servings { | |
quotes: '(' ')'; | |
&::before { content: open-quote; } | |
&::after { content: close-quote; } | |
} | |
.ingredients { | |
max-width: 50ch; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: $lh; | |
columns: 2; | |
column-fill: balance; | |
column-rule: 3px double currentColor; | |
column-gap: 1.5ch; | |
> li { | |
padding-left: 1.5ch; | |
text-indent: -1.5ch; | |
margin-left: 1.5ch; | |
} | |
} | |
.instructions { | |
max-width: 65ch; | |
margin-left: auto; | |
margin-right: auto; | |
ol { | |
margin-bottom: $lh; | |
text-indent: 2ch; | |
text-align: justify; | |
} | |
li { display: inline; } | |
} | |
} | |
.recipe.recipe--modern { | |
margin-top: 2 * $lh; | |
margin-bottom: 2 * $lh; | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 60ch; | |
line-height: 1.4; | |
h1 { font-size: $fs--XXL; font-weight: 900; } | |
h2 { margin-bottom: $lh; } | |
.servings::before { content: 'Makes '} | |
.servings::after { content: '.'} | |
main { | |
display: grid; | |
grid-template-columns: 12rem 1fr; | |
grid-gap: 0 2ch; | |
} | |
%heading { | |
display: block; | |
font-weight: 100; | |
letter-spacing: 0.06em; | |
text-transform: uppercase; | |
font-size: $fs--L; | |
line-height: 1; | |
margin-bottom: $lh / 2; | |
padding-bottom: $lh / 2; | |
border-bottom: 1px dashed currentColor; | |
} | |
.ingredients { | |
font-feature-settings: 'tnum'; | |
&::before { | |
@extend %heading; | |
content: 'Ingredients'; | |
padding-left: 0.5ch; | |
} | |
list-style-type: disc; | |
li { margin-left: 3ch; } | |
margin-bottom: $lh; | |
} | |
.instructions { | |
counter-reset: steps; | |
&::before { | |
@extend %heading; | |
content: 'Preparation'; | |
padding-left: 0.5ch; | |
} | |
&__step { | |
counter-increment: steps; | |
margin-bottom: $lh / 2; | |
&::before { | |
display: block; | |
content: 'Step ' counter(steps, upper-roman) ; | |
font-weight: 900; | |
margin-bottom: $lh / 2; | |
} | |
li { | |
margin-left: 3.5ch; | |
text-indent: -2ch; | |
&::before { content: '\2610' ' '; } | |
} | |
} | |
} | |
} | |
// END OF CODE | |
#select_style { | |
position: fixed; | |
top: 1rem; | |
right: 1rem; | |
} |