prose.css

  1article.prose {
  2  margin-bottom: 2.5rem;
  3}
  4
  5article.prose,
  6.type-prose {
  7  font-family: "Spectral", "Constantia", "Lucida Bright", "Lucidabright", "Lucida Serif", "Lucida", "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", "Georgia", "serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif;
  8  letter-spacing: -0.05rem;
  9}
 10
 11article.prose h1,
 12article.prose h2,
 13article.prose h3,
 14article.prose h4,
 15.type-prose h1,
 16.type-prose h2,
 17.type-prose h3,
 18.type-prose h4 {
 19  margin: 3rem 0 1rem 0;
 20}
 21
 22article.prose h1,
 23.type-prose h1 {
 24  font-size: 2.25rem;
 25  line-height: 2.5rem;
 26}
 27
 28article.prose h2,
 29.type-prose h2 {
 30  font-size: 1.875rem;
 31  line-height: 2.25rem;
 32}
 33
 34article.prose h3,
 35.type-prose h3 {
 36  font-size: 1.6rem;
 37  line-height: 2rem;
 38}
 39
 40article.prose h4,
 41.type-prose h4 {
 42  font-size: 1.4rem;
 43  line-height: 1.75rem;
 44}
 45
 46article.prose p,
 47article.prose li,
 48article.prose a,
 49.type-prose p,
 50.type-prose li,
 51.type-prose a {
 52  color: #eee;
 53  font-size: 1.3rem;
 54  line-height: 2.1rem;
 55}
 56
 57article.prose a:not(img),
 58.type-prose a:not(img) {
 59  text-decoration: underline;
 60  text-underline-offset: 4px;
 61}
 62
 63article.prose strong,
 64.type-prose strong {
 65  font-weight: 600;
 66}
 67
 68article.prose i,
 69.type-prose i {
 70  font-style: italic;
 71}
 72
 73article.prose p:not(:last-of-type),
 74.type-prose p:not(:last-of-type) {
 75  margin-bottom: 1.5rem;
 76}
 77
 78article.prose img,
 79article.prose pre,
 80.type-prose img,
 81.type-prose pre {
 82  margin: 1.5rem 0;
 83}
 84
 85article.prose ul,
 86.type-prose ul {
 87  margin-left: 1.5rem;
 88}
 89
 90article.prose ul li,
 91.type-prose ul li {
 92  list-style-type: disc;
 93  list-style-position: outside;
 94}
 95
 96article.prose ul li:not(:last-of-type),
 97.type-prose ul li:not(:last-of-type) {
 98  margin-bottom: 0.2rem;
 99}
100
101article.prose pre,
102.type-prose pre {
103  padding: 0.8rem;
104  background-color: rgba(255, 255, 255, 0.1);
105}
106
107article.prose code,
108.type-prose code {
109  font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", monospace;
110  font-size: 0.96rem;
111  letter-spacing: 0rem;
112}
113
114article.prose :not(pre) > code,
115.type-prose :not(pre) > code {
116  padding: 0.2rem 0.4rem;
117  background-color: rgba(255, 255, 255, 0.15);
118}
119
120/* Code Highlighting Styles
121/* Based on PrismJS 1.25.0
122https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+bash+c+cpp+rust+scss */
123code[class*="language-"],
124pre[class*="language-"] {
125  color: #ddd;
126  text-align: left;
127  white-space: pre;
128  word-spacing: normal;
129  word-break: normal;
130  word-wrap: normal;
131  -moz-tab-size: 4;
132  -o-tab-size: 4;
133  tab-size: 4;
134  -webkit-hyphens: none;
135  -ms-hyphens: none;
136  hyphens: none;
137}
138
139pre[class*="language-"],
140:not(pre) > code[class*="language-"] {
141  background-color: rgba(255, 255, 255, 0.15);
142}
143
144/* Code blocks */
145pre[class*="language-"]::-moz-selection {
146  /* Firefox */
147  background: #3b57bc33;
148}
149
150pre[class*="language-"]::selection {
151  /* Safari */
152  background: #3b57bc33;
153}
154
155/* Text Selection colour */
156pre[class*="language-"]::-moz-selection,
157pre[class*="language-"] ::-moz-selection,
158code[class*="language-"]::-moz-selection,
159code[class*="language-"] ::-moz-selection {
160  text-shadow: none;
161  background: #3b57bc33;
162}
163
164pre[class*="language-"]::selection,
165pre[class*="language-"] ::selection,
166code[class*="language-"]::selection,
167code[class*="language-"] ::selection {
168  text-shadow: none;
169  background: #3b57bc33;
170}
171
172.token.comment,
173.token.prolog,
174.token.doctype,
175.token.cdata {
176  color: #9cdcfe;
177}
178
179.token.punctuation {
180  opacity: 0.7;
181}
182
183.token.namespace {
184  opacity: 0.7;
185}
186
187.token.tag,
188.token.boolean,
189.token.number,
190.token.deleted {
191  color: #b5cea8;
192}
193
194.token.keyword,
195.token.property,
196.token.selector,
197.token.constant,
198.token.symbol,
199.token.builtin {
200  color: #0086c0;
201  /* #F9EE98 */
202}
203
204.token.attr-name,
205.token.attr-value,
206.token.string,
207.token.char,
208.token.operator,
209.token.entity,
210.token.url,
211.language-css .token.string,
212.style .token.string,
213.token.variable,
214.token.inserted {
215  color: #4e94ce;
216}
217
218.token.atrule {
219  color: #4ec9b0;
220}
221
222.token.regex,
223.token.important {
224  color: #dcdcaa;
225}
226
227.token.important,
228.token.bold {
229  font-weight: bold;
230}
231
232.token.italic {
233  font-style: italic;
234}
235
236.token.entity {
237  cursor: help;
238}
239
240/* Markup */
241.language-markup .token.tag,
242.language-markup .token.attr-name,
243.language-markup .token.punctuation {
244  color: #4e94ce;
245}
246
247/* Make the tokens sit above the line highlight so the colours don't look faded. */
248.token {
249  position: relative;
250  z-index: 1;
251}
252/*# sourceMappingURL=prose.css.map */