~mjorgensen/jrgnsn.net

fe2b483f6053b51771df5b570b04973cce87fc57 — Matthew Jorgensen 9 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