some styling

components/CookbookRecipes.js

@@ -25,13 +25,17 @@ export default {
 	template: ` 
 		<div class="cookbook">
 			<section class="recipe" v-for="(recipe, index) in recipes"  :style="style(index)" @click="browse()" :key="recipe">
-				<h3>{{recipe.title}}</h3>
-				<p>{{recipe.description}}</p>
-				<div>{{recipe.nature}}</div>
+				<h3 class="title">{{recipe.title}}</h3>
+				<div class="description">{{recipe.description}}</div>
+				<div class="label">It works with <span class="nature">{{recipe.nature}}</span></div>
+
+					<div class="label">
+						Steps:
+					</div>
 					<ol>
 						<li v-for="log in recipe.logs">{{log}}</li>
 					</ol>
-				<p>{{recipe.who}}</p>
+				<p class="from">from {{recipe.who}}</p>
 			</section>
 		</div>
 		`,

style.css

@@ -108,3 +108,26 @@ label {
 	cursor: pointer;
 	user-select: none;
 }
+
+.cookbook .recipe .title {
+	margin: 0;
+}
+
+.cookbook .recipe .description {
+	font-style: italic;
+	margin-top: 4px;
+}
+
+.cookbook .recipe .label {
+	margin-top: 24px;
+}
+
+.cookbook .recipe .from {
+	margin: 0;
+	margin-top: 32px;
+	text-align: right;
+}
+
+.nature {
+	text-transform: lowercase;
+}