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