muchas cosas, aun esta en proceso de construccion

app/Http/Controllers/BlogController.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Post;
+use Illuminate\Http\Request;
+
+class BlogController extends Controller
+{
+    public function index()
+    {
+        $posts = Post::orderBy('created_at', 'desc')->take(3)->get();
+        return view('blog.index', ['posts' => $posts] );
+    }
+
+    public function archive()
+    {
+        return view('blog.archive', ['posts' => Post::all()] );
+    }
+
+    public function show($id)
+    {
+        return view('blog.show', ['post' => Post::find($id)] );
+    }
+}

app/Now.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Now extends Model
+{
+    protected $table = 'now';
+}

app/Post.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Post extends Model
+{
+    protected $table = 'posts';
+}

composer.json

@@ -9,6 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^7.1.3",
+        "erusev/parsedown": "^1.7",
         "fideloper/proxy": "^4.0",
         "laravel/framework": "5.8.*",
         "laravel/tinker": "^1.0"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "94d4bf9ac7f4a933030e46a346ee2917",
+    "content-hash": "3adc74069fbfbd50eabf8842be184781",
     "packages": [
         {
             "name": "dnoegel/php-xdg-base-dir",

database/factories/NowFactory.php

@@ -0,0 +1,11 @@
+<?php
+
+/* @var $factory \Illuminate\Database\Eloquent\Factory */
+
+use Faker\Generator as Faker;
+
+$factory->define(App\Now::class, function (Faker $faker) {
+    return [
+        'md' => $faker->paragraphs(10, true)
+    ];
+});

database/factories/PostFactory.php

@@ -0,0 +1,12 @@
+<?php
+
+/* @var $factory \Illuminate\Database\Eloquent\Factory */
+
+use Faker\Generator as Faker;
+
+$factory->define(App\Post::class, function (Faker $faker) {
+    return [
+        'title' => $faker->words(5, true),
+        'md' => $faker->paragraphs(10, true)
+    ];
+});

database/factories/UserFactory.php

@@ -1,27 +0,0 @@
-<?php
-
-/** @var \Illuminate\Database\Eloquent\Factory $factory */
-use App\User;
-use Illuminate\Support\Str;
-use Faker\Generator as Faker;
-
-/*
-|--------------------------------------------------------------------------
-| Model Factories
-|--------------------------------------------------------------------------
-|
-| This directory should contain each of the model factory definitions for
-| your application. Factories provide a convenient way to generate new
-| model instances for testing / seeding your application's database.
-|
-*/
-
-$factory->define(User::class, function (Faker $faker) {
-    return [
-        'name' => $faker->name,
-        'email' => $faker->unique()->safeEmail,
-        'email_verified_at' => now(),
-        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
-        'remember_token' => Str::random(10),
-    ];
-});

database/migrations/2019_06_22_034600_create_base_db.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateBaseDb extends Migration
+{
+    public function up()
+    {
+        Schema::create('posts', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('title');
+            $table->longText('md');
+            $table->timestamps();
+        });
+
+        Schema::create('now', function(Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->longText('md');
+            $table->timestamps();
+        });
+    }
+
+    public function down()
+    {
+        Schema::dropIfExists('now');
+        Schema::dropIfExists('posts');
+    }
+}

database/seeds/DatabaseSeeder.php

@@ -4,13 +4,9 @@ use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
 {
-    /**
-     * Seed the application's database.
-     *
-     * @return void
-     */
     public function run()
     {
-        // $this->call(UsersTableSeeder::class);
+        $this->call(PostTableSeeder::class);
+        $this->call(NowTableSeeder::class);
     }
 }

database/seeds/NowTableSeeder.php

@@ -0,0 +1,11 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class NowTableSeeder extends Seeder
+{
+    public function run()
+    {
+        factory(App\Post::class, 50)->create();
+    }
+}

database/seeds/PostTableSeeder.php

@@ -0,0 +1,11 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class PostTableSeeder extends Seeder
+{
+    public function run()
+    {
+        factory(App\Post::class, 50)->create();
+    }
+}

public/css/app.css

@@ -1,898 +1,48 @@
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/9/2014
-* Sass Version by Seth Coelen https://github.com/whatsnewsaes
-*/
-
-/* Base files. */
-
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
-}
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-[hidden],
-template {
-  display: none;
-}
-
-a {
-  background-color: transparent;
-}
-
-a:active {
-  outline: 0;
-}
-
-a:hover {
-  outline: 0;
-}
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-dfn {
-  font-style: italic;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-img {
-  border: 0;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-figure {
-  margin: 1em 40px;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-pre {
-  overflow: auto;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-
-button {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-html input[type=button],
-input[type=reset],
-input[type=submit] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-input {
-  line-height: normal;
-}
-
-input[type=checkbox],
-input[type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-input[type=search] {
-  -webkit-appearance: textfield;
-  box-sizing: content-box;
-}
-
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-legend {
-  border: 0;
-  padding: 0;
-}
-
-textarea {
-  overflow: auto;
-}
-
-optgroup {
-  font-weight: bold;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/9/2014
-* Sass Version by Seth Coelen https://github.com/whatsnewsaes
-*/
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: 1.5em;
-  line-height: 1.6;
-  font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222;
-}
-
-a {
-  color: #1eaedb;
-}
-
-a:hover {
-  color: #1b9cc5;
-}
-
-hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
-  border-top: 1px solid #e1e1e1;
-}
-
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.u-pull-right {
-  float: right;
-}
-
-.u-pull-left {
-  float: left;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 4rem;
-  line-height: 1.2;
-  letter-spacing: -0.1rem;
-}
-
-h2 {
-  font-size: 3.6rem;
-  line-height: 1.25;
-  letter-spacing: -0.1rem;
-}
-
-h3 {
-  font-size: 3rem;
-  line-height: 1.3;
-  letter-spacing: -0.1rem;
-}
-
-h4 {
-  font-size: 2.4rem;
-  line-height: 1.35;
-  letter-spacing: -0.08rem;
-}
-
-h5 {
-  font-size: 1.8rem;
-  line-height: 1.5;
-  letter-spacing: -0.05rem;
-}
-
-h6 {
-  font-size: 1.5rem;
-  line-height: 1.6;
-  letter-spacing: 0;
-}
-
-@media (min-width: 550px) {
-  h1 {
-    font-size: 5rem;
-  }
-
-  h2 {
-    font-size: 4.2rem;
-  }
-
-  h3 {
-    font-size: 3.6rem;
-  }
-
-  h4 {
-    font-size: 3rem;
-  }
-
-  h5 {
-    font-size: 2.4rem;
-  }
-
-  h6 {
-    font-size: 1.5rem;
-  }
-}
-
-p {
-  margin-top: 0;
-}
-
-/* Modules */
-
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/9/2014
-* Sass Version by Seth Coelen https://github.com/whatsnewsaes
-*/
-
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box;
-}
-
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0;
-  }
-}
-
-@media (min-width: 550px) {
-  .container {
-    width: 80%;
-  }
-
-  .column,
-  .columns {
-    margin-left: 4%;
-  }
-
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0;
-  }
-
-  .one.column,
-  .one.columns {
-    width: 4.6666666667%;
-  }
-
-  .two.columns {
-    width: 13.3333333333%;
-  }
-
-  .three.columns {
-    width: 22%;
-  }
-
-  .four.columns {
-    width: 30.6666666667%;
-  }
-
-  .five.columns {
-    width: 39.3333333333%;
-  }
-
-  .six.columns {
-    width: 48%;
-  }
-
-  .seven.columns {
-    width: 56.6666666667%;
-  }
-
-  .eight.columns {
-    width: 65.3333333333%;
-  }
-
-  .nine.columns {
-    width: 74%;
-  }
-
-  .ten.columns {
-    width: 82.6666666667%;
-  }
-
-  .eleven.columns {
-    width: 91.3333333333%;
-  }
-
-  .twelve.columns {
-    width: 100%;
-    margin-left: 0;
-  }
-
-  .one-third.column {
-    width: 30.6666666667%;
-  }
-
-  .two-thirds.column {
-    width: 65.3333333333%;
-  }
-
-  .one-half.column {
-    width: 48%;
-  }
-
-  .offset-by-one.column,
-  .offset-by-one.columns {
-    margin-left: 8.6666666667%;
-  }
-
-  .offset-by-two.column,
-  .offset-by-two.columns {
-    margin-left: 17.3333333333%;
-  }
-
-  .offset-by-three.column,
-  .offset-by-three.columns {
-    margin-left: 26%;
-  }
-
-  .offset-by-four.column,
-  .offset-by-four.columns {
-    margin-left: 34.6666666667%;
-  }
-
-  .offset-by-five.column,
-  .offset-by-five.columns {
-    margin-left: 43.3333333333%;
-  }
-
-  .offset-by-six.column,
-  .offset-by-six.columns {
-    margin-left: 52%;
-  }
-
-  .offset-by-seven.column,
-  .offset-by-seven.columns {
-    margin-left: 60.6666666667%;
-  }
-
-  .offset-by-eight.column,
-  .offset-by-eight.columns {
-    margin-left: 69.3333333333%;
-  }
-
-  .offset-by-nine.column,
-  .offset-by-nine.columns {
-    margin-left: 78%;
-  }
-
-  .offset-by-ten.column,
-  .offset-by-ten.columns {
-    margin-left: 86.6666666667%;
-  }
-
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns {
-    margin-left: 95.3333333333%;
-  }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns {
-    margin-left: 34.6666666667%;
-  }
-
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns {
-    margin-left: 69.3333333333%;
-  }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.column {
-    margin-left: 52%;
-  }
-}
-
-.container:after,
-.row:after,
-.u-cf {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.button,
-button {
-  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
-  color: #555555;
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 38px;
-  letter-spacing: 0.1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-input[type=submit],
-input[type=reset],
-input[type=button] {
-  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
-  color: #555555;
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 38px;
-  letter-spacing: 0.1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.button:hover,
-button:hover {
-  color: #333;
-  border-color: #888888;
-  outline: 0;
-}
-
-input[type=submit]:hover,
-input[type=reset]:hover,
-input[type=button]:hover {
-  color: #333;
-  border-color: #888888;
-  outline: 0;
-}
-
-.button:focus,
-button:focus {
-  color: #333;
-  border-color: #888888;
-  outline: 0;
-}
-
-input[type=submit]:focus,
-input[type=reset]:focus,
-input[type=button]:focus {
-  color: #333;
-  border-color: #888888;
-  outline: 0;
-}
-
-.button.button-primary,
-button.button-primary {
-  color: #fff;
-  background-color: #33c3f0;
-  border-color: #33c3f0;
-}
-
-input[type=submit].button-primary,
-input[type=reset].button-primary,
-input[type=button].button-primary {
-  color: #fff;
-  background-color: #33c3f0;
-  border-color: #33c3f0;
-}
-
-.button.button-primary:hover,
-button.button-primary:hover {
-  color: #fff;
-  background-color: #1eaedb;
-  border-color: #1eaedb;
-}
-
-input[type=submit].button-primary:hover,
-input[type=reset].button-primary:hover,
-input[type=button].button-primary:hover {
-  color: #fff;
-  background-color: #1eaedb;
-  border-color: #1eaedb;
-}
-
-.button.button-primary:focus,
-button.button-primary:focus {
-  color: #fff;
-  background-color: #1eaedb;
-  border-color: #1eaedb;
-}
-
-input[type=submit].button-primary:focus,
-input[type=reset].button-primary:focus,
-input[type=button].button-primary:focus {
-  color: #fff;
-  background-color: #1eaedb;
-  border-color: #1eaedb;
-}
-
-input[type=email],
-input[type=number],
-input[type=search],
-input[type=text],
-input[type=tel],
-input[type=url],
-input[type=password] {
-  height: 38px;
-  padding: 6px 10px;
-  background-color: #fff;
-  border: 1px solid #d1d1d1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
-}
-
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px;
-  background-color: #fff;
-  border: 1px solid #d1d1d1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
-}
-
-input[type=email],
-input[type=number],
-input[type=search],
-input[type=text],
-input[type=tel],
-input[type=url],
-input[type=password] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-input[type=email]:focus,
-input[type=number]:focus,
-input[type=search]:focus,
-input[type=text]:focus,
-input[type=tel]:focus,
-input[type=url]:focus,
-input[type=password]:focus {
-  border: 1px solid #33c3f0;
-  outline: 0;
-}
-
-textarea:focus,
-select:focus {
-  border: 1px solid #33c3f0;
-  outline: 0;
-}
-
-label,
-legend {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-}
-
-fieldset {
-  padding: 0;
-  border-width: 0;
-}
-
-input[type=checkbox],
-input[type=radio] {
-  display: inline;
-}
-
-label > .label-body {
-  display: inline-block;
-  margin-left: 0.5rem;
-  font-weight: normal;
-}
-
-ul {
-  list-style: circle inside;
-}
-
-ol {
-  list-style: decimal inside;
-  padding-left: 0;
-  margin-top: 0;
-}
-
-ul {
-  padding-left: 0;
-  margin-top: 0;
-}
-
-ul ul,
-ul ol {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%;
-}
-
-ol ol,
-ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%;
-}
-
-li {
-  margin-bottom: 1rem;
-}
-
-code {
-  padding: 0.2rem 0.5rem;
-  margin: 0 0.2rem;
-  font-size: 90%;
-  white-space: nowrap;
-  background: #f1f1f1;
-  border: 1px solid #e1e1e1;
-  border-radius: 4px;
-}
-
-pre > code {
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre;
-}
-
-th,
-td {
-  padding: 12px 15px;
-  text-align: left;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-
-button,
-.button {
-  margin-bottom: 1rem;
-}
-
-input,
-textarea,
-select,
-fieldset {
-  margin-bottom: 1.5rem;
-}
-
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
-  margin-bottom: 2.5rem;
-}
-
 /**
-* Ryuuji 
+ * Ryuuji 
-*/
+ */
 
 body {
   color: #212121;
+  max-width: 80ch;
+  padding: 2rem;
+  margin: auto;
 }
 
-nav {
+hr {
-  display: block;
+  border: 1px solid #f2f2f2;
-  width: 100%;
-  height: 4rem;
-  border-top: 1px solid #fafafa;
-  border-bottom: 1px solid #fafafa;
-  margin-bottom: 2em;
 }
 
-nav .container {
+.navbar {
-  width: 100%;
+  display: -webkit-flex;
+  display: flex;
+  border-bottom: 1px solid #f2f2f2;
 }
 
-nav .container ul {
+.navbar-items {
+  display: -webkit-flex;
+  display: flex;
   list-style: none;
-  margin-bottom: 0;
 }
 
-nav .container ul li {
+.navbar-item a {
-  position: relative;
-  float: left;
-  margin-bottom: 0;
-}
-
-nav .container ul li a {
-  display: inline-block;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 0.2rem;
-  margin-right: 35px;
   text-decoration: none;
-  line-height: 4rem;
+  margin-left: 1em;
   color: #212121;
 }
 
-nav .container ul li a:hover {
+.navbar-item a:hover {
-  color: #0fa0ce !important;
+  color: #0fa0ce;
+}
+
+@media only screen and (max-width: 768px) {
+  .navbar-items,
+  .navbar {
+    -webkit-flex-direction: column;
+            flex-direction: column;
+  }
 }
 

public/js/app.js

@@ -93,7 +93,14 @@
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-console.log('oli');
+function classToggle() {
+  var navs = document.querySelectorAll('.navbar-items');
+  navs.forEach(function (nav) {
+    return nav.classList.toggle('navbar-toggleshow');
+  });
+}
+
+document.querySelector('.navbar-link-toggle').addEventListener('click', classToggle);
 
 /***/ }),
 

resources/js/app.js

@@ -1 +1,7 @@
-console.log('oli');
+function classToggle() {
+  const navs = document.querySelectorAll('.navbar-items')
+  
+  navs.forEach(nav => nav.classList.toggle('navbar-toggleshow'));
+}
+
+document.querySelector('.navbar-link-toggle').addEventListener('click', classToggle);

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 {
+hr {
-    display: block;
+    border: 1px solid $colorborder;
-    width: 100%;
+}
-    height: 4rem;
-    border-top: 1px solid #fafafa;
-    border-bottom: 1px solid #fafafa;
-    margin-bottom: 2em;
 
-    .container {
+.navbar {
-        width: 100%;
+    display: flex;
+    border-bottom: 1px solid $colorborder;
+}
 
-        ul {
+.navbar-items {
-            list-style: none;
+    display: flex;
-            margin-bottom: 0;
+    list-style: none;
+}
 
-            li {
+.navbar-item a {
-                position: relative;
+    text-transform: uppercase;
-                float: left;
+    font-weight: bold;
-                margin-bottom: 0;
+    letter-spacing: .2rem;
+    text-decoration: none;
+    margin-left: 1em;
+    color: $colorfg;
 
-                a {
+}
-                    display: inline-block;
+.navbar-item a:hover {
-                    text-transform: uppercase;
+    color: $color01; 
-                    font-weight: bold;
+}
-                    letter-spacing: .2rem;
-                    margin-right: 35px;
-                    text-decoration: none;
-                    line-height: 4rem;
-                    color: $colorfg;
 
-                    &:hover {
+
-                        color: $color01 !important; 
+@media only screen and (max-width: 768px) {
-                    }
+    .navbar-items, .navbar {
-                }
+        flex-direction: column;
-            }
-        }
     }
 }
 

resources/views/base.blade.php

@@ -6,31 +6,34 @@
         @section('title')
             <title>Daniel Cortés</title>
         @show
-        <link href="css/app.css" rel="stylesheet">
+        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     </head>
     <body>
-        <nav>
+        <nav class="navbar">
-            <div class="container">
+            <ul class="navbar-items">
-                <ul>
+                <li class="navbar-item">
-                    <li>
+                    <a href="{{route('index')}}">Daniel Cortes</a>
-                        <a href="{{route('index')}}">Daniel Cortes</a>
+                </li>
-                    </li>
+                <li class="navbar-item">
-                    <li>
+                    <a href="{{route('blog.index')}}">Blog</a>
-                        <a href="{{route('blog')}}">Blog</a>
+                </li>
-                    </li>
+                <li class="navbar-item">
-                    <li>
+                    <a href="{{route('now')}}">Now</a>
-                        <a href="{{route('now')}}">Now</a>
+                </li>
-                    </li>
+                <li class="navbar-item">
-                    <li>
+                    <a href="{{route('projects')}}">Projects</a>
-                        <a href="{{route('projects')}}">Projects</a>
+                </li>
-                    </li>
+                <li class="navbar-item">
-                    <li>
+                    <a href="{{route('setup')}}">Setup</a>
-                        <a href="{{route('setup')}}">Setup</a>
+                </li>
-                    </li>
+                <li class="navbar-item">
-                </ul>
+                    <a href="#">ADMIN</a>
-            </div>
+                </li>
+            </ul>
         </nav>
-        @yield('content')
+
+            @yield('content')
+
         <script src="js/app.js"></script>
     </body>
 </html>

resources/views/blog.blade.php

@@ -1,9 +0,0 @@
-@extends('base')
-
-@section('content')
-    <div class="container">
-        <h1>Blog</h1>
-        <p>Cosas random que se me ocurren</p>
-        <p>Algun dia van a haber posts aqui, lo prometo</p>
-    </div>
-@endsection

resources/views/blog/archive.blade.php

@@ -0,0 +1,13 @@
+@extends('base')
+
+@section('content')
+    <div class="container">
+        <ul>
+        @foreach($posts as $post) 
+            <li class="post-title">
+                <a href="{{ route('blog.show', $post->id) }}">{{$post->title}}</a> <span>{{$post->created_at->diffForHumans()}}</span>
+            </li>
+        @endforeach
+        </ul>
+    </div>
+@endsection

resources/views/blog/index.blade.php

@@ -0,0 +1,18 @@
+@extends('base')
+
+@php
+    $parse = new Parsedown();
+@endphp
+
+@section('content')
+    <div class="container">
+        @foreach($posts as $post) 
+            <section class="post">
+                <h1 class="post-title">{{$post->title}}</h1>
+                {!! $parse->text($post->md) !!}
+            </section>
+            <hr/>
+        @endforeach
+        <span>Mas posts en el <a href="{{ route('blog.archive') }}">archivo</a></span>
+    </div>
+@endsection

resources/views/blog/show.blade.php

@@ -0,0 +1,15 @@
+@extends('base')
+
+@php
+    $parse = new Parsedown();
+@endphp
+
+@section('content')
+    <div class="container">
+        <section class="post">
+            <h1 class="post-title">{{$post->title}}</h1>
+            {!! $parse->text($post->md) !!}
+        </section>
+        <span>Para posts antiguos, ve al <a href="{{ route('blog.archive') }}">archivo</a></span>
+    </div>
+@endsection

routes/web.php

@@ -7,9 +7,9 @@ Route::get('/now', function () {
     return view('now');
 })->name('now');
 
-Route::get('/blog', function () {
+Route::get('/blog', 'BlogController@index')->name('blog.index');
-    return view('blog');
+Route::get('blog/archive', 'BlogController@archive')->name('blog.archive');
-})->name('blog');
+Route::get('/blog/{post}', 'BlogController@show')->name('blog.show');
 
 Route::get('/projects', function () {
     return view('projects');