blog.bythewood.me-rust

  1// Styles the <article> body of a blog post. Comrak emits standard HTML
  2// (<p>, <h2>, <pre><code>, <img>, etc.) — no custom block wrappers.
  3
  4article {
  5  font-size: 1.05em;
  6  line-height: 1.9;
  7  color: #c4bdb2;
  8
  9  // Text content stays in a 600px reading column.
 10  > p,
 11  > ul,
 12  > ol,
 13  > blockquote,
 14  > h1, > h2, > h3, > h4, > h5, > h6,
 15  > hr {
 16    max-width: 600px;
 17    margin-left: auto;
 18    margin-right: auto;
 19  }
 20
 21  // Code blocks, tables, and image-only paragraphs break wider.
 22  > pre,
 23  > table,
 24  > p:has(> img:only-child) {
 25    max-width: 800px;
 26    margin-left: auto;
 27    margin-right: auto;
 28  }
 29
 30  a {
 31    color: #7db88c;
 32    text-decoration: underline;
 33    text-underline-offset: 3px;
 34    text-decoration-color: rgba(125, 184, 140, 0.3);
 35    transition: text-decoration-color 200ms ease;
 36
 37    &:hover {
 38      text-decoration-color: #7db88c;
 39    }
 40  }
 41
 42  blockquote {
 43    border-left: 2px solid rgba(201, 168, 76, 0.3);
 44    padding-left: 1.25rem;
 45    color: #a09890;
 46  }
 47
 48  h1, h2, h3, h4, h5, h6 {
 49    color: #ddd7cd;
 50  }
 51
 52  strong {
 53    color: #ddd7cd;
 54  }
 55
 56  // Inline code (the `:not(pre)` rules out the <code> inside a <pre>).
 57  :not(pre) > code {
 58    background: rgba(107, 158, 120, 0.1);
 59    color: #8dc49c;
 60    padding: 0.15em 0.4em;
 61    border-radius: 0.2rem;
 62    font-size: 0.9em;
 63  }
 64
 65  hr {
 66    border-color: rgba(107, 158, 120, 0.08);
 67  }
 68
 69  // Block-level code (background-color comes from the syntect inline style).
 70  pre {
 71    margin: 2rem auto;
 72    padding: 1rem 1.25rem;
 73    border-radius: 0.25rem;
 74    border: 1px solid rgba(107, 158, 120, 0.08);
 75    overflow-x: auto;
 76    font-size: 0.9em;
 77    line-height: 1.5;
 78
 79    code {
 80      background: transparent;
 81      color: inherit;
 82      padding: 0;
 83      font-size: inherit;
 84      font-family: "Monaspace Argon", ui-monospace, monospace;
 85    }
 86  }
 87
 88  table {
 89    width: 100%;
 90    margin: 2rem auto;
 91    border-collapse: collapse;
 92
 93    th, td {
 94      padding: 0.5rem 0.75rem;
 95      border-bottom: 1px solid rgba(107, 158, 120, 0.08);
 96    }
 97
 98    th {
 99      color: #ddd7cd;
100      font-weight: 600;
101    }
102  }
103
104  img {
105    display: block;
106    margin: 0 auto;
107    max-width: 100%;
108    max-height: 75vh;
109    height: auto;
110    border-radius: 0.25rem;
111  }
112
113  // Center an image-only paragraph and add vertical breathing room.
114  p:has(> img:only-child) {
115    margin: 2rem auto;
116    text-align: center;
117  }
118}