Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <main>
    <div class="multicol">
      <header>
    <h1>Ribollita <br> Metafisia</h1>
    <p><span class="subhead">Menu del giorno</span>&mdash; <em>Se la cucino a New York o a Volterra è sempre la stessa zuppa? <strong>Borghini</strong> spiega dove ci porta l'ossessione per il cibo autentico</em></p>
    </header>
      <p>Iniziamo con un esempio fantastico ma verosimile. Siamo nel 2011. La giovane Elena, nata e cresciuta a Volterra, è un "cervello in fuga" a New York City in cerca de fortuna accademica. Per celebrare la fine del suo primo anno da emigrata devide di prepararsi un platto tipico toscano &ndash; la ribollita. Passa due giorni a cucinare, seguendo la provedura tradizionale. Sulla carta ha tutti gli <strong>ingredienti</strong> e gli utensili; ma, il cavolo nero in America è tutt'altra cosa, cosi come i cannellini, l'acqua di cotura, l'olio, il pane, il forno e via dicendo. Il risultato finale è un piatto simile a quelli preparati nella terra di origine, ma anche diverso. Si tratta di una ribollita autentica? Come e, soprattutto, chi può stabilirlo?</p>
      <p>L'autenticità è la qualità che meglio di altre esprime l'identità di un cibo. Che cosa avete nel piato? Si tratta di Permigiano autentico o del <strong>Parmesan</strong> della Kraft? Di un pollo tandoori o di una sua pessima imitazione? Come per i fondamenti di un sistema economico o politico la forza delle questioni di autenticità emerge soprattutto in situazioni di precarietà. Su di esse però si basa un mondo: la storia di un popolo, del sua rapporto col territorio, della sua creatività, del suoi valori, rituali, preference, stratificazioni sociali. Si pensi al drama culinario della diaspora: un popolo che lascia forzatamente una terra per un'altra vorrebbe portare con sé la propria cultura, tra cui i propri cibi; oppure il caso di unpopolo la cui terra conosee profonde trasformacioni ambientali. &laquo;Tu proverai si come sa di sale / lo pane altrui&raquo;, ci sporsta in una nuova nicchia culinaria, può veramente dire di mangiare le stesse pietanze?</p>
      <h3>Lo stesso piatto?</h3>
      <p>Non è diversa, forse la situazione dell'Italia di oggi. La ribollita si cucinaca anchi negli anni Cinquanta, quando la qualità di cannellini, olio d'oliva e cavolo utilizzati erano verosimilmente diverse: si tratta dello stesso piatto? O si prenda il <strong>panettone</strong> lombardo: qullo che compriamo al supermarcato è veramenta un suo esemplare? Lasciamo stare che lo chiamiamo con lo stesso nome, ma pensate davvero di mangiare la stessa cosa che mangiavano i milanesi cinquanta anni fa? E i salamini o le mortadelle che compriamo al supermarcato: hanno lo stesso nome degli in saccati che si mangiavano mezzo secolo fa, ma sono la stessa cosa? domande analoghe si estandono practicamente alla totalità del nostro patrimonio culinario, nonchè al cibo considetto "etnico" che consumiamo nei ristoranto. Cosa mangiamo rispecchia come ci verremmo collocare nella società (cfr. P. Bourdieu, <em>La distinction</em>, 1979). A restringere le possibili variazioni di ricette tradicionali si rischia di essere snob,</p>
    </div>
    <div class="full_col">
      <p>reazionari o vatastrofisti e non è questo il movente del presente articolo. Forse l'industria alimentare non ha surrettiziamente sostituito l'universo gastronomico di cinquant'anni fa; ma si tratta di un dubbio genuino e profondo. Le preparazione di un cibo è un processo irreversibile: quella patata che cuocete oggi non potete riprepararla nello stesso modo domani: allo stesso tempo, le ricette devono rimanere identiche per farsi espressione di una cultura. Se I'identità dei cibi è destabilizzante, ma incoraggia la creatività gastronomica.</p>
    <h3>Ricetta colletiva</h3>
    <p>Quindi, como dicidere? Vi sono più metodi. In casi estremi, una singola persona impone una nomenclatura. Alle ricette di cuochi come <strong> Adrià</strong>, <strong>Redzipi</strong>, o <strong>Botura</strong> si addice forse una sorta di copyright e, quindi, l'esclusiva dell'inventore circa la loro resa autentica.</p>
    <p>In altre situazioni, le istituzioni legiferano sulla metafisica del cibo. Si pensi alle denominazioni dei vini (como Chianti o Barolo) e dei prodotti di origine protetta (come Prosciutto di Parma e Gorgonzola). Ma in altri casi non visono singoli inventori né istituzioni a dettar legge: abbbiamo una metafisica aperta, un ogetto la cui identità del suo piato, sebbene possa e debba esprimersi in merito. Occorre però anche il perere di altri. Non di chiunque, ma di competenti. Si tratta quindi di un processo colletivo (ma non universale), incardinato in una precisa dimensione storica: l'autenticità di una ribollita cucinata a New York nel 2011 sarà giudicata secondo parametri diversi rispetto a una preparata a Volterra nel 1945.</p>
    <p>Ecco che il cibo ci restituisce una <strong>lezione di identità</strong>: di una pietanza, di una persona e di una società. La ribollita è un caso di metafisica aperta. Che Elena si goda la sua pietanza in santa pace: sarà il tempo a stabilire cos'è quel che ha fatto oggi in cucina.</p>
      <address class="author"><span class="allcaps">Andrea Borghini</span> Insegna Filosofia del Cibo al College of the Holy Cross (Massachusetts, Usa)</address>
        </div>
    <aside>
      <h2>Zuppa di rane</h2>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/25555/rane_illo.svg' alt=''>
      <h3>Ingredienti per 4 persone</h3>
      <ol class="legend">
        <li><b>24</b> rane</li>
        <li><b>3</b> cucchial di olio d'olivia</li>
        <li><b>1</b> cipolla</li>
        <li><b>1</b> carota</li>
        <li><b>1</b> spicchio d'agilo</li>
        <li><b>1</b> sedano</li>
        <li><b>3</b> pomodori pelati</li>
        <li><b>150 cl</b> di brodo</li>
        <li>sale</li>
        <li>pepe</li>
      </ol>
      <h3>Preparazione</h3>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/25555/preparazione_illo.svg' alt=''>
      <ol>
        <li><b>1.</b> Toglare le cosco allo rane e matteria da parte, poi scaldare in una pentola i 3 cucchial d'ollo con la carota tagliata a tondini, la cipolia, il sedano tritato a lo spicchio d'agilo fino a farli rogolate.</li>
        <li><b>2.</b> Aggiungero le rane e far assorbiro loro tutto il condimento. Aggiungero il brodo, i pelati a pezzi, sale e pepe e lasciare cuccere finché le rane non si disfano.</li>
        <li><b>3.</b> Una volta ottenuta la zuppa fruilaria e varsarla nella pentola.</li>
        <li><b>4.</b> A questo punto aggiungere le cosce e lasciarle cuocere per altri 15 minuti.</li>
        <li><b>5.</b> Servire la zuppa con prezzemolo e pane abbrustolito.</li>
      </ol>
    </aside>
  </main>
