Commit f1d4f43b authored by nirgendswo's avatar nirgendswo

adding layout

adding icons
parent 80e83dc3
<div class="grid">
<div class="grid__col-xs-12 grid--justify-center">
<div class="content">
{!! $page->html() !!}
</div>
<div lass="github">
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/fork" data-icon="octicon-repo-forked" data-style="mega" aria-label="Fork nirgendswo/fuzzy-csm on GitHub">Fork</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms" data-icon="octicon-star" data-style="mega" aria-label="Star nirgendswo/fuzzy-csm on GitHub">Star</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download nirgendswo/fuzzy-csm on GitHub">Download</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/issues" data-icon="octicon-issue-opened" data-style="mega" aria-label="Issue nirgendswo/fuzzy-csm on GitHub">Issue</a>
</div>
</div>
</div>
......@@ -9,6 +9,7 @@ body {
font-family: $font-family-body;
color: $color;
background-color: $background-color;
padding: 80px 0 0 0;
}
a {
......@@ -27,11 +28,11 @@ p {
}
hr {
margin: -15px auto 60px;
width: 60%;
width: 100%;
border: 0;
height: 1px;
//background-color: $grey-light-color;
background-color: $color;
margin: 0;
}
figure {
......@@ -41,4 +42,12 @@ figure {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $font-family-heading;
&--section {
margin: 0 0 5px;
}
}
.--inner {
padding: 20px;
}
......@@ -20,5 +20,10 @@ $icon__sizes: (
vertical-align: $icon__vertical-align;
margin: $icon__margin;
&--feature {
width: 80px;
height: 80px;
}
@include icon-sizes($icon__sizes);
}
......@@ -5,12 +5,8 @@
*
*/
$hutch-border-color: #a2a2a2;
.hutch {
border-top: 1px solid $secondary-contrast;
border-left: 1px solid $secondary-contrast;
box-shadow: 10px 10px 0 0 $secondary-contrast;
height: 100%;
&__header {
color: $primary-contrast;
......@@ -18,6 +14,7 @@ $hutch-border-color: #a2a2a2;
}
&__content {
height: 100%;
background-color: $primary-contrast;
}
}
......@@ -11,21 +11,29 @@ $site-navigation-color--hover: white;
.site-navigation {
line-height: 3.2em;
text-align: right;
&__item {
color: $color;
display: inline-block;
margin: 0 0 0 15px;
&:hover {
color: $site-navigation-color--hover;
.site-navigation__icon {
fill: $site-navigation-color--hover;
}
.site-navigation__text {
color: $site-navigation-color--hover;
}
}
}
&__icon {
width: 20px;
height: 20px;
margin: -2px 4px 0 0;
fill: $color;
}
......
......@@ -4,56 +4,93 @@
@section('header')
<div class="grid">
<div class="grid__col-xs-12 grid--justify-center">
<div class="content">
{!! $page->html() !!}
</div>
<div lass="github">
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/fork" data-icon="octicon-repo-forked" data-style="mega" aria-label="Fork nirgendswo/fuzzy-csm on GitHub">Fork</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms" data-icon="octicon-star" data-style="mega" aria-label="Star nirgendswo/fuzzy-csm on GitHub">Star</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download nirgendswo/fuzzy-csm on GitHub">Download</a>
<a class="github-button" href="https://github.com/nirgendswo/fuzzy-cms/issues" data-icon="octicon-issue-opened" data-style="mega" aria-label="Issue nirgendswo/fuzzy-csm on GitHub">Issue</a>
</div>
<header class="site-main__header">
<h1 class="site-main__title">
{!! $page->html() !!}
</h1>
</header>
</div>
</div>
@endsection
@section('content')
<section class="grid">
@foreach($pageRepository->find(
['type' => 'feature'],
['parent' => '/features', 'orderBy' => ['order' => 'asc']]) as $feature)
<article class="grid__col-xs-6 grid__col-md-3 grid--justify-center">
<div class="box box--feature">
<svg class="icon icon--feature">
<use xlink:href="/assets/svg/icons.svg#{{ $feature->data['icon'] }}" />
</svg>
{!! $feature->html() !!}
<div class="grid__col-xs-6 grid__col-md-3">
<div class="hutch">
<div class="hutch__content --inner">
<div class="grid">
<div class="grid__col-xs-12 grid--justify-center">
<article>
<svg class="icon icon--feature">
<use xlink:href="/assets/svg/icons.svg#{{ $feature->data['icon'] }}" />
</svg>
{!! $feature->html() !!}
</article>
</div>
</div>
</div>
</div>
</article>
</div>
@endforeach
</section>
<section class="grid grid--justify-center">
@endsection
@section('content')
<div class="grid">
<div class="grid__col-xs-12 grid__col-md-6">
<header class="grid__col-xs-12">
<h2 class="page__title">
Next Features
</h2>
<hr class="hr--next">
</header>
@foreach($pageRepository->find(
['type' => 'next'],
['parent' => '/next', 'orderBy' => ['order' => 'asc']]) as $next)
<article class="grid__col-xs-12">
<div class="box box--next">
<h3 class="box__title">
{{ $next->data['title'] }} <span class="badge badge--{{ $next->data['state'] }}">{{ $next->data['state'] }}</span>
<div class="--inner">
<header>
<h2 class="h2 h2--section">
Next Features
</h2>
<hr>
</header>
@foreach($pageRepository->find(
['type' => 'next'],
['parent' => '/next', 'orderBy' => ['order' => 'asc']]) as $next)
<article>
<h3 class="h3">
{{ $next->data['title'] }}
<span class="badge badge--{{ $next->data['state'] }}">
{{ $next->data['state'] }}
</span>
</h3>
<div class="content">
{!! $next->html() !!}
</div>
</div>
</article>
@endforeach
</article>
@endforeach
</div>
</div>
</section>
<div class="grid__col-xs-12 grid__col-md-6">
<div class="--inner">
<header>
<h2 class="h2 h2--section">
Blog
</h2>
<hr>
</header>
@foreach($pageRepository->find(
['type' => 'post'],
['parent' => '/blog', 'orderBy' => ['createdAt' => 'asc']]) as $post)
<article>
<heeader>
<h3 class="h3">
{{ $post->data['title'] }}
</h3>
<time datetime="{{ $post->data['createdAt'] }}">
<svg class="icon icon--date">
<use xlink:href="/assets/svg/icons.svg#calendar" />
</svg>
{{ Carbon\Carbon::parse($post->data['createdAt'])->format('d.m.Y') }}
</time>
</header>
<div class="content">
{!! $post->html() !!}
</div>
</article>
@endforeach
</div>
</div>
</div>
@endsection
......@@ -17,43 +17,46 @@
<![endif]-->
<header class="site-header">
<div class="site-header__inner">
<svg class="icon site-header__icon --float-left">
<use xlink:href="/assets/svg/icons.svg#fuzzy" />
</svg>
<div class="site-header__title h2 --float-left">
Fuzzy CMS
<div class="site-container">
<div class="grid">
<div class="grid__col-xs-12">
<div>
<div class="site-header__title h2 --float-left">
Fuzzy CMS
</div>
@include('FuzzyCms.views.navigation')
</div>
</div>
</div>
@include('FuzzyCms.views.navigation')
</div>
</header>
<div class="site-container">
<div class="hutch">
<div class="hutch__header">
@section('header')
<div class="grid">
<div class="grid__col-xs-12 grid--justify-center">
<header class="site-main__header">
<h1 class="site-main__title">
{{ $page->data['title'] }}
</h1>
</header>
</div>
</div>
<main class="site-main">
@section('header')
<div class="grid">
<div class="grid__col-xs-12">
<header class="site-main__header">
<h1 class="site-main__title">
{{ $page->data['title'] }}
</h1>
</header>
</div>
</div>
@show
<div class="grid">
<div class="grid__col-xs-12">
<div class="site-main__entry">
@show
<div class="grid">
<div class="grid__col-xs-12">
<main class="site-main">
<div class="hutch">
<div class="hutch__content">
@yield('content')
</div>
</div>
</div>
</main>
</main>
</div>
</div>
<footer class="site-footer">
<div class="grid">
<div class="grid__col-xs-12">
......@@ -63,7 +66,9 @@
</div>
</div>
</footer>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript" src="/assets/js/scripts.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment