Creo que deje los estilo, PERFECTOS <3

package.json

@@ -18,6 +18,8 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "normalize.css": "^8.0.1",
+        "npm": "^6.9.2",
         "skeleton-scss": "^2.0.4"
     }
 }

public/css/admin.css

@@ -1,5 +1,386 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
 body {
   margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 500;
+  src: url(/fonts/OpenSans-Regular.ttf?5a798cdadc7cd321e3f72425b70bface) format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 600;
+  src: url(/fonts/OpenSans-SemiBold.ttf?096d8c73bb18e4328284f25138b47ac6) format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/OpenSans-Bold.ttf?0062c34665a3fc0f2278cd4e955702ec) format("truetype");
+}
+
+/* Base
+-------------------------------------*/
+
+html {
+  overflow-y: scroll;
+  background-color: white;
+}
+
+body {
+  font-size: 15px;
+  line-height: 1.6rem;
+  font-family: "OpenSans", sans-serif;
   color: #212121;
 }
 
@@ -7,167 +388,246 @@ hr {
   border: 1px solid #f2f2f2;
 }
 
-.sidebar {
+h1,
-  position: fixed;
+h2,
-  left: 0;
+h3,
-  top: 0;
+h4,
-  height: 100%;
+h5,
-  width: 20ch;
+h6 {
-  border-right: 1px solid #f2f2f2;
+  margin-top: 0;
-}
+  margin-bottom: 2rem;
-
+  letter-spacing: 0.1rem;
-.sidebar .items {
+  font-weight: 600;
-  display: -webkit-flex;
-  display: flex;
-  height: 100%;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-justify-content: flex-start;
-          justify-content: flex-start;
-}
-
-.sidebar .item {
-  line-height: 2em;
-}
-
-.sidebar .end {
-  margin-top: auto;
-}
-
-.sidebar .end a {
-  padding: 2em 0;
-}
-
-.sidebar a,
-.sidebar span {
-  display: block;
-  text-align: center;
   text-transform: uppercase;
-  font-weight: bold;
+}
-  letter-spacing: 0.2rem;
+
-  text-decoration: none;
+a {
   color: #212121;
 }
 
-.sidebar a:hover {
+.container {
+  max-width: 38rem;
+  padding: 2rem;
+  margin: auto;
+}
+
+/* Nav Bar
+-------------------------------------*/
+
+.navbar {
+  display: -webkit-flex;
+  display: flex;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.navbar-items {
+  display: -webkit-flex;
+  display: flex;
+  width: 38rem;
+  padding: 1rem 0;
+  margin: auto;
+  color: #212121;
+  list-style: none;
+  letter-spacing: 0.2rem;
+  line-height: 2rem;
+  text-transform: uppercase;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+
+.navbar-item-link {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.navbar-item-head {
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.navbar-item-link:hover {
   color: #0fa0ce;
 }
 
-.sidebar h1 {
+@media only screen and (max-width: 768px) {
+  .navbar {
+    width: 100%;
+    margin: 1rem auto;
+  }
+
+  .navbar-items {
+    -webkit-flex-direction: column;
+            flex-direction: column;
     text-align: center;
   }
 
-.container {
+  .navbar-item-head {
-  margin-left: 20ch;
+    font-size: 1.5rem;
-  height: 100vh;
+    margin-bottom: 0.6rem;
-  padding: 0em 2em;
-}
-
-@media (max-width: 600px) {
-  .sidebar {
-    display: none;
-  }
-
-  .container {
-    margin-left: 0;
   }
 }
 
-table {
+/* Forms
-  width: 100%;
+-------------------------------------*/
-  border-collapse: collapse;
-}
 
-table th {
+label {
-  background: #212121;
-  color: #f2f2f2;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-table td,
-table th {
-  padding: 6px;
-  height: 2em;
-  border-bottom: 1px solid #212121;
-  text-align: left;
-}
-
-table td.controls a,
-table td.controls input[type=submit] {
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100%;
   display: block;
-  text-transform: uppercase;
-  text-align: left;
-  font-size: 1rem;
   font-weight: 600;
-  text-decoration: none;
-  letter-spacing: 0.1em;
-  color: #212121;
-}
-
-table td.controls input[type=submit] {
-  border: 0;
-  background-color: white;
-  cursor: pointer;
-}
-
-table th.controls a {
-  display: block;
   text-transform: uppercase;
-  font-weight: bold;
-  text-decoration: none;
-  color: white;
 }
 
-form {
+.form-input {
-  height: 100%;
-}
-
-form label {
-  display: block;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.9em;
-  margin-bottom: 0.6em;
-}
-
-form input[type=text],
-form textarea {
-  box-sizing: border-box;
   display: block;
   width: 100%;
-  height: 2em;
+  height: 2rem;
   border: 1px solid #212121;
   border-radius: 4px;
   margin-bottom: 1em;
   padding: 0.4em;
-  font-size: 1rem;
-  font-weight: 400;
 }
 
-form textarea {
+textarea.form-input {
-  font-family: inherit;
+  height: 20rem;
-  box-sizing: border-box;
-  height: 30em;
 }
 
-form .button {
+.form-submit {
   display: inline-block;
-  box-sizing: border-box;
   text-align: center;
   cursor: pointer;
   color: #212121;
   border: 1px solid #212121;
   border-radius: 4px;
   background-color: #fff;
-  font-weight: bold;
+  font-weight: 600;
-  height: 38px;
+  height: 2.4rem;
-  padding: 0 38px;
+  padding: 0 2rem;
-  margin-bottom: 3em;
   text-transform: uppercase;
 }
 
+/* Base
+-------------------------------------*/
+
+.container {
+  margin-left: 13rem;
+  max-width: calc(100% - 13rem);
+}
+
+/* Sidebar 
+-------------------------------------*/
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 13rem;
+  border-right: 1px solid #f2f2f2;
+}
+
+.sidebar-items {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+  padding: 1rem 0;
+  letter-spacing: 0.2rem;
+  line-height: 2rem;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.sidebar-head {
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin-bottom: 0.6rem;
+}
+
+.sidebar-end {
+  font-weight: 700;
+  margin-top: auto;
+  margin-bottom: 2rem;
+}
+
+.sidebar-link {
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.sidebar-link:hover {
+  color: #0fa0ce;
+}
+
+@media (max-width: 600px) {
+  .sidebar {
+    position: static;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    text-align: center;
+    margin: 1rem auto;
+    border: 0;
+    border-bottom: 1px solid #f2f2f2;
+  }
+
+  .sidebar-end {
+    margin-bottom: 0;
+  }
+
+  .container {
+    width: auto;
+    max-width: 100%;
+    padding: 2rem;
+    margin: auto;
+  }
+}
+
+/* Table 
+-------------------------------------*/
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th {
+  background: #212121;
+  color: #f2f2f2;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.table td,
+.table th {
+  padding: 6px;
+  height: 2em;
+  border-bottom: 1px solid #212121;
+  text-align: left;
+}
+
+.table td.controls a,
+.table td.controls input[type=submit] {
+  display: block;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: left;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  color: #212121;
+}
+
+.table td.controls input[type=submit] {
+  background-color: white;
+  cursor: pointer;
+}
+
+.table th.controls a {
+  display: block;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: white;
+}
+

public/css/app.css

@@ -1,55 +1,418 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
 /**
- * Ryuuji 
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
  */
 
 body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 500;
+  src: url(/fonts/OpenSans-Regular.ttf?5a798cdadc7cd321e3f72425b70bface) format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 600;
+  src: url(/fonts/OpenSans-SemiBold.ttf?096d8c73bb18e4328284f25138b47ac6) format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/OpenSans-Bold.ttf?0062c34665a3fc0f2278cd4e955702ec) format("truetype");
+}
+
+/* Base
+-------------------------------------*/
+
+html {
+  overflow-y: scroll;
+  background-color: white;
+}
+
+body {
+  font-size: 15px;
+  line-height: 1.6rem;
+  font-family: "OpenSans", sans-serif;
   color: #212121;
-  line-height: 1.6em;
-  font-size: 1.25em;
-  max-width: 80ch;
-  padding: 2rem;
-  margin: auto;
 }
 
 hr {
   border: 1px solid #f2f2f2;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  letter-spacing: 0.1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
 a {
   color: #212121;
 }
 
-form label {
+.container {
-  display: block;
+  max-width: 38rem;
-  text-transform: uppercase;
+  padding: 2rem;
-  font-weight: bold;
+  margin: auto;
-  font-size: 0.9em;
 }
 
-form input {
+/* Nav Bar
-  display: block;
+-------------------------------------*/
-  width: 100%;
-  height: 2em;
-  border: 1px solid #212121;
-  border-radius: 4px;
-  margin-bottom: 1em;
-  padding: 0.4em;
-}
-
-button {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  cursor: pointer;
-  color: #212121;
-  border: 1px solid #212121;
-  border-radius: 4px;
-  background-color: #fff;
-  font-weight: bold;
-  height: 3em;
-  padding: 0 3em;
-  text-transform: uppercase;
-}
 
 .navbar {
   display: -webkit-flex;
@@ -60,28 +423,84 @@ button {
 .navbar-items {
   display: -webkit-flex;
   display: flex;
-  list-style: none;
+  width: 38rem;
-  padding-left: 0;
+  padding: 1rem 0;
-}
+  margin: auto;
-
-.navbar-item a {
-  text-transform: uppercase;
-  font-weight: bold;
-  letter-spacing: 0.2rem;
-  text-decoration: none;
-  margin-left: 1em;
   color: #212121;
+  list-style: none;
+  letter-spacing: 0.2rem;
+  line-height: 2rem;
+  text-transform: uppercase;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
 }
 
-.navbar-item a:hover {
+.navbar-item-link {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.navbar-item-head {
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.navbar-item-link:hover {
   color: #0fa0ce;
 }
 
 @media only screen and (max-width: 768px) {
-  .navbar-items,
   .navbar {
+    width: 100%;
+    margin: 1rem auto;
+  }
+
+  .navbar-items {
     -webkit-flex-direction: column;
             flex-direction: column;
+    text-align: center;
+  }
+
+  .navbar-item-head {
+    font-size: 1.5rem;
+    margin-bottom: 0.6rem;
   }
 }
 
+/* Forms
+-------------------------------------*/
+
+label {
+  display: block;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.form-input {
+  display: block;
+  width: 100%;
+  height: 2rem;
+  border: 1px solid #212121;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  padding: 0.4em;
+}
+
+textarea.form-input {
+  height: 20rem;
+}
+
+.form-submit {
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  color: #212121;
+  border: 1px solid #212121;
+  border-radius: 4px;
+  background-color: #fff;
+  font-weight: 600;
+  height: 2.4rem;
+  padding: 0 2rem;
+  text-transform: uppercase;
+}
+

resources/sass/admin.scss

@@ -1,88 +1,94 @@
-$colorfg: #212121;
+@import "app.scss";
-$colorborder: #f2f2f2;
-$color01: #0fa0ce;
 
-body {
+$sidebar-width: 13rem;
-    margin: 0;
+
-    color: $colorfg;
+/* Base
+-------------------------------------*/
+.container {
+    margin-left: $sidebar-width;
+    max-width: calc(100% - #{$sidebar-width});
 }
 
-hr {
-    border: 1px solid $colorborder;
-}
 
+/* Sidebar 
+-------------------------------------*/
 .sidebar {
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
-    width: 20ch;
+    width: $sidebar-width;
     border-right: 1px solid $colorborder;
+}
 
-    .items {
+.sidebar-items {
     display: flex;
-        height: 100%;
     flex-direction: column;
-        justify-content: flex-start;
-    }
 
-    .item {
+    height: 100%;
-        line-height: 2em;
+    padding: 1rem 0;
-    }
 
-    .end {
-        margin-top: auto;
-
-        a {
-            padding: 2em 0;
-        }
-    }
-
-    a, span {
-        display:block;
-        text-align: center;
-        text-transform: uppercase;
-        font-weight: bold;
     letter-spacing: .2rem;
-        text-decoration: none;
+    line-height: 2rem;
-        color: $colorfg;
+    text-transform: uppercase;
-
-    }
-
-    a:hover {
-        color: $color01;
-    }
-
-    h1 {
     text-align: center;
 }
+
+.sidebar-head {
+    font-weight: 700;
+    font-size: 1.5rem;
+    margin-bottom: .6rem;
 }
 
-.container {
+.sidebar-end {
-    margin-left: 20ch;
+    font-weight: 700;
-    height:100vh;
+    margin-top: auto;    
-    padding: 0em 2em;
+    margin-bottom: 2rem;
+}
+
+.sidebar-link {
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.sidebar-link:hover {
+    color: $color01;
 }
 
 @media (max-width: 600px) {
     .sidebar{
-        display: none;
+        position: static;
+        flex-direction: column;
+        text-align: center;
+        margin: 1rem auto ;
+        border: 0;
+        border-bottom: 1px solid $colorborder;
+    }
+
+    .sidebar-end {
+        margin-bottom: 0;
     }
 
     .container{
-        margin-left: 0;
+        width: auto;
+        max-width: 100%;
+        padding: 2rem;
+        margin: auto;
     }
 
 }
 
-table {
+/* Table 
+-------------------------------------*/
+
+.table {
     width: 100%;
     border-collapse: collapse;
 
     th {
         background: $colorfg;
         color: $colorborder;
-        font-weight: bold;
+        font-weight: 600;
         text-transform: uppercase;
     }
 
@@ -95,84 +101,29 @@ table {
 
     td.controls {
         a, input[type=submit]{
+            display: block;
             margin: 0;
             border: 0;
             padding: 0;
             width: 100%;
-            display:block;
             text-transform: uppercase;
-            text-align: left;
-            font-size: 1rem;
-            font-weight: 600;
             text-decoration: none;
+            text-align: left;
+            font-weight: 600;
             letter-spacing: .1em;
-
             color: $colorfg;
         }
 
         input[type=submit] {
-            border: 0;
             background-color: white;
             cursor: pointer;
         }
     }
 
-    th.controls {
+    th.controls a {
-        a {
         display: block;
         text-transform: uppercase;
-            font-weight: bold;
         text-decoration: none;
         color: white;
     }
 }
-}
-
-form {
-    height: 100%;
-
-    label {
-        display: block;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: .9em;
-        margin-bottom: .6em;
-    }
-
-    input[type=text], textarea{
-        box-sizing: border-box;
-        display: block;
-        width: 100%;
-        height: 2em;
-        border: 1px solid $colorfg;
-        border-radius: 4px;
-        margin-bottom: 1em;
-        padding: .4em;
-        font-size: 1rem;
-        font-weight: 400;
-    }
-
-    textarea {
-        font-family: inherit;
-        box-sizing: border-box;
-        height: 30em;
-    }
-
-
-    .button{
-        display: inline-block;
-        box-sizing: border-box;
-        text-align: center;
-        cursor: pointer;
-        color: $colorfg;
-        border: 1px solid $colorfg;
-        border-radius: 4px;
-        background-color: #fff;
-
-        font-weight: bold;  
-        height: 38px;
-        padding: 0 38px;
-        margin-bottom: 3em;
-        text-transform: uppercase;
-    }
-}

resources/sass/app.scss

@@ -1,61 +1,44 @@
-/**
+@import "~normalize.css/normalize.css";
- * Ryuuji 
+@import "fonts.scss";
- */
+@import "variables.scss";
-
-$colorfg: #212121;
-$colorborder: #f2f2f2;
-$color01: #0fa0ce;
 
+/* Base
+-------------------------------------*/
+html {
+    overflow-y: scroll;
+    background-color: white;
+}
 body {
+    font-size: 15px;
+    line-height: 1.6rem;
+    font-family: "OpenSans", sans-serif;
     color: $colorfg;
-    line-height: 1.6em;
-    font-size: 1.25em;
-    max-width: 80ch;
-    padding: 2rem;
-    margin: auto;
 }
 
 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;
+}
+
 a {
     color: $colorfg;
 }
 
-form label {
+.container{
-    display: block;
+    max-width: 38rem;
-    text-transform: uppercase;
+    padding: 2rem;
-    font-weight: bold;
+    margin: auto;
-    font-size: .9em;
-}
-
-form input {
-    display: block;
-    width: 100%;
-    height: 2em;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    margin-bottom: 1em;
-    padding: .4em;
-}
-
-button {
-    display: inline-block;
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    color: $colorfg;
-    border: 1px solid $colorfg;
-    border-radius: 4px;
-    background-color: #fff;
-
-    font-weight: bold;  
-    height: 3em;
-    padding: 0 3em;
-    text-transform: uppercase;
 }
 
+/* Nav Bar
+-------------------------------------*/
 .navbar {
     display: flex;
     border-bottom: 1px solid $colorborder;
@@ -63,27 +46,81 @@ button {
 
 .navbar-items {
     display: flex;
-    list-style: none;
+    width: 38rem;
-    padding-left: 0;
+    padding: 1rem 0;
-}
+    margin: auto;
 
-.navbar-item a {
-    text-transform: uppercase;
-    font-weight: bold;
-    letter-spacing: .2rem;
-    text-decoration: none;
-    margin-left: 1em;
     color: $colorfg;
 
-}
+    list-style: none;
-.navbar-item a:hover {
+    letter-spacing: .2rem;
-    color: $color01; 
+    line-height: 2rem;
+    text-transform: uppercase;
+    justify-content: space-between;
 }
 
+.navbar-item-link{
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.navbar-item-head{
+    text-decoration: none;
+    font-weight: 700;
+}
+
+.navbar-item-link:hover { color: $color01; }
 
 @media only screen and (max-width: 768px) {
-    .navbar-items, .navbar {
+    .navbar {
+        width: 100%;
+        margin: 1rem auto;
+    }
+    .navbar-items {
         flex-direction: column;
+        text-align: center;
+    }
+
+    .navbar-item-head{
+        font-size: 1.5rem;
+        margin-bottom: .6rem;
     }
 }
 
+/* Forms
+-------------------------------------*/
+label {
+    display: block;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.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;
+}
+

resources/sass/fonts.scss

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/OpenSans-Regular.ttf') format('truetype')
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype')
+}
+
+@font-face {
+  font-family: 'OpenSans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/OpenSans-Bold.ttf') format('truetype')
+}

resources/sass/variables.scss

@@ -0,0 +1,3 @@
+$colorfg: #212121;
+$colorborder: #f2f2f2;
+$color01: #0fa0ce;

resources/views/admin/base.blade.php

@@ -8,13 +8,13 @@
     </head>
     <body>
         <div class="sidebar">
-            <div class="items">
+            <div class="sidebar-items">
-                <div class="head"><h1>Admin</h1></div>
+                <div class="sidebar-head"><span>Admin</span></div>
-                <div class="item"><a href="{{ route('admin.post.index') }}">Posts</a></div>
+                <div class="sidebar-item"><a href="{{ route('admin.post.index')  }}" class="sidebar-link">Posts</a></div>
-                <div class="item"><a href="#">Now</a></div>
+                <div class="sidebar-item"><a href="#" class="sidebar-link">Now</a></div>
-                <div class="item"><a href="#">Setup</a></div>
+                <div class="sidebar-item"><a href="#" class="sidebar-link">Setup</a></div>
-                <div class="item"><a href="#">Projects</a></div>
+                <div class="sidebar-item"><a href="#" class="sidebar-link">Projects</a></div>
-                <div class="end"><a href="{{ route('index') }}">Volver</a></div>
+                <div class="sidebar-end"><a href="{{ route('index') }}" class="sidebar-link">Volver</a></div>
             </div>
         </div>
 

resources/views/admin/posts/create.blade.php

@@ -9,13 +9,13 @@
         @csrf
         <div>
             <label for="title">Titulo</label>
-            <input type="text" id="title" name="title" required/>
+            <input type="text" class="form-input" id="title" name="title" required/>
         </div>
         <div>
             <label for="md">Contenido</label>
-            <textarea id="md" name="md"></textarea>
+            <textarea id="md" class="form-input" name="md"></textarea>
         </div>
-        <input type="submit" class="button" value="Crear"/>
+        <input type="submit" class="form-submit" value="Crear"/>
     </form>
 
 @endsection

resources/views/admin/posts/edit.blade.php

@@ -9,12 +9,12 @@
         @csrf
         <div>
             <label for="title">Titulo</label>
-            <input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
+            <input type="text" class="form-input" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
         </div>
         <div>
             <label for="md">Contenido</label>
-            <textarea id="md" name="md">{{ old('md', $post->md) }}</textarea>
+            <textarea class="form-input" id="md" name="md">{{ old('md', $post->md) }}</textarea>
         </div>
-        <input type="submit" class="button" value="Actualizar"/>
+        <input type="submit" class="form-submit" value="Actualizar"/>
     </form>
 @endsection

resources/views/admin/posts/index.blade.php

@@ -5,7 +5,7 @@
 @endsection
 
 @section('content')
-    <table>
+    <table class="table">
         <thead>
             <tr>
                 <th>Id</th>

resources/views/base.blade.php

@@ -12,30 +12,31 @@
         <nav class="navbar">
             <ul class="navbar-items">
                 <li class="navbar-item">
-                    <a href="{{route('index')}}">Daniel Cortes</a>
+                    <a class="navbar-item-head" href="{{route('index')}}">Daniel Cortes</a>
                 </li>
                 <li class="navbar-item">
-                    <a href="{{route('blog.index')}}">Blog</a>
+                    <a class="navbar-item-link" href="{{route('blog.index')}}">Blog</a>
                 </li>
                 <li class="navbar-item">
-                    <a href="{{route('now.index')}}">Now</a>
+                    <a class="navbar-item-link" href="{{route('now.index')}}">Now</a>
                 </li>
                 <li class="navbar-item">
-                    <a href="{{route('projects')}}">Proyectos</a>
+                    <a class="navbar-item-link" href="{{route('projects')}}">Proyectos</a>
                 </li>
                 <li class="navbar-item">
-                    <a href="{{route('setup')}}">Setup</a>
+                    <a class="navbar-item-link" href="{{route('setup')}}">Setup</a>
                 </li>
-
                 @auth
                     <li class="navbar-item">
-                        <a href="{{route('admin')}}">ADMIN</a>
+                        <a class="navbar-item-link" href="{{route('admin')}}">ADMIN</a>
                     </li>
                 @endauth
             </ul>
         </nav>
 
+        <div class="container">
             @yield('content')
+        </div>
 
         <script src="js/app.js"></script>
     </body>

resources/views/login.blade.php

@@ -5,14 +5,14 @@
         @csrf
         <div>
             <label for="email" >e-mail</label>
-            <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+            <input class="form-input" id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
         </div>
 
         <div>
             <label for="password" >pass</label>
-            <input id="password" type="password" name="password" required autocomplete="current-password">
+            <input class="form-input" id="password" type="password" name="password" required autocomplete="current-password">
         </div>
 
-        <button type="submit">login</button>
+        <input class="form-submit" type="submit" value="login"/>
     </form>
 @endsection

webpack.mix.js

@@ -14,4 +14,5 @@ const mix = require('laravel-mix');
 mix.disableNotifications();
 mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css')
-    .sass('resources/sass/admin.scss', 'public/css');
+    .sass('resources/sass/admin.scss', 'public/css')
+    .copyDirectory('resources/fonts', 'public/fonts');