haciendo css manual

package.json

@@ -11,15 +11,16 @@
     },
     "devDependencies": {
         "cross-env": "^5.1",
-        "laravel-mix": "^4.0.7",
+        "laravel-mix": "^4.1.2",
         "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0",
+        "sass": "^1.22.10",
+        "sass-loader": "^7.3.1",
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
         "normalize.css": "^8.0.1",
-        "npm": "^6.9.2",
+        "npm": "^6.11.2",
+        "purecss": "^1.0.1",
         "skeleton-scss": "^2.0.4"
     }
 }

public/js/app.js

@@ -95,17 +95,6 @@
 
 
 
-/***/ }),
-
-/***/ "./resources/sass/admin.scss":
-/*!***********************************!*\
-  !*** ./resources/sass/admin.scss ***!
-  \***********************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-// removed by extract-text-webpack-plugin
-
 /***/ }),
 
 /***/ "./resources/sass/app.scss":
@@ -120,15 +109,14 @@
 /***/ }),
 
 /***/ 0:
-/*!*****************************************************************************************!*\
-  !*** multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/admin.scss ***!
-  \*****************************************************************************************/
+/*!*************************************************************!*\
+  !*** multi ./resources/js/app.js ./resources/sass/app.scss ***!
+  \*************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/js/app.js */"./resources/js/app.js");
-__webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/app.scss */"./resources/sass/app.scss");
-module.exports = __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/admin.scss */"./resources/sass/admin.scss");
+module.exports = __webpack_require__(/*! /home/data/src/www.danielcortes.xyz/resources/sass/app.scss */"./resources/sass/app.scss");
 
 
 /***/ })

public/mix-manifest.json

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

resources/sass/admin.scss

@@ -1,134 +0,0 @@
-@import "app.scss";
-
-$sidebar-width: 13rem;
-
-/* Base
--------------------------------------*/
-.container {
-    margin-left: $sidebar-width;
-    max-width: calc(100% - #{$sidebar-width});
-}
-
-
-/* Sidebar 
--------------------------------------*/
-.sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: $sidebar-width;
-    border-right: 1px solid $colorborder;
-}
-
-.sidebar-items {
-    display: flex;
-    flex-direction: column;
-
-    height: 100%;
-    padding: 1rem 0;
-
-    letter-spacing: .2rem;
-    line-height: 2rem;
-    text-transform: uppercase;
-    text-align: center;
-}
-
-.sidebar-head {
-    font-weight: 700;
-    font-size: 1.5rem;
-    margin-bottom: .6rem;
-}
-
-.sidebar-end {
-    font-weight: 700;
-    margin-top: auto;    
-    margin-bottom: 2rem;
-}
-
-.sidebar-link {
-    font-weight: 600;
-    text-decoration: none;
-}
-
-.sidebar-link:hover {
-    color: $color01;
-}
-
-@media (max-width: 600px) {
-    .sidebar{
-        position: static;
-        flex-direction: column;
-        text-align: center;
-        margin: 1rem auto ;
-        border: 0;
-        border-bottom: 1px solid $colorborder;
-    }
-
-    .sidebar-end {
-        margin-bottom: 0;
-    }
-
-    .container{
-        width: auto;
-        max-width: 100%;
-        padding: 2rem;
-        margin: auto;
-    }
-
-}
-
-/* Table 
--------------------------------------*/
-
-.table {
-    width: 100%;
-    border-collapse: collapse;
-
-    th {
-        background: $colorfg;
-        color: $colorborder;
-        font-weight: 600;
-        text-transform: uppercase;
-    }
-
-    td, th {
-        padding: 6px;
-        height: 2em;
-        border-bottom: 1px solid $colorfg;
-        text-align: left;
-    }
-
-    td.controls, th.controls {
-        margin-left: 0;
-        margin-right: auto;
-    }
-
-    td.controls {
-        a, 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: .1em;
-            color: $colorfg;
-        }
-
-        input[type=submit] {
-            background-color: white;
-            cursor: pointer;
-        }
-    }
-
-    th.controls a {
-        display: block;
-        text-transform: uppercase;
-        text-decoration: none;
-        color: white;
-    }
-}

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;
+.button-black-white:hover {
+    background-color: #eeeeee;
+    color: #212121;
+    border: #212121 solid 1px;
+    background-image: none;
 }
 
