Classe utile pour les sections centrées

Créer une classe SCSS pour les sections de classe `d-flex flex-column align-items-center`

README.md

@@ -7,9 +7,8 @@ TODO:
   - récupérer le RSS depuis https://blog.piaf-saclay.org/index.xml
   - créer un carousel
 - écrire la liste des exposés sur le blog
-- créer une classe pour `d-flex flex-column align-items-center`
 - boutons :
-  - faut-il utiliser les boutons officiels de YouTube et de Discord ? 
+  - faut-il utiliser les boutons officiels de YouTube et de Discord ?
 - régler les bugs de `style.scss`
 - définir le thème du site
   - fixer une gamme de couleurs, une police d'écriture

components/blog_page.html

@@ -6,7 +6,7 @@ <h2 class="color-gray">{{title}}</h2>
 {% endblock %}
 
 {% block main %}
-<section class="content d-flex flex-column align-items-center">
+<section class="content centered-section">
     <div class="md-content">
         {{content|safe}}
     </div>

components/md_page.html

@@ -2,7 +2,7 @@
 
 {% block main %}
 
-<section class="container d-flex flex-column align-items-center">
+<section class="container centered-section">
 <div class="md-content">
     {% block md_content %}
     {% endblock %}

pages/asimov.html

@@ -3,7 +3,7 @@
 
 {% block main %}
 
-<section class="container d-flex flex-column align-items-center">
+<section class="container centered-section">
 
 <div class="md-content">
 

pages/groupe-de-lecture.html

@@ -2,7 +2,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-<section class="container d-flex flex-column align-items-center">
+<section class="container centered-section">
 
 <div class="md-content">
 

pages/home.html

@@ -11,7 +11,7 @@
 {% block main %}
 
 
-    <section class="d-flex flex-column align-items-center">
+    <section class="centered-section">
         {% include "about-phrase.html" %}
         <div class="row card-container">
             {% set title="Notre mission" %}
@@ -39,7 +39,7 @@
         </div>
     </section>
 
-    <section class="d-flex flex-column align-items-center">
+    <section class="centered-section">
         <h2 class="display-4 m-3"> Rejoindre la communauté</h2>
         <div class="row card-container">
             {% set title="Discord" %}

scss/style.scss

@@ -126,6 +126,12 @@ blockquote p {
     justify-content: center;
 }
 
+.centered-section {
+    @extend .d-flex;
+    @extend .flex-column;
+    @extend .align-items-center;
+}
+
 .display-7 {
     font-size: calc(1rem + 1vw);
     font-weight: 300;