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 pre {
87 padding: 0.8rem;
88 background-color: rgba(255, 255, 255, 0.1);
89 }
90
91 code {
92 font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono",
93 "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
94 "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
95 "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
96 "Noto Color Emoji", monospace;
97 font-size: 0.96rem;
98 letter-spacing: 0rem;
99 }
100
101 :not(pre) > code {
102 padding: 0.2rem 0.4rem;
103 background-color: rgba(255, 255, 255, 0.15);
104 }
105}
106
107/* Code Highlighting Styles
108/* Based on PrismJS 1.25.0
109https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+bash+c+cpp+rust+scss */
110
111code[class*="language-"],
112pre[class*="language-"] {
113 color: #ddd;
114 text-align: left;
115 white-space: pre;
116 word-spacing: normal;
117 word-break: normal;
118 word-wrap: normal;
119
120 -moz-tab-size: 4;
121 -o-tab-size: 4;
122 tab-size: 4;
123
124 -webkit-hyphens: none;
125 -moz-hyphens: none;
126 -ms-hyphens: none;
127 hyphens: none;
128}
129
130pre[class*="language-"],
131:not(pre) > code[class*="language-"] {
132 background-color: rgba(255, 255, 255, 0.15);
133}
134
135/* Code blocks */
136pre[class*="language-"] {
137 // Language specific code block styles
138}
139
140pre[class*="language-"]::-moz-selection {
141 /* Firefox */
142 background: #3b57bc33;
143}
144
145pre[class*="language-"]::selection {
146 /* Safari */
147 background: #3b57bc33;
148}
149
150/* Text Selection colour */
151pre[class*="language-"]::-moz-selection,
152pre[class*="language-"] ::-moz-selection,
153code[class*="language-"]::-moz-selection,
154code[class*="language-"] ::-moz-selection {
155 text-shadow: none;
156 background: #3b57bc33;
157}
158
159pre[class*="language-"]::selection,
160pre[class*="language-"] ::selection,
161code[class*="language-"]::selection,
162code[class*="language-"] ::selection {
163 text-shadow: none;
164 background: #3b57bc33;
165}
166
167.token.comment,
168.token.prolog,
169.token.doctype,
170.token.cdata {
171 color: #9cdcfe;
172}
173
174.token.punctuation {
175 opacity: 0.7;
176}
177
178.token.namespace {
179 opacity: 0.7;
180}
181
182.token.tag,
183.token.boolean,
184.token.number,
185.token.deleted {
186 color: #b5cea8;
187}
188
189.token.keyword,
190.token.property,
191.token.selector,
192.token.constant,
193.token.symbol,
194.token.builtin {
195 color: #0086c0; /* #F9EE98 */
196}
197
198.token.attr-name,
199.token.attr-value,
200.token.string,
201.token.char,
202.token.operator,
203.token.entity,
204.token.url,
205.language-css .token.string,
206.style .token.string,
207.token.variable,
208.token.inserted {
209 color: #4e94ce;
210}
211
212.token.atrule {
213 color: #4ec9b0;
214}
215
216.token.regex,
217.token.important {
218 color: #dcdcaa;
219}
220
221.token.important,
222.token.bold {
223 font-weight: bold;
224}
225.token.italic {
226 font-style: italic;
227}
228
229.token.entity {
230 cursor: help;
231}
232
233/* Markup */
234.language-markup .token.tag,
235.language-markup .token.attr-name,
236.language-markup .token.punctuation {
237 color: #4e94ce;
238}
239
240/* Make the tokens sit above the line highlight so the colours don't look faded. */
241.token {
242 position: relative;
243 z-index: 1;
244}
245
246// TODO: Style line highlights
247
248// .line-highlight.line-highlight {
249// background: hsla(0, 0%, 33%, 0.25); /* #545454 */
250// background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
251// border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
252// border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
253// margin-top: 0.75em; /* Same as .prism’s padding-top */
254// z-index: 0;
255// }
256
257// .line-highlight.line-highlight:before,
258// .line-highlight.line-highlight[data-end]:after {
259// background-color: hsl(215, 15%, 59%); /* #8794A6 */
260// color: hsl(24, 20%, 95%); /* #F5F2F0 */
261// }