Card layout

src/components/ArticleController.jsx

@@ -6,6 +6,7 @@ import { viewArticle, isArticleViewed } from 'lib/utilities';
 import Article from 'components/Article';
 import FalcorController from 'lib/falcor/FalcorController';
 import NotFound from 'components/NotFound';
+import ArticleLoad from 'transitions/ArticleLoad';
 
 export default class ArticleController extends FalcorController {
   static getFalcorPathSets(params) {
@@ -131,11 +132,6 @@ export default class ArticleController extends FalcorController {
         </div>
       );
     }
-
-    return (
-      <div>
-        Loading
-      </div>
-    );
+    return <ArticleLoad />;
   }
 }

src/components/Header.jsx

@@ -33,7 +33,7 @@ export default class Header extends BaseComponent {
           <div className="header__title">
             {/* TODO: change link to proper Gazelle icon uploaded to server*/}
             <Link to="/" className="header__title__content">
-              <img src="https://thegazelle.s3.amazonaws.com/gazelle/2016/02/header-logo.png" alt="logo" />
+              <img src="https://s3.amazonaws.com/thegazelle/gazelle/2017/09/header-logo-transparent-200.png" alt="logo" />
               <h1 className="header__title__content__site-name">{this.props.appName}</h1>
             </Link>
           </div>

src/components/IssueController.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import _ from 'lodash';
 import FalcorController from 'lib/falcor/FalcorController';
-import { Link } from 'react-router';
+// import { Link } from 'react-router';
 import Helmet from 'react-helmet'; // Add meta tags for pre-Ghost release
 import { mapLegacyIssueSlugsToIssueNumber } from 'lib/utilities';
 
@@ -117,9 +117,6 @@ export default class IssueController extends FalcorController {
         // Render nothing if this.props.articles is empty
         _.map((issueData.categories || []), category => (
           <div key={category.name} className="issue__category">
-            <Link to={`/category/${category.slug}`}>
-              <h2 className="section-header">{category.name}</h2>
-            </Link>
             <ArticleList articles={category.articles} />
           </div>
         ))
@@ -160,7 +157,10 @@ export default class IssueController extends FalcorController {
               <EditorsPicks articles={issueData.picks} />
               <Trending articles={trendingData} />
             </div>
+            <div className="categories"> {/* CSS rule in _issue.scss*/}
+              <h2 className="divider"></h2>
               {renderCategories}
+            </div>
             <MailingListButton />
           </div>
         </div>

src/components/TeamMembersList.jsx

@@ -19,8 +19,12 @@ export default class TeamMembersList extends BaseComponent {
               alt="Team Member"
               className="team-page__team__members__member__image"
             />
-            <h2 className="team-page__team__members__member__name">{member.name}</h2>
-            <h3 className="team-page__team__members__member__job-title">{member.job_title}</h3>
+            <div className="team-page__team__members__member__text">
+              <h2 className="team-page__team__members__member__text__name">{member.name}</h2>
+              <h3 className="team-page__team__members__member__text__job-title">
+                {member.job_title}
+              </h3>
+            </div>
           </Link>
         );
       });

src/components/TeamPageController.jsx

@@ -9,6 +9,7 @@ import Helmet from 'react-helmet'; // Add meta tags for pre-Ghost release
 // Import components
 import TeamPage from 'components/TeamPage';
 import NotFound from 'components/NotFound';
+import TeamPageLoad from 'transitions/TeamPageLoad';
 
 export default class TeamPageController extends FalcorController {
   static getFalcorPathSets() {
@@ -53,6 +54,6 @@ export default class TeamPageController extends FalcorController {
         </div>
       );
     }
-    return <div>Loading</div>;
+    return <TeamPageLoad />;
   }
 }

src/styles/abstracts/_mixins.scss

