FEATURE: add template for blog

This commit is contained in:
Michal Kváček
2016-10-04 00:42:20 +02:00
parent de02944d0d
commit 52b0ec7c72
7 changed files with 177 additions and 65 deletions
+83 -55
View File
@@ -46,7 +46,7 @@ audio:not([controls]) {
a {
background-color: transparent;
color: #8aa800;
color: #7cad2a;
text-decoration: none;
line-height: inherit;
cursor: pointer;
@@ -1818,7 +1818,7 @@ h1,h2,h3,h4,h5,h6 {
font-family: "Hind Siliguri", Helvetica, Roboto, Arial, sans-serif;
font-weight: 500;
font-style: normal;
color: #8aa800;
color: #7cad2a;
text-rendering: optimizeLegibility;
margin-top: 0;
margin-bottom: 0.5rem;
@@ -2166,7 +2166,7 @@ p + .stat {
color: #fefefe;
}
.button.success {
background-color: #8aa800;
background-color: #7cad2a;
color: #fefefe;
}
.button.success:hover,.button.success:focus {
@@ -2217,8 +2217,8 @@ p + .stat {
color: #3c3c3c;
}
.button.hollow.success {
border: 1px solid #8aa800;
color: #8aa800;
border: 1px solid #7cad2a;
color: #7cad2a;
}
.button.hollow.success:hover,.button.hollow.success:focus {
border-color: #455400;
@@ -2269,7 +2269,7 @@ p + .stat {
width: 100%;
height: 2.4375rem;
padding: 0.5rem;
border: 1px solid #8aa800;
border: 1px solid #7cad2a;
margin: 0 0 1rem;
font-family: inherit;
font-size: 1rem;
@@ -2282,7 +2282,7 @@ p + .stat {
-moz-appearance: none;
}
[type='text']:focus,[type='password']:focus,[type='date']:focus,[type='datetime']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='week']:focus,[type='email']:focus,[type='number']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='url']:focus,[type='color']:focus,textarea:focus {
border: 2px solid #8aa800;
border: 2px solid #7cad2a;
background-color: #fefefe;
outline: none;
box-shadow: 0 0 5px #414042;
@@ -2530,7 +2530,7 @@ select[multiple] {
color: #fefefe;
}
.badge.success {
background: #8aa800;
background: #7cad2a;
color: #fefefe;
}
.badge.warning {
@@ -2652,7 +2652,7 @@ select[multiple] {
color: #fefefe;
}
.button-group.success .button {
background-color: #8aa800;
background-color: #7cad2a;
color: #fefefe;
}
.button-group.success .button:hover,.button-group.success .button:focus {
@@ -3052,7 +3052,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -3085,7 +3085,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3095,7 +3095,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3122,7 +3122,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -3149,7 +3149,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3159,7 +3159,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3188,7 +3188,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -3215,7 +3215,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3225,7 +3225,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3254,7 +3254,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -3281,7 +3281,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3291,7 +3291,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3320,7 +3320,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -3347,7 +3347,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3357,7 +3357,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3410,7 +3410,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -3420,7 +3420,7 @@ select[multiple] {
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -3469,7 +3469,7 @@ select[multiple] {
color: #fefefe;
}
.label.success {
background: #8aa800;
background: #7cad2a;
color: #fefefe;
}
.label.warning {
@@ -3563,7 +3563,7 @@ html,body {
}
.off-canvas {
position: fixed;
background: #8aa800;
background: #7cad2a;
z-index: 50;
max-height: 100%;
overflow-y: auto;
@@ -3837,7 +3837,7 @@ html,body {
background-color: #777;
}
.progress.success .progress-meter {
background-color: #8aa800;
background-color: #7cad2a;
}
.progress.warning .progress-meter {
background-color: #ffc339;
@@ -4349,7 +4349,7 @@ table.hover tr:nth-of-type(even):hover {
background: #0a0a0a;
color: #fefefe;
padding: 0.5rem;
background-color: #8aa800;
background-color: #7cad2a;
margin-bottom: 25px;
width: 100%;
z-index: 1000;
@@ -5404,6 +5404,9 @@ table.hover tr:nth-of-type(even):hover {
.m-l-40 {
margin-left: 40px;
}
.p-0 {
padding: 0;
}
.p-lr-15 {
padding-left: 15px;
padding-right: 15px;
@@ -5460,7 +5463,7 @@ table.hover tr:nth-of-type(even):hover {
text-decoration: underline;
}
.green-text {
color: #8aa800 !important;
color: #7cad2a !important;
}
.white-text {
color: #fefefe !important;
@@ -5601,14 +5604,14 @@ textarea,textarea:focus {
text-transform: uppercase;
}
.member-list {
border-right: 2px solid #8aa800;
border-right: 2px solid #7cad2a;
}
.member {
margin-bottom: 15px;
clear: both;
}
.contact-address {
background-color: #8aa800;
background-color: #7cad2a;
}
.contact-address div {
margin: 15px auto;
@@ -5689,24 +5692,24 @@ a#responsive-menu-button {
a#responsive-menu-button:hover {
text-decoration: none;
}
footer {
#footer {
width: 100%;
display: block;
background-color: #8aa800;
background-color: #7cad2a;
text-align: center;
}
footer .social-icons {
#footer .social-icons {
margin: 20px auto 0;
float: none;
display: inline-block;
}
footer .binarity-info {
#footer .binarity-info {
margin: 5px auto 20px;
float: none;
display: inline-block;
text-align: center;
}
footer .binarity-info:before {
#footer .binarity-info:before {
content: '';
width: 50px;
position: relative;
@@ -6096,7 +6099,7 @@ footer .binarity-info:before {
font-size: 1.7rem;
}
.off-canvas#responsive-menu .main-menu.menu > li > a:hover,.off-canvas#responsive-menu .main-menu.menu > li.active > a {
color: #8aa800;
color: #7cad2a;
}
.off-canvas#responsive-menu .main-menu.menu > li.active > a {
font-size: 2.2rem;
@@ -6301,7 +6304,7 @@ footer .binarity-info:before {
.dark-background table tbody tr td:first-child:before {
content: '•';
margin-right: 5px;
color: #8aa800;
color: #7cad2a;
}
@@ -6348,7 +6351,7 @@ footer .binarity-info:before {
}
.outline {
position: absolute;
width: 165px;
width: 166px;
height: 137px;
z-index: 2;
background: url(../images/hexagon_green_outline.png);
@@ -7955,7 +7958,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -7982,7 +7985,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -7992,7 +7995,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -8021,7 +8024,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -8048,7 +8051,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -8058,7 +8061,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -8087,7 +8090,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -8114,7 +8117,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -8124,7 +8127,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -8153,7 +8156,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: #8aa800 transparent transparent;
border-color: #7cad2a transparent transparent;
border-top-style: solid;
border-bottom-width: 0;
right: 5px;
@@ -8180,7 +8183,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent #8aa800 transparent transparent;
border-color: transparent #7cad2a transparent transparent;
border-right-style: solid;
border-left-width: 0;
}
@@ -8190,7 +8193,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent #8aa800;
border-color: transparent transparent transparent #7cad2a;
border-left-style: solid;
border-right-width: 0;
}
@@ -9107,7 +9110,7 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
font-size: 1.7rem;
}
.off-canvas#responsive-menu .main-menu.menu > li > a:hover,.off-canvas#responsive-menu .main-menu.menu > li.active > a {
color: #8aa800;
color: #7cad2a;
}
.off-canvas#responsive-menu .main-menu.menu > li.active > a {
font-size: 2.2rem;
@@ -9260,7 +9263,6 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
@media (max-width: 400px) {
.title-bar-title img {
width: 100px;
height: auto;
@@ -9278,3 +9280,29 @@ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,secti
}
.article-list-item .date.big {
font-size: 4em;
line-height: 1em;
}
.article-list-item .gravatar {
border-radius: 50%;
}
.article-list-item .author {
line-height: 1;
text-align: center;
}
.article-list-item article {
padding: 0;
padding-right: 15px;
}
.article-list-item footer {
font-weight: bold; font-size: 120%;
padding: 0;
padding-right: 15px;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

@@ -3,18 +3,67 @@
@include(\App\Helpers\Template::name('metaInformation'))
@section('content')
<h1 class="text-center uppercase m-b-25">{{$page->title}}</h1>
<div class="row article-list-item">
<aside class="column text-right large-1">
<div class="date">
<span class="date day big">@customDate('j', $page->created_at)</span>
<br>
<span class="date uppercase month">@monthName($page->created_at)</span>
</div>
<div class="m-t-25 author">
<img class="gravatar" src="@gravatar($page->author->email, 50)" alt="">
<br />
<small>{{$page->author->name}}</small>
</div>
</aside>
<div class="column large-11">
<h1>{{$page->title}}</h1>
<article class="text-justify">
{!! $page->content !!}
</article>
</div>
</div>
<div class="row m-t-50">
<h3>Komentáře</h3>
@foreach($page->comments as $comment)
<img src="@gravatar($comment->author->email)" alt=""> {{$comment->author->name}}: {{$comment->content}}
@endforeach
@if(session('success'))
<div class="callout succes">
Komentář úspěšně uložen.
</div>
@endif
<form method="post" action="{{route('comments.new', ['id' => $page->id])}}">
{!! csrf_field() !!}
@if($loggedUser)
<img src="@gravatar($loggedUser->email)" alt=""> {{$loggedUser->name}}
@else
<div class="row">
<div class="column medium-6">
<input type="text" name="name" required placeholder="Jméno">
</div>
<div class="column medium-6">
<input type="email" name="email" required placeholder="E-mail">
</div>
</div>
@endif
<div class="row">
{!! $page->content !!}
@forelse($page->comments as $comment)
{{$comment->author}}: {{$comment->content}}
@empty
<div class="callout info">Nic tu neni.</div>
@endforelse
<div class="column medium-12">
<textarea name="message" required>{{old('message')}}</textarea>
<button type="submit" class="button success">Uložit</button>
</div>
</div>
</form>
</div>
@@ -10,6 +10,41 @@
</div>
@foreach($articles as $article)
<h2><a href="{{route('page.content', ['url' => $article->url])}}">{{$article->title}}</a></h2>
<div class="column large-6 article-list-item">
<div class="row">
<aside class="column text-right large-3">
<div class="date">
<span class="date day big">@customDate('j', $article->created_at)</span>
<br>
<span class="date uppercase month">@monthName($article->created_at)</span>
</div>
<div class="m-t-25 author">
{{--<small>{{str_limit($article->author->name, 15)}}</small>--}}
<img class="gravatar" src="@gravatar($article->author->email, 35)" alt="">
</div>
</aside>
<header>
<h5>
<a href="{{route('page.content', ['url' => $article->url])}}">
{{$article->title}}
</a>
</h5>
</header>
<article class="p-0 column text-justify large-9">
{{str_limit($article->meta_description, 250)}}
<a href="{{route('page.content', ['url' => $article->url])}}">více</a>
</article>
<footer class="text-right">
<a href="{{route('page.content', ['url' => $article->url])}}#comments">
<i class="fa fa-fw fa-comments"></i> {{$article->comments->count()}}
</a>
</footer>
</div>
</div>
{{-- <h2><a href="{{route('page.content', ['url' => $article->url])}}">{{$article->title}}</a></h2>--}}
@endforeach
@endsection
@@ -104,7 +104,7 @@
@yield('content')
<footer class="hide-for-large">
<footer id="footer" class="hide-for-large">
<ul class="social-icons menu">
@if (!empty(setting('facebookProfile')))
<li>