blog layout improvements, css
This commit is contained in:
parent
a60e780e3f
commit
f934957049
|
@ -22,10 +22,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="flex justify-center flex-col items-center {className}">
|
<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>
|
<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
|
||||||
<ul class="flex flex-wrap justify-center gap-2">
|
<ul class="flex flex-wrap justify-center gap-2">
|
||||||
{#each options as option}
|
{#each options as option}
|
||||||
|
|
|
@ -11,26 +11,15 @@
|
||||||
export let tags: string[] = [];
|
export let tags: string[] = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article class="text-token">
|
<article class="flex justify-center mt-4 mb-8">
|
||||||
<div class="flex justify-center mt-4 mb-8">
|
<div class=" w-full lg:w-[50rem] leading-[177.7%]">
|
||||||
<div class="w-full lg:w-[50rem] leading-[177.7%]">
|
<header>
|
||||||
<header>
|
<img
|
||||||
<img
|
src="/images/{imagesDirectoryName}/{slug}/{image}"
|
||||||
src="/images/{imagesDirectoryName}/{slug}/{image}"
|
alt={`${title}`}
|
||||||
alt={`${title}`}
|
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
|
||||||
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-tr-[1.3rem]"
|
/>
|
||||||
/>
|
</header>
|
||||||
</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">
|
|
||||||
<div class="flex-auto flex justify-between items-center">
|
<div class="flex-auto flex justify-between items-center">
|
||||||
{#if tags && tags.length > 0}
|
{#if tags && tags.length > 0}
|
||||||
<div class="flex mb-2 items-center gap-2">
|
<div class="flex mb-2 items-center gap-2">
|
||||||
|
@ -46,7 +35,15 @@
|
||||||
{/if}
|
{/if}
|
||||||
<small>On {formatDate(date)}</small>
|
<small>On {formatDate(date)}</small>
|
||||||
</div>
|
</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>
|
</article>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
|
|
@ -27,37 +27,23 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grid auto-rows-auto w-full h-full text-token">
|
<a
|
||||||
<a
|
{href}
|
||||||
{href}
|
{target}
|
||||||
{target}
|
data-sveltekit-preload-data="hover"
|
||||||
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"
|
||||||
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"}`}
|
||||||
data-analytics={`{"context":"grid","variant":"preview"}`}
|
>
|
||||||
>
|
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
|
||||||
<!-- Detailed -->
|
|
||||||
<!-- <a
|
|
||||||
class="card "
|
|
||||||
href="/blog/{post.slug}"
|
|
||||||
> -->
|
|
||||||
<header>
|
<header>
|
||||||
<img
|
<img
|
||||||
src="/images/blog/{post.slug}/{post.image}"
|
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"
|
alt="Post"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<section class="p-4 space-y-4">
|
<section class="p-4 space-y-4">
|
||||||
<h6 class="text-2" data-toc-ignore>
|
<h2 class="h2" data-toc-ignore>{post.title}</h2>
|
||||||
<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>
|
|
||||||
<article>
|
<article>
|
||||||
<p>
|
<p>
|
||||||
<!-- cspell:disable -->
|
<!-- cspell:disable -->
|
||||||
|
@ -66,33 +52,35 @@
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<hr class="opacity-50" />
|
<section>
|
||||||
<footer class="p-4 flex justify-between">
|
<hr class="opacity-30 bg-tertiary-500" />
|
||||||
<div class="flex flex-wrap gap-2">
|
<footer class="p-4 flex justify-between">
|
||||||
{#if post.tags && post.tags.length > 0}
|
<div class="flex flex-wrap gap-2">
|
||||||
<small>tags: </small>
|
{#if post.tags && post.tags.length > 0}
|
||||||
{#each post.tags as tag}
|
<small>tags: </small>
|
||||||
<a
|
{#each post.tags as tag}
|
||||||
data-sveltekit-preload-data="hover"
|
<a
|
||||||
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
data-sveltekit-preload-data="hover"
|
||||||
>
|
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
||||||
<h6 class="chip variant-ghost-surface">{tag}</h6>
|
>
|
||||||
</a>
|
<h6 class="chip variant-filled-tertiary text-token">{tag}</h6>
|
||||||
{/each}
|
</a>
|
||||||
{/if}
|
{/each}
|
||||||
</div>
|
|
||||||
<div class="mt-auto">
|
|
||||||
<small>
|
|
||||||
{#if post.date}
|
|
||||||
<span class="text-sm ml-4">
|
|
||||||
{displayDate}
|
|
||||||
</span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</small>
|
</div>
|
||||||
</div>
|
<div class="mt-auto">
|
||||||
</footer>
|
<small>
|
||||||
</a>
|
{#if post.date}
|
||||||
</div>
|
<span class="text-sm ml-4">
|
||||||
|
{displayDate}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<!-- <script lang="ts">
|
<!-- <script lang="ts">
|
||||||
|
import CategoryFilter from './../../lib/components/blog/CategoryFilter.svelte';
|
||||||
import { formatDate } from '$src/content/utils.js';
|
import { formatDate } from '$src/content/utils.js';
|
||||||
import { BlogPost } from '$lib/components/blog';
|
import { BlogPost } from '$lib/components/blog';
|
||||||
import * as config from '$lib/config';
|
import * as config from '$lib/config';
|
||||||
|
@ -44,6 +45,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PostPreview from '$lib/components/blog/PostPreview.svelte';
|
import PostPreview from '$lib/components/blog/PostPreview.svelte';
|
||||||
|
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
import type { BlogTag } from '$lib/types/blog';
|
import type { BlogTag } from '$lib/types/blog';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
@ -66,8 +68,12 @@
|
||||||
const displayAmount = 12;
|
const displayAmount = 12;
|
||||||
</script>
|
</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
|
<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"
|
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}
|
{#if posts.slice(displayAmount).length > 0}
|
||||||
<div>
|
<div>
|
||||||
<h2 class="mb-small text-center">Previous posts</h2>
|
<h2 class="mb-4 text-center">Previous posts</h2>
|
||||||
<div
|
<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"
|
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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue