SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ upgrade to tailwind v4

Browse source
This commit is contained in:
Sebin Nyshkim 2025-01-30 18:27:37 +01:00
parent 6bacdd4a1c
commit 4a444614bc
8 changed files with 30 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

6
package.json
View file

@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "eleventy --serve & npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --watch",
"start": "eleventy --serve & npx @tailwindcss/cli -i ./src/css/style.css -o ./public/css/style.css --watch",
"build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./src/css/style.css -o ./public/css/style.css --minify",
"prebuild": "rm -rf ./public"
},
@ -26,7 +26,7 @@
"@grimlink/eleventy-plugin-lucide-icons": "^2.1.1",
"@myxotod/eleventy-plugin-readingtime": "^2.0.0",
"@quasibit/eleventy-plugin-sitemap": "^2.2.0",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/cli": "^4.0.0",
"eleventy-plugin-embed-everything": "^1.19.0",
"eleventy-plugin-icons": "^4.5.1",
"eleventy-plugin-metagen": "^1.8.3",
@ -40,7 +40,7 @@
"markdown-it-image-figures": "^2.1.1",
"markdown-it-obsidian-callouts": "^0.3.1",
"simple-icons": "^13.20.0",
"tailwindcss": "^3.4.16",
"tailwindcss": "^4.0.0",
"tailwindcss-safe-area": "^0.6.0"
}
}

20
src/css/style.css
View file

