1  @import "variables";
  2  
  3  .markdown {
  4    line-height: 1.6;
  5  
  6    // remove padding at the beginning of page
  7    > :first-child {
  8      margin-top: 0;
  9    }
 10  
 11    h1,
 12    h2,
 13    h3,
 14    h4,
 15    h5,
 16    h6 {
 17      font-weight: normal;
 18      line-height: 1;
 19      margin-top: 1.5em;
 20      margin-bottom: $padding-16;
 21  
 22      a.anchor {
 23        opacity: 0;
 24        font-size: 0.75em;
 25        vertical-align: middle;
 26        text-decoration: none;
 27      }
 28  
 29      &:hover a.anchor,
 30      a.anchor:focus {
 31        opacity: initial;
 32      }
 33    }
 34  
 35    h4,
 36    h5,
 37    h6 {
 38      font-weight: bolder;
 39    }
 40  
 41    h5 {
 42      font-size: 0.875em;
 43    }
 44  
 45    h6 {
 46      font-size: 0.75em;
 47    }
 48  
 49    b,
 50    optgroup,
 51    strong {
 52      font-weight: bolder;
 53    }
 54  
 55    a {
 56      text-decoration: none;
 57  
 58      &:hover {
 59        text-decoration: underline;
 60      }
 61      &:visited {
 62        color: var(--color-visited-link);
 63      }
 64    }
 65  
 66    img {
 67      max-width: 100%;
 68      height: auto;
 69    }
 70  
 71    code {
 72      direction: ltr;
 73      unicode-bidi: embed;
 74      padding: 0 $padding-4;
 75      background: var(--gray-200);
 76      border-radius: $border-radius;
 77      font-size: 0.875em;
 78    }
 79  
 80    pre {
 81      direction: ltr;
 82      unicode-bidi: embed;
 83      padding: $padding-16;
 84      background: var(--gray-100);
 85      border-radius: $border-radius;
 86      overflow-x: auto;
 87  
 88      code {
 89        padding: 0;
 90        background: none;
 91      }
 92    }
 93  
 94    p {
 95      word-wrap: break-word;
 96    }
 97  
 98    blockquote {
 99      margin: $padding-16 0;
100      padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
101  
102      border-inline-start: $padding-4 solid var(--gray-200);
103      border-radius: $border-radius;
104  
105      :first-child {
106        margin-top: 0;
107      }
108      :last-child {
109        margin-bottom: 0;
110      }
111    }
112  
113    table {
114      overflow: auto;
115      display: block;
116      border-spacing: 0;
117      border-collapse: collapse;
118      margin-top: $padding-16;
119      margin-bottom: $padding-16;
120  
121      tr th,
122      tr td {
123        padding: $padding-8 $padding-16;
124        border: $padding-1 solid var(--gray-200);
125      }
126  
127      tr:nth-child(2n) {
128        background: var(--gray-100);
129      }
130    }
131  
132    hr {
133      height: $padding-1;
134      border: none;
135      background: var(--gray-200);
136    }
137  
138    ul,
139    ol {
140      padding-inline-start: $padding-16 * 2;
141      word-wrap: break-word;
142    }
143  
144    dl {
145      dt {
146        font-weight: bolder;
147        margin-top: $padding-16;
148      }
149  
150      dd {
151        margin-inline-start: 0;
152        margin-bottom: $padding-16;
153      }
154    }
155  
156    // Special case for highlighted code with line numbers
157    .highlight {
158      direction: ltr;
159      unicode-bidi: embed;
160      border-radius: $border-radius;
161      overflow: hidden;
162  
163      table tr {
164        td pre code > span {
165          display: flex;
166        }
167        
168        td:nth-child(1) pre {
169          margin: 0;
170          padding-inline-end: 0;
171        }
172        td:nth-child(2) pre {
173          margin: 0;
174          padding-inline-start: 0;
175        }
176      }
177    }
178  
179    details {
180      padding: $padding-16;
181      border: $padding-1 solid var(--gray-200);
182      border-radius: $border-radius;
183  
184      summary {
185        line-height: 1;
186        padding: $padding-16;
187        margin: -$padding-16;
188        cursor: pointer;
189      }
190  
191      &[open] summary {
192        margin-bottom: 0;
193      }
194    }
195  
196    figure {
197      margin: $padding-16 0;
198      figcaption p {
199        margin-top: 0;
200      }
201    }
202  }
203  
204  .markdown-inner {
205    // Util class to remove extra margin in nested markdown content
206    > :first-child {
207      margin-top: 0;
208    }
209    > :last-child {
210      margin-bottom: 0;
211    }
212  }