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

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;
+  }
+}