{{ content | safe }}
-
+
+
+ -
- {%- if previousPost %}
- {{ "i18n.previous" | i18n }}: {{ previousPost.data.title }} {% endif %} - {%- if nextPost %}
- {{ "i18n.next" | i18n }}: {{ nextPost.data.title }} {% endif %} -
Autres liens
+-
+ {%- for entry in collections.all | eleventyNavigation %}
+
- {{ entry.title | i18n }} + {%- endfor %} +
Catégories
+
diff --git a/eleventy.config.js b/eleventy.config.js
index 28a142e..2105548 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -61,7 +61,7 @@ module.exports = function(eleventyConfig) {
for(let item of collection) {
(item.data.tags || []).forEach(tag => tagSet.add(tag));
}
- return Array.from(tagSet);
+ return Array.from(tagSet).sort();
});
eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
diff --git a/fr/404.md b/fr/404.md
index bbedc2e..9a37322 100644
--- a/fr/404.md
+++ b/fr/404.md
@@ -3,9 +3,11 @@ layout: layouts/home.njk
permalink: 404.html
eleventyExcludeFromCollections: true
---
-# Content not found.
+# Cette page n'existe pas !
-Go home.
+Vous avez fait fausse route ¯\_(ツ)_/¯
+
+[Aller à la page d’accueil](/)
{#
Read more: https://www.11ty.dev/docs/quicktips/not-found/
diff --git a/fr/about/index.md b/fr/about/index.md
deleted file mode 100644
index a48155e..0000000
--- a/fr/about/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: layouts/base.njk
-title: À propos
-templateClass: tmpl-post
-eleventyNavigation:
- key: nav.about
- order: 3
----
-# {{ title }}
-
-Visitez notre site [IT's on us](https://www.itsonus.fr).
diff --git a/fr/all_articles.njk b/fr/all_articles.njk
new file mode 100644
index 0000000..e6f233d
--- /dev/null
+++ b/fr/all_articles.njk
@@ -0,0 +1,11 @@
+---
+layout: layouts/home.njk
+eleventyNavigation:
+ key: nav.all
+ order: 3
+---
+-
+ {%- for post in collections.posts | reverse %}
+
- {{ post.data.title }} + {%- endfor %} +
{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}
- +{#{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}
#} +Blog IT's on us
{% set postslist = collections.posts | head(-5) %} {% set postslistCounter = collections.posts | length %} {% include "postslist.njk" %} -Consulter plus d'articles dans les archives.
- -{# List all of the pages in the project --
- {%- for entry in collections.all %}
-
{{ entry.url }}
- {%- endfor %}
-
- #}
+{# {%- for entry in collections.all %}#}
+{#
{{ entry.url }}
#}
+{# {%- endfor %}#}
+{#
Tags
- --
-{% for tag in collections.all | getAllTags | filterTagList %}
- {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-
- {{ tag }} -{% endfor %} -
Voir l'ensemble des tags.
diff --git a/i18n.js b/i18n.js index bb68f1a..f9644bd 100644 --- a/i18n.js +++ b/i18n.js @@ -6,7 +6,7 @@ module.exports = { nav: { home: "Accueil", archive: "Archive", - about: "À propos", + all: "Tous les articles" } } }; diff --git a/public/css/index.css b/public/css/index.css index b3ca995..9a6ae12 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -9,14 +9,16 @@ --color-gray-20: #e0e0e0; --color-gray-50: #C0C0C0; --color-gray-90: #333; + --color-green-1: #004953; + --color-green-2: #57c183; --background-color: #fff; --text-color: rgba(0,0,10,.8); - --text-color-secondary: #004953; - --text-color-tertiary: #57c183; - --text-color-link: #004953; - --text-color-link-active: #004953; + --text-color-secondary: var(--color-green-1); + --text-color-tertiary: var(--color-green-2); + --text-color-link: var(--color-green-1); + --text-color-link-active: var(--color-green-1); } /*@media (prefers-color-scheme: dark) {*/ @@ -48,12 +50,48 @@ body { color: var(--text-color); background-color: var(--background-color); } -html { - overflow-y: scroll; -} + main { - max-width: 40em; + max-width: 1200px; margin: 0 auto; + + display: flex; +} +.main-content { + margin: auto; + width: 1200px; +} + +.right-side { + position: -webkit-sticky; /* for Safari */ + position: sticky; + top: 5rem; + align-self: flex-start; + width: 300px; + padding-left: 60px; +} + +.right-side .title { + color: var(--text-color-secondary); + font-weight: 700; +} + +.right-side .tags { + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.right-side .links { + padding: 0; + list-style: none; +} + +.right-side .tags, +.right-side .links { + padding: 0; + margin: 12px 0 23px 0; + list-style: none; } h1 { @@ -73,9 +111,6 @@ h2 { margin-top: 0; } -p:last-child { - margin-bottom: 0; -} p { line-height: 1.5; margin: 1.5em 0; @@ -93,7 +128,7 @@ a:hover { } main { - padding: 8rem 1rem 1rem; + padding: 8rem 1rem 4rem 1rem; } main :first-child { margin-top: 0; @@ -131,11 +166,14 @@ code { word-break: break-all; } +hr { + margin: 4rem 15vw; +} + /* Header */ .main-header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); - position: fixed; width: 100%; z-index: 1000; height: 60px; @@ -157,36 +195,20 @@ code { flex-grow: 1; } -.nav { - display: flex; - flex-grow: 1; - align-items: baseline; - justify-content: space-around; - list-style: none; - margin: 0; - padding: 0; -} -/* Nav */ -.nav-item { - display: inline-block; - font-weight: 900; - letter-spacing: .02em; - margin: 0; - padding: 0; -} -.nav-item a[href]:not(:hover) { - text-decoration: none; -} -.nav-item-active { - text-decoration: underline; -} - /*!* Posts list *!*/ -/*.postlist {*/ -/* list-style: none;*/ -/* padding: 0;*/ -/* padding-left: 1.5rem;*/ -/*}*/ +.post-list { + list-style: none; + padding: 5rem 0; +} +.post-list li { + display: flex; + padding: 15px 0; + margin: 2px; + border-bottom: 2px solid var(--text-color-secondary); +} +.post-list li a { + flex-grow: 1; +} .postlist-item { margin-bottom: 5rem; } @@ -211,7 +233,6 @@ code { background: var(--text-color-tertiary); padding: 4px; font-size: 0.8125em; /* 13px /16 */ - /*font-weight: 600;*/ border-radius: 5px; text-decoration: none; } @@ -224,6 +245,7 @@ code { padding: 0; margin: 0; } +.post-list time, .post-metadata time { margin-right: 1em; font-size: 0.8125em; /* 13px /16 */ @@ -232,8 +254,21 @@ code { .post-metadata li:first-child { flex-grow: 1; } +.post-nav ul { + display: flex; + justify-content: space-around; + list-style: none; + padding: 0; + margin: 2rem 1rem 0 0; +} +/*.post-nav ul li.previous {*/ +/* list-style: '<';*/ +/*}*/ +/*.post-nav ul li.next {*/ +/* list-style: '>';*/ +/*}*/ - /* Direct Links / Markdown Headers */ +/* Direct Links / Markdown Headers */ .direct-link { font-family: sans-serif; text-decoration: none; @@ -247,3 +282,81 @@ a[href].direct-link:focus, :hover > a[href].direct-link { color: #aaa; } + +.main-footer { + align-items: center; + background: var(--color-green-1); + display: flex; + height: 300px; + padding: 0 103px; +} + +.main-footer, +.main-footer a { + color: #fff; +} + +.footer-contact { + display: flex; + flex: 0 20%; + flex-direction: column; + font-size: 1em; + line-height: 1.5em; +} + +.footer-contact p { + margin: 0; + padding: 0; +} + +.footer-contact-title { + color: #fff; + font-size: 1.2em; + font-style: normal; + font-weight: 700; + letter-spacing: .04em; + line-height: 1.7em; + text-transform: uppercase; +} + +.footer-contact div:last-child { + padding-top: 23px; +} + +.footer-center { + flex: 0 60%; + text-align: center; +} + +@media only screen and (max-width: 1200px) { + main { + max-width: 100%; + flex-direction: column; + padding-top: 1rem; + } + .main-content{ + max-width: 100%; + } + .right-side { + width: 100%; + padding-left: 0; + padding-top: 5rem; + } + .main-footer { + flex-direction: column-reverse; + height: auto; + padding: 23px 0; + } + .post-nav ul { + flex-direction: column; + } + .footer-contact { + flex-direction: row; + justify-content: space-between; + padding: 0 23px; + width: 100%; + } + .footer-center { + padding: 0 23px 23px; + } +}