orchard

  1// The <article> body of a post. Comrak emits plain HTML with no wrapper
  2// elements of its own, so everything here selects the tags directly.
  3
  4article {
  5  font-size: 1.05em;
  6  line-height: 1.9;
  7  color: #c4bdb2;
  8
  9  > p,
 10  > ul,
 11  > ol,
 12  > blockquote,
 13  > h1, > h2, > h3, > h4, > h5, > h6,
 14  > hr {
 15    max-width: 600px;
 16    margin-left: auto;
 17    margin-right: auto;
 18  }
 19
 20  > pre,
 21  > table,
 22  > p:has(> img:only-child) {
 23    max-width: 800px;
 24    margin-left: auto;
 25    margin-right: auto;
 26  }
 27
 28  a {
 29    color: #7db88c;
 30    text-decoration: underline;
 31    text-underline-offset: 3px;
 32    text-decoration-color: rgba(125, 184, 140, 0.3);
 33    transition: text-decoration-color 200ms ease;
 34
 35    &:hover {
 36      text-decoration-color: #7db88c;
 37    }
 38  }
 39
 40  blockquote {
 41    border-left: 2px solid rgba(201, 168, 76, 0.3);
 42    padding-left: 1.25rem;
 43    color: #a09890;
 44  }
 45
 46  h1, h2, h3, h4, h5, h6 {
 47    color: #ddd7cd;
 48  }
 49
 50  strong {
 51    color: #ddd7cd;
 52  }
 53
 54  :not(pre) > code {
 55    background: rgba(107, 158, 120, 0.1);
 56    color: #8dc49c;
 57    padding: 0.15em 0.4em;
 58    border-radius: 0.2rem;
 59    font-size: 0.9em;
 60  }
 61
 62  hr {
 63    border-color: rgba(107, 158, 120, 0.08);
 64  }
 65
 66  // chroma emits the background colour inline, so none is set here.
 67  pre {
 68    margin: 2rem auto;
 69    padding: 1rem 1.25rem;
 70    border-radius: 0.25rem;
 71    border: 1px solid rgba(107, 158, 120, 0.08);
 72    overflow-x: auto;
 73    font-size: 0.9em;
 74    line-height: 1.5;
 75
 76    code {
 77      background: transparent;
 78      color: inherit;
 79      padding: 0;
 80      font-size: inherit;
 81      font-family: "Monaspace Argon", ui-monospace, monospace;
 82    }
 83  }
 84
 85  table {
 86    width: 100%;
 87    margin: 2rem auto;
 88    border-collapse: collapse;
 89
 90    th, td {
 91      padding: 0.5rem 0.75rem;
 92      border-bottom: 1px solid rgba(107, 158, 120, 0.08);
 93    }
 94
 95    th {
 96      color: #ddd7cd;
 97      font-weight: 600;
 98    }
 99  }
100
101  img {
102    display: block;
103    margin: 0 auto;
104    max-width: 100%;
105    max-height: 75vh;
106    height: auto;
107    border-radius: 0.25rem;
108  }
109
110  p:has(> img:only-child) {
111    margin: 2rem auto;
112    text-align: center;
113  }
114}