diff --git a/README.md b/README.md index b696761..6279afc 100644 --- a/README.md +++ b/README.md @@ -127,3 +127,7 @@ Fill in the meta information : 1. `name:` the brand name of the partner 2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder 3. `url:` the partner website + +### FAQ section + +Edit `_data/faq.json` file to add a new Q/A couple object. Plain html e.g. `
` or `link` is supported diff --git a/src/_data/faq.json b/src/_data/faq.json new file mode 100644 index 0000000..665d9b6 --- /dev/null +++ b/src/_data/faq.json @@ -0,0 +1,14 @@ +{ + "items": [{ + "q": "Question 1 ?", + "a": "Réponse 1.
Avec retour à la ligne" + }, + { + "q": "Question 2 ?", + "a": "Réponse 2 avec une url : https://www.astrolabe.coop/nous-rejoindre/" + }, + { + "q": "Question 3 ?", + "a": "Réponse 3 avec un lien" + }] +} diff --git a/src/_data/navigation.json b/src/_data/navigation.json index d269f4c..0d89de6 100644 --- a/src/_data/navigation.json +++ b/src/_data/navigation.json @@ -26,8 +26,8 @@ "external": false }, { - "text": "Nous contacter", - "url": "#contact-form", + "text": "FAQ / Nous contacter", + "url": "/faq+contact/", "external": false } ] diff --git a/src/_includes/layouts/contact.njk b/src/_includes/layouts/contact.njk index 75a38a1..b85beb2 100644 --- a/src/_includes/layouts/contact.njk +++ b/src/_includes/layouts/contact.njk @@ -1,17 +1,9 @@ {% extends 'layouts/base.njk' %} -{# Intro content #} -{% set introHeading = title %} - {% block content %}
-
- {% include "partials/components/intro.njk" %} -
- {{ content | safe }} - {% include "partials/components/contact-form.njk" %} -
-
+ {% include "partials/components/faq.njk" %} + {% include "partials/components/contact-form.njk" %}
{% endblock %} diff --git a/src/_includes/partials/components/faq.njk b/src/_includes/partials/components/faq.njk new file mode 100644 index 0000000..2ab4ce2 --- /dev/null +++ b/src/_includes/partials/components/faq.njk @@ -0,0 +1,24 @@ +
+ {% if faq.items %} +
+

{{ faqHeading }}

+ {{ content | safe }} +
+ {% for item in faq.items %} +
+

+ +

+
+
+ {{ item.a | urlize | safe }} +
+
+
+ {% endfor %} +
+
+ {% endif %} +
diff --git a/src/pages/contact.md b/src/pages/contact.md deleted file mode 100644 index e16b627..0000000 --- a/src/pages/contact.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 'Contact' -permalink: '/contact/index.html' -layout: 'layouts/contact.njk' -eleventyExcludeFromCollections: true ---- - -You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk). - -To delete the contact form for this site, delete this page in the CMS or at `src/pages/contact.md`. You probably will also want to delete `src/pages/thank-you.md`. diff --git a/src/pages/faq-contact.md b/src/pages/faq-contact.md new file mode 100644 index 0000000..6ef3b98 --- /dev/null +++ b/src/pages/faq-contact.md @@ -0,0 +1,9 @@ +--- +title: 'FAQ / Contact' +permalink: '/faq+contact/index.html' +layout: 'layouts/contact.njk' +eleventyExcludeFromCollections: true +faqHeading: 'Foire Aux Questions' +--- + +[A REFORMULER ?] Avant de nous contacter, peut-être avons déjà réponse à certaines de vos questions ? diff --git a/src/scss/components/_faq.scss b/src/scss/components/_faq.scss new file mode 100644 index 0000000..23e8dde --- /dev/null +++ b/src/scss/components/_faq.scss @@ -0,0 +1,30 @@ +.faq { + &__heading { + margin: 8rem 0 4rem; + } + + .accordion { + margin-top: 2rem; + } + + .accordion-button { + font-size: 1.25rem; + font-weight: 600; + padding: 1rem 0; + } + + .accordion-button:not(.collapsed) { + color: var(--color-text); + background-color: var(--color-white); + box-shadow: none; + } + + .accordion-button:focus { + border: 0; + box-shadow: 0 0 0 1px var(--color-text); + } + + .accordion-button:not(.collapsed)::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + } +} diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index 52759c7..87f90e5 100644 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -151,13 +151,13 @@ &::after { content: ''; - background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; - width: 1rem; - height: .625rem; + width: 1.25rem; + height: 1.25rem; position: absolute; right: 0; - top: calc(50% - .3125rem); + top: calc(50% - .625rem); } } diff --git a/src/scss/global.scss b/src/scss/global.scss index 5c99c82..44f01e2 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -60,6 +60,7 @@ img { // Components @import 'components/button'; +@import 'components/faq'; @import 'components/form'; @import 'components/heading-permalink'; @import 'components/intro';