diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-08-20 00:26:22 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-08-20 21:41:50 +0200 |
commit | 8995ade5145036b283e39629a25faaa9679a880e (patch) | |
tree | b3ecfbbe63075c619bc4333a578cf9745de4b041 /subprojects/frontend/index.html | |
parent | fix(frontend): CodeMirror gutter accessibility (diff) | |
download | refinery-8995ade5145036b283e39629a25faaa9679a880e.tar.gz refinery-8995ade5145036b283e39629a25faaa9679a880e.tar.zst refinery-8995ade5145036b283e39629a25faaa9679a880e.zip |
refactor(frontend): inline CSS and minify HTML
Optimize first page loading time.
We only include variable and woff2 fonts, as they are widely supported.
Diffstat (limited to 'subprojects/frontend/index.html')
-rw-r--r-- | subprojects/frontend/index.html | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html index 92cc94c7..e14e8d30 100644 --- a/subprojects/frontend/index.html +++ b/subprojects/frontend/index.html | |||
@@ -12,6 +12,268 @@ | |||
12 | <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99"> | 12 | <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99"> |
13 | <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#21252b"> | 13 | <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#21252b"> |
14 | <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"> | 14 | <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"> |
15 | <style> | ||
16 | @import '@fontsource/jetbrains-mono/variable.css'; | ||
17 | @import '@fontsource/jetbrains-mono/variable-italic.css'; | ||
18 | |||
19 | /* roboto-cyrillic-ext-300-normal*/ | ||
20 | @font-face { | ||
21 | font-family: 'Roboto'; | ||
22 | font-style: normal; | ||
23 | font-display: swap; | ||
24 | font-weight: 300; | ||
25 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2') format('woff2'); | ||
26 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
27 | } | ||
28 | /* roboto-cyrillic-300-normal*/ | ||
29 | @font-face { | ||
30 | font-family: 'Roboto'; | ||
31 | font-style: normal; | ||
32 | font-display: swap; | ||
33 | font-weight: 300; | ||
34 | src: url('@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2') format('woff2'); | ||
35 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
36 | } | ||
37 | /* roboto-greek-ext-300-normal*/ | ||
38 | @font-face { | ||
39 | font-family: 'Roboto'; | ||
40 | font-style: normal; | ||
41 | font-display: swap; | ||
42 | font-weight: 300; | ||
43 | src: url('@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2') format('woff2'); | ||
44 | unicode-range: U+1F00-1FFF; | ||
45 | } | ||
46 | /* roboto-greek-300-normal*/ | ||
47 | @font-face { | ||
48 | font-family: 'Roboto'; | ||
49 | font-style: normal; | ||
50 | font-display: swap; | ||
51 | font-weight: 300; | ||
52 | src: url('@fontsource/roboto/files/roboto-greek-300-normal.woff2') format('woff2'); | ||
53 | unicode-range: U+0370-03FF; | ||
54 | } | ||
55 | /* roboto-vietnamese-300-normal*/ | ||
56 | @font-face { | ||
57 | font-family: 'Roboto'; | ||
58 | font-style: normal; | ||
59 | font-display: swap; | ||
60 | font-weight: 300; | ||
61 | src: url('@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2') format('woff2'); | ||
62 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
63 | } | ||
64 | /* roboto-latin-ext-300-normal*/ | ||
65 | @font-face { | ||
66 | font-family: 'Roboto'; | ||
67 | font-style: normal; | ||
68 | font-display: swap; | ||
69 | font-weight: 300; | ||
70 | src: url('@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2') format('woff2'); | ||
71 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
72 | } | ||
73 | /* roboto-latin-300-normal*/ | ||
74 | @font-face { | ||
75 | font-family: 'Roboto'; | ||
76 | font-style: normal; | ||
77 | font-display: swap; | ||
78 | font-weight: 300; | ||
79 | src: url('@fontsource/roboto/files/roboto-latin-300-normal.woff2') format('woff2'); | ||
80 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
81 | } | ||
82 | /* roboto-cyrillic-ext-400-normal*/ | ||
83 | @font-face { | ||
84 | font-family: 'Roboto'; | ||
85 | font-style: normal; | ||
86 | font-display: swap; | ||
87 | font-weight: 400; | ||
88 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2') format('woff2'); | ||
89 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
90 | } | ||
91 | /* roboto-cyrillic-400-normal*/ | ||
92 | @font-face { | ||
93 | font-family: 'Roboto'; | ||
94 | font-style: normal; | ||
95 | font-display: swap; | ||
96 | font-weight: 400; | ||
97 | src: url('@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2') format('woff2'); | ||
98 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
99 | } | ||
100 | /* roboto-greek-ext-400-normal*/ | ||
101 | @font-face { | ||
102 | font-family: 'Roboto'; | ||
103 | font-style: normal; | ||
104 | font-display: swap; | ||
105 | font-weight: 400; | ||
106 | src: url('@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2') format('woff2'); | ||
107 | unicode-range: U+1F00-1FFF; | ||
108 | } | ||
109 | /* roboto-greek-400-normal*/ | ||
110 | @font-face { | ||
111 | font-family: 'Roboto'; | ||
112 | font-style: normal; | ||
113 | font-display: swap; | ||
114 | font-weight: 400; | ||
115 | src: url('@fontsource/roboto/files/roboto-greek-400-normal.woff2') format('woff2'); | ||
116 | unicode-range: U+0370-03FF; | ||
117 | } | ||
118 | /* roboto-vietnamese-400-normal*/ | ||
119 | @font-face { | ||
120 | font-family: 'Roboto'; | ||
121 | font-style: normal; | ||
122 | font-display: swap; | ||
123 | font-weight: 400; | ||
124 | src: url('@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2') format('woff2'); | ||
125 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
126 | } | ||
127 | /* roboto-latin-ext-400-normal*/ | ||
128 | @font-face { | ||
129 | font-family: 'Roboto'; | ||
130 | font-style: normal; | ||
131 | font-display: swap; | ||
132 | font-weight: 400; | ||
133 | src: url('@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2') format('woff2'); | ||
134 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
135 | } | ||
136 | /* roboto-latin-400-normal*/ | ||
137 | @font-face { | ||
138 | font-family: 'Roboto'; | ||
139 | font-style: normal; | ||
140 | font-display: swap; | ||
141 | font-weight: 400; | ||
142 | src: url('@fontsource/roboto/files/roboto-latin-400-normal.woff2') format('woff2'); | ||
143 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
144 | } | ||
145 | /* roboto-cyrillic-ext-500-normal*/ | ||
146 | @font-face { | ||
147 | font-family: 'Roboto'; | ||
148 | font-style: normal; | ||
149 | font-display: swap; | ||
150 | font-weight: 500; | ||
151 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2') format('woff2'); | ||
152 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
153 | } | ||
154 | /* roboto-cyrillic-500-normal*/ | ||
155 | @font-face { | ||
156 | font-family: 'Roboto'; | ||
157 | font-style: normal; | ||
158 | font-display: swap; | ||
159 | font-weight: 500; | ||
160 | src: url('@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2') format('woff2'); | ||
161 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
162 | } | ||
163 | /* roboto-greek-ext-500-normal*/ | ||
164 | @font-face { | ||
165 | font-family: 'Roboto'; | ||
166 | font-style: normal; | ||
167 | font-display: swap; | ||
168 | font-weight: 500; | ||
169 | src: url('@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2') format('woff2'); | ||
170 | unicode-range: U+1F00-1FFF; | ||
171 | } | ||
172 | /* roboto-greek-500-normal*/ | ||
173 | @font-face { | ||
174 | font-family: 'Roboto'; | ||
175 | font-style: normal; | ||
176 | font-display: swap; | ||
177 | font-weight: 500; | ||
178 | src: url('@fontsource/roboto/files/roboto-greek-500-normal.woff2') format('woff2'); | ||
179 | unicode-range: U+0370-03FF; | ||
180 | } | ||
181 | /* roboto-vietnamese-500-normal*/ | ||
182 | @font-face { | ||
183 | font-family: 'Roboto'; | ||
184 | font-style: normal; | ||
185 | font-display: swap; | ||
186 | font-weight: 500; | ||
187 | src: url('@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2') format('woff2'); | ||
188 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
189 | } | ||
190 | /* roboto-latin-ext-500-normal*/ | ||
191 | @font-face { | ||
192 | font-family: 'Roboto'; | ||
193 | font-style: normal; | ||
194 | font-display: swap; | ||
195 | font-weight: 500; | ||
196 | src: url('@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2') format('woff2'); | ||
197 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
198 | } | ||
199 | /* roboto-latin-500-normal*/ | ||
200 | @font-face { | ||
201 | font-family: 'Roboto'; | ||
202 | font-style: normal; | ||
203 | font-display: swap; | ||
204 | font-weight: 500; | ||
205 | src: url('@fontsource/roboto/files/roboto-latin-500-normal.woff2') format('woff2'); | ||
206 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
207 | } | ||
208 | /* roboto-cyrillic-ext-700-normal*/ | ||
209 | @font-face { | ||
210 | font-family: 'Roboto'; | ||
211 | font-style: normal; | ||
212 | font-display: swap; | ||
213 | font-weight: 700; | ||
214 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2') format('woff2'); | ||
215 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
216 | } | ||
217 | /* roboto-cyrillic-700-normal*/ | ||
218 | @font-face { | ||
219 | font-family: 'Roboto'; | ||
220 | font-style: normal; | ||
221 | font-display: swap; | ||
222 | font-weight: 700; | ||
223 | src: url('@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2') format('woff2'); | ||
224 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
225 | } | ||
226 | /* roboto-greek-ext-700-normal*/ | ||
227 | @font-face { | ||
228 | font-family: 'Roboto'; | ||
229 | font-style: normal; | ||
230 | font-display: swap; | ||
231 | font-weight: 700; | ||
232 | src: url('@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2') format('woff2'); | ||
233 | unicode-range: U+1F00-1FFF; | ||
234 | } | ||
235 | /* roboto-greek-700-normal*/ | ||
236 | @font-face { | ||
237 | font-family: 'Roboto'; | ||
238 | font-style: normal; | ||
239 | font-display: swap; | ||
240 | font-weight: 700; | ||
241 | src: url('@fontsource/roboto/files/roboto-greek-700-normal.woff2') format('woff2'); | ||
242 | unicode-range: U+0370-03FF; | ||
243 | } | ||
244 | /* roboto-vietnamese-700-normal*/ | ||
245 | @font-face { | ||
246 | font-family: 'Roboto'; | ||
247 | font-style: normal; | ||
248 | font-display: swap; | ||
249 | font-weight: 700; | ||
250 | src: url('@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2') format('woff2'); | ||
251 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
252 | } | ||
253 | /* roboto-latin-ext-700-normal*/ | ||
254 | @font-face { | ||
255 | font-family: 'Roboto'; | ||
256 | font-style: normal; | ||
257 | font-display: swap; | ||
258 | font-weight: 700; | ||
259 | src: url('@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2') format('woff2'); | ||
260 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
261 | } | ||
262 | /* roboto-latin-700-normal*/ | ||
263 | @font-face { | ||
264 | font-family: 'Roboto'; | ||
265 | font-style: normal; | ||
266 | font-display: swap; | ||
267 | font-weight: 700; | ||
268 | src: url('@fontsource/roboto/files/roboto-latin-700-normal.woff2') format('woff2'); | ||
269 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
270 | } | ||
271 | |||
272 | body { | ||
273 | color: #ebebff; | ||
274 | background: #282c34; | ||
275 | } | ||
276 | </style> | ||
15 | </head> | 277 | </head> |
16 | <body> | 278 | <body> |
17 | <noscript> | 279 | <noscript> |