Madmin
/
its-personal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

blog layout improvements, css

This commit is contained in:
matthieu42morin 2023-11-24 02:07:41 +01:00
parent a60e780e3f
commit f934957049
4 changed files with 68 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/blog/CategoryFilter.svelte
View File

@ -22,10 +22,6 @@
</script>
<section class="flex justify-center flex-col items-center {className}">
<header class="flex flex-col justify-center items-center">
<h1 class="h1">Blog</h1>
<span />
</header>
<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
<ul class="flex flex-wrap justify-center gap-2">
{#each options as option}

39
src/lib/components/blog/PostLayout.svelte
View File

@ -11,26 +11,15 @@
export let tags: string[] = [];
</script>
<article class="text-token">
<div class="flex justify-center mt-4 mb-8">
<div class="w-full lg:w-[50rem] leading-[177.7%]">
<header>
<img
src="/images/{imagesDirectoryName}/{slug}/{image}"
alt={`${title}`}
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-tr-[1.3rem]"
/>
</header>
<div class="p-4 space-y-4">
<h3 class="h3" data-toc-ignore>{title}</h3>
<div class="prose max-w-none text-base">
<slot />
</div>
</div>
</div>
</div>
<hr class="opacity-50" />
<footer class="p-4 flex justify-start items-center space-x-4">
<article class="flex justify-center mt-4 mb-8">
<div class=" w-full lg:w-[50rem] leading-[177.7%]">
<header>
<img
src="/images/{imagesDirectoryName}/{slug}/{image}"
alt={`${title}`}
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
/>
</header>
<div class="flex-auto flex justify-between items-center">
{#if tags && tags.length > 0}
<div class="flex mb-2 items-center gap-2">
@ -46,7 +35,15 @@
{/if}
<small>On {formatDate(date)}</small>
</div>
</footer>
<div class="space-y-4 text-token">
<h2 class="h2" data-toc-ignore>{title}</h2>
<div class="prose max-w-none text-token">
<slot />
</div>
</div>
</div>
<hr class="opacity-50" />
<footer class="p-4 flex justify-start items-center space-x-4" />
</article>
<style lang="postcss">

88
src/lib/components/blog/PostPreview.svelte
View File

@ -27,37 +27,23 @@
});
</script>
<div class="grid auto-rows-auto w-full h-full text-token">
<a
{href}
{target}
data-sveltekit-preload-data="hover"
class="card bg-gradient-to-br variant-gradient-primary-secondary card-hover overflow-hidden flex flex-col space-y-4"
data-analytics={`{"context":"grid","variant":"preview"}`}
>
<!-- Detailed -->
<!-- <a
class="card "
href="/blog/{post.slug}"
> -->
<a
{href}
{target}
data-sveltekit-preload-data="hover"
class="card bg-gradient-to-br variant-gradient-primary-tertiary card-hover overflow-hidden flex flex-col space-y-4"
data-analytics={`{"context":"grid","variant":"preview"}`}
>
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
<header>
<img
src="/images/blog/{post.slug}/{post.image}"
class="bg-black/50 w-full aspect-[3/2]"
class="bg-black/200 w-full aspect-[3/2]"
alt="Post"
/>
</header>
<section class="p-4 space-y-4">
<h6 class="text-2" data-toc-ignore>
<div class="items-center flex gap-2">
{#if post.tags}
{#each post.tags as tag}
<span class="chip variant-ghost-tertiary">{tag}</span>
{/each}
{/if}
</div>
</h6>
<h3 class="h3" data-toc-ignore>{post.title}</h3>
<h2 class="h2" data-toc-ignore>{post.title}</h2>
<article>
<p>
<!-- cspell:disable -->
@ -66,33 +52,35 @@
</p>
</article>
</section>
<hr class="opacity-50" />
<footer class="p-4 flex justify-between">
<div class="flex flex-wrap gap-2">
{#if post.tags && post.tags.length > 0}
<small>tags: </small>
{#each post.tags as tag}
<a
data-sveltekit-preload-data="hover"
href="/blog?{new URLSearchParams({ tag }).toString()}"
>
<h6 class="chip variant-ghost-surface">{tag}</h6>
</a>
{/each}
{/if}
</div>
<div class="mt-auto">
<small>
{#if post.date}
<span class="text-sm ml-4">
{displayDate}
</span>
<section>
<hr class="opacity-30 bg-tertiary-500" />
<footer class="p-4 flex justify-between">
<div class="flex flex-wrap gap-2">
{#if post.tags && post.tags.length > 0}
<small>tags: </small>
{#each post.tags as tag}
<a
data-sveltekit-preload-data="hover"
href="/blog?{new URLSearchParams({ tag }).toString()}"
>
<h6 class="chip variant-filled-tertiary text-token">{tag}</h6>
</a>
{/each}
{/if}
</small>
</div>
</footer>
</a>
</div>
</div>
<div class="mt-auto">
<small>
{#if post.date}
<span class="text-sm ml-4">
{displayDate}
</span>
{/if}
</small>
</div>
</footer>
</section>
</div>
</a>
<style lang="postcss">
</style>

15
src/routes/blog/+page.svelte
View File

@ -1,4 +1,5 @@
<!-- <script lang="ts">
import CategoryFilter from './../../lib/components/blog/CategoryFilter.svelte';
import { formatDate } from '$src/content/utils.js';
import { BlogPost } from '$lib/components/blog';
import * as config from '$lib/config';
@ -44,6 +45,7 @@
<script lang="ts">
import PostPreview from '$lib/components/blog/PostPreview.svelte';
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
import type { PageData } from './$types';
import type { BlogTag } from '$lib/types/blog';
import { page } from '$app/stores';
@ -66,8 +68,12 @@
const displayAmount = 12;
</script>
<div class="blog-layout">
<div>
<div>
<div class="space-y-8">
<header class="flex flex-col justify-center items-center">
<h1 class="h1 m-4">Blog</h1>
<CategoryFilter class="mb-2 md:mb-4" bind:selected={filter} />
</header>
<div
class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
>
@ -81,7 +87,7 @@
{#if posts.slice(displayAmount).length > 0}
<div>
<h2 class="mb-small text-center">Previous posts</h2>
<h2 class="mb-4 text-center">Previous posts</h2>
<div
class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
>
@ -94,3 +100,6 @@
</div>
{/if}
</div>
<style lang="postcss">
</style>