muchas cosas, aun esta en proceso de construccion

resources/sass/app.scss

@@ -1,52 +1,49 @@
-@import 'skeleton-scss/scss/skeleton.scss';
-
 /**
-* Ryuuji 
-*/
+ * Ryuuji 
+ */
 
 $colorfg: #212121;
+$colorborder: #f2f2f2;
 $color01: #0fa0ce;
 
 body {
     color: $colorfg;
+    max-width: 80ch;
+    padding: 2rem;
+    margin: auto;
 }
 
-nav {
-    display: block;
-    width: 100%;
-    height: 4rem;
-    border-top: 1px solid #fafafa;
-    border-bottom: 1px solid #fafafa;
-    margin-bottom: 2em;
+hr {
+    border: 1px solid $colorborder;
+}
 
-    .container {
-        width: 100%;
+.navbar {
+    display: flex;
+    border-bottom: 1px solid $colorborder;
+}
 
-        ul {
-            list-style: none;
-            margin-bottom: 0;
+.navbar-items {
+    display: flex;
+    list-style: none;
+}
 
-            li {
-                position: relative;
-                float: left;
-                margin-bottom: 0;
+.navbar-item a {
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: .2rem;
+    text-decoration: none;
+    margin-left: 1em;
+    color: $colorfg;
 
-                a {
-                    display: inline-block;
-                    text-transform: uppercase;
-                    font-weight: bold;
-                    letter-spacing: .2rem;
-                    margin-right: 35px;
-                    text-decoration: none;
-                    line-height: 4rem;
-                    color: $colorfg;
+}
+.navbar-item a:hover {
+    color: $color01; 
+}
 
-                    &:hover {
-                        color: $color01 !important; 
-                    }
-                }
-            }
-        }
+
+@media only screen and (max-width: 768px) {
+    .navbar-items, .navbar {
+        flex-direction: column;
     }
 }