feat : Cards template #30 (#43)

* feat: change theme-primary color

* feat: add cards icons with sources links

* feat: split phraseX -> title/content manifesto and add icon_src

* feat: Update styles and layout in manifesto.html and
_base.scss

* feat: add the hightlighter in services

* feat: change contact section bg color

* feat: Update margin styles

* feat: Update media query

* feat: Improve readability in privacy phrase in contact-form.html

* fix: typo in config.yml & manifesto

_includes/contact-form.html

@@ -1,4 +1,4 @@
-<aside class="bg-dark" id="contact-form">
+<aside class="bg-primary" id="contact-form">
   <div class="container text-center">
     <div class="call-to-action">
       <div class="row">
@@ -22,7 +22,7 @@ <h2>{{ site.t.[layout.lang].contactForm.title }}</h2>
                 aria-describedby="emailHelp"
                 name="email"
               />
-              <small id="emailHelp" class="form-text text-muted"
+              <small id="emailHelp" class="form-text"
                 >{{ site.t.[layout.lang].contactForm.email.privacyPhrase }}</small
               >
             </div>

_includes/manifesto.html

@@ -1,36 +1,47 @@
 <pattern id="user_image_container" patternUnits="objectBoundingBox">
   <section class="bg-primary" id="about">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-12 text-justify">
-          <h2 class="section-heading">
+    <div class="container column-flex ">
+    <div class="row">
+      <div class="text-center">
+        <h2 class="section-heading">
             {{ site.t.[layout.lang].manifesto.title }}
           </h2>
           <hr class="light" />
-          <p>
+          <p class="section-introduction">
             {{ site.t.[layout.lang].manifesto.phrase1 }}
           </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase2 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase3 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase4 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase5 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase6 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase7 }}
-          </p>
-          <p>
-            {{ site.t.[layout.lang].manifesto.phrase8 }}
-          </p>
+
+          <div class="container text-muted ">
+
+            <!-- Première ligne avec plus de cartes -->
+            <div class="row center-flex">
+              {% assign cards = "card1,card2,card3,card4" | split: "," %}
+              {% for card in cards %}
+                <div class="col-md-3 col-sm-6 column-flex">
+                  <div class="custom-panel column-flex">
+                      <img src="{{ site.t.[layout.lang].manifesto[card].icon_src }}" alt="Card icon" class="svg-icon">
+                      <h3>{{ site.t.[layout.lang].manifesto[card].title }}</h3>
+                      <p>{{ site.t.[layout.lang].manifesto[card].content }}</p>
+                  </div>
+                </div>
+              {% endfor %}
+            </div>
+
+            <!-- Deuxième ligne avec moins de cartes -->
+            <div class="row small-row center-flex py-md-3">
+              {% assign cards = "card5,card6,card7" | split: "," %}
+              {% for card in cards %}
+                <div class="col-lg-3 col-md-6 column-flex">
+                  <div class="custom-panel column-flex">
+                      <img src="{{ site.t.[layout.lang].manifesto[card].icon_src }}" alt="Card icon" class="svg-icon">
+                      <h3>{{ site.t.[layout.lang].manifesto[card].title }}</h3>
+                      <p>{{ site.t.[layout.lang].manifesto[card].content }}</p>
+                  </div>
+                </div>
+              {% endfor %}
+            </div>
+
+          </div>
         </div>
         <div class="col-lg-8 col-lg-offset-2 text-center">
           <a href="#contact-form" class="btn btn-default btn-xl page-scroll">{{ site.t.[layout.lang].buttons.contactUs

_sass/_base.scss

@@ -10,7 +10,7 @@ body {
 }
 
 hr {
-  border-color: $theme-primary;
+  border-color: $theme-secondary;
   border-width: 3px;
   max-width: 50px;
 }
@@ -251,6 +251,57 @@ error-404 {
   color: white;
 }
 
+// About us
+.section-introduction{
+  @media (max-width: 1200px) {
+    text-align: justify;
+    padding: 0.5em;
+  }
+}
+
+.center-flex {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1 1 0px;
+}
+
+.column-flex {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+}
+
+.custom-panel {
+  background-color: white;
+  border-radius: 0.5em;
+  margin-bottom: 0.9em;
+  margin-top: 0.9em;
+  padding: 1em;
+  p {
+    font-size: 14px;
+  }
+  h3 {
+    color: rgba($theme-primary, 1);
+    filter: brightness(1.7);
+    font-weight: 600;
+  }
+}
+
+.svg-icon {
+  filter: invert(50%) sepia(100%) saturate(1500%);
+  height: 24px;
+}
+
+.small-row {
+  @media (min-width: 992px) {
+    margin: 0 10% 3% 10%;
+  }
+}
+
 // Sections
 
 .section-heading {
@@ -324,6 +375,11 @@ error-404 {
   }
 }
 
+#services b {
+  background-color: rgba(254, 235, 190, 87%); /* Yellow color */
+  font-weight: normal;
+}
+
 .call-to-action {
   h2 {
     margin: 0 auto 20px;
@@ -357,6 +413,12 @@ error-404 {
   text-transform: uppercase;
 }
 
+.btn:hover {
+  background-color: rgba($theme-secondary, 1);
+  filter: brightness(1);
+  color: rgba(254, 254, 254,1)
+}
+
 .btn-xl {
   padding: 15px 30px;
 }

css/main.scss

@@ -34,7 +34,8 @@
 // }
 
 // variables.less
-$theme-primary: #e89e5d;
+$theme-primary: #054546;
+$theme-secondary: #e89f5e;
 $theme-dark: #222;
 
 // Import partials from `sass_dir` (defaults to `_sass`)

img/cards_icons/sources.txt

@@ -0,0 +1,7 @@
+opensource.svg MIT https://iconduck.com/icons/14163/opensource
+radar-2.svg MIT https://iconduck.com/icons/156132/radar-2
+auto_awesome.svg Apache 2 https://iconduck.com/icons/32688/auto-awesome
+rocket.svg CC BY 4.0 https://iconduck.com/icons/22306/rocket
+eco.scg Apache 2 https://iconduck.com/icons/28790/eco 
+savings-solid.svg MIT https://iconduck.com/icons/100582/savings-solid
+grid-view-solid.svg MIT https://iconduck.com/icons/100862/grid-view-solid