From bc97048dfbb05766abf0c04aed593252a3abdc88 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 2 Feb 2020 16:51:57 +0100 Subject: Show recipe title in each recipe page --- content/nettoyage/lessive-au-lierre.md | 2 +- main.ts | 6 ++-- static/main.css | 52 +++++++++++++++++++++++----------- templates/index.html | 12 ++++---- templates/page.html | 4 ++- 5 files changed, 49 insertions(+), 27 deletions(-) diff --git a/content/nettoyage/lessive-au-lierre.md b/content/nettoyage/lessive-au-lierre.md index b22e8db..802a489 100644 --- a/content/nettoyage/lessive-au-lierre.md +++ b/content/nettoyage/lessive-au-lierre.md @@ -1,5 +1,5 @@ +++ -title = "Ressive au lierre" +title = "Lessive au lierre" +++ Ingrédients (1L de lessive) diff --git a/main.ts b/main.ts index fef633a..c8cff19 100644 --- a/main.ts +++ b/main.ts @@ -1,6 +1,6 @@ /* Set up done marks for steps */ -nodeListToArray(document.querySelectorAll('.g-Recipe ol > li')).forEach(todo => { +nodeListToArray(document.querySelectorAll('.g-Recipe__Content ol > li')).forEach(todo => { todo.onclick = e => { toggleClassName(todo, 'g-Recipe__Completed') e.stopPropagation() @@ -18,10 +18,10 @@ function toggleClassName(node: Element, className: string) { /* Set up inputs for the ingredients */ const itemEntries = - nodeListToArray(document.querySelectorAll('.g-Recipe ul > li')) + nodeListToArray(document.querySelectorAll('.g-Recipe__Content ul > li')) .map(itemNode => ({ tag: 'li', node: itemNode })) -const h1 = document.querySelector('.g-Recipe h1') +const h1 = document.querySelector('.g-Recipe__Content h1') if (h1 !== null) { itemEntries.push( diff --git a/static/main.css b/static/main.css index e19d1ac..cb4fda0 100644 --- a/static/main.css +++ b/static/main.css @@ -60,6 +60,18 @@ body { margin: 1rem; } +.g-Recipe__Title { + font-size: 1.5rem; + margin-top: 1.5rem; + color: var(--color-title); +} + +.g-Recipe__SubTitle { + font-size: 1.1rem; + margin-top: 1rem; + color: var(--color-title); +} + .g-Page__Recipes { list-style-type: none; padding-left: 1rem; @@ -69,21 +81,25 @@ body { margin-bottom: 1rem; } -h1, h2, h3 { - color: var(--color-title); -} +/* Recipe */ -h1 { +.g-Recipe__Content h1 { font-size: 1.5rem; margin-top: 1.5rem; + color: var(--color-title); } -h2 { +.g-Recipe__Content h2 { font-size: 1.1rem; margin-top: 1rem; + color: var(--color-title); } -/* Recipe */ +.g-Recipe__Content h3 { + font-size: 1.1rem; + margin-top: 1rem; + color: var(--color-title); +} .g-Number { font-size: inherit; @@ -95,33 +111,33 @@ h2 { width: 5rem; } -.g-Recipe ul, -.g-Recipe ol { +.g-Recipe__Content ul, +.g-Recipe__Content ol { list-style-type: none; padding-left: 1rem; } -.g-Recipe li { +.g-Recipe__Content li { margin-bottom: 1rem; line-height: 1.5rem; } -.g-Recipe ol, -.g-Recipe ul { +.g-Recipe__Content ol, +.g-Recipe__Content ul { margin-top: 1.5rem; } -.g-Recipe ol { +.g-Recipe__Content ol { counter-reset: ol; } -.g-Recipe ol > li { +.g-Recipe__Content ol > li { padding-left: 3rem; position: relative; text-align: justify; } -.g-Recipe ol > li::before { +.g-Recipe__Content ol > li::before { display: inline; position: absolute; top: 0; @@ -137,10 +153,14 @@ h2 { text-align: center; } -.g-Recipe ol > li:hover { +.g-Recipe__Content ol > li:hover { cursor: pointer; } -.g-Recipe ol > li.g-Recipe__Completed::before { +.g-Recipe__Content ol > li.g-Recipe__Completed { + text-decoration: line-through; +} + +.g-Recipe__Content ol > li.g-Recipe__Completed::before { background-color: var(--color-completed); } diff --git a/templates/index.html b/templates/index.html index 74bf36f..4a420fa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -12,13 +12,13 @@

{% block content %} -

Plats

{% set section = get_section(path = "plats/_index.md") %} @@ -31,9 +31,9 @@ {% endfor %} -

Desserts

Hypoglucidiques

{% set section = get_section(path = "desserts/hypoglucidique/_index.md") %} @@ -46,7 +46,7 @@ {% endfor %} -

Hyperglucidiques

{% set section = get_section(path = "desserts/hyperglucidique/_index.md") %} @@ -59,7 +59,7 @@ {% endfor %} -

Nettoyage

+ {{ page.content | safe }} +

-- cgit v1.2.3