uff creo que ya esta

resources/sass/app.scss

@@ -23,6 +23,16 @@ body {
     margin: auto;
 }
 
+.container.wide {
+    max-width: 100ch;
+}
+
+@media (min-width: 768px){
+    .container {
+        margin-top: 6em;
+    }
+}
+
 img {
     max-width: 100%;
     cursor: pointer;
@@ -32,14 +42,6 @@ a {
     color: $primary-color;
 }
 
-.link {
-    color: $primary-color;
-    border: none;
-    background: none;
-    text-decoration: underline;
-    padding: 0;
-}
-
 p {
     line-height: 1.5rem;
 }
@@ -48,6 +50,7 @@ article {
     box-shadow: 3px 3px 10px 0px #aaa;
     padding: 2ch 10ch;
     margin-bottom: 2em;
+    background-color: lighten($background-color, 10%);
 }
 
 /******************************************************************************
@@ -55,13 +58,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"],
@@ -84,51 +86,106 @@ article {
     text-align: right;
 }
 
-.pure-form {
-    box-shadow: 0px 0px 20px -15px $foreground-color;
-    //border: 1px $foreground-color solid;
-    //background-color: darken($background-color, 5%);
-    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: $background-color;
 }
 
-.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: .5ch 0;
+    height: 100%;
+}
+
+
+.menu-link,
+.menu-heading {
+    display: inline-block;
+    text-decoration: none;
+    color: $foreground-color;
     width: 100%;
 }
 
-.pure-menu-link {
-    color: $foreground-color;
-}
-
-.pure-menu-link:hover, .pure-menu-highlight {
+.menu-link:hover,
+.menu-heading:hover,
+.menu-highlight {
     color: $primary-color;
-    border-bottom: 1px $primary-color solid;
-    background-color: transparent;
 }
 
-.pure-menu-heading {
+.menu-heading {
+    text-transform: uppercase;
+    font-weight: bold;
+    margin-bottom: 1ch;
     letter-spacing: .5ch;
-    padding: .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: .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: $admin-color;
 }
@@ -143,31 +200,25 @@ article {
     background-color: lighten($background-color, 10%);
     color: $foreground-color;
     border: $foreground-color solid 1px;
-    border-radius: 0;
-    min-width: 20ch;
 }
 
 .button-black-white:focus,
 .button-black-white:hover {
     background-color: lighten($background-color, 10%);
     color: $foreground-color;
-    border: $foreground-color solid 1px;
-    background-image: none;
     box-shadow: inset 1px 1px 4px -2px $foreground-color;
 }
 .button-black-white:active{
     background-color: lighten($background-color, 10%);
     color: $foreground-color;
-    border: $foreground-color solid 1px;
-    background-image: none;
     box-shadow: inset 1px 1px 2px $foreground-color;
 }
 
 /******************************************************************************
     => Tables
 *******************************************************************************/
-.table-heading {
-    margin-bottom: 1em;
+.pure-table {
+    margin-top: 1em;
 }
 
 .pure-table,
@@ -198,7 +249,7 @@ article {
 }
 
 .pure-table .controls {
-    width: 16ch;
+    width: 22ch;
 }
 
 .pure-table .controls > *{
@@ -207,7 +258,7 @@ article {
 
 .pure-table .controls .pure-button.button-black-white{
     min-width: auto;
-    width: 7ch;
+    width: 10ch;
     padding: .5em 0;
 }