Fix broken main page

rowanhogan · Mar 3, 2016 · b9be60a · b9be60a
1 parent 8356268
commit b9be60a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 53 deletions.
diff --git a/app/scripts/components/handleMainPage.js b/app/scripts/components/handleMainPage.js
@@ -3,11 +3,16 @@ const $ = require('jquery');
 require('slick-carousel');
 
 function handleMainPage () {
-  var imgSrc = $('#mp-tfa-img img').attr('src').replace('thumb/', ''),
-      arr = imgSrc.split('/')
+  var $img = $('#mp-tfa-img img');
 
-  arr.splice(arr.length - 1);
-  $('#mp-tfa-img').css({ 'background-image' : 'url("' + arr.join('/') + '")' });
+  if ($img.length) {
+    var imgSrc = $('#mp-tfa-img img').attr('src').replace('thumb/', ''),
+    arr = imgSrc.split('/')
+
+    arr.splice(arr.length - 1);
+    $('#mp-tfa-img').css({ 'background-image' : 'url("' + arr.join('/') + '")' });
+    $('#mp-tfa').addClass('has-bg-image');
+  }
 
   $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">');
 

diff --git a/app/styles/_main.scss b/app/styles/_main.scss
@@ -63,13 +63,64 @@
     left: 0;
     height: calc(100vh - 55px);
     width: $left-column-width !important;
-    color: white !important;
-    background: black !important;
     overflow: hidden;
 
-    a {
+    &.has-bg-image {
       color: white !important;
+      background: #334 !important;
+
+      a {
+        color: white !important;
+      }
+
+      > p {
+        max-height: 50vh;
+        max-width: 480px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 3em;
+        line-height: 1.667em;
+        text-align: justify;
+        -webkit-text-fill-color: transparent;
+        background: -webkit-linear-gradient(white 50%, transparent);
+        -webkit-background-clip: text;
+        // max-width: 600px;
+        margin: 1em auto;
+      }
+
+      > #mp-tfa-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        bottom: 0;
+        margin: 0 !important;
+        z-index: 0;
+        overflow: hidden;
+        background-size: cover;
+        background-position: center;
+        opacity: .6;
+
+        a {
+          display: none;
+          pointer-events: none;
+        }
 
+        img {
+          display: block;
+          height: 100vh;
+          width: auto !important;
+          max-width: 10000000px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          opacity: .5;
+        }
+      }
+    }
+
+    a {
       &:hover {
         text-decoration: underline;
       }
@@ -98,52 +149,6 @@
       font-size: 1.25em;
       font-variant: small-caps;
     }
-
-    > p {
-      max-height: 50vh;
-      max-width: 480px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-bottom: 3em;
-      line-height: 1.667em;
-      text-align: justify;
-      -webkit-text-fill-color: transparent;
-      background: -webkit-linear-gradient(white 50%, transparent);
-      -webkit-background-clip: text;
-      // max-width: 600px;
-      margin: 1em auto;
-    }
-
-    > #mp-tfa-img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      bottom: 0;
-      margin: 0 !important;
-      z-index: 0;
-      overflow: hidden;
-      background-size: cover;
-      background-position: center;
-      opacity: .6;
-
-      a {
-        display: none;
-        pointer-events: none;
-      }
-
-      img {
-        display: block;
-        height: 100vh;
-        width: auto !important;
-        max-width: 10000000px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        opacity: .5;
-      }
-    }
   }
 
   #mp-right {