From 9d7bf4de4d22933cabe28aef6a3cf0d7414f6be2 Mon Sep 17 00:00:00 2001 From: "David T. Sadler" Date: Sat, 7 Mar 2020 20:50:44 +0000 Subject: Responsive grid layout --- source/_assets/sass/_blog.scss | 8 ++++---- source/_layouts/category.blade.php | 3 ++- source/_layouts/master.blade.php | 13 ++++++------- source/_layouts/post.blade.php | 7 ++++--- source/_partials/postStub.blade.php | 17 +++++++++-------- source/assets/build/css/main.css | 8 ++++---- source/assets/build/mix-manifest.json | 2 +- source/index.blade.php | 7 ++++--- 8 files changed, 34 insertions(+), 31 deletions(-) (limited to 'source') diff --git a/source/_assets/sass/_blog.scss b/source/_assets/sass/_blog.scss index e141988..d0ae886 100644 --- a/source/_assets/sass/_blog.scss +++ b/source/_assets/sass/_blog.scss @@ -1,16 +1,16 @@ body { @apply bg-gray-900; - @apply text-gray-200; + @apply text-white; } #main-sidebar-container { display: grid; grid-template-columns: auto; grid-template-areas: "main" "sidebar"; - grid-row-gap: 1rem; } #main-sidebar-container article { + @apply bg-gray-800; grid-area: main; } @@ -20,9 +20,9 @@ body { @media (min-width: 1024px) { #main-sidebar-container { - grid-template-columns: 256px auto; + grid-template-columns: 20rem auto; grid-template-areas: "sidebar main"; - grid-column-gap: 1rem; + min-height: 100vh; } } diff --git a/source/_layouts/category.blade.php b/source/_layouts/category.blade.php index 27bc9dd..90b64de 100644 --- a/source/_layouts/category.blade.php +++ b/source/_layouts/category.blade.php @@ -1,10 +1,11 @@ @extends('_layouts.master') @section('article') -

{{ $page->description }}

+

{{ $page->description }}

    @foreach ($page->posts($posts) as $post) @include('_partials.postStub') @endforeach
@endsection + diff --git a/source/_layouts/master.blade.php b/source/_layouts/master.blade.php index 7677d44..0a445e7 100644 --- a/source/_layouts/master.blade.php +++ b/source/_layouts/master.blade.php @@ -6,17 +6,16 @@ - +
-
@yield('article')
-
+ diff --git a/source/_layouts/post.blade.php b/source/_layouts/post.blade.php index 6d8fa30..0c82477 100644 --- a/source/_layouts/post.blade.php +++ b/source/_layouts/post.blade.php @@ -2,11 +2,12 @@ @section('article')
-

{{$page->title }}

-

{{ $page->description }}

-
@yield('content') @endsection + diff --git a/source/_partials/postStub.blade.php b/source/_partials/postStub.blade.php index 14bb79f..cee9334 100644 --- a/source/_partials/postStub.blade.php +++ b/source/_partials/postStub.blade.php @@ -1,17 +1,18 @@ -
  • - -

    {{$post->title }}

    -

    {{ $post->description }}

    +
  • + +

    {{$post->title }}

    +

    {{ $post->description }}

     -
    -
    • + diff --git a/source/assets/build/css/main.css b/source/assets/build/css/main.css index f9ebb64..8e12074 100644 --- a/source/assets/build/css/main.css +++ b/source/assets/build/css/main.css @@ -625,17 +625,17 @@ video { body { background-color: #1a202c; - color: #edf2f7; + color: #fff; } #main-sidebar-container { display: grid; grid-template-columns: auto; grid-template-areas: "main" "sidebar"; - grid-row-gap: 1rem; } #main-sidebar-container article { + background-color: #2d3748; grid-area: main; } @@ -645,9 +645,9 @@ body { @media (min-width: 1024px) { #main-sidebar-container { - grid-template-columns: 256px auto; + grid-template-columns: 20rem auto; grid-template-areas: "sidebar main"; - grid-column-gap: 1rem; + min-height: 100vh; } } diff --git a/source/assets/build/mix-manifest.json b/source/assets/build/mix-manifest.json index 7be3d6f..288f2c2 100644 --- a/source/assets/build/mix-manifest.json +++ b/source/assets/build/mix-manifest.json @@ -1,4 +1,4 @@ { "/js/main.js": "/js/main.js?id=d2fc77312aa2cec93616", - "/css/main.css": "/css/main.css?id=acf53685d7a2f44109aa" + "/css/main.css": "/css/main.css?id=d168de1df534f00c8feb" } diff --git a/source/index.blade.php b/source/index.blade.php index 06bab2e..e9b24e1 100644 --- a/source/index.blade.php +++ b/source/index.blade.php @@ -10,12 +10,13 @@ pagination: @include('_partials.postStub') @endforeach -