removed net neutrality

Author: zesameri

css/crumple.css

@@ -358,8 +358,8 @@
   }
   .footer > a:nth-child(2n):hover~.crumple {
     background: #ee5c87; /* fallback for old browsers */
-    background: -webkit-linear-gradient(45deg, #f598a8, #f6edb2);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(45deg, #f598a8, #f6edb2);
+    background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(45deg, #66CDAA, #20B2AA);
     background-size: 400% 400%;
   }
   .footer > a:hover~.crumple {

css/font.css

@@ -19,9 +19,13 @@ h1 {
 .bio {
   font-size: 2.5vw;
 }
-.list__item > p {
-  font-size: 1.25em;
+
+.menu {
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  letter-spacing: 2px;
+  font-size: 3vw;
 }
+
 .footer > a {
   line-height: 1;
   font-size: 1.4em;
@@ -30,7 +34,7 @@ a, .footer > a {
   border-bottom: 1px solid #f8f8f6;
   color: inherit;
   font-weight: normal;
-  text-decoration: none
+  text-decoration: none;
 }
 a {
   font-family: monospace;
@@ -70,3 +74,9 @@ a:focus, a:hover {
   font-weight: bold;
 
 }
+
+/*
+.list__item > p {
+  font-size: 1.25em;
+}
+*/

css/main.css

@@ -1,39 +1,63 @@
 body {
   margin: 0;
-  padding: 5vh 0 5vw 5vw;
   background-color: #222;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: block;
 }
 section {
   z-index: 1;
-  width: calc(100vw - 20em);
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  min-height: 100vh;
 }
 .hero {
-  height: calc(100vh - 2em);
+  width: calc(100vw - 20em);
+  padding-top: 5vh;
+  padding-left: 6vw;
 }
 .bio {
-  margin-bottom: 2.5em;
+  padding-bottom: 10vh;
   max-width: 70vw;
 }
-.writing {
-  max-width: 70vw;
+
+.menu {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  height: calc(100vh - 2.1em);
+  max-height: calc(100vh - 2.1em);
+  min-height: calc(100vh - 2.1em);
 }
-.list {
-  margin: 0;
+.menu > div {
+  display: flex;
+  flex-basis: calc(50% - 40px);
+  justify-content: center;
+  flex-direction: row;
+  margin: 20px;
+  background: #282C34;
 }
-.list__item {
-  margin: 0;
-  margin-bottom: 2em;
+.menu > div:nth-child(1) {
+  background:tomato;
 }
-.list__item > p {
-    margin: 1em 0;
+.menu > div:nth-child(2) {
+  background: lightsalmon;
+}
+.menu > div:nth-child(3) {
+  background: plum;
+}
+.menu > div:nth-child(4) {
+  background: mediumslateblue;
+}
+
+.menu > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
+
 .footer {
   position: fixed;
   right: 5em;
@@ -45,8 +69,23 @@ section {
 
 }
 .footer > a {
-  margin-top: 0.7em;
+  padding-top: 0.7em;
 }
 a {
   position: relative;
 }
+/*
+.writing {
+  max-width: 70vw;
+}
+.list {
+  margin: 0;
+}
+.list__item {
+  margin: 0;
+  margin-bottom: 2em;
+}
+.list__item > p {
+    margin: 1em 0;
+}
+*/

css/mobile.css

@@ -1,4 +1,4 @@
-@media (max-width:850px) {
+@media only screen and (max-width:850px) {
   body {
     padding: 7.5vw;
     flex-flow: column wrap;
@@ -12,10 +12,10 @@
     padding-bottom: 2em;
   }
   .list {
-      margin-top: 1em;
+    margin-top: 1em;
   }
   section {
-    padding: 7.5vw;
+    /* padding: 7.5vw; */
     width: 100%;
     display: table-row;
     height:auto;
@@ -27,9 +27,31 @@
     -webkit-box-align: start;
     align-items: flex-start
   }
+  .menu {
+    flex-direction: column;
+    font-size: 1.5em;
+    height: 100vh;
+    justify-content: space-around;
+  }
+  .menu > div {
+    flex-basis: auto;
+    margin: 0;
+    padding: 1em;
+  }
+  .menu > div > div {
+    flex-basis: auto;
+  }
   .footer {
+    display: flex;
     position: inherit;
     align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 0;
+  }
+  .footer > a {
+    position: relative;
+    padding-top: 0.7em;
   }
 }
 @media (min-width:1080px) {