mas mejoras de ui, cambie el css a mano por purecss

public/css/app.css

@@ -1484,10 +1484,15 @@ striping:
     border-bottom-width: 0;
 }
 body {
+  color: #241f1e;
+  background-color: #fffbfa;
+  overflow-y: scroll;
+}
+
+.container {
   max-width: 70ch;
-  padding: 2ch;
+  padding-bottom: 2ch;
   margin: auto;
-  color: #212121;
 }
 
 img {
@@ -1498,27 +1503,73 @@ a {
   color: #0fa0ce;
 }
 
+.link {
+  color: #0fa0ce;
+  border: none;
+  background: none;
+  text-decoration: underline;
+  padding: 0;
+}
+
 p {
   line-height: 1.5rem;
 }
 
-textarea {
+.pure-form textarea {
   height: 30ch;
 }
 
+.pure-form input[type=text],
+.pure-form textarea {
+  width: 100%;
+}
+
+.pure-form label {
+  margin-top: 1em;
+}
+
+.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;
+}
+
+.pure-menu-horizontal .pure-menu-list {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+}
+
 .pure-menu-link {
   color: #212121;
 }
 
-.pure-menu-link:hover {
+.pure-menu-link:hover,
+.pure-menu-highlight {
   color: #0fa0ce;
+  border-bottom: 1px #0fa0ce solid;
   background-color: transparent;
 }
 
+.pure-menu-heading {
+  letter-spacing: 0.5ch;
+  padding: 0.5em 0;
+}
+
 .admin-link {
   color: #ee1155;
 }
 
+.admin-link:hover {
+  color: #ee1155;
+  border-bottom: 1px #ee1155 solid;
+  background-color: transparent;
+}
+
 .button-black-white {
   background-color: #ffffff;
   color: #212121;
@@ -1532,7 +1583,36 @@ textarea {
   background-image: none;
 }
 
-.u-align-right {
+.table-heading {
-  float: right;
+  margin-bottom: 1em;
+}
+
+.pure-table {
+  width: 100%;
+}
+
+.pure-table,
+.pure-table td,
+.pure-table th {
+  border: none;
+}
+
+.pure-table td {
+  word-wrap: break-word;
+  max-width: 30ch;
+}
+
+.pure-table .controls {
+  display: inline-flex;
+}
+
+.pure-table .controls a:first-child {
+  padding-right: 1em;
+}
+
+.pure-form .control {
+  padding-top: 1em;
+  width: 100%;
+  text-align: right;
 }
 

public/js/admin.js

@@ -0,0 +1,128 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./resources/js/admin.js":
+/*!*******************************!*\
+  !*** ./resources/js/admin.js ***!
+  \*******************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+switch (window.location.pathname) {
+  case "/admin/posts":
+    document.getElementById("posts-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/admin/now":
+    document.getElementById("now-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/admin/projects":
+    document.getElementById("proyectos-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/admin/setup":
+    document.getElementById("setup-link").classList.add("pure-menu-highlight");
+    break;
+}
+
+/***/ }),
+
+/***/ 1:
+/*!*************************************!*\
+  !*** multi ./resources/js/admin.js ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/js/admin.js */"./resources/js/admin.js");
+
+
+/***/ })
+
+/******/ });

public/js/app.js

