layouts: use details for the post informations

* Wraps the post informations inside a details HTML tag.
* Reduces the bottom margin of the post main heading.
* Reorders the SCSS rules in order to set the post-info class to the
  details HTML tags.
* Add the permalink to the post informations.
* Uses the i18n mechanism for the new layout strings, such as
  "post-infos" or "permalink".
* Updates the changelog.
* Closes #17.

Co-Authored-by: iGor milhit <igor@milhit.ch>

CHANGELOG.md

@@ -16,7 +16,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 ### Commits
 
-- footer: add link to the last commit [`5621975`](https://framagit.org/iGormilhit/portfoliGor/commit/5621975a29032440d3ffd7dc6e2f7ce15b70e747)
+- layouts: use details for the post informations [`13af33a`](https://framagit.org/iGormilhit/portfoliGor/commit/13af33aa88d394faec748ff64840aaec520b3297)
+- head: improve the metadata exposed [`e7de77b`](https://framagit.org/iGormilhit/portfoliGor/commit/e7de77b3ad3f67c1833bdc3030cad034e5d0d5c6)
+- content: improve verses layout for small screens [`029a3ac`](https://framagit.org/iGormilhit/portfoliGor/commit/029a3ac1745580c999b75ae6fd9b68e520514a91)
+- footer: add link to the last commit [`0190c23`](https://framagit.org/iGormilhit/portfoliGor/commit/0190c233e9eb54638ddddf9cccb87405391b3c7b)
 - list: fix date variable on the lists and sections [`36a334c`](https://framagit.org/iGormilhit/portfoliGor/commit/36a334cab9d4e2bf746214571287d35a29bdf6eb)
 - shortcodes: adds an audio player with album cover [`e1cf918`](https://framagit.org/iGormilhit/portfoliGor/commit/e1cf9185f3f7c3cba4e97c6b2371fb9a465017da)
 - head: add a favicon [`e56fddc`](https://framagit.org/iGormilhit/portfoliGor/commit/e56fddc6e0c15bb6839c9cfc6277df5eb8f46d03)

assets/scss/_post.scss

@@ -5,7 +5,7 @@
 ///////////////////
 
 .post-header {
-  margin: 1em 0;
+  margin: 1rem 0 .5rem 0;
 
   h1 {
     margin: 0;
@@ -14,12 +14,16 @@
 
 .post-info {
   font-size: $font-size-small;
+  color: $snow-storm-light-grey;
+
+  > ul {
     margin-top: 0;
     padding: 0;
 
     > li {
       padding-right: .3rem;
     }
+  }
 
   li {
     display: flex;
@@ -40,7 +44,7 @@
 }
 
 @include breakpoint(tablet) {
-  .post-info {
+  .post-info > ul {
     display: flex;
     flex-wrap: wrap;
 

assets/scss/_variables.scss

@@ -1,4 +1,7 @@
-/////////////////// // FONT     // //
+///////////////////
+//               //
+//      FONT     //
+//               //
 ///////////////////
 
 $font-size-base: 1.25rem !default;      // 25 px

i18n/fr.toml

@@ -0,0 +1,5 @@
+[post-infos]
+other = "Informations sur le billet"
+
+[permalink]
+other = "Permalien"

layouts/partials/post-info.html

@@ -1,4 +1,6 @@
-<ul class="post-info">
+<details class="post-info">
+  <summary>{{ i18n "post-infos" }}</summary>
+    <ul>
       <li>Publié le&#x202F;: {{ dateFormat "2006-01-02" (default .Date (.PublishDate)) }}</li>
       {{ if (and (isset .Params "lastmod") (gt (dateFormat "2006-01-02" (.Lastmod)) (dateFormat "2006-01-02" (.PublishDate)))) }}
       <li>Dernière mise à jour&#x202F;: {{ .Lastmod.Format "2006-01-02" }}</li>
@@ -21,4 +23,6 @@
         </ul>
       </li>
       {{ end }}
-</ul>
+      <li><a href="{{ .Permalink }}">{{ i18n "permalink" }}</a></li>
+    </ul>
+</details>