fe2b483f6053b51771df5b570b04973cce87fc57 — Matthew Jorgensen 2 months ago b626ec7
Add all the pieces for the recipe collection
4 files changed, 175 insertions(+), 0 deletions(-)

A _layouts/recipe.html
A _layouts/recipe_base.html
A css/recipe.css
A recipes.html
A _layouts/recipe.html => _layouts/recipe.html +59 -0
@@ 0,0 1,59 @@
+ <!DOCTYPE html>
+ <html>
+ <head>
+     <!-- Document Settings -->
+     <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
+     <meta name="viewport" content="width=device-width, initial-scale=1" />
+ 
+     <!-- Page Meta -->
+     <title>{{ site.title }}</title>
+     <meta name="description=" content="True" />
+     <link rel="icon" type="image/png" href="/avatar.png" />
+ 
+     <!-- Stylesheets -->
+     <link rel="stylesheet" type="text/css" href="/css/style.css" />
+     {% if page.layout == 'recipe' %}
+     <link rel="stylesheet" type="text/css" href="/css/recipe.css" />
+     {% endif %}
+ </head>
+ 
+ <body>
+     <div class="container">
+         <header>
+             <h1 class="page-title">
+                 {% if page.title %}
+                 {{ page.title }}
+                 {% else %}
+                 {{ site.title }}
+                 {% endif %}
+             </h1>
+             <navigation><div class="navigation">
+                 <a href="/recipes">Back to Recipes</a>
+             </div></navigation>
+         </header>
+ 
+         <div class="recipe-container">
+             <div class="ingredients">
+                 <h3>Ingredients</h3>
+                 <div class="ingredient-list">
+                     {% for ingredient in page.ingredients %}
+                     <span class="qty">{{ ingredient.qty }}</span>
+                     <span class="name">{{ ingredient.name }}</span>
+                     {% endfor %}
+                 </div>
+             </div>
+ 
+             <div class="directions">
+                 <h3>Instructions</h3>
+                 {{ content }}
+             </div>
+         </div>
+ 
+         <div id="recipe-footer">
+             {%- include footer.html -%}
+         </div>
+     </div>
+ </div>
+ </div>
+ </body>
+ </html>< 
\ No newline at end of file

A _layouts/recipe_base.html => _layouts/recipe_base.html +40 -0
@@ 0,0 1,40 @@
+ <!DOCTYPE html>
+ <html>
+ <head>
+     <!-- Document Settings -->
+     <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
+     <meta name="viewport" content="width=device-width, initial-scale=1" />
+ 
+     <!-- Page Meta -->
+     <title>{{ site.title }}</title>
+     <meta name="description=" content="True" />
+     <link rel="icon" type="image/png" href="/avatar.png" />
+ 
+     <!-- Stylesheets -->
+     <link rel="stylesheet" type="text/css" href="/css/style.css" />
+     <link rel="stylesheet" type="text/css" href="/css/recipe.css" />
+ </head>
+ 
+ <body>
+     <div class="container">
+         <header>
+             <h1 class="page-title">
+                 {% if page.title %}
+                 {{ page.title }}
+                 {% else %}
+                 {{ site.title }}
+                 {% endif %}
+             </h1>
+             <navigation><div class="navigation">
+                 <a href="/">Back to Blog</a>
+             </div></navigation>
+         </header>
+ 
+                 {{ content }}
+ 
+         <div id="recipe-footer">
+             {%- include footer.html -%}
+         </div>
+     </div>
+ </body>
+ </html>< 
\ No newline at end of file

A css/recipe.css => css/recipe.css +44 -0
@@ 0,0 1,44 @@
+ body {
+     z-index: 0;
+ }
+ 
+ .recipe-container {
+     display: grid;
+     grid-template-columns: 1fr 2fr;
+ }
+ 
+ .ingredients {
+     grid-column-start: 1;
+     grid-column-end: 1;
+ }
+ 
+ .ingredient-list {
+     display: grid;
+     grid-template-columns: 0.1fr 1fr 1fr 0.1fr;
+     grid-row-gap: 0.3em;
+     margin: 0.3em 0;
+ }
+ 
+ 
+ .ingredient-list .qty {
+     grid-column-start: 2;
+ }
+ 
+ .ingredient-list .name {
+     grid-column-start: 3;
+ }
+ 
+ .directions {
+     grid-column-start: 2;
+     grid-column-end: 2;
+ }
+ 
+ .directions li {
+     padding: 0 0.3em;
+ }
+ 
+ #recipe-footer {
+     position: fixed;
+     bottom: 0;
+     z-index: 1000;
+ }< 
\ No newline at end of file

A recipes.html => recipes.html +32 -0
@@ 0,0 1,32 @@
+ ---
+ layout: recipe_base
+ title: Recipes
+ permalink: /recipes/
+ enableMenu: false
+ ---
+ 
+ {% if site.recipes.size == 0 %}
+     <div class="info">There are no recipes.</div>
+ {% else %}
+ <ul>
+ {% for recipe in site.recipes %}
+ <li>
+     <span class="date hidden-xs">
+       {{ recipe.created }}
+     </span>
+     <span class="title">
+       {% assign content = recipe.content | strip_newlines %}
+       {% if content == "" or content == nil or content == blank %}
+         {{ recipe.title }}
+       {% else %}
+         <a href="{{ recipe.url }}">{{ recipe.title }}</a>
+       {% endif %}
+     </span>
+   {% if recipe.tagline %}
+   &mdash;
+   {{ recipe.tagline }}
+   {% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}< 
\ No newline at end of file