-    .navbar-item-head{
-        font-size: 1.5rem;
-        margin-bottom: .6rem;
+.u-align-right {
+    float: right;
 }
-}
-
-/* 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;
-}
-
-
-/* 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);
-        }
-    }
-}
-

resources/sass/fonts.scss

@@ -1,20 +0,0 @@
-@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

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

resources/views/admin/base.blade.php

@@ -4,25 +4,24 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Daniel Cortés</title>
-        <link href="{{ asset('css/admin.css') }}" rel="stylesheet">
+        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     </head>
     <body>
-        <div class="sidebar">
-            <div class="sidebar-items">
-                <div class="sidebar-head"><span>Admin</span></div>
-                <div class="sidebar-item"><a href="{{ route('admin.post.index')  }}" class="sidebar-link">Posts</a></div>
-                <div class="sidebar-item"><a href="{{ route('admin.now.index')  }}" class="sidebar-link">Now</a></div>
-                <div class="sidebar-item"><a href="#" class="sidebar-link">Setup</a></div>
-                <div class="sidebar-item"><a href="{{ route('admin.project.index')  }}" class="sidebar-link">Projects</a></div>
-                <div class="sidebar-end"><a href="{{ route('index') }}" class="sidebar-link">Volver</a></div>
-            </div>
+            <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" 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" 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>
 
             <div class="container">
-            @yield('title')
-            <hr/>
                 @yield('content')
             </div>
+        </div>
 
         <script src="js/app.js"></script>
     </body>

resources/views/admin/index.blade.php

@@ -1,9 +1,5 @@
 @extends('admin.base')
 
-@section('title')
+@section('content')
     <h1>Admin Panel</h1>
 @endsection
-
-@section('content')
-
-@endsection

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

@@ -1,16 +1,21 @@
 @extends('admin.base')
 
-@section('title')
-    <h1>Now</h1>
-@endsection
-
 @section('content')
-    <table class="table">
+    <div class="pure-g">
+        <div class="pure-u-1-5">
+            <h1>Now</h1>
+        </div>
+        <div class="pure-u-4-5">
+            <a class="pure-button u-align-right" href="{{ route('admin.now.create') }}">Create</a>
+        </div>
+    </div>
+    <table class="pure-table">
         <thead>
             <tr>
                 <th>Id</th>
                 <th>Fecha</th>
-                <th class="controls"><a href="{{ route('admin.now.create') }}">create</a></th>
+                <th></th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
@@ -18,11 +23,13 @@
                 <tr>
                     <td>{{$now->id}}</td>
                     <td>{{$now->created_at->format('Y-m-d')}}</td>
-                    <td class="controls">
-                        <a href="{{ route('admin.now.edit', ['now' => $now->id]) }}">edit</a>
+                    <td>
+                        <a class="pure-button" href="{{ route('admin.now.edit', ['now' => $now->id]) }}">Edit</a>
+                    </td>
+                    <td>
                         <form action={{ route('admin.now.delete', ['now' => $now->id]) }} method="post">
                             @csrf
-                            <input type="submit" value="delete"/>
+                            <button type="submit" class="pure-button">Delete</button>
                         </form>
                     </td>
                 </tr>

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

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

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

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

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

@@ -1,17 +1,23 @@
 @extends('admin.base')
 
-@section('title')
-    <h1>Posts</h1>
-@endsection
-
 @section('content')
-    <table class="table">
+    <div class="pure-g">
+        <div class="pure-u-1-5">
+            <h1>Posts</h1>
+        </div>
+        <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">
         <thead>
             <tr>
                 <th>Id</th>
                 <th>Titulo</th>
                 <th>Fecha</th>
-                <th class="controls"><a href="{{ route('admin.post.create') }}">create</a></th>
+                <th></th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
@@ -20,17 +26,17 @@
                     <td>{{$post->id}}</td>
                     <td>{{$post->title}}</td>
                     <td>{{$post->created_at->format('Y-m-d')}}</td>
-                    <td class="controls">
-                        <a href="{{ route('admin.post.edit', ['post' => $post->id]) }}">edit</a>
+                    <td>
+                        <a class="pure-button" href="{{ route('admin.post.edit', ['post' => $post->id]) }}">Edit</a>
+                    </td>
+                    <td>
                         <form action={{ route('admin.post.delete', ['post' => $post->id]) }} method="post">
                             @csrf
-                            <input type="submit" value="delete"/>
+                            <button type="submit" class="pure-button">Delete</button>
                         </form>
                     </td>
                 </tr>
             @endforeach
         </tbody>
     </table>
-
-
 @endsection

resources/views/base.blade.php

@@ -9,26 +9,24 @@
         <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     </head>
     <body>
-        <nav class="navbar">
-            <ul class="navbar-items">
-                <li class="navbar-item">
-                    <a class="navbar-item-head" href="{{route('index')}}">Daniel Cortes</a>
+        <nav class="pure-menu pure-menu-horizontal">
+            <a class="pure-menu-heading pure-menu-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>
                 </li>
-                <li class="navbar-item">
-                    <a class="navbar-item-link" href="{{route('blog.index')}}">Blog</a>
+                <li class="pure-menu-item">
+                    <a class="pure-menu-link" href="{{route('now.index')}}">Now</a>
                 </li>
-                <li class="navbar-item">
-                    <a class="navbar-item-link" href="{{route('now.index')}}">Now</a>
+                <li class="pure-menu-item">
+                    <a class="pure-menu-link" href="{{route('project.index')}}">Proyectos</a>
                 </li>
-                <li class="navbar-item">
-                    <a class="navbar-item-link" href="{{route('project.index')}}">Proyectos</a>
-                </li>
-                <li class="navbar-item">
-                    <a class="navbar-item-link" href="{{route('setup')}}">Setup</a>
+                <li class="pure-menu-item">
+                    <a class="pure-menu-link" href="{{route('setup')}}">Setup</a>
                 </li>
                 @auth
-                    <li class="navbar-item">
-                        <a class="navbar-item-link" href="{{route('admin')}}">ADMIN</a>
+                    <li class="pure-menu-item">
+                        <a class="pure-menu-link admin-link" href="{{route('admin')}}">Admin</a>
                     </li>
                 @endauth
             </ul>

resources/views/blog/index.blade.php

@@ -6,11 +6,13 @@
 
 @section('content')
     @foreach($posts as $post) 
-        <section>
+        <article>
+            <header>
                 <h1>{{$post->title}}</h1>
+            </header>
             {!! $parse->text($post->md) !!}
-        </section>
+        </article>
         <hr/>
     @endforeach
-    <span>Mas posts en el <a href="{{ route('blog.archive') }}">archivo</a></span>
+    <span>Para ver mas posts, ve al <a href="{{ route('blog.archive') }}">archivo</a></span>
 @endsection

resources/views/blog/show.blade.php

@@ -5,10 +5,12 @@
 @endphp
 
 @section('content')
-        <section>
+        <article>
+            <header>
                 <h1>{{$post->title}}</h1>
+            </header>
             {!! $parse->text($post->md) !!}
-        </section>
+        </article>
         <hr/>
-        <span>Para posts antiguos, ve al <a href="{{ route('blog.archive') }}">archivo</a></span>
+        <span>Para ver mas posts , ve al <a href="{{ route('blog.archive') }}">archivo</a></span>
 @endsection

resources/views/login.blade.php

@@ -1,18 +1,22 @@
 @extends('base')
 
 @section('content')
-    <form method="POST" action="{{ route('login') }}">
+    <form method="post" action="{{ route('login') }}" class="pure-form pure-form-aligned">
         @csrf
-        <div>
+        <fieldset>
+            <div class="pure-control-group">
                 <label for="email" >e-mail</label>
-            <input class="form-input" id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+                <input id="email" type="email" name="email" value="{{ old('email') }}" placeholder="e-mail" required autocomplete="email" autofocus>
             </div>
 
-        <div>
+            <div class="pure-control-group">
                 <label for="password" >pass</label>
-            <input class="form-input" id="password" type="password" name="password" required autocomplete="current-password">
+                <input id="password" type="password" name="password" placeholder="pass" required autocomplete="current-password">
             </div>
 
-        <input class="form-submit" type="submit" value="login"/>
+            <div class="pure-controls">
+                <button type="submit" class="pure-button button-black-white">login</button>
+            </div>
+        </fieldset>
     </form>
 @endsection

resources/views/now/index.blade.php

@@ -5,8 +5,11 @@
 @endphp
 
 @section('content')
-    <section>
+    <article>
+        <header>
+            <h1>Now</h1>
+        </header>
         {!! $parse->text($now->md) !!}
-    </section>
+    </article>
     <hr/>
 @endsection

resources/views/projects/index.blade.php

@@ -6,8 +6,10 @@
 
 @section('content')
     @foreach($projects as $project)
-        <section>
+        <article>
+            <header>
                 <h1>{{ $project->title }}</h1>
+            </header>
 
             {!! $parse->text($project->md) !!}
 

webpack.mix.js

@@ -14,5 +14,4 @@ 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')
     .copyDirectory('resources/fonts', 'public/fonts');