diff options
| author | Joris | 2020-02-02 16:51:57 +0100 |
|---|---|---|
| committer | Joris | 2020-02-02 16:51:57 +0100 |
| commit | bc97048dfbb05766abf0c04aed593252a3abdc88 (patch) | |
| tree | 25cea9c393b430fe5ba825547e2cd88a08940498 | |
| parent | 1bdaf18073d82aa3e243d33f073fca3d69ee451f (diff) | |
Show recipe title in each recipe page
| -rw-r--r-- | content/nettoyage/lessive-au-lierre.md | 2 | ||||
| -rw-r--r-- | main.ts | 6 | ||||
| -rw-r--r-- | static/main.css | 52 | ||||
| -rw-r--r-- | templates/index.html | 12 | ||||
| -rw-r--r-- | 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) @@ -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<HTMLElement>('.g-Recipe h1') +const h1 = document.querySelector<HTMLElement>('.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 @@ <body class="g-Page"> <header class="g-Page__Header"> - Recettes + {{ page.title | default (value = "Recettes") }} </header> <main class="g-Page__Content"> {% block content %} - <h1>Plats</h1> + <h1 class="g-Recipe__Title">Plats</h1> <ul class="g-Page__Recipes"> {% set section = get_section(path = "plats/_index.md") %} @@ -31,9 +31,9 @@ {% endfor %} </ul> - <h1>Desserts</h1> + <h1 class="g-Recipe__Title">Desserts</h1> - <h2>Hypoglucidiques</h2> + <h2 class="g-Recipe__SubTitle">Hypoglucidiques</h2> <ul class="g-Page__Recipes"> {% set section = get_section(path = "desserts/hypoglucidique/_index.md") %} @@ -46,7 +46,7 @@ {% endfor %} </ul> - <h2>Hyperglucidiques</h2> + <h2 class="g-Recipe__SubTitle">Hyperglucidiques</h2> <ul class="g-Page__Recipes"> {% set section = get_section(path = "desserts/hyperglucidique/_index.md") %} @@ -59,7 +59,7 @@ {% endfor %} </ul> - <h1>Nettoyage</h1> + <h1 class="g-Recipe__Title">Nettoyage</h1> <ul class="g-Page__Recipes"> {% set section = get_section(path = "nettoyage/_index.md") %} diff --git a/templates/page.html b/templates/page.html index 370eaf0..5174a14 100644 --- a/templates/page.html +++ b/templates/page.html @@ -6,8 +6,10 @@ ← Retour à l’accueil </a> - <div class="g-Recipe"> + <div class="g-Recipe__Content"> + {{ page.content | safe }} + </div> <script src="/main.js"></script> |