Merge pull request #125 from cetinajero/feature/facebook-component

Create facebook & card-deck components

_includes/components/info-cards/card-deck.html

@@ -0,0 +1,16 @@
+<div class="card-deck">
+  {% for info-card in page.info-cards %}
+    <div class="card pt-0 pt-sm-5 pt-lg-0" data-appear-animation="{{ info-card.animation }}">
+      <a href="{{ info-card.href }}">
+        <img src="{{ site.amazon-s3 }}/components/info-cards/card-deck/img/{{ info-card.img }}.png" class="card-img-top" alt="{{ info-card.title }}">
+      </a>
+      <div class="card-body">
+        <h5 class="card-title">{{ info-card.title }}</h5>
+        <p class="card-text">{{ info-card.desc }}</p>
+      </div>
+      <div class="card-footer text-right bg-white border-top-0">
+        <a class="btn btn-primary" href="{{ info-card.href }}">{{ info-card.button }}</a>
+      </div>
+    </div>
+  {% endfor %}
+</div>

_includes/components/jumbotron/bootstrap.html

@@ -1,4 +1,4 @@
-<div class="jumbotron bg-cover" data-component="jumbotron/bootstrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/grupopv-public/assets/img/components/jumbotron/bootstrap/{{ include.img }}.jpg');">
+<div class="jumbotron bg-cover h-100" data-component="jumbotron/bootstrap" style="background-image: url('https://s3-us-west-2.amazonaws.com/grupopv-public/assets/img/components/jumbotron/bootstrap/{{ include.img }}.jpg');">
   <h2 class="display-4 text-white" data-appear-animation="fadeInDown">{{ include.title }}</h2>
   <p class="lead text-white" data-appear-animation="fadeInUp">{{ include.desc }}</p>
   <a class="btn btn-primary" href="{{ include.href }}" role="button" data-appear-animation="fadeInUp">{{ include.button }}</a>

_includes/components/social-media/facebook.html

@@ -0,0 +1,12 @@
+<div class="text-center">
+  <iframe
+    src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fgrupopvmx%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=true&appId"
+    width="340"
+    height="500"
+    style="border:none;overflow:hidden"
+    scrolling="no"
+    frameborder="0"
+    allowTransparency="true"
+    allow="encrypted-media">
+  </iframe>
+</div>

_sass/components/info-cards/_card-deck.scss

@@ -0,0 +1,12 @@
+@mixin card-deck-column-count($count: 1) {
+  flex: 0 0 calc(100% / #{$count} - #{$card-deck-margin} * 2);
+  border: none;
+}
+
+.card-deck {
+  .card {
+    @include media-breakpoint-between(sm, md) {
+      @include card-deck-column-count(2);
+    }
+  }
+}

assets/css/main.min.scss

@@ -60,6 +60,7 @@ $flag-icon-css-path: '../node_modules/flag-icon-css/flags';
 @import "components/forms/formspree";
 @import "components/forms/google-forms";
 @import "components/icons/bootstrap";
+@import "components/info-cards/card-deck";
 @import "components/info-cards/search-results";
 @import "components/jumbotron/bootstrap";
 @import "components/lang-switchers/toogle-lang";