skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2025-04-03 18:24:15 +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/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0", "@astrojs/tailwind": "^5.1.0",
"@catppuccin/tailwindcss": "^0.1.6", "@catppuccin/tailwindcss": "^0.1.6",
"@tailwindcss/typography": "^0.5.13",
"astro": "^4.11.5", "astro": "^4.11.5",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"prettier-plugin-astro": "^0.14.0", "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"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <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> </head>
<body> <body>
<Header /> <Header />
<main class="max-w-full m-0"> <main class="max-w-full text-text my-12 prose">
<article> <article>
<div class="w-full"> <div class="md:w-[720px] mx-6 lg:mx-auto m-0 text-center">
{ <!-- Title, date and description -->
heroImage && ( <h1 class="text-4xl font-black text-text mb-3">{title}</h1>
<img <p class="text-lg italic mb-2">{description}</p>
width={1020} <div>
height={510} <FormattedDate date={pubDate} />
src={heroImage} {
class="block m-0 rounded-md shadow-sm" updatedDate && (
alt="" <div class="italic">
/> Last updated on <FormattedDate date={updatedDate} />
) </div>
} )
</div> }
<div class="w-[720px] m-auto p-1"> </div>
<div class="mb-1 text-center">
<div class="date"> <!-- Image -->
<FormattedDate date={pubDate} /> <div class="w-[1/4] flex justify-center">
{ {
updatedDate && ( heroImage && (
<div class="italic"> <img
Last updated on <FormattedDate date={updatedDate} /> width={1280}
</div> height={720}
) src={heroImage}
} class="article-banner my-10 aspect-ratio-[16/9] shadow-lg w-max rounded-lg"
</div> alt=""
<h1>{title}</h1> />
<hr /> )
}
</div>
<hr />
<!-- Content -->
<div class="text-left text-lg">
<slot />
</div> </div>
<slot />
</div> </div>
</article> </article>
</main> </main>

2
src/styles/global.css
View file

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

22
tailwind.config.mjs
View file

@ -2,11 +2,31 @@
export default { export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: { 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: [ plugins: [
require("@catppuccin/tailwindcss")({ require("@catppuccin/tailwindcss")({
defaultFlavour: "macchiato", defaultFlavour: "macchiato",
}), }),
require("@tailwindcss/typography"),
], ],
}; };