Added proper whole-page drag-and-drop support

style.css

@@ -14,6 +14,7 @@ body {
   right: 0;
   line-height: 100px;
   text-align: center;
+  z-index: 2;
 }
 
 #header span {
@@ -104,15 +105,34 @@ h1 {
 }
 
 #content input#file {
-  position: absolute;
-  height: 85px;
-  max-width: calc(800px + 4rem);
-  width: calc(100% - 2rem);
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  visibility: hidden;
+  opacity: 0;
+}
+
+#content input#file.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+#content input#file:after {
+  content: 'Drop cover image anywhere...';
+  color: white;
+  text-shadow: black 2px 0px 0px, black 1.75517px 0.95885px 0px, black 1.0806px 1.68294px 0px, black 0.14147px 1.99499px 0px, black -0.83229px 1.81859px 0px, black -1.60229px 1.19694px 0px, black -1.97998px 0.28224px 0px, black -1.87291px -0.70157px 0px, black -1.30729px -1.5136px 0px, black -0.42159px -1.95506px 0px, black 0.56732px -1.91785px 0px, black 1.41734px -1.41108px 0px, black 1.92034px -0.55883px 0px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  left: 50%;
-  top: 116px;
-  opacity: 0;
+  font-size: 2rem;
 }
 
 #content input#file:hover {