don't show begin screen if screen is short

1 files changed, 83 insertions, 81 deletions

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 7ac665f..8151be6 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -208,85 +208,87 @@ ul a {
   display: none;
 }
 
-#search.no-input {
-  height: 100%;
-  background-color: #ececec;
-}
-
-#search.no-input button {
-  display: none;
-}
-
-#search.no-input #overflow-button {
-  position: absolute;
-  display: block;
-  top: 0;
-  right: 0;
-  color: #757575;
-}
-
-#search.no-input .print-page {
-  display: none;
-}
-
-#search.no-input #overflow-button:focus {
-  background-color: inherit;
-  color: #212121;
-}
-
-#search.no-input .logo {
-  background-image: url(/icons/mml-logo.png);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 100px;
-  width: 100px;
-
-  /* virtual center: http://javier.xyz/visual-center/ */
-  transform: translate(-8%,-3%);
-  margin: 0 auto;
-}
-
-#search.no-input .title {
-  display: block;
-  font-size: 55px;
-  padding-bottom: 32px;
-}
-
-#search.no-input .title .text {
-  text-align: center;
-  line-height: 55px;
-}
-
-#search.no-input .top-bar {
-  position: static;
-  display: block;
-  margin-top: 50vh;
-  transform: translateY(-75%);
-}
-
-#search.no-input input[type='text'] {
-  background-color: #FFF;
-}
-
-/* WebKit, Blink, Edge */
-#search.no-input input::-webkit-input-placeholder {
- color: #757575;
-}
-
-/* Mozilla Firefox 4 to 18 */
-#search.no-input input:-moz-placeholder {
- color: #757575;
- opacity: 1;
-}
-
-/* Mozilla Firefox 19+ */
-#search.no-input input::-moz-placeholder {
- color: #757575;
- opacity: 1;
-}
-
-/* Internet Explorer 10-11 */
-#search.no-input input:-ms-input-placeholder {
- color: #757575;
+@media screen and (min-height: 400px) {
+  #search.no-input {
+    height: 100%;
+    background-color: #ececec;
+  }
+
+  #search.no-input button {
+    display: none;
+  }
+
+  #search.no-input #overflow-button {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    color: #757575;
+  }
+
+  #search.no-input .print-page {
+    display: none;
+  }
+
+  #search.no-input #overflow-button:focus {
+    background-color: inherit;
+    color: #212121;
+  }
+
+  #search.no-input .logo {
+    background-image: url(/icons/mml-logo.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 100px;
+    width: 100px;
+
+    /* virtual center: http://javier.xyz/visual-center/ */
+    transform: translate(-8%,-3%);
+    margin: 0 auto;
+  }
+
+  #search.no-input .title {
+    display: block;
+    font-size: 55px;
+    padding-bottom: 32px;
+  }
+
+  #search.no-input .title .text {
+    text-align: center;
+    line-height: 55px;
+  }
+
+  #search.no-input .top-bar {
+    position: static;
+    display: block;
+    margin-top: 50vh;
+    transform: translateY(-75%);
+  }
+
+  #search.no-input input[type='text'] {
+    background-color: #FFF;
+  }
+
+  /* WebKit, Blink, Edge */
+  #search.no-input input::-webkit-input-placeholder {
+    color: #757575;
+  }
+
+  /* Mozilla Firefox 4 to 18 */
+  #search.no-input input:-moz-placeholder {
+    color: #757575;
+    opacity: 1;
+  }
+
+  /* Mozilla Firefox 19+ */
+  #search.no-input input::-moz-placeholder {
+    color: #757575;
+    opacity: 1;
+  }
+
+  /* Internet Explorer 10-11 */
+  #search.no-input input:-ms-input-placeholder {
+    color: #757575;
+  }
 }
\ No newline at end of file