feat: 💄 redesign blogpost header
This commit is contained in:
Sebin Nyshkim
parent
1fb1591a03
commit
ceb7cdb3d9
7 changed files with 37 additions and 28 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{% macro postmeta(params) %}
|
||||
<ul
|
||||
class="flex flex-wrap items-center gap-4 text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
|
||||
class="flex flex-wrap items-center gap-4 {% if params.center %} justify-center {% else %} justify-start {% endif %} text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
|
||||
role="group"
|
||||
aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<link rel="me" href="https://meow.social/@SebinNyshkim">
|
||||
</head>
|
||||
<body class="h-dvh bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
||||
<header class="sm:px-safe-offset-4 md:px-safe-offset-6">
|
||||
<header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
|
||||
<div class="flex min-h-16 max-w-screen-xl items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto sm:justify-between sm:rounded-xl dark:bg-sky-950">
|
||||
<div class="hidden sm:flex sm:items-center">
|
||||
<img src="/img/sebin.png" alt="" class="m-4 max-w-14 rounded-full border-4 shadow-2xl">
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mb-20 space-y-10 pt-10 *:px-safe-offset-4 sm:mb-32 sm:pt-16 md:mb-40 md:pt-20 md:*:px-safe-offset-6">
|
||||
<main class="mb-20 space-y-10 sm:mb-32 md:mb-40">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,26 +2,28 @@
|
|||
layout: base.njk
|
||||
---
|
||||
|
||||
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
|
||||
<h1 class="text-4xl">{{ title }}</h1>
|
||||
<div class="not-prose space-y-4 text-base">
|
||||
{%- from 'postmeta.macro.njk' import postmeta %}
|
||||
{{ postmeta({ date: page.date, author: author, content: content}) }}
|
||||
{% if tags.length > 0 %}
|
||||
<ul class="flex gap-1" aria-label="Tagged in">
|
||||
{% for tag in tags %}
|
||||
<li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
|
||||
{% lucide "tag", {"size": "20"} %}
|
||||
{{ tag }}
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<article>
|
||||
<header style="background-image: url({{ image.src }})" class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-900 before:bg-opacity-85 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6">
|
||||
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal">
|
||||
<h1 class="text-balance text-center">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="not-prose space-y-6 self-end text-base">
|
||||
{%- from 'postmeta.macro.njk' import postmeta %}
|
||||
{{ postmeta({ date: page.date, author: author, content: content, center: true }) }}
|
||||
{% if tags.length > 0 %}
|
||||
<ul class="flex flex-wrap justify-center gap-1" aria-label="Tagged in">
|
||||
{% for tag in tags %}
|
||||
<li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
|
||||
{% lucide "tag", { "size": "20" } %}
|
||||
{{ tag }}
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if image and image.src != '' %}
|
||||
<img src="{{ image.src }}" alt="{{ image.alt }}">
|
||||
{% endif %}
|
||||
|
||||
{{ content | safe }}
|
||||
<section class="px-safe-offset-4 md:px-safe-offset-6 prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
layout: base.njk
|
||||
---
|
||||
|
||||
<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
|
||||
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl sm:pt-52 md:px-safe-offset-6">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: base.njk
|
||||
---
|
||||
|
||||
<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
|
||||
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl sm:pt-52 md:px-safe-offset-6">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<p>Everything I have written, from newest to oldest.</p>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ pagination:
|
|||
---
|
||||
|
||||
{% for post in blogposts %}
|
||||
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
|
||||
<article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl md:px-safe-offset-6">
|
||||
<h1>{{ post.data.title }}</h1>
|
||||
<div class="not-prose">
|
||||
{%- from 'postmeta.macro.njk' import postmeta %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@
|
|||
export default {
|
||||
content: ['./src/**/*.{html,md,njk,ejs,pug}'],
|
||||
theme: {
|
||||
extend: {}
|
||||
extend: {
|
||||
gridTemplateRows: {
|
||||
'article-header': '1fr auto 0'
|
||||
},
|
||||
height: {
|
||||
'128': '32rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")]
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue