Responsive grid layout

author: David T. Sadler <davidtsadler@googlemail.com> 2020-03-07 20:50:44 +0000
committer: David T. Sadler <davidtsadler@googlemail.com> 2020-03-07 20:50:44 +0000
commit: 9d7bf4de4d22933cabe28aef6a3cf0d7414f6be2 (patch)
tree: ce9fe3097036899afbec2d97236a50082699ba64
parent: 9240b4b969758bf2e73d8e4f6bc3fc92e611f32a (diff)
8 files changed, 34 insertions, 31 deletions
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')
-    <h1 class="p-4 text-green-600 text-4xl font-bold">{{ $page->description }}</h1>
+    <h1>{{ $page->description }}</h1>
     <ol>
         @foreach ($page->posts($posts) as $post)
             @include('_partials.postStub')
         @endforeach
     </ol>
 @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 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
     </head>
-  <body class="mb-8 lg:px-16 xl:px-32">
+  <body>
     <div id="main-sidebar-container">
-        <article>@yield('article')</article>
-        <aside class="px-4">
-            <p class="py-4 text-2xl">
-                <a class="block" href="/"><svg class="inline-block fill-current w-5 h-5"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 20H3V10H0L10 0l10 10h-3v10h-5v-6H8v6z"/></svg> Home</a>
-            </p>
+        <article class="p-4">@yield('article')</article>
+        <aside class="p-4 lg:fixed">
+            <a href="/">Home</a>
             @foreach ($page->allCategories($posts) as $category)
-                <a class="rounded p-1 {{Str::slug($category) }}" href="/categories/{{ Str::slug($category) }}">{{ $category }}</a>
+                <a href="/categories/{{ Str::slug($category) }}">{{ $category }}</a>
             @endforeach
         </aside>
     </div>
   </body>
 </html>
+
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')
     <header>
-        <h1 class="text-green-300 text-4xl font-bold">{{$page->title }}</h1>
-        <h2 class="text-2xl text-gray-300">{{ $page->description }}</h2>
-        <time class="" datetime="{{ $page->getDate()->format('Y-m-d') }}">
+        <h1>{{$page->title }}</h1>
+        <h2>{{ $page->description }}</h2>
+        <time datetime="{{ $page->getDate()->format('Y-m-d') }}">
             {{ $page->getDate()->format('M d, Y') }}
         </time> 
     </header>
     @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 @@
 <?php use \Illuminate\Support\Str; ?>
-<li class="sm:flex sm:flex-row sm:justify-between hover:bg-gray-800 p-4 pb-8">
-    <a class="text-green-300" title="Go to post" href="{{ $post->getUrl() }}">
-        <h4 class="text-3xl font-bold">{{$post->title }}</h4>
-        <p class="text-2xl text-gray-300">{{ $post->description }}</p>
+<li>
+    <a title="Go to post" href="{{ $post->getUrl() }}">
+        <h4>{{$post->title }}</h4>
+        <p>{{ $post->description }}</p>
     </a>
-    <div class="mt-8 sm:mt-0 text-right flex flex-row sm:flex-col">
-        <time class="inline-block p-2 order-2 sm:order-1 ml-2" datetime="{{ $post->getDate()->format('Y-m-d') }}">
+    <div>
+        <time datetime="{{ $post->getDate()->format('Y-m-d') }}">
             {{ $post->getDate()->format('M d, Y') }}
         </time> 
-        <div class="order-1 sm:order-2">
+        <div>
             @foreach ($post->categories as $category)
-                <a class="inline-block rounded py-2 px-4 {{Str::slug($category) }}" href="/categories/{{ Str::slug($category) }}">{{ $category }}</a>
+                <a href="/categories/{{ Str::slug($category) }}">{{ $category }}</a>
             @endforeach
         </div>
     </div>
 </li> 
+
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
     </ol>
-    <nav class="mt-3 px-4 flex justify-between text-gray-400 text-2xl">
+    <nav>
         @if ($pagination->previous)
-            <a href="{{ $pagination->previous }}"><svg class="inline-block fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 13h8V7h-8V2l-8 8 8 8v-5z"/></svg> See more recent posts</a>
+            <a href="{{ $pagination->previous }}">See more recent posts</a>
         @endif
         @if ($pagination->next)
-            <a href="{{ $pagination->next }}">See older posts <svg class="inline-block fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 7H2v6h8v5l8-8-8-8v5z"/></svg></a>
+            <a href="{{ $pagination->next }}">See older posts</a>
         @endif
     </nav>
 @endsection
+
author	David T. Sadler <davidtsadler@googlemail.com>	2020-03-07 20:50:44 +0000
committer	David T. Sadler <davidtsadler@googlemail.com>	2020-03-07 20:50:44 +0000
commit	9d7bf4de4d22933cabe28aef6a3cf0d7414f6be2 (patch)
tree	ce9fe3097036899afbec2d97236a50082699ba64
parent	9240b4b969758bf2e73d8e4f6bc3fc92e611f32a (diff)