[Glossary] Introduce terms listing & show pages

assets/scss/components/_banner.scss

@@ -25,6 +25,7 @@
   }
 
   p {
+    margin: 0 0 15px;
     max-width: 700px;
   }
 

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,24 @@
+@use '../abstracts' as *;
+
+.breadcrumb {
+  margin: 50px 0 30px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.breadcrumb__item {
+  &:before {
+    display: none;
+  }
+
+  &:after {
+    top: 50%;
+    transform: translateY(-50%);
+    content: '\e90b';
+    font-size: toRem(16px);
+  }
+
+  a {
+    text-decoration: none;
+  }
+}

assets/scss/components/_glossary-list.scss

@@ -0,0 +1,118 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+.glossary-list {
+  margin: 0;
+  padding: 0;
+  width: math.div(100%, 3);
+  min-width: math.div(100%, 3);
+}
+
+.glossary-list__item {
+  margin-bottom: 15px;
+  padding-right: 30px;
+  padding-left: 100px;
+  display: flex;
+
+  &:before,
+  &:after {
+    display: none;
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+
+  a {
+    font-size: toRem(20px);
+    line-height: 1.3;
+  }
+}
+
+[class*="glossary-list__item--"] {
+  margin-top: 50px;
+  position: relative;
+
+  &:before {
+    height: unset;
+    width: unset;
+    position: absolute;
+    top: -8px;
+    left: 0;
+    display: flex;
+    font-family: $tertiary-font;
+    font-size: toRem(72px);
+    line-height: 1;
+    text-transform: uppercase;
+    border: none;
+    background: none;
+  }
+}
+
+$characters: (
+  0: '#',
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  d: 'd',
+  e: 'e',
+  f: 'f',
+  g: 'g',
+  h: 'h',
+  i: 'i',
+  j: 'j',
+  k: 'k',
+  l: 'l',
+  m: 'm',
+  n: 'n',
+  o: 'o',
+  p: 'p',
+  q: 'q',
+  r: 'r',
+  s: 's',
+  t: 't',
+  u: 'u',
+  v: 'v',
+  w: 'w',
+  x: 'x',
+  y: 'y',
+  z: 'z'
+);
+
+@each $character, $character-icon in $characters {
+  .glossary-list__item--#{$character} {
+    &:before {
+      content: $character-icon;
+    }
+  }
+}
+
+@media(max-width: $screen-md) {
+  .glossary-list__item {
+    padding-left: 60px;
+
+    a {
+      font-size: toRem(18px);
+    }
+  }
+
+  [class*="glossary-list__item--"] {
+    &:before {
+      top: -1px;
+      font-size: toRem(40px);
+    }
+  }
+}
+
+@media(max-width: $screen-xs) {
+  .glossary-list {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  [class*="glossary-list__item--"] {
+    &:first-of-type {
+      margin-top: 50px;
+    }
+  }
+}

assets/scss/components/_glossary.scss

@@ -0,0 +1,13 @@
+@use '../abstracts' as *;
+
+.glossary {
+  margin: 0 0 100px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (max-width: $screen-xs) {
+  .glossary {
+    margin: 0 0 50px;
+  }
+}

assets/scss/components/_side-image.scss

@@ -24,6 +24,7 @@
     figure,
     > img {
       margin: 50px 0 !important;
+      max-width: 100%;
     }
   }
 }

assets/scss/layout/_footer.scss

@@ -140,6 +140,7 @@
   }
 
   .pages {
+    margin-top: 100px;
     width: 300px;
     display: flex;
   }

assets/scss/pages/_page-article.scss

@@ -11,21 +11,7 @@
     margin-top: 0;
   }
 
-  figure {
-    margin-left: -120px;
-    width: calc(100% + 120px);
-  }
-
   .alert {
     margin: 0 0 40px;
   }
 }
-
-@media (max-width: $screen-md) {
-  .page-article {
-    figure {
-      margin-left: 0;
-      width: 100%;
-    }
-  }
-}

assets/scss/pages/_page-glossary.scss

@@ -0,0 +1,28 @@
+@use '../abstracts' as *;
+
+.page-glossary {
+  .banner {
+    height: 1550px;
+  }
+
+  main {
+    background-image: none; // remove background-image to prevent ugliness when not much content on page
+  }
+
+  .glossary-logo {
+    margin: 0 auto 50px;
+    max-width: 400px;
+  }
+
+  .content-links {
+    margin-top: 300px;
+  }
+}
+
+@media (max-width: $screen-md) {
+  .page-glossary {
+    .content-links {
+      margin-top: 100px;
+    }
+  }
+}

assets/scss/style.scss

@@ -1,13 +1,3 @@
-// @use "~prismjs/themes/prism-tomorrow.css";
-// @use '~aos/dist/aos';
-
-// Prevents hiding elements for animations if js is not enabled:
-// html.no-js [data-aos] {
-//   opacity: 1;
-//   transform: none;
-//   pointer-events: unset;
-// }
-
 @use "base/_reset";
 @use "base/_font-face";
 
@@ -29,6 +19,7 @@
 @use "components/_banner";
 @use "components/_button";
 @use "components/_comment";
