Small tweaks to main page styles

rowanhogan · May 8, 2016 · fb7fac4 · fb7fac4
1 parent 1dd6e57
commit fb7fac4
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 139 deletions.
diff --git a/app/scripts/components/handleMainPage.js b/app/scripts/components/handleMainPage.js
@@ -1,6 +1,5 @@
 
 const $ = require('jquery');
-require('slick-carousel');
 
 function handleMainPage () {
   var $img = $('#mp-tfa-img img');
@@ -13,17 +12,6 @@ function handleMainPage () {
     $('#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">');
-
-  $('#mp-dyk ul').slick({
-    arrows: false,
-    autoplay: true,
-    autoplaySpeed: 5000,
-    dots: true,
-    fade: true
-  });
-
 }
 
 module.exports = handleMainPage;
diff --git a/app/styles/_main.scss b/app/styles/_main.scss
@@ -54,57 +54,89 @@
     padding: 2em $padding !important;
     box-sizing: border-box;
 
-    &.has-bg-image {
-      color: white !important;
-      background: #334 !important;
+    @media (min-width: 769px) {
+      #mp-tfa-img {
+        margin-right: 3em !important;
+      }
+    }
+
+    @media (max-width: 768px) {
 
-      a {
+      &.has-bg-image {
         color: white !important;
+        background: #334 !important;
+
+        a {
+          color: white !important;
+        }
+
+        > p {
+          max-height: 300px;
+          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, transparent 60%);
+          -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;
+
+          .thumbcaption {
+            display: none;
+          }
+
+          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;
+          }
+        }
       }
 
-      > p {
-        max-height: 300px;
-        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, transparent 60%);
-        -webkit-background-clip: text;
-        // max-width: 600px;
-        margin: 1em auto;
+      > * {
+        position: relative;
+        z-index: 10;
       }
 
-      > #mp-tfa-img {
+      > ul {
+        text-align: center !important;
         position: absolute;
-        top: 0;
+        bottom: 2em;
         left: 0;
-        width: 100%;
-        bottom: 0;
-        margin: 0 !important;
-        z-index: 0;
-        overflow: hidden;
-        background-size: cover;
-        background-position: center;
-        opacity: .6;
+        right: 0;
+        padding: 0 2em;
 
-        a {
-          display: none;
-          pointer-events: none;
-        }
-
-        img {
+        .hlist {
           display: block;
-          height: 100vh;
-          width: auto !important;
-          max-width: 10000000px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          opacity: .5;
+          font-size: 14px;
         }
       }
     }
@@ -115,58 +147,12 @@
       }
     }
 
-    > * {
-      position: relative;
-      z-index: 10;
-    }
-
-    > ul {
-      text-align: center !important;
-      position: absolute;
-      bottom: 2em;
-      left: 0;
-      right: 0;
-      padding: 0 2em;
-
-      .hlist {
-        display: block;
-        font-size: 14px;
-      }
-    }
-
     b:first-of-type {
       font-size: 1.25em;
       font-variant: small-caps;
     }
   }
 
-  // #mp-right {
-  //   left: $left-column-width;
-  //   right: 0;
-  //   width: (100% - $left-column-width) !important;
-  //   height: calc(50vh - 27.5px);
-  // }
-  //
-  // #mp-middle, #mp-lower {
-  //   position: absolute;
-  //   top: calc(50vh - 27.5px);
-  //   height: calc(50vh - 27.5px);
-  //   margin: 0 !important;
-  //   overflow: auto;
-  //   box-sizing: border-box;
-  //   width: (100% - $left-column-width) / 2 !important;
-  // }
-  //
-  // #mp-middle {
-  //   padding: $padding !important;
-  //   left: $left-column-width;
-  //   border-right: thin solid #eee !important;
-  // }
-
-  // #mp-lower {
-  //   right: 0;
-  // }
-
   #mp-other, #mp-sister, #mp-lang {
     display: none;
   }
@@ -212,48 +198,27 @@
     }
   }
 
-  #mp-dyk {
-    ul li {
-      border: 0 !important;
-      text-align: center;
-      padding: 1em !important;
-    }
-
-    ul.slick-dots {
-      text-align: center;
 
-      li {
-        display: inline-block;
-        padding: 0 !important;
-        border: 0;
+  @media (min-width: 768px) {
+    #mp-itn { float: left; }
+    #mp-otd { float: right; }
 
-        button {
-          position: relative;
-          display: block;
-          text-indent: -9999px;
-          width: 20px;
-          height: 20px;
-          overflow: hidden;
-          padding: 0;
-          background: transparent;
+    #mp-itn,
+    #mp-otd {
+      box-sizing: border-box;
+      width: 50vw;
 
-          &:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -4px;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #aaa;
-          }
-        }
+      ul {
+        max-width: 50vw;
       }
+    }
+  }
 
-      li.slick-active button:before {
-        background: black;
-      }
+  #mp-dyk {
+    ul li {
+      border: 0 !important;
+      text-align: center;
+      padding: 1em !important;
     }
   }
 
@@ -342,6 +307,10 @@
     content: 'On this day...';
   }
 
+  #mp-lower {
+    clear: both;
+  }
+
   #content #mp-tfp-h2 {
     position: absolute;
     left: 0;
@@ -375,7 +344,7 @@
       margin-left: auto;
       margin-right: auto;
       max-width: 480px;
-      padding: .5em 2em !important;
+      padding: 1.5em 2em !important;
     }
   }
 

diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "fastclick": "^1.0.6",
-    "jquery": "^2.1.4",
-    "slick-carousel": "^1.5.9"
+    "jquery": "^2.1.4"
   }
 }