From e9218fa1f00c692588c1e1e0ca2717d8c4756519 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 14:03:12 -0800
Subject: [PATCH 1/5] change smallest media query breakpoint to 700px

---
 renderer/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/renderer/index.css b/renderer/index.css
index ff9e3134..baf94a79 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -276,7 +276,7 @@ body.drag .drop-target {
   height: 120px;
 }
 
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: 700px) {
   .torrent, .drop-target {
     height: 150px;
   }

From 9547e1d9078e6eb90a4c87baa7d6b5f8f86d922c Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 14:03:26 -0800
Subject: [PATCH 2/5] only animate .torrent hover state

---
 renderer/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/renderer/index.css b/renderer/index.css
index baf94a79..7b1d29eb 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -267,7 +267,7 @@ body.drag .drop-target {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;
-  transition: all 0.1s ease-out;
+  transition: -webkit-filter 0.1s ease-out;
   position: relative;
   animation: fadein .4s;
 }

From e399ac9285f1e5bc44ca40679e5c54f7a9b78ad5 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 15:00:10 -0800
Subject: [PATCH 3/5] make min window height have room for two torrents

---
 main/windows.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main/windows.js b/main/windows.js
index 1fb2c282..329b7e69 100644
--- a/main/windows.js
+++ b/main/windows.js
@@ -21,7 +21,7 @@ function createMainWindow (menu) {
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3 only)
     minWidth: 375,
-    minHeight: 158,
+    minHeight: 38 + (120 * 2), // header height + two torrents
     show: false, // Hide window until DOM finishes loading
     title: config.APP_NAME,
     titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X)

From 3b3ebc717a7fc4d2a76901d2f97a8da6324a71e8 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 15:03:41 -0800
Subject: [PATCH 4/5] fixpack

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 63009c10..972e61df 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "build": "electron-packager . $npm_package_productName --overwrite --out=dist --ignore='^/dist$' --prune --asar --all --version=$npm_package_devDependencies_electron_prebuilt",
     "debug": "DEBUG=* electron .",
     "start": "electron .",
-    "update-authors": "./bin/update-authors.sh",
-    "test": "standard"
+    "test": "standard",
+    "update-authors": "./bin/update-authors.sh"
   }
 }

From 6946ab35074f947d3a27768f3ad061226cd81056 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Tue, 8 Mar 2016 15:39:39 -0800
Subject: [PATCH 5/5] style improvements

- make torrent placeholder the exact size of a normal torrent
- make torrent list window minimum size of two torrents
- make window start out sized for 4 torrents
- increase font size responsively
---
 main/windows.js                |  4 +--
 renderer/index.css             | 66 ++++++++++++++++++++++------------
 renderer/views/torrent-list.js |  4 +--
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/main/windows.js b/main/windows.js
index 329b7e69..326c1f26 100644
--- a/main/windows.js
+++ b/main/windows.js
@@ -21,12 +21,12 @@ function createMainWindow (menu) {
     backgroundColor: '#282828',
     darkTheme: true, // Forces dark theme (GTK+3 only)
     minWidth: 375,
-    minHeight: 38 + (120 * 2), // header height + two torrents
+    minHeight: 38 + (120 * 2), // header height + 2 torrents
     show: false, // Hide window until DOM finishes loading
     title: config.APP_NAME,
     titleBarStyle: 'hidden-inset', // Hide OS chrome, except traffic light buttons (OS X)
     width: 450,
-    height: 600
+    height: 38 + (120 * 4) // header height + 4 torrents
   })
   win.loadURL(config.INDEX)
 
diff --git a/renderer/index.css b/renderer/index.css
index 7b1d29eb..08556222 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -11,18 +11,21 @@
 html,
 body {
   background: rgb(40, 40, 40);
-  color: #FFF;
   cursor: default;
   height: 100%;
-  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.5em;
   margin: 0;
   padding: 0;
   width: 100%;
   overflow: hidden;
 }
 
+body {
+  color: #FFF;
+  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+}
+
 .loading {
   display: flex;
   flex-direction: column;
@@ -150,6 +153,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   right: 0;
   z-index: 1000;
   transition: opacity 0.15s ease-out;
+  font-size: 14px;
+  line-height: 1.5em;
 }
 
 .view-player .header {
@@ -245,19 +250,22 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   padding-top: 37px;
 }
 
-.drop-target {
-  margin: 10px;
+.torrent-placeholder {
+  padding: 10px;
+  color: #666;
+  font-size: 1.1em;
+}
+
+.torrent-placeholder span {
   border: 5px #444 dashed;
   border-radius: 5px;
-  color: #666;
-  font-size: 16px;
-  flex: 1 1 auto;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-body.drag .drop-target {
+body.drag .torrent-placeholder {
   border-color: #def;
   color: #def;
 }
@@ -272,22 +280,10 @@ body.drag .drop-target {
   animation: fadein .4s;
 }
 
-.torrent, .drop-target {
+.torrent, .torrent-placeholder {
   height: 120px;
 }
 
-@media only screen and (min-width: 700px) {
-  .torrent, .drop-target {
-    height: 150px;
-  }
-}
-
-@media only screen and (min-width: 900px) {
-  .torrent, .drop-target {
-    height: 180px;
-  }
-}
-
 .torrent:not(:last-child) {
   border-bottom: 1px solid rgb(20, 20, 20);
 }
@@ -507,3 +503,27 @@ body.drag .drop-target {
   margin-top: 0;
   margin-left: 0;
 }
+
+/*
+ * MEDIA QUERIES
+ */
+
+@media only screen and (min-width: 700px) {
+  body {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+  .torrent, .torrent-placeholder {
+    height: 150px;
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  body {
+    font-size: 18px;
+    line-height: 1.5em;
+  }
+  .torrent, .torrent-placeholder {
+    height: 180px;
+  }
+}
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index 6d96b33f..3d75909b 100644
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -11,8 +11,8 @@ function TorrentList (state, dispatch) {
   return hx`
     <div class='torrent-list'>
       ${list}
-      <div class='drop-target'>
-        <p>Drop a torrent file here or paste a magnet link</p>
+      <div class='torrent-placeholder'>
+        <span class='ellipsis'>Drop a torrent file here or paste a magnet link</span>
       </div>
     </div>`
 }