Posts tagged: webdev

I’m building in a [[ fragmentions ]] implementation into my blog, I wanted to add some text before the fragment to indidate that it was the highlighted fragment that someone may have intended to share with you.

To get a newline in a :before I need to use \A and white-space: pre-line.

body :target::before,
body [fragmention]::before {
    content: "Highlighted Fragment:\A";
    white-space: pre-line;
    @apply font-bold text-yellow-600;
}

Here is what it looks like on my not yet live implementation of fragmentions.

I’ve been back to putting some images on my blog lately and thinking about making them a bit thinner through the use of aspect ratio for simplicity. I’m leaning pretty heavy on tailwindcss these days due to some weird quirks of markdown-it-attrs I cannot have slashes in classes from markdown so I made a .cinematic class to achieve this.

.cinematic {
  @apply aspect-[2.39/1];
}

Example

Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.

.cinematic {
  @apply aspect-[2.39/1];
}

Given the following markdown with attrs added to the image and to the paragraph block.

![a stable diffusion generated image of an astronaut working in a neon pink lab with beakers and papers all over, he is reading through pages.](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]}

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic}

{.cinematic}
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)

We get the following output with only the middle one working correctly.

{.aspect-[2.39/1]}