@ -1,8 +1,16 @@
@import url(modules/callouts.css);
@import 'tailwindcss';
@import './modules/callouts.css' layer(base);
@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin '@tailwindcss/typography';
@plugin 'tailwindcss-safe-area';
@theme {
--grid-template-rows-article-header: 1fr auto 0;
--min-height-128: 32rem;
--min-height-160: 40rem;
--min-height-192: 48rem;
}
:root {
--font-copy: 'Encode Sans', sans-serif;
@ -64,12 +72,12 @@ summary {
dl {
dt {
@apply !font-normal !text-sky-600 dark:!text-sky-300;
@apply font-normal! text-sky-600! dark:text-sky-300!;
font-family: var(--font-heading);
}
code {
@apply !text-sky-800 dark:!text-sky-500;
@apply text-sky-800! dark:text-sky-500!;
}
}

6
src/layouts/base.njk
View file

@ -33,7 +33,7 @@
</head>
<body class="bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
<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="flex min-h-16 max-w-(--breakpoint-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-12 rounded-full border-4 shadow-2xl lg:max-w-14 lg:m-5">
<h1 class="text-2xl text-white lg:text-3xl">Sebin's Blog</h1>
@ -44,7 +44,7 @@
eleventyNavigation |
eleventyNavigationToHtml({
listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
anchorClass: "rounded-xl px-4 py-2 capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg sm:text-lg md:m-0 md:max-h-12 lg:text-xl hover:dark:bg-sky-800",
anchorClass: "rounded-xl px-4 py-2 capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg sm:text-lg md:m-0 md:max-h-12 lg:text-xl dark:hover:bg-sky-800",
activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
activeKey: eleventyNavigation.key or page.url.split('/')[1]
}) |
@ -59,7 +59,7 @@
</main>
<footer class="pb-16">
<div class="mx-auto max-w-screen-xl divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
<div class="mx-auto max-w-(--breakpoint-xl) divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
<div class="flex flex-wrap gap-6 md:flex-nowrap md:gap-0"></div>
<div class="mt-16 flex flex-wrap justify-between gap-4 pt-10 sm:flex-nowrap">
<div class="basis-full space-y-4">

4
src/layouts/blogpost.njk
View file

@ -10,7 +10,7 @@ layout: base.njk
{% if image and image.credit != '' %}
data-credit="{{ image.credit }}"
{% endif %}
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-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 after:absolute after:bottom-0 after:right-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 after:md:text-sm lg:mb-12 lg:min-h-160 lg:pb-12 lg:px-safe-offset-12 2xl:min-h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
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-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 after:absolute after:bottom-0 after:right-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 md:after:text-sm lg:mb-12 lg:min-h-160 lg:pb-12 lg:px-safe-offset-12 2xl:min-h-192 dark:before:bg-slate-900 dark:before:bg-opacity-65"
>
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1>
@ -31,7 +31,7 @@ layout: base.njk
</div>
</header>
<section class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-blockquote:relative prose-blockquote:border-none prose-blockquote:px-6 prose-blockquote:py-10 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-inherit before:prose-blockquote:absolute before:prose-blockquote:left-0 before:prose-blockquote:right-0 before:prose-blockquote:top-8 before:prose-blockquote:-z-10 before:prose-blockquote:text-center before:prose-blockquote:text-8xl before:prose-blockquote:leading-[0] before:prose-blockquote:text-sky-600 before:prose-blockquote:content-[open-quote] after:prose-blockquote:absolute after:prose-blockquote:-bottom-5 after:prose-blockquote:left-0 after:prose-blockquote:right-0 after:prose-blockquote:-z-10 after:prose-blockquote:text-center after:prose-blockquote:text-8xl after:prose-blockquote:leading-[0] after:prose-blockquote:text-sky-600 after:prose-blockquote:content-[close-quote] before:prose-p:prose-blockquote:content-none after:prose-p:prose-blockquote:content-none first:prose-p:prose-blockquote:mt-0 last:prose-p:prose-blockquote:mb-0 prose-figcaption:text-center prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl md:px-safe-offset-6 md:prose-blockquote:px-16 md:prose-blockquote:py-3 md:prose-blockquote:text-left md:before:prose-blockquote:top-0 md:before:prose-blockquote:text-left md:before:prose-blockquote:text-9xl md:after:prose-blockquote:-bottom-16 md:after:prose-blockquote:text-right md:after:prose-blockquote:text-9xl">
<section class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-blockquote:relative prose-blockquote:border-none prose-blockquote:px-6 prose-blockquote:py-10 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-inherit prose-blockquote:before:absolute prose-blockquote:before:left-0 prose-blockquote:before:right-0 prose-blockquote:before:top-8 prose-blockquote:before:-z-10 prose-blockquote:before:text-center prose-blockquote:before:text-8xl prose-blockquote:before:leading-0 prose-blockquote:before:text-sky-600 prose-blockquote:before:content-[open-quote] prose-blockquote:after:absolute prose-blockquote:after:-bottom-5 prose-blockquote:after:left-0 prose-blockquote:after:right-0 prose-blockquote:after:-z-10 prose-blockquote:after:text-center prose-blockquote:after:text-8xl prose-blockquote:after:leading-0 prose-blockquote:after:text-sky-600 prose-blockquote:after:content-[close-quote] prose-blockquote:prose-p:before:content-none prose-blockquote:prose-p:after:content-none prose-blockquote:prose-p:first:mt-0 prose-blockquote:prose-p:last:mb-0 prose-figcaption:text-center prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl md:px-safe-offset-6 md:prose-blockquote:px-16 md:prose-blockquote:py-3 md:prose-blockquote:text-left md:prose-blockquote:before:top-0 md:prose-blockquote:before:text-left md:prose-blockquote:before:text-9xl md:prose-blockquote:after:-bottom-16 md:prose-blockquote:after:text-right md:prose-blockquote:after:text-9xl">
{{ content | safe }}
</section>
</article>

2
src/layouts/page.njk
View file

@ -2,6 +2,6 @@
layout: base.njk
---
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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">
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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>

12
src/layouts/postlist.njk
View file

@ -2,7 +2,7 @@
layout: base.njk
---
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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">
<section class="prose prose-slate mx-auto pt-28 px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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>
@ -15,21 +15,21 @@ layout: base.njk
<ol class="flex justify-center gap-2">
<li>
{% if page.url != pagination.href.first %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700" href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-first" %}</span>
{% endif %}
</li>
<li>
{% if pagination.href.previous %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700" href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-left" %}</span>
{% endif %}
</li>
{%- for pageEntry in pagination.pages %}
<li>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 aria-[current]:bg-sky-600 aria-[current]:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700 aria-[current]:dark:bg-slate-700"
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 aria-[current]:bg-sky-600 aria-[current]:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:aria-[current]:bg-slate-700"
href="{{ pagination.hrefs[ loop.index0 ] }}"
{% if page.url == pagination.hrefs[ loop.index0 ] %}
aria-current="page"
@ -41,14 +41,14 @@ layout: base.njk
{%- endfor %}
<li>
{% if pagination.href.next %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700" href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-right" %}</span>
{% endif %}
</li>
<li>
{% if page.url != pagination.href.last %}
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700" href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
{% else %}
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700" aria-disabled="true">{% lucide "chevron-last" %}</span>
{% endif %}

2
src/posts.njk
View file

@ -12,7 +12,7 @@ pagination:
---
{% for post in blogposts %}
<article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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">
<article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl 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 %}

17
tailwind.config.js
View file

@ -1,17 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,md,njk,ejs,pug}'],
theme: {
extend: {
gridTemplateRows: {
'article-header': '1fr auto 0'
},
minHeight: {
'128': '32rem',
'160': '40rem',
'192': '48rem'
}
}
},
plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")]
};