reinefjord.net-v3/public/recipes/pasta-salvia.html

133 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
overflow-wrap: break-word;
}
main {
margin: 0 auto;
max-width: 100ch;
}
h1 {
margin-bottom: 10px;
}
code, kbd {
background-color: #ddd;
}
.asterism, footer {
margin: 2rem 0;
text-align: center;
}
pre {
overflow-x: auto;
background-color: #eee;
border-radius: 5px;
padding: 10px;
}
#recipe {
display: grid;
}
#ingredients {
max-width: 30ch;
}
#ingredients ul {
padding-left: 30px;
}
#instructions {
max-width: 70ch;
}
@media (min-width: 650px) {
#recipe {
max-width: 120ch;
grid-template:
"intro ."
"instructions ingredients";
column-gap: 20px;
}
#introduction {
grid-area: intro;
}
#ingredients {
grid-area: ingredients;
}
#instructions {
grid-area: instructions;
}
footer {
max-width: 120ch;
}
}
</style>
<title>Pasta med smörfriterad salvia</title>
</head>
<body>
<main>
<div id="recipe">
<div id="introduction">
<p><a href="/">Index</a></p>
<h1>Pasta med smörfriterad salvia</h1>
</div>
<div id="ingredients">
<h2>Ingredienser</h2>
<p>4 portioner.</p>
<ul>
<li>Färsk pasta - 4 portioner</li>
<li>Färsk salvia - 2 krukor</li>
<li>Smör - 100 g</li>
<li>Flingsalt</li>
<li>Svartpeppar</li>
</ul>
</div>
<div id="instructions">
<h2>Instruktioner</h2>
<p>
Plocka bladen från salvian.
</p>
<p>
Bryn smöret nötbrunt i en liten kastrull.
</p>
<p>
Lägg i salviabladen lite åt gången och låt dem fritera dem tills
det fräser mindre intensivt. Fiska upp bladen med en gaffel och
lägg dem på en tallrik med hushållspapper för att torka. De kan
verka mjuka när man fiskar upp dem, men när de torkar blir de
krispiga.
</p>
<p>
Servera på nykokt pasta och skeda över salvia och det brynta
smöret. Salta och peppra, servera genast.
</p>
</div>
</div>
<footer>&#10086;</footer>
</main>
</body>
</html>