summaryrefslogtreecommitdiff
path: root/source
diff options
context:
space:
mode:
authorDavid T. Sadler <davidtsadler@googlemail.com>2020-03-07 20:50:44 +0000
committerDavid T. Sadler <davidtsadler@googlemail.com>2020-03-07 20:50:44 +0000
commit9d7bf4de4d22933cabe28aef6a3cf0d7414f6be2 (patch)
treece9fe3097036899afbec2d97236a50082699ba64 /source
parent9240b4b969758bf2e73d8e4f6bc3fc92e611f32a (diff)
Responsive grid layout
Diffstat (limited to 'source')
-rw-r--r--source/_assets/sass/_blog.scss8
-rw-r--r--source/_layouts/category.blade.php3
-rw-r--r--source/_layouts/master.blade.php13
-rw-r--r--source/_layouts/post.blade.php7
-rw-r--r--source/_partials/postStub.blade.php17
-rw-r--r--source/assets/build/css/main.css8
-rw-r--r--source/assets/build/mix-manifest.json2
-rw-r--r--source/index.blade.php7
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
+