From ed81142f888d1cad046eb7be24ea5c2be8c2ce64 Mon Sep 17 00:00:00 2001
From: seanyesmunt <sean.yesmunt@gmail.com>
Date: Mon, 18 Jun 2018 01:53:26 -0400
Subject: [PATCH] handle displaying content on larger screens better

---
 src/renderer/scss/_vars.scss             |  1 +
 src/renderer/scss/component/_button.scss |  2 +-
 src/renderer/scss/component/_card.scss   | 56 +++++++++++++++++++++---
 3 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 762edd995..e54894e89 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -146,6 +146,7 @@ $large-breakpoint: 1760px;
   --card-bg: var(--color-white);
   --card-text-color: var(--color-grey-dark);
   --card-radius: 2px;
+  --card-max-width: 1500px;
   --card-wallet-color: var(--text-color-inverse);
   --success-msg-color: var(--color-green);
   --success-msg-border: var(--color-green-blue);
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index 08534664f..79649f2d2 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -153,7 +153,7 @@ button:disabled {
 }
 
 .btn--uri-indicator {
-  transition: color var(--animation-duration) var(--animation-duration);
+  transition: color var(--animation-duration) var(--animation-style);
 
   &:hover {
     color: var(--color-light-blue);
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index a504fc232..5d1d2cd6f 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -6,6 +6,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
+  max-width: var(--card-max-width);
 }
 
 .card > h1 {
@@ -35,6 +36,16 @@
 
   .channel-name {
     font-size: 12px;
+
+    @media only screen and (min-width: $medium-breakpoint) {
+      font-size: 14px;
+      padding-top: 4px;
+    }
+
+    @media only screen and (min-width: $large-breakpoint) {
+      font-size: 16px;
+      padding-top: 8px;
+    }
   }
 }
 
@@ -108,6 +119,10 @@
   font-size: 14px;
   line-height: 18px;
   padding-top: 20px;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    font-size: 16px;
+  }
 }
 
 .card__title--file {
@@ -283,11 +298,15 @@
   align-items: center;
   font-size: 18px;
   line-height: 24px;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    font-size: 20px;
+  }
 }
 
 .card-row__scroll-btns {
   display: flex;
-  padding-right: $spacing-width - 10px; // page padding - 1/2 width of arrow button
+  padding-right: $spacing-width;
 }
 
 .card-row__scrollhouse {
@@ -299,7 +318,15 @@
     vertical-align: top;
     overflow-y: visible;
     // 31 px to handle to padding between cards
-    width: calc((100% / 4) - 31px);
+    width: calc((100% / 4) - 34px);
+
+    @media only screen and (min-width: $medium-breakpoint) {
+      width: calc((100% / 6) - 29px);
+    }
+
+    @media only screen and (min-width: $large-breakpoint) {
+      width: calc((100% / 8) - 27px);
+    }
   }
 
   .card:not(:first-of-type) {
@@ -323,10 +350,29 @@
     display: inline-block;
     vertical-align: top;
     margin-bottom: 60px;
-    width: calc((100% / 4) - (60px / 4));
 
-    &:not(:nth-child(4n + 1)) {
-      margin-left: 20px;
+    @media only screen and (max-width: $medium-breakpoint) {
+      width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards
+
+      &:not(:nth-child(4n + 1)) {
+        margin-left: 20px;
+      }
+    }
+
+    @media only screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
+      width: calc((100% / 6) - (100px / 6));
+
+      &:not(:nth-child(6n + 1)) {
+        margin-left: 20px;
+      }
+    }
+
+    @media only screen and (min-width: $large-breakpoint) {
+      width: calc((100% / 8) - (140px / 8));
+
+      &:not(:nth-child(8n + 1)) {
+        margin-left: 20px;
+      }
     }
   }
 }