138 lines
		
	
	
	
		
			2.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			138 lines
		
	
	
	
		
			2.8 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;
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       @media print {
 | |
|         #index {
 | |
|           display: none;
 | |
|         }
 | |
|       }
 | |
|     </style>
 | |
| 
 | |
|     <title>Pasta med smörfriterad salvia</title>
 | |
|   </head>
 | |
| 
 | |
|   <body>
 | |
|     <main>
 | |
|       <div id="recipe">
 | |
|         <div id="introduction">
 | |
|           <p id="index"><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 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>❦</footer>
 | |
|     </main>
 | |
|   </body>
 | |
| </html>
 |