Improving Blog Readability with a Neo-brutalism Theme

The old blog design was clean, but when it came to long, technical content, it felt a bit plain and lacked readability. That’s why I completely overhauled the blog theme.

Back to the Neo-brutalism.

Key Changes in the Neo-brutalism Theme

I focused on increasing both the fun of reading and readability through striking visuals and stark contrasts.

1. Bold 8px Black Borders and Hard Shadows I wrapped the entire blog post container in an 8px thick black border and placed a hard, unblurred shadow behind it. This creates a strong, ‘punchy’ first impression, as if a giant physical card is sitting right in the middle of the screen.

2. Highlighting Code and Technical Terms (Inline Code) Previously, inline codes like git clone or .env scattered throughout the text didn’t really stand out. Now, I’ve updated the style so that inline code has a black background with white text and sharp borders, making technical details pop at a glance.

3. Interactive Elements and Yellow Accents I applied the signature Neo-brutalism primary yellow accent to all links and highlights. For links and buttons, hovering over them removes the 3D shadow, giving a satisfying “pressed down” effect. Try clicking this link to the StudioJin Homepage!

4. Highlighter Marks (<mark>) I added a custom style for the <mark> tag so that when I want to highlight specific sentences in a Markdown document—like a real highlighter—I can easily do so. Just like this!

5. A Wider, More Spacious Layout I boldly removed the 65ch width limit previously enforced by Tailwind Typography’s prose class. The content box now stretches to fill 80% of the browser width, providing a spacious layout that is much more suitable for a tech blog filled with lists and code blocks.

Design is Not Just About Subtracting, but Emphasizing

Sometimes, rather than minimalism, a bold and unique design like this enhances immersion in the content. With the thick borders and vibrant colors making the text pop, I think writing blog posts is going to be a lot more fun from now on!

@theme {
  /* Neo-brutalism core: hard shadow customization */
  --shadow-neo: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  --shadow-neo-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
  --shadow-neo-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);

  /* thick border size customization */
  --border-width-3: 3px;
  --border-width-8: 8px;
}

@layer components {
  /* Blog Article Prose Customization for Neo-brutalism */
  .prose-neo {
    @apply max-w-none prose-headings:font-black prose-p:font-medium transition-all;
    
    /* Links (Interactive 3D shadow) */
    @apply prose-a:text-black prose-a:font-bold prose-a:bg-yellow-300 prose-a:px-1 prose-a:border-2 prose-a:border-black prose-a:shadow-neo-sm hover:prose-a:translate-x-0.5 hover:prose-a:translate-y-0.5 hover:prose-a:shadow-none prose-a:no-underline;
    
    /* Inline code base */
    @apply prose-code:px-1.5 prose-code:py-0.5 prose-code:font-bold prose-code:border prose-code:border-black prose-code:rounded-none;

    /* Blockquote */
    @apply prose-blockquote:bg-blue-600 prose-blockquote:text-white prose-blockquote:border-4 prose-blockquote:border-black prose-blockquote:shadow-neo prose-blockquote:px-6 prose-blockquote:py-4 prose-blockquote:font-bold prose-blockquote:not-italic;

    /* Images & Pre (Code blocks) */
    @apply prose-img:border-4 prose-img:border-black prose-img:shadow-neo prose-img:rounded-none;
    @apply prose-pre:border-4 prose-pre:border-black prose-pre:shadow-neo prose-pre:rounded-none prose-pre:bg-gray-900;
    
    /* Table & Hr */
    @apply prose-table:border-4 prose-table:border-black prose-th:border-b-4 prose-th:border-black prose-td:border-b-2 prose-td:border-black;
    @apply prose-hr:border-t-4 prose-hr:border-black;

    /* Highlight mark tag */
    mark {
      @apply bg-yellow-300 text-black px-1 font-bold rounded-sm border-2 border-black shadow-neo-sm;
    }
  }

  /* Remove default tailwind backticks */
  .prose-neo code::before,
  .prose-neo code::after {
    content: none !important;
  }
  
  /* inline code always black background + white text */
  .prose-neo :not(pre) > code {
    background-color: black !important;
    color: white !important;
  }
}