</body>
              
            
!

CSS

              
                html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: #E4E8D1;
}

main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  margin: 2rem auto;
  padding: 2rem;
  border-top: solid 1px #C3C6B1;
  max-width: 1200px; 
}

.multicol {
  column-count: 2;
  column-rule: solid 1px #C3C6B1;
  column-gap: 2rem;
  padding-right: 1.5rem;
}

.full_col {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-left: solid 1px #C3C6B1;
}

aside {
  padding-left: 1.5rem;
  border-left: solid 1px #C3C6B1;
}

header {
  column-span: all;
}

header > p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.5rem;
}

p > em {
  font-style: italic;
}

.subhead { 
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: .9em;
  color: black;
}

h1 {
  text-transform: uppercase;
  font-size: 21vw;
  line-height: 15vw;
  letter-spacing: -.1rem;
  font-family: roc-grotesk-compressed, sans-serif;
  font-weight: 400;
  font-style: normal;
}

main p {
  text-align: justify;
}

h3 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: .9rem;
  margin-top: 2rem;
  margin-bottom: .2rem;
}

h3 + p {
  margin-top: 0;
}

.multicol > p:first-of-type:first-letter {
  float: left;
  font-size: 6em;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 5rem;
  margin-left: -5px;
}

address {
  border-top: solid 1px #C3C6B1;
  padding-top: 1rem;
  margin-top: 1rem;
  font-size: .75rem;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1rem;
}

.allcaps {
  text-transform: uppercase;
  font-weight: bold;
}

aside {
  font-family: Helvetica, Arial, sans-serif;

}

aside h2 {
  font-family: 'Volkhov', serif;
  font-size: 4vw;
}

aside h3 {
  text-transform: none;
}

b {
  font-weight: bold;
}

.legend {
  column-count: 2;
  column-rule: solid 1px #C3C6B1;
  column-gap: 2rem;
  counter-reset: alphaLegend;
  font-size: .8em;
}

.legend li {
  counter-increment: alphaLegend;
  position: relative;
  padding-bottom: .5em;
  margin-left: 2em;
}

.legend li:before {
  position: absolute;
  content: counter(alphaLegend, upper-alpha);
  color: white;
  font-weight: bold;
  line-height: 1.4rem;
  background-color: black;
  height: 1.6em;
  width: 1.6em;
  border-radius: 100%;
  text-align: center;
  top: 0;
  left: -2em;
}

.legend li:first-of-type:before {
  background-color: #EA705E;
}

aside ol {
  margin-top: 1rem;
  font-size: .6em;
  line-height: 1.5em;
}

aside img {
  max-width: 90%;
}

@media (max-width: 900px) {
  main {
    display: grid;
    grid-template-columns: 1fr;
  }
  .multicol {
    column-count: 1;
    padding-right: 0;
  }

  .full_col {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    margin-bottom: 4rem;
  }

  aside {
    padding-left: 0;
    border-left: none;
  }
  aside h2 {
    font-family: 'Volkhov', serif;
    font-size: 20vw;
  }
  h1 {
    font-size: 40vw;
    line-height: 30vw;
    letter-spacing: -.1rem;    
    }
}

@media (min-width: 1078px) {
  h1 {
  font-size: 18rem;
  line-height: 13rem;
  letter-spacing: -.1rem;    
  }
  aside h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  }
  
}
              
            
!

JS

              
                
              
            
!
999px

Console