@@ -93,7 +93,28 @@
 /*! no static exports found */
 /***/ (function(module, exports) {
 
+switch (window.location.pathname) {
+  case "/":
+    document.getElementById("title-link").classList.add("pure-menu-highlight");
+    break;
 
+  case "/blog":
+  case "/blog/archive":
+    document.getElementById("blog-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/now":
+    document.getElementById("now-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/projects":
+    document.getElementById("proyectos-link").classList.add("pure-menu-highlight");
+    break;
+
+  case "/setup":
+    document.getElementById("setup-link").classList.add("pure-menu-highlight");
+    break;
+}
 
 /***/ }),
 

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
+    "/js/admin.js": "/js/admin.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
 }

resources/js/admin.js

@@ -0,0 +1,14 @@
+switch(window.location.pathname){
+    case "/admin/posts":
+        document.getElementById("posts-link").classList.add("pure-menu-highlight");
+        break;
+    case "/admin/now":
+        document.getElementById("now-link").classList.add("pure-menu-highlight");
+        break;
+    case "/admin/projects":
+        document.getElementById("proyectos-link").classList.add("pure-menu-highlight");
+        break;
+    case "/admin/setup":
+        document.getElementById("setup-link").classList.add("pure-menu-highlight");
+        break;
+}

resources/js/app.js

@@ -0,0 +1,18 @@
+switch(window.location.pathname){
+    case "/":
+        document.getElementById("title-link").classList.add("pure-menu-highlight");
+        break;
+    case "/blog":
+    case "/blog/archive":
+        document.getElementById("blog-link").classList.add("pure-menu-highlight");
+        break;
+    case "/now":
+        document.getElementById("now-link").classList.add("pure-menu-highlight");
+        break;
+    case "/projects":
+        document.getElementById("proyectos-link").classList.add("pure-menu-highlight");
+        break;
+    case "/setup":
+        document.getElementById("setup-link").classList.add("pure-menu-highlight");
+        break;
+}

resources/sass/app.scss

@@ -1,10 +1,15 @@
 @import "~purecss/build/pure.css";
 
 body {
+    color: hsl(10, 10%, 13%);
+    background-color: hsl(10, 100%, 99%);
+    overflow-y: scroll;
+}
+
+.container {
     max-width: 70ch;
-    padding: 2ch;
+    padding-bottom: 2ch;
     margin: auto;
-    color: #212121;
 }
 
 img {
@@ -15,26 +20,73 @@ a {
     color: #0fa0ce;
 }
 
+.link {
+    color: #0fa0ce;
+    border: none;
+    background: none;
+    text-decoration: underline;
+    padding: 0;
+}
+
 p {
     line-height: 1.5rem;
 }
 
-textarea {
+.pure-form textarea {
     height: 30ch;
 }
 
+.pure-form input[type="text"],
+.pure-form textarea {
+    width: 100%;
+}
+
+.pure-form label {
+    margin-top: 1em;
+}
+
+
+.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;
+}
+
+.pure-menu-horizontal .pure-menu-list {
+    display: flex;
+    justify-content: right;
+    width: 100%;
+}
+
 .pure-menu-link {
     color: #212121;
 }
-.pure-menu-link:hover {
+
+.pure-menu-link:hover, .pure-menu-highlight {
     color: #0fa0ce;
+    border-bottom: 1px #0fa0ce solid;
     background-color: transparent;
 }
 
+.pure-menu-heading {
+    letter-spacing: .5ch;
+    padding: .5em 0;
+}
+
 .admin-link {
     color: #ee1155;
 }
 
+.admin-link:hover{
+    color: #ee1155;
+    border-bottom: 1px #ee1155 solid;
+    background-color: transparent;
+}
+
 .button-black-white {
     background-color: #ffffff;
     color: #212121;
@@ -48,6 +100,35 @@ textarea {
     background-image: none;
 }
 
-.u-align-right {
+.table-heading {
-    float: right;
+    margin-bottom: 1em;
+}
+
+.pure-table {
+    width: 100%;
+}
+
+.pure-table,
+.pure-table td,
+.pure-table th {
+    border:none;
+}
+
+.pure-table td {
+    word-wrap: break-word;
+    max-width: 30ch;
+}
+
+.pure-table .controls {
+    display: inline-flex;
+}
+
+.pure-table .controls a:first-child{
+    padding-right: 1em;
+}
+
+.pure-form .control {
+    padding-top: 1em;
+    width:100%;
+    text-align: right;
 }

resources/views/admin/base.blade.php

@@ -10,10 +10,10 @@
             <div class="pure-menu pure-menu-horizontal">
                 <span class="pure-menu-heading">Admin</span>
                 <ul class="pure-menu-list">
-                    <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('admin.post.index')  }}">Posts</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" id="posts-link" href="{{ route('admin.post.index')  }}">Posts</a></li>
-                    <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('admin.now.index')  }}">Now</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" id="now-link"href="{{ route('admin.now.index')  }}">Now</a></li>
-                    <li class="pure-menu-item"><a class="pure-menu-link" href="#">Setup</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" id="setup-link"href="#">Setup</a></li>
-                    <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('admin.project.index')  }}">Projects</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" id="projects-link"href="{{ route('admin.project.index')  }}">Projects</a></li>
                     <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('index') }}">Volver</a></li>
                 </ul>
             </div>
@@ -23,6 +23,7 @@
             </div>
         </div>
 
-        <script src="js/app.js"></script>
+        <script src="{{ asset('js/app.js') }}"></script>
+        <script src="{{ asset('js/admin.js') }}"></script>
     </body>
 </html>

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

@@ -8,19 +8,14 @@
     <form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post">
         @csrf
         <fieldset>
