From 0854fb70045e00d235b385d745e90fd72fc1469a Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 17 Jul 2017 15:50:07 +0100
Subject: [PATCH 1/2] Discover page UI tweaks

---
 ui/js/component/fileCard/view.jsx |  4 ++--
 ui/scss/component/_card.scss      | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx
index 5a35d740d..12f0218e2 100644
--- a/ui/js/component/fileCard/view.jsx
+++ b/ui/js/component/fileCard/view.jsx
@@ -78,8 +78,9 @@ class FileCard extends React.PureComponent {
             onClick={() => navigate("/show", { uri })}
             className="card__link"
           >
+            <CardMedia title={title} thumbnail={thumbnail} />
             <div className="card__title-identity">
-              <h5 title={title}>
+              <h5 className="card__title" title={title}>
                 <TruncatedText lines={1}>{title}</TruncatedText>
               </h5>
               <div className="card__subtitle">
@@ -92,7 +93,6 @@ class FileCard extends React.PureComponent {
                 <UriIndicator uri={uri} />
               </div>
             </div>
-            <CardMedia title={title} thumbnail={thumbnail} />
             <div className="card__content card__subtext card__subtext--two-lines">
               <TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
             </div>
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index da73b21bd..72032fbb4 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -28,6 +28,9 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
+.card__title-identity .card__title {
+  font-size: 0.95em
+}
 .card__actions {
   padding: 0 $padding-card-horizontal;
 }
@@ -51,8 +54,8 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
   color: #444;
   margin-top: 12px;
   font-size: 0.9em;
-  margin-top: $spacing-vertical * 2/3;
-  margin-bottom: $spacing-vertical * 2/3;
+  margin-top: $spacing-vertical * 1/3;
+  margin-bottom: $spacing-vertical * 1/3;
   padding: 0 $padding-card-horizontal;
 }
 .card__subtext--allow-newlines {
@@ -60,6 +63,8 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
 }
 .card__subtext--two-lines {
   height: $font-size * 0.9 * $font-line-height * 2;
+  font-size: 0.82em;
+  color: #515151
 }
 .card-overlay {
   position: absolute;
@@ -144,7 +149,7 @@ $card-link-scaling: 1.1;
   top: 36%
 }
 
-$width-card-small: $spacing-vertical * 12;
+$width-card-small: $spacing-vertical * 10;
 $height-card-small: $spacing-vertical * 15;
 
 .card--small {

From 53168074e09b855c515ef09ff72a6154ace56555 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Wed, 19 Jul 2017 18:13:19 -0400
Subject: [PATCH 2/2] tweak styling

---
 ui/js/component/fileCard/view.jsx |  4 ++--
 ui/scss/component/_card.scss      | 35 +++++++++++++++++--------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx
index 12f0218e2..cb57a4308 100644
--- a/ui/js/component/fileCard/view.jsx
+++ b/ui/js/component/fileCard/view.jsx
@@ -80,9 +80,9 @@ class FileCard extends React.PureComponent {
           >
             <CardMedia title={title} thumbnail={thumbnail} />
             <div className="card__title-identity">
-              <h5 className="card__title" title={title}>
+              <div className="card__title" title={title}>
                 <TruncatedText lines={1}>{title}</TruncatedText>
-              </h5>
+              </div>
               <div className="card__subtitle">
                 <span style={{ float: "right" }}>
                   <FilePrice uri={uri} />
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 72032fbb4..b6a902f89 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -19,21 +19,29 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
 .card--obscured .card__inner {
   filter: blur($blur-intensity-nsfw);
 }
-.card__title-primary {
+.card__title-primary,
+.card__title-identity,
+.card__actions,
+.card__content,
+.card__subtext {
   padding: 0 $padding-card-horizontal;
+}
+.card--small {
+  .card__title-primary,
+  .card__title-identity,
+  .card__actions,
+  .card__content,
+  .card__subtext {
+    padding: 0 $padding-card-horizontal / 2;
+  }
+}
+.card__title-primary {
   margin-top: $spacing-vertical * 2/3;
 }
 .card__title-identity {
-  padding: 0 $padding-card-horizontal;
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
 }
-.card__title-identity .card__title {
-  font-size: 0.95em
-}
-.card__actions {
-  padding: 0 $padding-card-horizontal;
-}
 .card__actions {
   margin-top: $spacing-vertical * 2/3;
 }
@@ -48,23 +56,18 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
 .card__content {
   margin-top: $spacing-vertical * 2/3;
   margin-bottom: $spacing-vertical * 2/3;
-  padding: 0 $padding-card-horizontal;
 }
 .card__subtext {
-  color: #444;
-  margin-top: 12px;
-  font-size: 0.9em;
+  color: $color-meta-light;
+  font-size: 0.82em;
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
-  padding: 0 $padding-card-horizontal;
 }
 .card__subtext--allow-newlines {
   white-space: pre-wrap;
 }
 .card__subtext--two-lines {
-  height: $font-size * 0.9 * $font-line-height * 2;
-  font-size: 0.82em;
-  color: #515151
+  height: $font-size * 0.82 * $font-line-height * 2; /*this is so one line text still has the proper height*/
 }
 .card-overlay {
   position: absolute;