diff --git a/src/astro.config.mjs b/src/astro.config.mjs index 191976b..c939cd7 100644 --- a/src/astro.config.mjs +++ b/src/astro.config.mjs @@ -4,7 +4,6 @@ import react from "@astrojs/react"; import mdx from "@astrojs/mdx"; import rehypePrettyCode from "rehype-pretty-code"; import rehypeSlug from "rehype-slug"; - import sitemap from "@astrojs/sitemap"; // https://astro.build/config @@ -35,7 +34,7 @@ export default defineConfig({ rehypePrettyCode, { theme: { - "name": "Custom Gruvbox Dark", + "name": "Darkbox", "type": "dark", "colors": { "editor.background": "#000000", @@ -163,6 +162,7 @@ export default defineConfig({ } ], }, + keepBackground: true, }, ], ], diff --git a/src/src/pages/blog/[...slug].astro b/src/src/pages/blog/[...slug].astro index 1477e03..1e1e178 100644 --- a/src/src/pages/blog/[...slug].astro +++ b/src/src/pages/blog/[...slug].astro @@ -77,16 +77,28 @@ const jsonLd = { )}

{post.data.title}

{post.data.description}

-

{post.data.author} | {post.data.date}

-
+
+
+ {post.data.author} + + +
+
+
{post.data.tags.map((tag) => ( - + #{tag} ))}
-
- +
+ +
diff --git a/src/src/style/globals.css b/src/src/style/globals.css index 69d30ee..a5145d7 100644 --- a/src/src/style/globals.css +++ b/src/src/style/globals.css @@ -7,6 +7,15 @@ display: none; } +/ * Selection style */ +::selection { + background-color: rgba(177, 98, 134, 0.5); +} + +::-moz-selection { + background-color: rgba(177, 98, 134, 0.5); +} + /* Regular */ @font-face { font-family: "ComicRegular"; diff --git a/src/tailwind.config.cjs b/src/tailwind.config.cjs index bea890b..2fdb314 100644 --- a/src/tailwind.config.cjs +++ b/src/tailwind.config.cjs @@ -2,6 +2,9 @@ module.exports = { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: { + fontFamily: { + "comic-code": ["Comic Code", "monospace"], + }, colors: { background: "#000000", foreground: "#ebdbb2", @@ -116,6 +119,43 @@ module.exports = { }, // Code + 'code:not([data-language])': { + color: theme('colors.purple.bright'), + backgroundColor: '#282828', + padding: '0.2em 0.4em', + borderRadius: '0.25rem', + fontFamily: 'Comic Code, monospace', + fontWeight: '400', + '&::before': { content: 'none' }, + '&::after': { content: 'none' }, + }, + + 'pre code': { + display: 'grid', // This ensures line backgrounds stretch full width + minWidth: '100%', + fontFamily: 'Comic Code, monospace', + fontSize: '0.875rem', // text-sm + lineHeight: '1.7142857', // leading-6 + padding: '1rem', // p-4 + '&::before': { content: 'none' }, + '&::after': { content: 'none' }, + }, + + '.highlighted': { + backgroundColor: theme('colors.foreground/5'), + paddingLeft: '1rem', + paddingRight: '1rem', + marginLeft: '-1rem', + marginRight: '-1rem', + }, + + '.word': { + backgroundColor: theme('colors.foreground/20'), + padding: '0.2em', + borderRadius: '0.25rem', + }, + + code: { color: theme("colors.purple.bright"), backgroundColor: "#282828", // A dark gray that works with black