uff creo que ya esta

This commit is contained in:
Daniel Cortés
2019-10-15 16:57:31 -03:00
parent a7929c0097
commit 9f77ef6dd4
13 changed files with 372 additions and 258 deletions

144
public/css/app.css vendored
View File

@@ -1503,6 +1503,16 @@ body {
margin: auto; margin: auto;
} }
.container.wide {
max-width: 100ch;
}
@media (min-width: 768px) {
.container {
margin-top: 6em;
}
}
img { img {
max-width: 100%; max-width: 100%;
cursor: pointer; cursor: pointer;
@@ -1512,14 +1522,6 @@ a {
color: #0fa0ce; color: #0fa0ce;
} }
.link {
color: #0fa0ce;
border: none;
background: none;
text-decoration: underline;
padding: 0;
}
p { p {
line-height: 1.5rem; line-height: 1.5rem;
} }
@@ -1528,6 +1530,7 @@ article {
box-shadow: 3px 3px 10px 0px #aaa; box-shadow: 3px 3px 10px 0px #aaa;
padding: 2ch 10ch; padding: 2ch 10ch;
margin-bottom: 2em; margin-bottom: 2em;
background-color: white;
} }
/****************************************************************************** /******************************************************************************
@@ -1536,13 +1539,12 @@ article {
.pure-form textarea { .pure-form textarea {
height: 25ch; height: 25ch;
min-width: calc(80ch - 2em); resize: vertical;
max-width: calc(80ch - 2em);
} }
.pure-form input[type=text], .pure-form input[type=text],
.pure-form textarea { .pure-form textarea {
width: calc(80ch - 2em); width: 100%;
} }
.pure-form input[type=text], .pure-form input[type=text],
@@ -1565,51 +1567,107 @@ article {
text-align: right; text-align: right;
} }
.pure-form {
box-shadow: 0px 0px 20px -15px #241f1e;
padding: 1em;
}
/****************************************************************************** /******************************************************************************
=> Menu => Menu
*******************************************************************************/ *******************************************************************************/
.pure-menu-horizontal { .menu {
display: flex; padding-top: 2ch;
padding-left: 40ch; padding-bottom: 2ch;
padding-right: 40ch; box-shadow: 0px 3px 5px 0px #ccc;
padding-bottom: 1em; background-color: #fdfcfc;
padding-top: 1em;
margin-bottom: 1em;
box-shadow: 0 -5px 10px black;
} }
.pure-menu-horizontal .pure-menu-list { .menu-list {
display: flex; display: flex;
justify-content: right; flex-direction: column;
max-width: 80ch;
margin: auto;
padding-left: 10ch;
list-style: none;
}
.menu-item {
margin: 0;
padding: 0.5ch 0;
height: 100%;
}
.menu-link,
.menu-heading {
display: inline-block;
text-decoration: none;
color: #241f1e;
width: 100%; width: 100%;
} }
.pure-menu-link { .menu-link:hover,
color: #241f1e; .menu-heading:hover,
} .menu-highlight {
.pure-menu-link:hover,
.pure-menu-highlight {
color: #0fa0ce; color: #0fa0ce;
border-bottom: 1px #0fa0ce solid;
background-color: transparent;
} }
.pure-menu-heading { .menu-heading {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1ch;
letter-spacing: 0.5ch; letter-spacing: 0.5ch;
padding: 0.5em 0; }
@media (min-width: 768px) {
.menu {
width: 100%;
position: fixed;
height: 1.75em;
top: 0;
}
.menu-list {
flex-direction: row;
align-items: center;
padding-left: 0;
}
.menu-link,
.menu-heading {
width: auto;
}
.menu-item {
margin-left: 1em;
}
.menu-heading {
flex-grow: 1;
margin-bottom: 0;
}
}
.separator {
width: 100%;
height: 2px;
margin-bottom: 1em;
box-shadow: 0px 10px 10px #ccc;
} }
/****************************************************************************** /******************************************************************************
=> Buttons & Links => Buttons & Links
*******************************************************************************/ *******************************************************************************/
.pure-button {
letter-spacing: 0.2em;
min-width: 20ch;
border-radius: 0;
background-image: none;
border: none;
}
.pure-button:focus,
.pure-button:hover,
.pure-button:active {
background-image: none;
}
.special-link { .special-link {
color: #ee1155; color: #ee1155;
} }
@@ -1624,24 +1682,18 @@ article {
background-color: white; background-color: white;
color: #241f1e; color: #241f1e;
border: #241f1e solid 1px; border: #241f1e solid 1px;
border-radius: 0;
min-width: 20ch;
} }
.button-black-white:focus, .button-black-white:focus,
.button-black-white:hover { .button-black-white:hover {
background-color: white; background-color: white;
color: #241f1e; color: #241f1e;
border: #241f1e solid 1px;
background-image: none;
box-shadow: inset 1px 1px 4px -2px #241f1e; box-shadow: inset 1px 1px 4px -2px #241f1e;
} }
.button-black-white:active { .button-black-white:active {
background-color: white; background-color: white;
color: #241f1e; color: #241f1e;
border: #241f1e solid 1px;
background-image: none;
box-shadow: inset 1px 1px 2px #241f1e; box-shadow: inset 1px 1px 2px #241f1e;
} }
@@ -1649,8 +1701,8 @@ article {
=> Tables => Tables
*******************************************************************************/ *******************************************************************************/
.table-heading { .pure-table {
margin-bottom: 1em; margin-top: 1em;
} }
.pure-table, .pure-table,
@@ -1680,7 +1732,7 @@ article {
} }
.pure-table .controls { .pure-table .controls {
width: 16ch; width: 22ch;
} }
.pure-table .controls > * { .pure-table .controls > * {
@@ -1689,7 +1741,7 @@ article {
.pure-table .controls .pure-button.button-black-white { .pure-table .controls .pure-button.button-black-white {
min-width: auto; min-width: auto;
width: 7ch; width: 10ch;
padding: 0.5em 0; padding: 0.5em 0;
} }

2
public/js/app.js vendored
View File

@@ -94,7 +94,7 @@
/***/ (function(module, exports) { /***/ (function(module, exports) {
// Highlight links if in his page // Highlight links if in his page
if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("proyectos-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/setup") document.getElementById("setup-link").classList.add("pure-menu-highlight"); // Makes all images clickeable if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("projects-link").classList.add("menu-highlight");else if (window.location.pathname == "/setups") document.getElementById("setup-link").classList.add("menu-highlight"); // Makes all images clickeable
var images = document.getElementsByTagName("img"); var images = document.getElementsByTagName("img");

10
resources/js/app.js vendored
View File

@@ -1,12 +1,12 @@
// Highlight links if in his page // Highlight links if in his page
if(window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") if(window.location.pathname == "/blog" || window.location.pathname == "/blog.archive")
document.getElementById("blog-link").classList.add("pure-menu-highlight"); document.getElementById("blog-link").classList.add("menu-highlight");
else if(window.location.pathname == "/now") else if(window.location.pathname == "/now")
document.getElementById("now-link").classList.add("pure-menu-highlight"); document.getElementById("now-link").classList.add("menu-highlight");
else if(window.location.pathname == "/projects") else if(window.location.pathname == "/projects")
document.getElementById("proyectos-link").classList.add("pure-menu-highlight"); document.getElementById("projects-link").classList.add("menu-highlight");
else if(window.location.pathname == "/setup") else if(window.location.pathname == "/setups")
document.getElementById("setup-link").classList.add("pure-menu-highlight"); document.getElementById("setup-link").classList.add("menu-highlight");
// Makes all images clickeable // Makes all images clickeable
var images = document.getElementsByTagName("img"); var images = document.getElementsByTagName("img");

View File

@@ -23,6 +23,16 @@ body {
margin: auto; margin: auto;
} }
.container.wide {
max-width: 100ch;
}
@media (min-width: 768px){
.container {
margin-top: 6em;
}
}
img { img {
max-width: 100%; max-width: 100%;
cursor: pointer; cursor: pointer;
@@ -32,14 +42,6 @@ a {
color: $primary-color; color: $primary-color;
} }
.link {
color: $primary-color;
border: none;
background: none;
text-decoration: underline;
padding: 0;
}
p { p {
line-height: 1.5rem; line-height: 1.5rem;
} }
@@ -48,6 +50,7 @@ article {
box-shadow: 3px 3px 10px 0px #aaa; box-shadow: 3px 3px 10px 0px #aaa;
padding: 2ch 10ch; padding: 2ch 10ch;
margin-bottom: 2em; margin-bottom: 2em;
background-color: lighten($background-color, 10%);
} }
/****************************************************************************** /******************************************************************************
@@ -55,13 +58,12 @@ article {
*******************************************************************************/ *******************************************************************************/
.pure-form textarea { .pure-form textarea {
height: 25ch; height: 25ch;
min-width: calc(80ch - 2em); resize: vertical;
max-width: calc(80ch - 2em);
} }
.pure-form input[type="text"], .pure-form input[type="text"],
.pure-form textarea { .pure-form textarea {
width: calc(80ch - 2em); width: 100%;
} }
.pure-form input[type="text"], .pure-form input[type="text"],
@@ -84,51 +86,106 @@ article {
text-align: right; text-align: right;
} }
.pure-form {
box-shadow: 0px 0px 20px -15px $foreground-color;
//border: 1px $foreground-color solid;
//background-color: darken($background-color, 5%);
padding: 1em;
}
/****************************************************************************** /******************************************************************************
=> Menu => Menu
*******************************************************************************/ *******************************************************************************/
.pure-menu-horizontal { .menu {
display: flex; padding-top: 2ch;
padding-left: 40ch; padding-bottom: 2ch;
padding-right: 40ch; box-shadow: 0px 3px 5px 0px #ccc;
padding-bottom: 1em; background-color: $background-color;
padding-top: 1em;
margin-bottom: 1em;
box-shadow: 0 -5px 10px black;
} }
.pure-menu-horizontal .pure-menu-list { .menu-list {
display: flex; display: flex;
justify-content: right; flex-direction: column;
max-width: 80ch;
margin: auto;
padding-left: 10ch;
list-style: none;
}
.menu-item {
margin: 0;
padding: .5ch 0;
height: 100%;
}
.menu-link,
.menu-heading {
display: inline-block;
text-decoration: none;
color: $foreground-color;
width: 100%; width: 100%;
} }
.pure-menu-link { .menu-link:hover,
color: $foreground-color; .menu-heading:hover,
} .menu-highlight {
.pure-menu-link:hover, .pure-menu-highlight {
color: $primary-color; color: $primary-color;
border-bottom: 1px $primary-color solid;
background-color: transparent;
} }
.pure-menu-heading { .menu-heading {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1ch;
letter-spacing: .5ch; letter-spacing: .5ch;
padding: .5em 0; }
@media (min-width: 768px){
.menu {
width: 100%;
position: fixed;
height: 1.75em;
top: 0;
}
.menu-list {
flex-direction: row;
align-items: center;
padding-left: 0;
}
.menu-link, .menu-heading {
width: auto;
}
.menu-item{
margin-left: 1em;
}
.menu-heading {
flex-grow: 1;
margin-bottom: 0;
}
}
.separator {
width:100%;
height: 2px;
margin-bottom: 1em;
box-shadow: 0px 10px 10px #ccc;
} }
/****************************************************************************** /******************************************************************************
=> Buttons & Links => Buttons & Links
*******************************************************************************/ *******************************************************************************/
.pure-button {
letter-spacing: .2em;
min-width: 20ch;
border-radius: 0;
background-image: none;
border: none;
}
.pure-button:focus,
.pure-button:hover,
.pure-button:active{
background-image: none;
}
.special-link { .special-link {
color: $admin-color; color: $admin-color;
} }
@@ -143,31 +200,25 @@ article {
background-color: lighten($background-color, 10%); background-color: lighten($background-color, 10%);
color: $foreground-color; color: $foreground-color;
border: $foreground-color solid 1px; border: $foreground-color solid 1px;
border-radius: 0;
min-width: 20ch;
} }
.button-black-white:focus, .button-black-white:focus,
.button-black-white:hover { .button-black-white:hover {
background-color: lighten($background-color, 10%); background-color: lighten($background-color, 10%);
color: $foreground-color; color: $foreground-color;
border: $foreground-color solid 1px;
background-image: none;
box-shadow: inset 1px 1px 4px -2px $foreground-color; box-shadow: inset 1px 1px 4px -2px $foreground-color;
} }
.button-black-white:active{ .button-black-white:active{
background-color: lighten($background-color, 10%); background-color: lighten($background-color, 10%);
color: $foreground-color; color: $foreground-color;
border: $foreground-color solid 1px;
background-image: none;
box-shadow: inset 1px 1px 2px $foreground-color; box-shadow: inset 1px 1px 2px $foreground-color;
} }
/****************************************************************************** /******************************************************************************
=> Tables => Tables
*******************************************************************************/ *******************************************************************************/
.table-heading { .pure-table {
margin-bottom: 1em; margin-top: 1em;
} }
.pure-table, .pure-table,
@@ -198,7 +249,7 @@ article {
} }
.pure-table .controls { .pure-table .controls {
width: 16ch; width: 22ch;
} }
.pure-table .controls > *{ .pure-table .controls > *{
@@ -207,7 +258,7 @@ article {
.pure-table .controls .pure-button.button-black-white{ .pure-table .controls .pure-button.button-black-white{
min-width: auto; min-width: auto;
width: 7ch; width: 10ch;
padding: .5em 0; padding: .5em 0;
} }

View File

@@ -7,18 +7,28 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head> </head>
<body> <body>
<nav class="pure-menu pure-menu-horizontal"> <nav class="menu">
<a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('admin')}}">Admin</a> <ul class="menu-list">
<ul class="pure-menu-list"> <a class="menu-heading" id="title-link" href="{{route('admin')}}">Admin</a>
<li class="pure-menu-item"><a class="pure-menu-link" id="posts-link" href="{{ route('admin.post.index') }}">Posts</a></li> <li class="menu-item">
<li class="pure-menu-item"><a class="pure-menu-link" id="now-link" href="{{ route('admin.now.index') }}">Now</a></li> <a class="menu-link" id="posts-link" href="{{ route('admin.post.index') }}">Posts</a>
<li class="pure-menu-item"><a class="pure-menu-link" id="projects-link"href="{{ route('admin.project.index') }}">Projects</a></li> </li>
<li class="pure-menu-item"><a class="pure-menu-link" id="setup-link" href="{{ route('admin.setup.index') }}">Setups</a></li> <li class="menu-item">
<li class="pure-menu-item"><a class="pure-menu-link special-link" href="{{ route('index') }}">Volver</a></li> <a class="menu-link" id="now-link" href="{{ route('admin.now.index') }}">Now</a>
</li>
<li class="menu-item">
<a class="menu-link" id="projects-link"href="{{ route('admin.project.index') }}">Projects</a>
</li>
<li class="menu-item">
<a class="menu-link" id="setup-link" href="{{ route('admin.setup.index') }}">Setups</a>
</li>
<li class="menu-item">
<a class="menu-link special-link" href="{{ route('index') }}">Volver</a>
</li>
</ul> </ul>
</nav> </nav>
<div class="container"> <div class="container wide">
@yield('content') @yield('content')
</div> </div>

View File

@@ -1,10 +1,10 @@
@extends('admin.base') @extends('admin.base')
@section('content') @section('content')
<div class="table-heading"> <article>
<h1>Now</h1> <h1>Now</h1>
<a class="pure-button button-black-white" href="{{ route('admin.now.create') }}">Create Now</a> <a class="pure-button button-black-white" href="{{ route('admin.now.create') }}">Create Now</a>
</div>
<table class="pure-table"> <table class="pure-table">
<thead> <thead>
<tr> <tr>
@@ -29,6 +29,5 @@
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</article>
@endsection @endsection

View File

@@ -5,6 +5,7 @@
@endsection @endsection
@section('content') @section('content')
<article>
<form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post"> <form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post">
@csrf @csrf
<fieldset> <fieldset>
@@ -22,4 +23,5 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
</article>
@endsection @endsection

View File

@@ -5,6 +5,7 @@
@endsection @endsection
@section('content') @section('content')
<article>
<form class="pure-form pure-form-stacked" 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 @csrf
<fieldset> <fieldset>
@@ -22,4 +23,5 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
</article>
@endsection @endsection

View File

@@ -1,11 +1,9 @@
@extends('admin.base') @extends('admin.base')
@section('content') @section('content')
<article>
<div class="table-heading">
<h1>Posts</h1> <h1>Posts</h1>
<a class="pure-button button-black-white" href="{{ route('admin.post.create') }}">Create Post</a> <a class="pure-button button-black-white" href="{{ route('admin.post.create') }}">Create Post</a>
</div>
<table class="pure-table"> <table class="pure-table">
<thead> <thead>
@@ -33,4 +31,5 @@
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</article>
@endsection @endsection

View File

@@ -5,10 +5,9 @@
@endsection @endsection
@section('content') @section('content')
<div class="table-heading"> <article>
<h1>Projects</h1> <h1>Projects</h1>
<a class="pure-button button-black-white" href="{{ route('admin.project.create') }}">Add Project</a> <a class="pure-button button-black-white" href="{{ route('admin.project.create') }}">Add Project</a>
</div>
<table class="pure-table"> <table class="pure-table">
<thead> <thead>
@@ -36,6 +35,5 @@
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</article>
@endsection @endsection

View File

@@ -1,11 +1,9 @@
@extends('admin.base') @extends('admin.base')
@section('content') @section('content')
<article>
<div class="table-heading">
<h1>Setups</h1> <h1>Setups</h1>
<a class="pure-button button-black-white" href="{{ route('admin.setup.create') }}">Add Setup</a> <a class="pure-button button-black-white" href="{{ route('admin.setup.create') }}">Add Setup</a>
</div>
<table class="pure-table"> <table class="pure-table">
<thead> <thead>
@@ -33,4 +31,5 @@
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</article>
@endsection @endsection

View File

@@ -9,29 +9,32 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head> </head>
<body> <body>
<nav class="pure-menu pure-menu-horizontal"> <nav class="menu">
<a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('index')}}">Daniel Cortes</a> <ul class="menu-list">
<ul class="pure-menu-list"> <a class="menu-heading" href="{{route('index')}}">Daniel Cortes</a>
<li class="pure-menu-item">
<a class="pure-menu-link" id="blog-link" href="{{route('blog.index')}}">Blog</a> <li class="menu-item">
<a class="menu-link" id="blog-link" href="{{route('blog.index')}}">Blog</a>
</li> </li>
<li class="pure-menu-item"> <li class="menu-item">
<a class="pure-menu-link" id="now-link" href="{{route('now.index')}}">Now</a> <a class="menu-link" id="now-link" href="{{route('now.index')}}">Now</a>
</li> </li>
<li class="pure-menu-item"> <li class="menu-item">
<a class="pure-menu-link" id="proyectos-link" href="{{route('project.index')}}">Projects</a> <a class="menu-link" id="projects-link" href="{{route('project.index')}}">Projects</a>
</li> </li>
<li class="pure-menu-item"> <li class="menu-item">
<a class="pure-menu-link" id="setup-link" href="{{route('setups.index')}}">Setups</a> <a class="menu-link" id="setup-link" href="{{route('setups.index')}}">Setups</a>
</li> </li>
@auth @auth
<li class="pure-menu-item"> <li class="menu-item">
<a class="pure-menu-link special-link" href="{{route('admin')}}">Admin</a> <a class="menu-link special-link" href="{{route('admin')}}">Admin</a>
</li> </li>
@endauth @endauth
</ul> </ul>
</nav> </nav>
<div class="separator"></div>
<div class="container"> <div class="container">
@yield('content') @yield('content')
</div> </div>

View File

@@ -11,6 +11,5 @@
</header> </header>
{!! $parse->text($post->md) !!} {!! $parse->text($post->md) !!}
</article> </article>
<hr/>
<span>Para ver mas posts , 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 @endsection