Neapolitan Pizza Dough. One recipe; two styles.

index.html

<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>

neapolitan-pizza-dough-one-recipe-two-styles.markdown

Neapolitan Pizza Dough. One recipe; two styles.

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.

License.

script.typescript

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}`);
})

style.css

@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;
}

style.scss

@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;
}