Vijay T - Technical Blog

Chat Summary

The user converts Markdown to HTML on the server and wraps the generated markup in an element with the class message. They asked for CSS styles that would make the resulting blog post look polished, responsive, and readable (including dark‑mode support). The assistant delivered a comprehensive, self‑contained stylesheet scoped to .message, complete with layout rules, typography, headings, links, lists, blockquotes, images, tables, code blocks, responsive tweaks, and customization tips. An example of how to embed the CSS and apply the class to the HTML was also provided.

---

Styling Server‑Generated Markdown Posts

When you transform Markdown into HTML on the backend, the output is just plain markup. Adding a well‑crafted stylesheet turns that markup into a clean, readable, and modern blog post. Below is a ready‑to‑use CSS file that targets an element with the class message—the container you already have.

1. Core Layout

.message {
  max-width: 720px;                 /* comfortable reading width */
  margin: 2rem auto;                /* vertical spacing & centering */
  padding: 0 1.5rem;                /* side breathing room */
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;                  /* 16 px base */
  line-height: 1.68;                /* generous vertical rhythm */
  color: var(--txt-primary, #212529);
  background: var(--bg-primary, #fff);
}

2. Dark‑Mode Support

@media (prefers-color-scheme: dark) {
  .message {
    --bg-primary: #1e1e1e;
    --txt-primary: #e4e4e4;
    --txt-muted: #a8a8a8;
    --link: #58a6ff;
    --border: #333;
    --blockquote-bg: #2a2a2a;
    --code-bg: #2d2d2d;
  }
}

3. Headings

.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6 {
  margin-top: 2.5rem;
  margin-bottom: .8rem;
  line-height: 1.3;
  font-weight: 600;
  scroll-margin-top: 4rem;   /* prevent headings from being hidden after jump */
}

/* Size ladder */
.message h1 { font-size: 2.25rem; }
.message h2 { font-size: 1.875rem; }
.message h3 { font-size: 1.5rem; }
.message h4 { font-size: 1.25rem; }
.message h5 { font-size: 1.125rem; }
.message h6 { font-size: 1rem; }

/* Optional anchor‑link helper */
.message h1 a,
.message h2 a,
.message h3 a,
.message h4 a,
.message h5 a,
.message h6 a {
  text-decoration: none;
  color: inherit;
  visibility: hidden;
}
.message h1:hover a,
.message h2:hover a,
.message h3:hover a,
.message h4:hover a,
.message h5:hover a,
.message h6:hover a {
  visibility: visible;
}

4. Paragraphs & Inline Code

.message p { margin: 0 0 1.4rem; }

.message p code,
.message li code,
.message td code {
  background: var(--code-bg, #f6f8fa);
  color: #c7254e;
  padding: .15em .35em;
  border-radius: 4px;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
}

5. Links

.message a {
  color: var(--link, #0066cc);
  text-decoration: underline;
  transition: color .15s ease-in-out;
}
.message a:hover { color: var(--link-hover, #004999); }

6. Lists

.message ul,
.message ol {
  margin: 0 0 1.4rem 1.75rem;
  padding-left: 0;
}
.message li { margin-bottom: .4rem; }

7. Blockquote

.message blockquote {
  margin: 1.6rem 0;
  padding: .8rem 1.2rem;
  border-left: 4px solid #6c71c4;
  background: var(--blockquote-bg, #f8f9fa);
  color: var(--txt-muted, #555);
  font-style: italic;
}

8. Horizontal Rule

.message hr {
  border: 0;
  border-top: 1px solid var(--border, #ddd);
  margin: 2.5rem 0;
}

9. Images & Figures

.message img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.6rem auto;
  border-radius: 4px;
}
.message figure {
  margin: 1.6rem 0;
  text-align: center;
}
.message figure figcaption {
  font-size: .9rem;
  color: var(--txt-muted);
}

10. Tables

.message .table-wrapper { overflow-x: auto; margin: 1.6rem 0; }
.message table {
  width: 100%;
  border-collapse: collapse;
  font-size: .96rem;
}
.message th,
.message td {
  padding: .75rem 1rem;
  border: 1px solid var(--border, #e2e2e2);
}
.message th {
  background: #f1f3f5;
  font-weight: 600;
}

11. Code Blocks

.message pre {
  background: var(--code-bg, #f6f8fa);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 6px;
  margin: 1.6rem 0;
}
.message pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

12. Optional Utilities

.message .center { text-align: center; }
.message .right  { text-align: right; }
.message .small  { font-size: .85em; color: var(--txt-muted); }

13. Responsive Tweaks (≤ 480 px)

@media (max-width: 480px) {
  .message {
    padding: 0 .9rem;
    margin: 1.4rem auto;
  }
  .message h1 { font-size: 1.9rem; }
  .message h2 { font-size: 1.6rem; }
}

---

How to Use It

1. Save the stylesheet as message.css (or embed it directly in a <style> tag).

2. Link it in the <head> of your page:

   <link rel="stylesheet" href="message.css">
   

3. Wrap the generated HTML inside an element with the message class:

   <article class="message">
     <!-- Markdown‑converted HTML goes here -->
   </article>
   

Example Markup

<article class="message">
  <h1 id="welcome">Welcome to My Blog</h1>
  <p>This is a <a href="#">sample post</a> that demonstrates the new styling.</p>

  <pre><code class="language-js">const foo = "bar";</code></pre>

  <blockquote>“Good design is obvious.” – <cite>Anonymous</cite></blockquote>

  <div class="table-wrapper">
    <table>
      <thead>
        <tr><th>Name</th><th>Age</th></tr>
      </thead>
      <tbody>
        <tr><td>Alice</td><td>30</td></tr>
        <tr><td>Bob</td><td>27</td></tr>
      </tbody>
    </table>
  </div>

  <figure>
    <img src="cat.jpg" alt="A sleeping cat">
    <figcaption>A cat taking a nap.</figcaption>
  </figure>
</article>

---

Quick Customization Tips

What to change	How
Primary link colour	Edit --link (and optionally --link-hover) at the top of the file or add a new CSS variable.
Max reading width	Modify max-width: 720px; in .message.
Background pattern	Add background-image: url('…'); to .message.
Font family	Swap the font-family stack in .message.
Syntax highlighting	The <pre><code> block already has a neutral background; plug in Prism, Highlight.js, or Shiki and they’ll automatically inherit the styling.

---

With this stylesheet in place, any Markdown you render on the server will appear as a clean, accessible, and aesthetically pleasing blog post—without having to write additional HTML or inline styles. Happy writing!