thohlt/thiloho.github.io
1
0
Fork 0
mirror of https://github.com/thiloho/thiloho.github.io.git synced 2025-11-22 10:21:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add prettier-plugin-css and update header border

Browse Source
This commit is contained in:
thiloho
2025-04-27 01:00:05 +02:00
parent 04b1282f12
commit 59f3226585
8 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.astro
View File

@@ -1,5 +1,5 @@
<footer
class="flex flex-col items-center p-4 bg-neutral-100 dark:bg-neutral-900 prose prose-neutral dark:prose-invert max-w-none prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline"
class="prose prose-neutral dark:prose-invert prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline flex max-w-none flex-col items-center border-t border-dashed border-neutral-300 bg-white p-4 dark:border-neutral-600 dark:bg-neutral-800"
>
<p class="mb-2">&copy; 2025 Thilo Hohlt</p>
<div class="flex gap-4">

4
src/components/Header.astro
View File

@@ -13,7 +13,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
<header class="bg-white dark:bg-neutral-800">
<div
class="prose prose-neutral dark:prose-invert mx-auto px-4 py-8 border-b border-neutral-200 dark:border-neutral-700 prose-h1:font-bold"
class="prose prose-neutral dark:prose-invert prose-h1:font-bold relative mx-auto px-4 py-8 before:absolute before:start-4 before:end-4 before:bottom-0 before:border-b before:border-neutral-300 before:content-[''] dark:before:border-neutral-600"
>
{
pubDate ? (
@@ -27,7 +27,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
</p>
<a
href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`}
class="text-blue-800 dark:text-blue-300 inline-flex items-center gap-1 hover:no-underline"
class="inline-flex items-center gap-1 text-blue-800 hover:no-underline dark:text-blue-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"

12
src/components/Nav.astro
View File

@@ -4,9 +4,9 @@ import Logo from "../img/TH.svg";
const routes = ["blog"];
---
<nav class="max-w-none bg-neutral-100 dark:bg-neutral-900 sticky top-0 z-10">
<nav class="sticky top-0 z-10 max-w-none bg-neutral-100 dark:bg-neutral-900">
<div
class="text-neutral-700 dark:text-neutral-300 flex items-center justify-between max-w-screen-lg mx-auto ps-4 pe-2"
class="mx-auto flex max-w-screen-lg items-center justify-between ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
>
<a href="/" title="Home">
<Logo width={42} height={42} />
@@ -15,7 +15,7 @@ const routes = ["blog"];
{
routes.map((route) => (
<a
class="inline-block p-2 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
class="inline-block border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
href={`/${route}`}
>
{route
@@ -26,7 +26,7 @@ const routes = ["blog"];
))
}
<button
class="theme-toggle p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
class="theme-toggle cursor-pointer border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
title="Toggle dark mode"
>
<!-- Moon -->
@@ -47,7 +47,7 @@ const routes = ["blog"];
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-5 hidden dark:block"
class="hidden size-5 dark:block"
>
<path
d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"
@@ -55,7 +55,7 @@ const routes = ["blog"];
</svg>
</button>
<a
class="inline-grid place-content-center p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
class="inline-grid cursor-pointer place-content-center border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
title="RSS feed"
href="/rss.xml"
>

2
src/layouts/PageLayout.astro
View File

@@ -17,7 +17,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
<html lang="en" class="light">
<Head {title} {description} />
<body class="min-h-screen flex flex-col">
<body class="flex min-h-screen flex-col">
<Nav />
<Header {title} {pubDate} {modDate} {slug} />
<main class="flex-1 bg-white dark:bg-neutral-800">

6
src/pages/blog/[slug].astro
View File

@@ -30,7 +30,7 @@ const { Content, headings } = await render(article);
<details class="toc sticky top-0 z-20">
<summary
title="Table of contents"
class="flex mx-auto w-fit cursor-pointer list-none px-2 py-2.5 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
class="mx-auto flex w-fit cursor-pointer list-none border-b-2 border-transparent px-2 py-2.5 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@ const { Content, headings } = await render(article);
</svg>
</summary>
<div
class="not-prose border border-neutral-400 dark:border-neutral-600 bg-white dark:bg-neutral-800 p-2 max-h-[calc(100vh-4rem)] overflow-y-scroll"
class="not-prose max-h-[calc(100vh-4rem)] overflow-y-scroll border border-neutral-300 bg-white p-2 dark:border-neutral-600 dark:bg-neutral-800"
>
<p class="text-center">
<strong class="text-sm">Table of Contents</strong>
@@ -56,7 +56,7 @@ const { Content, headings } = await render(article);
.map((heading) => (
<li>
<a
class="text-center text-blue-800 dark:text-blue-300 block py-1 px-2 hover:underline"
class="block px-2 py-1 text-center text-blue-800 hover:underline dark:text-blue-300"
href={`#${heading.slug}`}
aria-labelledby={`Section: ${heading.slug}`}
>