Skip to content

Instantly share code, notes, and snippets.

@bzinoun
Last active May 8, 2023 20:07
Show Gist options
  • Save bzinoun/57706efe9885813875b12a555ebb9862 to your computer and use it in GitHub Desktop.
Save bzinoun/57706efe9885813875b12a555ebb9862 to your computer and use it in GitHub Desktop.
Neapolitan Pizza Dough. One recipe; two styles.
<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&deg;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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment