Add Catppuccin styling

This commit is contained in:
SkyfallWasTaken 2024-07-06 12:19:13 +01:00
parent e696e09eb7
commit 0d2613ef22
4 changed files with 12 additions and 8 deletions

View file

@ -2,8 +2,8 @@
const today = new Date(); const today = new Date();
--- ---
<footer> <footer class="bg-crust text-text">
&copy; {today.getFullYear()} Your name here. All rights reserved. &copy; {today.getFullYear()} Skyfall. All rights reserved.
<div class="social-links"> <div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank"> <a href="https://m.webtoo.ls/@astro" target="_blank">
<span class="sr-only">Follow Astro on Mastodon</span> <span class="sr-only">Follow Astro on Mastodon</span>

View file

@ -4,14 +4,14 @@ import { SITE_TITLE } from '../consts';
--- ---
<header class="w-full"> <header class="w-full">
<nav class="px-3 py-2 flex items-center gap-2 w-full border-b-[2px] shadow-sm"> <nav class="px-3 py-2 flex items-center gap-2 w-full border-b-[2px] border-surface0 shadow-sm bg-crust text-text">
<h2 class="font-semibold mr-3"><a href="/">{SITE_TITLE}</a></h2> <h2 class="font-semibold mx-3"><a href="/">{SITE_TITLE}</a></h2>
<div class="flex flew-row gap-2"> <div class="flex flew-row gap-3">
<HeaderLink href="/">Home</HeaderLink> <HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/about">About</HeaderLink> <HeaderLink href="/about">About</HeaderLink>
</div> </div>
<div class="flex flex-row gap-3 ml-auto"> <div class="flex flex-row gap-3 ml-auto m-2">
<a href="https://twitter.com/skyfall_ggs" target="_blank"> <a href="https://twitter.com/skyfall_ggs" target="_blank">
<span class="sr-only">Follow me on Twitter</span> <span class="sr-only">Follow me on Twitter</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"

View file

@ -12,7 +12,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main class="bg-base text-text">
<h1>🧑‍🚀 Hello, Astronaut!</h1> <h1>🧑‍🚀 Hello, Astronaut!</h1>
<p> <p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This

View file

@ -4,5 +4,9 @@ export default {
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
require("@catppuccin/tailwindcss")({
defaultFlavour: "macchiato"
})
],
} }