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