-            <div class="pure-g">
+            <label for="title">Titulo</label>
-                <div class="pure-u-1">
+            <input type="text" id="title" name="title" required/>
-                    <label for="title">Titulo</label>
-                    <input type="text" class="pure-u-23-24" id="title" name="title" required/>
-                </div>
 
-                <div class="pure-u-1">
+            <label for="md">Contenido</label>
-                    <label for="md">Contenido</label>
+            <textarea id="md" name="md"></textarea>
-                    <textarea id="md" class="pure-u-23-24" name="md"></textarea>
+            <div class="control">
-                </div>
+                <button class="pure-button button-black-white" type="submit">Crear</button>
             </div>
-            <button class="pure-button" type="submit" class="form-submit">Crear</button>
         </fieldset>
     </form>
-
 @endsection

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

@@ -8,16 +8,14 @@
     <form class="pure-form pure-form-stacked"  action="{{ route('admin.post.update', ['post' => $post->id]) }}" method="post">
         @csrf
         <fieldset>
-        <div class="pure-g">
+            <label for="title">Titulo</label>
-            <div class="pure-u-1">
+            <input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
-                <label for="title">Titulo</label>
+            <label for="md">Contenido</label>
-                <input type="text" class="pure-u-23-24" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
+            <textarea id="md" name="md">{{ old('md', $post->md) }}</textarea>
+            <div class="control">
+                <button type="submit" class="pure-button button-black-white">Actualizar</button>
             </div>
-            <div class="pure-u-1">
-                <label for="md">Contenido</label>
-                <textarea class="pure-u-23-24" id="md" name="md">{{ old('md', $post->md) }}</textarea>
             </div>
-        </div>
+        </fieldset>
-        <button type="submit" class="pure-button">Actualizar</button>
     </form>
 @endsection

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

@@ -1,13 +1,10 @@
 @extends('admin.base')
 
 @section('content')
-    <div class="pure-g">
+
-        <div class="pure-u-1-5">
+    <div class="table-heading">
-            <h1>Posts</h1>
+        <h1>Posts</h1>
-        </div>
+        <a class="pure-button button-black-white" href="{{ route('admin.post.create') }}">Create Post</a>
-        <div class="pure-u-4-5">
-            <a class="pure-button u-align-right" href="{{ route('admin.post.create') }}">Create</a>
-        </div>
     </div>
 
     <table class="pure-table">
@@ -26,13 +23,11 @@
                     <td>{{$post->id}}</td>
                     <td>{{$post->title}}</td>
                     <td>{{$post->created_at->format('Y-m-d')}}</td>
-                    <td>
+                    <td class="controls">
-                        <a class="pure-button" href="{{ route('admin.post.edit', ['post' => $post->id]) }}">Edit</a>
+                        <a href="{{ route('admin.post.edit', ['post' => $post->id]) }}">Edit</a>
-                    </td>
-                    <td>
                         <form action={{ route('admin.post.delete', ['post' => $post->id]) }} method="post">
                             @csrf
-                            <button type="submit" class="pure-button">Delete</button>
+                            <button type="submit" class="link" onclick="return confirm('Estas seguro?')">Delete</button>
                         </form>
                     </td>
                 </tr>

resources/views/base.blade.php

@@ -10,19 +10,19 @@
     </head>
     <body>
         <nav class="pure-menu pure-menu-horizontal">
-            <a class="pure-menu-heading pure-menu-link" href="{{route('index')}}">Daniel Cortes</a>
+            <a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('index')}}">Daniel Cortes</a>
             <ul class="pure-menu-list">
                 <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="{{route('blog.index')}}">Blog</a>
+                    <a class="pure-menu-link" id="blog-link" href="{{route('blog.index')}}">Blog</a>
                 </li>
                 <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="{{route('now.index')}}">Now</a>
+                    <a class="pure-menu-link" id="now-link"  href="{{route('now.index')}}">Now</a>
                 </li>
                 <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="{{route('project.index')}}">Proyectos</a>
+                    <a class="pure-menu-link" id="proyectos-link" href="{{route('project.index')}}">Proyectos</a>
                 </li>
                 <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="{{route('setup')}}">Setup</a>
+                    <a class="pure-menu-link" id="setup-link" href="{{route('setup')}}">Setup</a>
                 </li>
                 @auth
                     <li class="pure-menu-item">
@@ -36,6 +36,6 @@
             @yield('content')
         </div>
 
-        <script src="js/app.js"></script>
+        <script src="{{ asset('js/app.js') }}"></script>
     </body>
 </html>

webpack.mix.js

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