prose.css

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