feat: 💬 update homepage intro

Excessive use of the prose- prefix bloats the resulting CSS bundle and makes styles rather hard to maintain

README.md

@@ -36,11 +36,13 @@ This template uses the following plugins to extend the capabilities and features
 | `@grimlink/eleventy-plugin-lucide-icons` | Lucide icon shortcodes                                             |
 | `@myxotod/eleventy-plugin-readingtime`   | Adds an estimated reading time to posts                            |
 | `@quasibit/eleventy-plugin-sitemap`      | Generates a `sitemap.xml` from eleventy pages                      |
+| `@sardine/eleventy-plugin-tinyhtml`      | Minify HTML output                                                 |
 | `eleventy-plugin-embed-everything`       | Embeds YouTube, Soundcloud, Spotify, Instagram, etc.               |
 | `eleventy-plugin-icons`                  | Plugin to use various icon sets in templates                       |
 | `eleventy-plugin-metagen`                | Generates `<meta>` tags for social media embeds                    |
 | `eleventy-plugin-og-image`               | Generates OpenGraph images for social media sharing                |
 | `eleventy-plugin-robotstxt`              | Generates a `robots.txt` for the site                              |
+| `eleventy-plugin-tailwindcss-4`          | Integrates Tailwind 4 to the 11ty build process                    |
 | `markdown-it-abbr`                       | Extends Markdown with syntax for `<abbr>` tags                     |
 | `markdown-it-anchor`                     | Adds anchor tag IDs to headings                                    |
 | `markdown-it-collapsible`                | Extends Markdown with syntax for `<details>` and `<summary>`       |

package.json

@@ -17,17 +17,17 @@
   "license": "ISC",
   "type": "module",
   "dependencies": {
-    "@11ty/eleventy": "^3.1.0",
-    "@11ty/eleventy-img": "^6.0.3",
+    "@11ty/eleventy": "^3.1.1",
+    "@11ty/eleventy-img": "^6.0.4",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^2.0.4",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1",
     "@alexcarpenter/eleventy-plugin-caniuse": "^0.1.0",
-    "@grimlink/eleventy-plugin-lucide-icons": "^2.1.5",
+    "@grimlink/eleventy-plugin-lucide-icons": "^2.1.6",
     "@myxotod/eleventy-plugin-readingtime": "^2.0.0",
     "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
     "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
-    "@tailwindcss/cli": "^4.1.6",
+    "@tailwindcss/cli": "^4.1.8",
     "@tailwindcss/typography": "^0.5.16",
     "eleventy-plugin-embed-everything": "^1.21.0",
     "eleventy-plugin-icons": "^4.5.3",
@@ -42,7 +42,7 @@
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-image-figures": "^2.1.1",
     "markdown-it-obsidian-callouts": "^0.3.2",
-    "simple-icons": "^14.13.0",
+    "simple-icons": "^14.15.0",
     "tailwindcss": "^4.0.0",
     "tailwindcss-safe-area": "^0.6.0"
   }

src/css/style.css

@@ -40,6 +40,15 @@ h6 {
   font-family: var(--font-heading);
 }
 
+blockquote {
+  @apply relative mt-10 rounded-xl border-2 border-sky-500 ps-6 pe-6 font-normal text-slate-700 not-italic *:before:content-none *:after:content-none lg:ps-8 lg:pe-8 2xl:ps-10 2xl:pe-10 dark:text-slate-300;
+
+  &::before {
+    @apply absolute -top-8 left-4 block h-12 w-20 bg-slate-300 text-center text-8xl leading-none font-bold text-slate-300 not-italic content-['“'] dark:bg-slate-900 dark:text-slate-900;
+    -webkit-text-stroke: var(--color-sky-600) 0.25rem;
+  }
+}
+
 pre,
 code {
   font-family: var(--font-monospace);
@@ -77,12 +86,12 @@ summary {
 }
 
 dl {
-  dt {
+  & dt {
     @apply font-normal! text-sky-600! dark:text-sky-300!;
     font-family: var(--font-heading);
   }
 
-  code {
+  & code {
     @apply text-sky-800! dark:text-sky-500!;
   }
 }

src/index.md

@@ -10,6 +10,6 @@ eleventyNavigation:
 
 Welcome to my little corner of the internet! This is where I pour out my thoughts whenever I have them :3
 
-Here you'll find posts about tech stuff, sometimes tutorials, comments on news articles I read.
+Here you'll find posts about tech, sometimes tutorials, and long-form commentary on contemporary happenings.
 
 So if that's kind of your thing, I'd be happy to have you around!

src/layouts/blogpost.njk

@@ -31,7 +31,7 @@ layout: base.njk
     </div>
   </header>
 
-  <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-blockquote:relative prose-blockquote:border-0 prose-blockquote:ps-16 prose-blockquote:font-normal prose-blockquote:text-slate-700 prose-blockquote:not-italic prose-blockquote:before:absolute prose-blockquote:before:top-0 prose-blockquote:before:left-0 prose-blockquote:before:-z-10 prose-blockquote:before:h-[1em] prose-blockquote:before:text-8xl prose-blockquote:before:leading-none prose-blockquote:before:font-bold prose-blockquote:before:text-sky-500 prose-blockquote:before:not-italic prose-blockquote:before:content-['“'] prose-blockquote:*:before:content-none prose-blockquote:*:after:content-none lg:prose-blockquote:ps-20 lg:prose-blockquote:before:text-9xl 2xl:prose-blockquote:ps-24 2xl:prose-blockquote:before:text-[10rem] prose-blockquote:dark:text-slate-300 prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
+  <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
     {{ content | safe }}
   </section>
 </article>