From f6ddcc49021a09a21c1ccf6d8c26586a89bd73c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rau=CC=81l=20Di=CC=81az=20Poblete?=
 <info@rauldiazpoblete.com>
Date: Thu, 29 Sep 2016 13:59:41 +0200
Subject: [PATCH] Fix page-footer styles & infographics in mobile resolutions

Closes #22
---
 _app/styles/layouts/_home.scss | 20 +++++++++-----------
 _app/styles/layouts/_vis.scss  |  2 +-
 assets/styles/main.css         | 34 +++++++++++++++++-----------------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/_app/styles/layouts/_home.scss b/_app/styles/layouts/_home.scss
index c27e25f..c9c0a8d 100644
--- a/_app/styles/layouts/_home.scss
+++ b/_app/styles/layouts/_home.scss
@@ -270,21 +270,19 @@ $btn-scroll-down-icon-size: 44px;
   [class*=col-] {
     height: 300px;
   }
+}
 
-  &.page-footer{
-    height: auto;
+.page-footer{
+  height: auto;
 
-    .container-fluid,
-    .row {
-      height: auto;
-    }
-
-    [class*=col-] {
-      height: 300px;
-    }
+  .container-fluid,
+  .row {
+    height: auto;
   }
 
-  
+  [class*=col-] {
+    height: 300px;
+  }
 }
 
 @media (min-width: $screen-sm) {
diff --git a/_app/styles/layouts/_vis.scss b/_app/styles/layouts/_vis.scss
index 1a8cf81..18a18ca 100644
--- a/_app/styles/layouts/_vis.scss
+++ b/_app/styles/layouts/_vis.scss
@@ -929,7 +929,7 @@ Infographic
   }
 }
 
-.page-template-template-article{
+.articles{
 
   @media (max-width: $screen-md) {
 
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 22d4625..325d0ea 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -9080,12 +9080,12 @@ h3, h4, h5 {
 #home [class*=col-] {
   height: 300px; }
 
-#home.page-footer {
+.page-footer {
   height: auto; }
-  #home.page-footer .container-fluid,
-  #home.page-footer .row {
+  .page-footer .container-fluid,
+  .page-footer .row {
     height: auto; }
-  #home.page-footer [class*=col-] {
+  .page-footer [class*=col-] {
     height: 300px; }
 
 @media (min-width: 768px) {
@@ -10370,36 +10370,36 @@ Infographic
       font-size: 1em; } }
 
 @media (max-width: 992px) {
-  .page-template-template-article .infographic .fixed {
+  .articles .infographic .fixed {
     position: static !important; }
-  .page-template-template-article .infographic .infographic-content {
+  .articles .infographic .infographic-content {
     position: static;
     padding-top: 1px; }
-    .page-template-template-article .infographic .infographic-content li {
+    .articles .infographic .infographic-content li {
       position: static;
       opacity: 1;
       margin-bottom: 30px;
       border-bottom: 1px solid #148487; }
-      .page-template-template-article .infographic .infographic-content li:last-child {
+      .articles .infographic .infographic-content li:last-child {
         border-bottom: none; }
-      .page-template-template-article .infographic .infographic-content li img,
-      .page-template-template-article .infographic .infographic-content li svg {
+      .articles .infographic .infographic-content li img,
+      .articles .infographic .infographic-content li svg {
         display: block;
         width: 100%;
         height: auto;
         margin: 20px 0; }
-  .page-template-template-article .infographic .infographic-graph,
-  .page-template-template-article .infographic .infographic-nav,
-  .page-template-template-article .infographic .infographic-frame {
+  .articles .infographic .infographic-graph,
+  .articles .infographic .infographic-nav,
+  .articles .infographic .infographic-frame {
     display: none; }
-  .page-template-template-article .infographic .infographic-frame li {
+  .articles .infographic .infographic-frame li {
     outline: 1px solid white; }
-  .page-template-template-article #prices-infographic {
+  .articles #prices-infographic {
     font-size: 0.875em; }
-    .page-template-template-article #prices-infographic .infographic-content li {
+    .articles #prices-infographic .infographic-content li {
       width: 100%;
       padding: 0 4% 30px;
       text-align: center;
       margin-top: 30px; }
-  .page-template-template-article #prices-infographic-tooltip {
+  .articles #prices-infographic-tooltip {
     display: none; } }