haciendo css manual

resources/sass/app.scss

@@ -1,158 +1,53 @@
-@import "~normalize.css/normalize.css";
-@import "fonts.scss";
-@import "variables.scss";
-
-/* Base
--------------------------------------*/ 
-html {
-    overflow-y: scroll;
-    background-color: white;
-}
+@import "~purecss/build/pure.css";
 
 body {
-    font-size: 15px;
-    line-height: 1.6rem;
-    font-family: "OpenSans", sans-serif;
-    color: $colorfg;
+    max-width: 70ch;
+    padding: 2ch;
+    margin: auto;
+    color: #212121;
 }
 
-hr {
-    border: 1px solid $colorborder;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  letter-spacing: .1rem; 
-  font-weight: 600; 
-  text-transform: uppercase;
+img {
+    max-width: 100%;
 }
 
 a {
-    color: $colorfg;
+    color: #0fa0ce;
 }
 
-.container{
-    max-width: 38rem;
-    padding: 2rem;
-    margin: auto;
+p {
+    line-height: 1.5rem;
 }
 
-/* Nav Bar
--------------------------------------*/
-.navbar {
-    display: flex;
-    border-bottom: 1px solid $colorborder;
+textarea {
+    height: 30ch;
 }
 
-.navbar-items {
-    display: flex;
-    width: 38rem;
-    padding: 1rem 0;
-    margin: auto;
-
-    color: $colorfg;
-
-    list-style: none;
-    letter-spacing: .2rem;
-    line-height: 2rem;
-    text-transform: uppercase;
-    justify-content: space-between;
+.pure-menu-link {
+    color: #212121;
+}
+.pure-menu-link:hover {
+    color: #0fa0ce;
+    background-color: transparent;
 }
 
-.navbar-item-link{
-    text-decoration: none;
-    font-weight: 600;
+.admin-link {
+    color: #ee1155;
 }
 
-.navbar-item-head{
-    text-decoration: none;
-    font-weight: 700;
+.button-black-white {
+    background-color: #ffffff;
+    color: #212121;
+    border: #212121 solid 1px;
 }
 
-.navbar-item-link:hover { color: $color01; }
-
-@media only screen and (max-width: 768px) {
-    .navbar {
-        width: 100%;
-        margin: 1rem auto;
-    }
-    .navbar-items {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .navbar-item-head{
-        font-size: 1.5rem;
-        margin-bottom: .6rem;
-    }
+.button-black-white:hover {
+    background-color: #eeeeee;
+    color: #212121;
+    border: #212121 solid 1px;
+    background-image: none;
 }
 
-/* Forms
--------------------------------------*/
-label {
-    display: block;
-    font-weight: 600;
-    text-transform: uppercase;
+.u-align-right {
+    float: right;
 }
-
-.form-input {
-    display: block;
-    width: 100%;
-    height: 2rem;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    margin-bottom: 1em;
-    padding: .4em;
-}
-
-textarea.form-input {
-    height: 20rem;
-}
-
-.form-submit {
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-    color: $colorfg;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    background-color: #fff;
-
-    font-weight: 600;  
-    height: 2.4rem; 
-    padding: 0 2rem;
-    text-transform: uppercase;
-}
-
-
-/* Images 
--------------------------------------*/
-.image-container {
-    display: flex;
-    flex-wrap: wrap;
-    img {
-        display: block;
-        margin: .5rem;
-        max-width: calc(100% - 1rem);
-    }
-}
-
-@media screen and (min-width: 600px) {
-    .image-container {
-        flex-direction: row;
-        img {
-            max-width: calc((100% / 2)  - 1rem);
-        }
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .image-container {
-        flex-direction: row;
-        img {
-            max-width: calc((100% / 3) - 1rem);
-        }
-    }
-}
-