uff creo que ya esta

public/css/app.css

@@ -1503,6 +1503,16 @@ body {
   margin: auto;
 }
 
+.container.wide {
+  max-width: 100ch;
+}
+
+@media (min-width: 768px) {
+  .container {
+    margin-top: 6em;
+  }
+}
+
 img {
   max-width: 100%;
   cursor: pointer;
@@ -1512,14 +1522,6 @@ a {
   color: #0fa0ce;
 }
 
-.link {
-  color: #0fa0ce;
-  border: none;
-  background: none;
-  text-decoration: underline;
-  padding: 0;
-}
-
 p {
   line-height: 1.5rem;
 }
@@ -1528,6 +1530,7 @@ article {
   box-shadow: 3px 3px 10px 0px #aaa;
   padding: 2ch 10ch;
   margin-bottom: 2em;
+  background-color: white;
 }
 
 /******************************************************************************
@@ -1536,13 +1539,12 @@ article {
 
 .pure-form textarea {
   height: 25ch;
-  min-width: calc(80ch - 2em);
-  max-width: calc(80ch - 2em);
+  resize: vertical;
 }
 
 .pure-form input[type=text],
 .pure-form textarea {
-  width: calc(80ch - 2em);
+  width: 100%;
 }
 
 .pure-form input[type=text],
@@ -1565,51 +1567,107 @@ article {
   text-align: right;
 }
 
-.pure-form {
-  box-shadow: 0px 0px 20px -15px #241f1e;
-  padding: 1em;
-}
-
 /******************************************************************************
     => Menu
 *******************************************************************************/
 
-.pure-menu-horizontal {
-  display: flex;
-  padding-left: 40ch;
-  padding-right: 40ch;
-  padding-bottom: 1em;
-  padding-top: 1em;
-  margin-bottom: 1em;
-  box-shadow: 0 -5px 10px black;
+.menu {
+  padding-top: 2ch;
+  padding-bottom: 2ch;
+  box-shadow: 0px 3px 5px 0px #ccc;
+  background-color: #fdfcfc;
 }
 
-.pure-menu-horizontal .pure-menu-list {
+.menu-list {
   display: flex;
-  justify-content: right;
+  flex-direction: column;
+  max-width: 80ch;
+  margin: auto;
+  padding-left: 10ch;
+  list-style: none;
+}
+
+.menu-item {
+  margin: 0;
+  padding: 0.5ch 0;
+  height: 100%;
+}
+
+.menu-link,
+.menu-heading {
+  display: inline-block;
+  text-decoration: none;
+  color: #241f1e;
   width: 100%;
 }
 
-.pure-menu-link {
-  color: #241f1e;
-}
-
-.pure-menu-link:hover,
-.pure-menu-highlight {
+.menu-link:hover,
+.menu-heading:hover,
+.menu-highlight {
   color: #0fa0ce;
-  border-bottom: 1px #0fa0ce solid;
-  background-color: transparent;
 }
 
-.pure-menu-heading {
+.menu-heading {
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-bottom: 1ch;
   letter-spacing: 0.5ch;
-  padding: 0.5em 0;
+}
+
+@media (min-width: 768px) {
+  .menu {
+    width: 100%;
+    position: fixed;
+    height: 1.75em;
+    top: 0;
+  }
+
+  .menu-list {
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0;
+  }
+
+  .menu-link,
+  .menu-heading {
+    width: auto;
+  }
+
+  .menu-item {
+    margin-left: 1em;
+  }
+
+  .menu-heading {
+    flex-grow: 1;
+    margin-bottom: 0;
+  }
+}
+
+.separator {
+  width: 100%;
+  height: 2px;
+  margin-bottom: 1em;
+  box-shadow: 0px 10px 10px #ccc;
 }
 
 /******************************************************************************
     => Buttons & Links
 *******************************************************************************/
 
+.pure-button {
+  letter-spacing: 0.2em;
+  min-width: 20ch;
+  border-radius: 0;
+  background-image: none;
+  border: none;
+}
+
+.pure-button:focus,
+.pure-button:hover,
+.pure-button:active {
+  background-image: none;
+}
+
 .special-link {
   color: #ee1155;
 }
@@ -1624,24 +1682,18 @@ article {
   background-color: white;
   color: #241f1e;
   border: #241f1e solid 1px;
-  border-radius: 0;
-  min-width: 20ch;
 }
 
 .button-black-white:focus,
 .button-black-white:hover {
   background-color: white;
   color: #241f1e;
-  border: #241f1e solid 1px;
-  background-image: none;
   box-shadow: inset 1px 1px 4px -2px #241f1e;
 }
 
 .button-black-white:active {
   background-color: white;
   color: #241f1e;
-  border: #241f1e solid 1px;
-  background-image: none;
   box-shadow: inset 1px 1px 2px #241f1e;
 }
 
@@ -1649,8 +1701,8 @@ article {
     => Tables
 *******************************************************************************/
 
-.table-heading {
-  margin-bottom: 1em;
+.pure-table {
+  margin-top: 1em;
 }
 
 .pure-table,
@@ -1680,7 +1732,7 @@ article {
 }
 
 .pure-table .controls {
-  width: 16ch;
+  width: 22ch;
 }
 
 .pure-table .controls > * {
@@ -1689,7 +1741,7 @@ article {
 
 .pure-table .controls .pure-button.button-black-white {
   min-width: auto;
-  width: 7ch;
+  width: 10ch;
   padding: 0.5em 0;
 }
 

public/js/app.js

@@ -94,7 +94,7 @@
 /***/ (function(module, exports) {
 
 // Highlight links if in his page
-if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("proyectos-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/setup") document.getElementById("setup-link").classList.add("pure-menu-highlight"); // Makes all images clickeable
+if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("projects-link").classList.add("menu-highlight");else if (window.location.pathname == "/setups") document.getElementById("setup-link").classList.add("menu-highlight"); // Makes all images clickeable
 
 var images = document.getElementsByTagName("img");