skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-12-04 22:57:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Blog post styling

Browse source
This commit is contained in:
SkyfallWasTaken 2024-07-07 21:27:54 +01:00
parent 7153888b9d
commit a446fdfc3f
5 changed files with 59 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -20,6 +20,7 @@
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@catppuccin/tailwindcss": "^0.1.6",
"@tailwindcss/typography": "^0.5.13",
"astro": "^4.11.5",
"prettier": "^3.3.2",
"prettier-plugin-astro": "^0.14.0",

85
src/layouts/BlogPost.astro
View file

@ -13,61 +13,48 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<html lang="en">
<head>
<BaseHead title={title} description={description} />
<style>
main {
width: calc(100% - 2em);
}
.prose {
max-width: calc(100% - 2em);
color: rgb(var(--gray-dark));
}
.title {
padding: 1em 0;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
</style>
</head>
<body>
<Header />
<main class="max-w-full m-0">
<main class="max-w-full text-text my-12 prose">
<article>
<div class="w-full">
{
heroImage && (
<img
width={1020}
height={510}
src={heroImage}
class="block m-0 rounded-md shadow-sm"
alt=""
/>
)
}
</div>
<div class="w-[720px] m-auto p-1">
<div class="mb-1 text-center">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="italic">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
<h1>{title}</h1>
<hr />
<div class="md:w-[720px] mx-6 lg:mx-auto m-0 text-center">
<!-- Title, date and description -->
<h1 class="text-4xl font-black text-text mb-3">{title}</h1>
<p class="text-lg italic mb-2">{description}</p>
<div>
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="italic">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
<!-- Image -->
<div class="w-[1/4] flex justify-center">
{
heroImage && (
<img
width={1280}
height={720}
src={heroImage}
class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg"
alt=""
/>
)
}
</div>
<hr />
<!-- Content -->
<div class="text-left text-lg">
<slot />
</div>
<slot />
</div>
</article>
</main>

2
src/styles/global.css
View file

@ -1,3 +1,3 @@
body {
html {
@apply bg-base;
}

22
tailwind.config.mjs
View file

@ -2,11 +2,31 @@
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {},
extend: {
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-body': theme('colors.pink[800]'),
'--tw-prose-headings': theme('colors.text'),
'--tw-prose-links': theme('colors.text'),
'--tw-prose-hr': theme('colors.pink[300]'),
'--tw-prose-quotes': theme('colors.text'),
'--tw-prose-kbd': theme("colors.text"),
'--tw-prose-quote-borders': theme('colors.pink[300]'),
'--tw-prose-captions': theme('colors.pink[700]'),
'--tw-prose-code': theme('colors.text'),
'--tw-prose-pre-code': theme('colors.text'),
'--tw-prose-pre-bg': theme('colors.pink[900]'),
},
},
}),
}
},
plugins: [
require("@catppuccin/tailwindcss")({
defaultFlavour: "macchiato",
}),
require("@tailwindcss/typography"),
],
};