update homepage with better styling and more functionality

_includes/recipes.html

@@ -1,5 +1,18 @@
-<ul>
+<div id='recipes'>
 	{% for recipe in site.recipes -%}
-	<li><a href='{{ recipe.url }}'>{{ recipe.name }}</a></li>
+	<a href='{{ recipe.url }}' class='recipe-listing'>
+		<h2>{{ recipe.name }}</h2>
+		<p>
+			By {{ recipe.author }} - {{ recipe.method | size }} steps -
+			{%- if recipe.time > 59 %} {{ recipe.time | divided_by: 60}}h {% endif -%}
+			{% assign mins = recipe.time | modulo: 60 -%}
+			{%- if mins > 0 %}{{ mins }}m{% endif %}
+		</p>
+		<ol class='excerpt'>
+			{% for step in recipe.method | limit: 4 %}
+				<li>{{ step }}</li>
+			{% endfor %}
+		</ol>
+	</a>
 	{% endfor %}
-</ul>
+</div>

index.html

@@ -2,4 +2,6 @@
 title: Home
 layout: default
 ---
+<h1>Home</h1>
+<p>Currently tracking {{ site.recipes.size }} recipes and {{ site.subrecipes.size }} subrecipes.</p>
 {% include recipes.html %}

style.css

@@ -78,7 +78,7 @@ a {
 	color: turquoise;
 	text-decoration: none;
 }
-a:hover {
+a:not(.recipe-listing):hover {
 	text-decoration: underline;
 }
 
@@ -90,6 +90,44 @@ ul, ol {
 	padding-left: 10px;
 }
 
+#recipes {
+	display: flex;
+	flex-flow: row wrap;
+}
+
+.recipe-listing {
+	display: block;
+	margin: 10px;
+	padding: 5px;
+	border-radius: 10px;
+	background: linear-gradient(to right, turquoise 5px, #eee 5px 100%);
+	max-width: 600px;
+	flex: 1 0 300px;
+}
+a.recipe-listing {
+	color: black;
+}
+
+.recipe-listing h2 {
+	background: none;
+}
+
+.excerpt {
+	color: grey;
+	position: relative;
+	margin-bottom: 0;
+}
+.excerpt::after {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	content: "";
+	position: absolute;
+	font-size: 1em;
+	background: linear-gradient(to top, #eee 1em, transparent);
+}
+
 footer {
 	text-align: center;
 	background: #333;