lynnesbian/recipe-site
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

basic styling

Browse source
This commit is contained in:
Lynne Megido 2020-03-01 05:01:50 +10:00
parent f29445ec4c
commit 8c1335cff9
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/ingredients.html
View file

@ -5,6 +5,6 @@
<{{tag}}>Ingredients</{{tag}}> <{{tag}}>Ingredients</{{tag}}>
<ul> <ul>
{% for item in page.ingredients -%} {% for item in page.ingredients -%}
<li>{{ item[0] }} {%- if item[2] -%} {{ item[2] }} of {%- endif -%} {{ item[1] }}</li> <li>{{ item[0] }} {% if item[2] %} {{ item[2] }} of {% endif %} {{ item[1] }}</li>
{% endfor -%} {% endfor -%}
</ul> </ul>

1
_layouts/default.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel='stylesheet' href='/style.css'>
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
</head> </head>

4
_layouts/recipe.html
View file

@ -19,10 +19,12 @@ layout: default
<h2> Subrecipes </h2> <h2> Subrecipes </h2>
{% for subrecipe in site.subrecipes -%} {% for subrecipe in site.subrecipes -%}
{%- if subrecipe.parents contains id -%} {%- if subrecipe.parents contains id -%}
<h3>{{ subrecipe.name }}</h3>
<div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'> <div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'>
<h3>{{ subrecipe.name }}</h3>
<div class='subrecipe-output'>
{{ subrecipe.output }} {{ subrecipe.output }}
</div> </div>
</div>
{%- endif -%} {%- endif -%}
{%- endfor -%} {%- endfor -%}
{%- endif -%} {%- endif -%}

25
style.css Normal file
View file

@ -0,0 +1,25 @@
body {
font-family: sans-serif;
}
.subrecipe {
background-color: #eee;
padding: 5px;
}
.subrecipe h3 {
margin: 0;
}
.subrecipe-output {
height: 0;
overflow-y: hidden;
}
.subrecipe.open .subrecipe-output {
height: min-content;
}
ul {
list-style-type: "- ";
}
ul, ol {
list-style-position: inside;
padding-left: 10px;
}