changed color and responsive sizing

Author: zesameri

css/crumple.css

@@ -351,13 +351,13 @@
 
 @media (hover: hover) {
   .footer > a:nth-child(odd):hover~.crumple {
-    background: #6190e8; /* fallback for old browsers */
-    background: -webkit-linear-gradient(45deg, #6190e8, #e0ebff); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(45deg, #6190e8, #e0ebff);
+    background: #1E90FF; /* fallback for old browsers */
+    background: -webkit-linear-gradient(45deg,  #1E90FF, #00BFFF); /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(45deg,  #1E90FF, #00BFFF);
     background-size: 400% 400%;
   }
   .footer > a:nth-child(2n):hover~.crumple {
-    background: #ee5c87; /* fallback for old browsers */
+    background: #66CDAA; /* fallback for old browsers */
     background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(45deg, #66CDAA, #20B2AA);
     background-size: 400% 400%;

css/font.css

@@ -65,6 +65,9 @@ a:focus, a:hover {
   h1 {
     font-size: 2.5em;
   }
+  .menu {
+    font-size: 2.5em;
+  }
 }
 
 .reference {

css/mobile.css

@@ -31,12 +31,12 @@
     flex-direction: column;
     font-size: 1.5em;
     height: 100vh;
-    justify-content: space-around;
+    justify-content: space-evenly;
   }
   .menu > div {
     flex-basis: auto;
-    margin: 0;
-    padding: 1em;
+    flex-grow: 1;
+    margin: 0.5em;
   }
   .menu > div > div {
     flex-basis: auto;
@@ -54,13 +54,22 @@
     padding-top: 0.7em;
   }
 }
-@media (min-width:1080px) {
+@media only screen and (min-width:1080px) {
   .bio {
     max-width: 1100px;
   }
   .writing {
     max-width: 750px;
   }
+  .menu {
+    height: calc(100vh - 2.1em);
+    max-height: calc(100vh - 1.4em);
+    min-height: calc(100vh - 1.4em);
+  }
+  .menu > div {
+    flex-basis: calc(50% - 72px);
+    margin: 36px;
+  }
   .footer {
     right: 3em;
     bottom: 5em;

js/main.js

@@ -2,7 +2,8 @@
 $(window).scroll(function() {
   var isMobile = window.matchMedia("only screen and (max-width: 850px)").matches ||
                   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  if(isMobile) {
+  var isOtherMediaQuery = window.matchMedia("only screen and (min-width:1080px)").matches;
+  if(isMobile && !isOtherMediaQuery) {
    // some code..
    console.log('there');
  } else {
@@ -15,10 +16,11 @@ $(window).scroll(function() {
    if (wS > (hT+hH-wH)){
      $('#footer').addClass("menu-footer");
      $('#footer').removeClass("hero-footer");
-
+     console.log("welp");
    } else {
      $('#footer').addClass("hero-footer");
      $('#footer').removeClass("menu-footer");
+     console.log("welp there");
    }
  }
 });