+@use "components/_breadcrumb";
 @use "components/_blockquote";
 @use "components/_miniature";
 @use "components/_miniature-inline";
@@ -53,6 +44,8 @@
 @use "components/_preview";
 @use "components/_miniature-highlight";
 @use "components/_side-image";
+@use "components/_glossary";
+@use "components/_glossary-list";
 
 @use "generic/_a";
 @use "generic/_code";
@@ -61,8 +54,6 @@
 @use "generic/_p";
 @use "generic/_titles";
 @use "generic/_ul";
-// // @use "generic/_iframe";
-// // @use "generic/_kbd";
 
 @use "utilities/_screen-reader";
 
@@ -76,3 +67,4 @@
 @use "pages/_page-legals";
 @use "pages/_page-error";
 @use "pages/_page-signature";
+@use "pages/_page-glossary";

config/packages/twig.yaml

@@ -24,7 +24,7 @@ twig:
 
             trackers:
                 matomo: "%env(MATOMO_ID)%"
-            
+
             caseStudies:
                 enabled: true
 
@@ -45,6 +45,7 @@ twig:
             footer:
                 - { path: "case_studies", label: "Cas clients" }
                 - { path: "about", label: "À propos" }
+                - { path: "glossary", label: "Glossaire" }
                 - { path: "contact", label: "Contact" }
 
             footerServices:

content/member/_sample.yaml

@@ -20,10 +20,6 @@ linkedIn: ~
 email: ~
 avatar: content/images/member/avatars/path-to-avatar.jpg
 
-certifications:
-    - symfony
-    - opquast
-
 emojis:
     - 🎲
     - 🎮

content/member/frey.yaml

@@ -17,8 +17,6 @@ linkedIn: ~
 email: [email protected]
 avatar: content/images/member/avatars/ffrey.jpg
 
-certifications: [ ]
-
 emojis:
     - 🌰
     - 👾

content/member/gfaivre.yaml

@@ -14,8 +14,6 @@ avatar: content/images/member/avatars/gfaivre.jpg
 
 phone: '007'
 
-certifications: [ ]
-
 emojis:
     - 🤾🏻‍♂️
     - 🎮

content/member/yheitz.yaml

@@ -13,6 +13,4 @@ linkedIn: ~
 email: [email protected]
 avatar: content/images/member/avatars/yheizt.png
 
-certifications: [ ]
-
 emojis: [ ]

content/term/ansible.md

@@ -0,0 +1,34 @@
+---
+name: "Ansible"
+logo: "build/images/services/ansible.svg"
+externalLink: https://www.ansible.com/
+metaDescription: Adeptes de la première heure d'Ansible, nous continuons 10 ans plus tard à l'utiliser de manière intensive pour la construction de nos infrastructures et de nos environnement de développement.
+---
+
+## C'est quoi Ansible ?
+Ansible est une plateforme open-source de gestion de configuration et d'automatisation des tâches. 
+Elle permet aux administrateurs système mais aussi aux développeurs de définir des configurations, des déploiements et des actions à effectuer sur des serveurs et des infrastructures de manière reproductible. 
+
+Ansible se distingue par sa simplicité d'utilisation grâce à sa syntaxe déclarative en **YAML**, qui **décrit l'état souhaité du système**. Il n'exige **aucune installation d'agent** sur les machines cibles, fonctionne via SSH ou d'autres protocoles, et offre une grande flexibilité pour automatiser des opérations complexes, la gestion de configurations, et le déploiement d'applications.
+
+Nous l'utilisons maintenant depuis 10 ans afin de piloter la configuration de nos environnements applicatifs et mettons à disposition de la communauté de nombreux rôles éprouvés en production sur des infrastructures conséquentes à travers notre projet Open Source [Manala](https://github.com/manala/ansible-roles).
+
+Nous sommes également à l'origine de la création des **« meetups » Lyonnais Ansible**, que nous avons organisés et pilotés pendant plusieurs années.
+
+## Pourquoi Ansible ?
+
+Questions souvent posée, nous avons travaillons par le passé avec Chief et Puppet en passant par Salt mais quand Ansible est apparu il s'est rapidement imposé chez nous notamment en raison de sa rapidité d'apprentissage et de sa popularité au sein des équipes de développeurs.
+
+En apportant notre expertise Ops nous devons également réfléchir à la facilité de prise en main des solutions que nous proposons aux équipes applicatives.
+
+## Son utilisation chez Rix
+
+Il est utilisé sur l'ensemble des tâches de configuration des environnements, entre autres: 
+
+- Gestion des configurations
+- Installation des services
+- Gestion des accès
+
+Nous le couplons à Terraform qui porte lui la responsabilité de constructions des éléments d'infrastructure.
+
+Il est également prépondérant pour la construction des environnements de développement à destination des équipes applicatives.

content/term/aws.md

@@ -0,0 +1,8 @@
+---
+name: "AWS"
+logo: "build/images/services/aws.svg"
+externalLink: https://aws.amazon.com/fr/
+#metaDescription: TODO
+---
+
+Some **markdown** content