Skip to content

Commit

Permalink
Add option (disabled by default) to show recipe images on index page …
Browse files Browse the repository at this point in the history
…(addresses part of #1)
  • Loading branch information
doersino committed Mar 26, 2021
1 parent 1ac453c commit 879a7d8
Show file tree
Hide file tree
Showing 10 changed files with 63 additions and 40 deletions.
30 changes: 18 additions & 12 deletions _assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -240,25 +240,31 @@ h3 + p {
h3 + h3 {
margin-top: -0.5rem; /* in the same vein, move the recipe title below a description-less recipe a bit upwards */
}
.index .servingsuggestion {
width: 100%;
margin: 1rem 0;
}

ul, p {
margin: 1rem 0;
}
hr {
counter-increment: step;
border: 0;
width: 100%;
border-top: 1px solid #ddd; /* using a border instead of background color to circument no-background-colors print settings */
}
.recipe hr {
counter-increment: step;
margin-bottom: -2.45em;
clear: right; /* fix for long descriptions pushing across the hr in firefox */
}
hr + hr { /* in case there is a leading hr in the document in addition to the hardcoded one */
.recipe hr + hr { /* in case there is a leading hr in the document in addition to the hardcoded one */
display: none;
}
hr:first-child {
.recipe hr:first-child {
border-color: transparent;
}
hr::after {
.recipe hr::after {
content: counter(step);
display: inline-block;
color: var(--background);
Expand All @@ -270,42 +276,42 @@ hr::after {
font-size: 0.8em;
margin-top: 1.1rem;
}
hr + ul {
.recipe hr + ul {
display: inline-block;
margin-left: var(--step-number-column-width);
width: calc(var(--ingredient-quantity-column-width) + var(--ingredient-name-column-width));
vertical-align: top;
}
hr + ul + blockquote {
.recipe hr + ul + blockquote {
display: inline-block;
width: calc(100% - var(--step-number-column-width) - var(--ingredient-name-column-width) - var(--ingredient-quantity-column-width));
vertical-align: top;
float: right;
}
hr + blockquote {
.recipe hr + blockquote {
display: inline-block;
margin-left: var(--step-number-column-width);
width: calc(100% - var(--step-number-column-width));
}
@media screen and (max-width: 700px) {
hr + ul {
.recipe hr + ul {
margin-bottom: 0;
width: auto;
}
hr + ul + blockquote,
hr + blockquote {
.recipe hr + ul + blockquote,
.recipe hr + blockquote {
display: block !important;
width: calc(100% - var(--step-number-column-width));
margin-left: var(--step-number-column-width);
}
}
hr + ul li {
.recipe hr + ul li {
list-style-type: none;
text-indent: calc(-1 * var(--ingredient-quantity-column-width));
padding-left: var(--ingredient-quantity-column-width);
padding-right: 1em; /* prevent ingredient names getting too close to the instructions */
}
hr + ul li > code:first-child {
.recipe hr + ul li > code:first-child {
display: inline-block;
margin-left: var(--ingredient-quantity-column-width);
margin-right: calc(-1 * var(--ingredient-quantity-column-width) - .2em); /* to account for space between em and ingredient name */
Expand Down
30 changes: 18 additions & 12 deletions _site/assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -240,25 +240,31 @@ h3 + p {
h3 + h3 {
margin-top: -0.5rem; /* in the same vein, move the recipe title below a description-less recipe a bit upwards */
}
.index .servingsuggestion {
width: 100%;
margin: 1rem 0;
}

ul, p {
margin: 1rem 0;
}
hr {
counter-increment: step;
border: 0;
width: 100%;
border-top: 1px solid #ddd; /* using a border instead of background color to circument no-background-colors print settings */
}
.recipe hr {
counter-increment: step;
margin-bottom: -2.45em;
clear: right; /* fix for long descriptions pushing across the hr in firefox */
}
hr + hr { /* in case there is a leading hr in the document in addition to the hardcoded one */
.recipe hr + hr { /* in case there is a leading hr in the document in addition to the hardcoded one */
display: none;
}
hr:first-child {
.recipe hr:first-child {
border-color: transparent;
}
hr::after {
.recipe hr::after {
content: counter(step);
display: inline-block;
color: var(--background);
Expand All @@ -270,42 +276,42 @@ hr::after {
font-size: 0.8em;
margin-top: 1.1rem;
}
hr + ul {
.recipe hr + ul {
display: inline-block;
margin-left: var(--step-number-column-width);
width: calc(var(--ingredient-quantity-column-width) + var(--ingredient-name-column-width));
vertical-align: top;
}
hr + ul + blockquote {
.recipe hr + ul + blockquote {
display: inline-block;
width: calc(100% - var(--step-number-column-width) - var(--ingredient-name-column-width) - var(--ingredient-quantity-column-width));
vertical-align: top;
float: right;
}
hr + blockquote {
.recipe hr + blockquote {
display: inline-block;
margin-left: var(--step-number-column-width);
width: calc(100% - var(--step-number-column-width));
}
@media screen and (max-width: 700px) {
hr + ul {
.recipe hr + ul {
margin-bottom: 0;
width: auto;
}
hr + ul + blockquote,
hr + blockquote {
.recipe hr + ul + blockquote,
.recipe hr + blockquote {
display: block !important;
width: calc(100% - var(--step-number-column-width));
margin-left: var(--step-number-column-width);
}
}
hr + ul li {
.recipe hr + ul li {
list-style-type: none;
text-indent: calc(-1 * var(--ingredient-quantity-column-width));
padding-left: var(--ingredient-quantity-column-width);
padding-right: 1em; /* prevent ingredient names getting too close to the instructions */
}
hr + ul li > code:first-child {
.recipe hr + ul li > code:first-child {
display: inline-block;
margin-left: var(--ingredient-quantity-column-width);
margin-right: calc(-1 * var(--ingredient-quantity-column-width) - .2em); /* to account for space between em and ingredient name */
Expand Down
2 changes: 1 addition & 1 deletion _site/cheesebuldak.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="assets/style.css"> <title>Cheese Buldak – I Can’t Believe It’s Not a Cookbook! – nyum</title>
</head>
<body>
<main>
<main class="recipe">
<header>
<div class="name">
<nav>
Expand Down
17 changes: 8 additions & 9 deletions _site/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="assets/style.css"> <title>I Can’t Believe It’s Not a Cookbook! – nyum</title>
</head>
<body>
<main>
<main class="index">
<header>
<div class="name">
<nav>
Expand All @@ -22,14 +22,13 @@ <h1><span>I Can’t Believe It’s Not a Cookbook!</span></h1>
<p>Po-tay-toes. Boil ’em, mash ’em, stick ’em in a stew. Lovely big golden chips with a nice piece of fried fish. Even you couldn’t say no to that. My mom always said life was like a box of chocolates. <em>You never know what you’re gonna get.</em></p>
<aside class="search">
<input type="text" placeholder="Search…" id="search_input" disabled>
<input type="submit" style="display: none">
<div class="results" id="search_output"></div>
<script src="assets/search.js"></script>
</aside>
</header>
<section>
<h2>Bakery <!--1--></h2>
<h3>
<h3>
<i class="icons">


Expand All @@ -40,10 +39,10 @@ <h3>

</h3>
<p>A pretty basic, but vegan, chocolate cake, easily customizable with nuts (not bolts) or berries.</p>
</section>
</section>
<section>
<h2>Korean Food <!--2--></h2>
<h3>
<h3>
<i class="icons">
<img src="assets/tabler-icons/tabler-icon-star.svg">
<img src="assets/tabler-icons/tabler-icon-flame.svg" alt="Spicy">
Expand All @@ -54,7 +53,7 @@ <h3>
<em>치즈불닭</em>
</h3>
<p>Super-spicy chicken tempered with loads of cheese and fresh spring onions. Serve with rice and a light salad – or, better yet, an assortment of side dishes.</p>
<h3>
<h3>
<i class="icons">

<img src="assets/tabler-icons/tabler-icon-flame.svg" alt="Spicy">
Expand All @@ -65,10 +64,10 @@ <h3>
<em>깻잎전</em>
</h3>
<p>Perilla leaves, stuffed with a pork-based filling, then eggwashed and fried.</p>
</section>
</section>
<section>
<h2>Uncategorized <!--1--></h2>
<h3>
<h3>
<i class="icons">


Expand All @@ -79,7 +78,7 @@ <h3>

</h3>
<p>Great on a hot summer day.</p>
</section>
</section>
<footer>
<p>Enjoy!</p>
<p class="updatedtime">Updated on 2021-03-26.</p>
Expand Down
2 changes: 1 addition & 1 deletion _site/kkaennipjeon.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="assets/style.css"> <title>Pan-Fried Perilla Leaves – I Can’t Believe It’s Not a Cookbook! – nyum</title>
</head>
<body>
<main>
<main class="recipe">
<header>
<div class="name">
<nav>
Expand Down
2 changes: 1 addition & 1 deletion _site/strawberrysmoothie.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="assets/style.css"> <title>Strawberry Smoothie – I Can’t Believe It’s Not a Cookbook! – nyum</title>
</head>
<body>
<main>
<main class="recipe">
<header>
<div class="name">
<nav>
Expand Down
2 changes: 1 addition & 1 deletion _site/veganchocolatecake.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="assets/style.css"> <title>Vegan Chocolate Cake – I Can’t Believe It’s Not a Cookbook! – nyum</title>
</head>
<body>
<main>
<main class="recipe">
<header>
<div class="name">
<nav>
Expand Down
11 changes: 9 additions & 2 deletions _templates/index.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>$if(index_title)$$index_title$ – $endif$nyum</title>
</head>
<body>
<main>
<main class="index">
<header>
<div class="name">
<nav>
Expand All @@ -23,7 +23,6 @@ <h1><span>$index_title$</span></h1>
$endif$
<aside class="search">
<input type="text" placeholder="$strings.search_placeholder$" id="search_input" disabled>
<input type="submit" style="display: none">
<div class="results" id="search_output"></div>
<script src="assets/search.js"></script>
</aside>
Expand All @@ -32,6 +31,9 @@ <h1><span>$index_title$</span></h1>
<section>
<h2>${it.category} <!--${it.recipes/length}--></h2>
${for(it.recipes)}
$if(show_images_on_index)$
<hr class="nostep">
$endif$
<h3>
<i class="icons">
$if(it.favorite)$<img src="assets/tabler-icons/tabler-icon-star.svg">$endif$
Expand All @@ -45,6 +47,11 @@ <h3>
$if(it.description)$
<p>$it.description$</p>
$endif$
$if(show_images_on_index)$
$if(it.image)$
<img src="$it.image$" class="servingsuggestion">
$endif$
$endif$
${endfor}
</section>
${endfor}
Expand Down
2 changes: 1 addition & 1 deletion _templates/recipe.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>$title$ – $if(index_title)$$index_title$ – $endif$nyum</title>
</head>
<body>
<main>
<main class="recipe">
<header>
<div class="name">
<nav>
Expand Down
5 changes: 5 additions & 0 deletions config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ index_description:
always said life was like a box of chocolates. *You never know what you're
gonna get.*

# Whether to show each recipe's image, if available, on the index page. To
# enable, set this option to any non-empty value (other than "false" in recent
# versions of Pandoc). To disable, keep it blank.
show_images_on_index:

# You can change the content language (really only relevant for hyphenation)
# and related textual labels here.
lang: en
Expand Down

0 comments on commit 879a7d8

Please sign in to comment.