@@ -66,27 +66,26 @@
     max-width: $column-1;
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 1.5rem;
-    border-bottom: 1px solid #E8E8E8;
+    justify-content: left;
+    margin-bottom: 1rem;
     flex-grow: 1;
     max-width: 100%; // Keeps articles with short titles/teasers centered
     &:last-child {
-      margin-bottom: 0;
       border-bottom: none;
       padding-bottom: 0;
     }
 
     &__featured-image {
       object-fit: cover;
-      width: 450px;
-      height: 250px;
+      height: 300px;
+      width: 30em;
     }
 
     &__content {
-      max-width: 20%;
-      min-width: 250px;
-      padding-left: 1.3rem;
+      margin: 0;
+      //max-width: 60em;
+      //min-width: 250px;
+      padding: 1.7rem;
       &__title {
        font-size: 1.2rem;
        line-height: 1.5rem;
@@ -118,7 +117,7 @@
 
       &__content {
         max-width: $column-1;
-        padding-left: 0;
+        padding: 0.8rem;
         font-size: inherit;
         &__teaser {
           display: block !important;

src/styles/abstracts/_variables.scss

@@ -7,6 +7,7 @@
  */
 $dark-grey: #595959;
 $lighter-grey: #ECECEC;
+$background-grey: #FCFCFC;
 $light-grey: #ACACAC;
 $border-grey: #C6C6C6;
 $link-blue: #1b7ab0;

src/styles/base/_layout.scss

@@ -4,6 +4,7 @@
 
 body {
   overflow-x: hidden;
+  background-color: $background-grey;
 }
 
 .app-container {

src/styles/components/_article-list.scss

@@ -1,11 +1,12 @@
 .article-list {
   display: flex;
   flex-wrap: wrap;
-  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+  //padding: 0.5rem;
+  //margin: 0.5rem 0;
   justify-content: space-between;
   align-content: center;
 
   &:last-child {
-    padding: 0 0 1rem 0;
+    //padding: 0 0 1rem 0;
   }
 }

src/styles/components/_article-preview.scss

@@ -1,27 +1,34 @@
 .article-preview {
+
+  //Card
+
+  background-color: white;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
+  transition: box-shadow 0.2s cubic-bezier(.25,.8,.25,1);
+  &:hover {
+    box-shadow: 0 3px 4px rgba(0,0,0,0.16);
+  }
+  margin: 0.5rem;
+
+
   min-width: 220px;
   max-width: $column-3-1;
   flex-shrink: 1;
-  padding: 0 0.75rem 1.25rem 0.75rem;
-
-  @media (max-width: $medium) {
-    max-width: $column-2
-  }
+  padding: 0;
 
-  @media (max-width: $small) {
-    max-width: $column-1;
-  }
 
   &__featured-image {
     object-fit: cover;
     width: 100%;
     height: 170px;
-    padding-bottom: 0.5rem;
+    margin-bottom: -4px;
   }
 
   &__content {
+    padding: 0.8rem 0.6rem;
     &__category-header {
-      display: none;
+      //display: none;
       margin: 0 0 0.3rem 0;
       @include uppercase;
       font-size: $authors-large;
@@ -56,18 +63,34 @@
   }
 }
 
+.issue__category .article-list .article-preview{
+  padding: 0 !important;
+}
+
 @media (max-width: $medium) {
-  &__content {
-    &__category-header {
-      margin: 0;
+    .article-preview{
+    &__content {
+      padding: 0.6rem;
+      &__category-header {
+        margin: 0;
+      }
     }
+    max-width: $column-2
   }
+
+  .issue__category .article-list .article-preview__content,
+  .editors-picks .article-list .article-preview__content{
+    padding: 0.6rem !important;
+  }
+
 }
+
 @media (max-width: $small) {
   .article-preview {
     max-width: $column-1;
-    padding: 0 0.3rem 0.6rem 0.3rem;
-    border-bottom: 1px solid $lighter-grey;
+    max-width: $column-1;
+    //padding: 0 0.3rem 0.6rem 0.3rem;
+    //border-bottom: 1px solid $lighter-grey;
     &:first-child {
       .article-preview__content__title {
         padding-top: 0.2rem;

src/styles/components/_article.scss

@@ -100,7 +100,9 @@
       }
     }
     &__related-articles {
+      padding-bottom: 0;
       &__header {
+        margin: .3rem 0 !important;
         @include section-header;
       }
       @include vertical-article-list;
@@ -110,12 +112,14 @@
         border-right: 1px solid $border-grey;
         .article-preview {
           width: 100%;
+          margin-bottom: 0.3rem !important;
           &__featured-image {
-            width: 240px;
-            height: 150px;
+            width: 250px;
+            height: 180px;
           }
           &__content {
-            min-width: 50%;
+            min-width: 45%;
+            padding: 0.8rem;
             .sharing-buttons {
               display: none;
             }

src/styles/components/_editors-picks.scss

@@ -1,21 +1,23 @@
 .editors-picks {
   max-width: 70%;
-  margin-right: 0.75rem;
+  margin-right: .75rem;
   .section-header {
     // Extend line beyond .editors-picks div
     margin-right: -30px;
   }
   .article-list {
-    padding: 0;
+    padding: 0 .75rem 0 0;
 
     &:last-child {
       // Divider between Editor's Picks and Trending
       border-right: 1px solid $border-grey;
     }
     .article-preview {
       max-width: $column-2;
-      &__content__category-header {
-        display: block;
+      &__content{
+        &__category-header {
+          display: block;
+        }
       }
     }
   }
@@ -27,6 +29,7 @@
       margin-right: 0;
     }
     .article-list {
+      padding: 0;
       &:last-child {
         border-right: none;
       }

src/styles/components/_featured-article.scss

@@ -1,6 +1,7 @@
 .featured-article {
   max-width: $column-1;
   .article-preview {
+    margin-bottom: 0.5rem;
     max-width: $column-1;
     display: flex;
     // Center featured article content vertically and horizontally
@@ -16,7 +17,7 @@
 
     &__content {
       max-width: $column-3-1;
-      padding-left: 1.3rem;
+      padding: 1.1rem;
       &__category-header {
         display: block;
       }
@@ -48,7 +49,8 @@
 
       &__content {
         max-width: $column-1;
-        padding-left: 0;
+        padding: 0.6rem;
+        //padding-left: 0;
         font-size: inherit;
       }
     }

src/styles/components/_footer.scss

@@ -1,4 +1,5 @@
 .footer {
+  margin-top: 0.3rem;
   display: flex;
   justify-content: center;
   align-items: center;

src/styles/components/_header.scss

@@ -71,6 +71,15 @@
     &__content {
       img {
         position: absolute;
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          transparent 20%,
+          $background-grey 20%,
+          $background-grey 80%,
+          transparent 80%,
+          transparent 100%
+        );
         width: 50px;
         height: 50px;
         margin: -0.1rem 0 0 0;
@@ -153,7 +162,7 @@
   }
 
   @media only screen and (max-width: $small) {
-    background-color: #FFF;
+    background: white;
     align-items: center;
     position: fixed;
     z-index: 5;
@@ -177,6 +186,7 @@
           padding-top: 0.32rem;
           width: 35px;
           height: 35px;
+          background: white;
         }
       }
     }