[Org] Repository for my personal website.
CSS reorg.
Changed files
resources/css-cv.org
@@ -0,0 +1,422 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: CV CSS file
4
Added:
#+SUBTITLE: CV and resumé styling informations.
5
Added:
#+AUTHOR: Marius Peter
6
Added:
#+DATE: <2022-09-24 Sat>
7
Added:
#+OPTIONS: toc:nil
8
Added:
#+PROPERTY: header-args :tangle cv.css
9
Added:
10
Added:
#+DESCRIPTION: Styling information for my CV and resumé.
11
Added:
#+KEYWORDS: org-mode emacs blendux mlnp literate programming cv resume
12
Added:
13
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="global.css" />
14
Added:
#+HTML_HEAD: <link rel="icon" type="image/png" href="resources/favicon.png"/>
15
Added:
#+INCLUDE: topnav.html export html
16
Added:
17
Added:
#+TOC: headlines 2
18
Added:
19
Added:
20
Added:
#+begin_abstract
21
Added:
This page describes styling information for my CV and resumé.
22
Added:
#+end_abstract
23
Added:
24
Added:
25
Added:
* First level heading
26
Added:
SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
27
Added:
28
Added:
** Second level heading
29
Added:
<2022-02-18 Fri>
30
Added:
31
Added:
*** Third level heading
32
Added:
<2022-02-18 Fri 12:48>
33
Added:
34
Added:
**** Fourth level heading. This is styled like a list item by default.
35
Added:
36
Added:
- Itemized list.
37
Added:
- This is the second item.
38
Added:
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
39
Added:
40
Added:
| Category | Value |
41
Added:
|----------+-----------------|
42
Added:
| 1 | A first value. |
43
Added:
| 2 | A second value. |
44
Added:
| 3 | A third value! |
45
Added:
46
Added:
47
Added:
* Global definitions
48
Added:
49
Added:
#+BEGIN_SRC css
50
Added:
body {
51
Added:
margin: 0;
52
Added:
}
53
Added:
#+END_SRC
54
Added:
55
Added:
56
Added:
** Colors
57
Added:
58
Added:
Declaring individual one-liner color rules enables efficient searching
59
Added:
for the relevant properties.
60
Added:
61
Added:
62
Added:
*** Variables
63
Added:
64
Added:
These colors variables can be accessed anywhere in the rest of the stylesheet.
65
Added:
66
Added:
#+NAME: colors
67
Added:
#+BEGIN_SRC css
68
Added:
:root {
69
Added:
--main: dodgerblue;
70
Added:
--accent: royalblue;
71
Added:
}
72
Added:
#+END_SRC
73
Added:
74
Added:
75
Added:
*** Background
76
Added:
77
Added:
We assign colors to the page element backgrounds.
78
Added:
79
Added:
#+BEGIN_SRC css
80
Added:
body { background: black; }
81
Added:
#content { background: white; }
82
Added:
.outline-2 { background: linear-gradient(90deg, powderblue, white 350px); }
83
Added:
h2 { background: inherit; } /* This is the most elegant solution for wide + narrow screens. */
84
Added:
h3:hover { background: dodgerblue; }
85
Added:
.outline-3 { background: white; }
86
Added:
/* .timestamp { background: var(--main); } */
87
Added:
/* .title { background: var(--main); } */
88
Added:
/* #topnav { background: var(--main); } */
89
Added:
/* .button { background: var(--accent); } */
90
Added:
/* #topnav #hamburger { background: var(--accent); } */
91
Added:
/* #topnav #hamburger:hover { background: white; } */
92
Added:
/* #topnav #hamburger:hover .line { background: var(--main); } */
93
Added:
/* #topnav .button:hover { background: white; } */
94
Added:
/* #shadow { background: black; } */
95
Added:
/* thead { background: var(--main); } */
96
Added:
/* #topnav ul a:hover { background: white; } */
97
Added:
/* #org-div-home-and-up { background: var(--main); } */
98
Added:
/* #org-div-home-and-up a:hover { background: white; } */
99
Added:
/* #postamble { background: var(--main); } */
100
Added:
/* #outline-container-main-content .outline-3 { background: white; } */
101
Added:
#+END_SRC
102
Added:
103
Added:
104
Added:
*** Foreground
105
Added:
106
Added:
#+NAME: foreground
107
Added:
#+BEGIN_SRC css
108
Added:
h3:hover { color: white; }
109
Added:
/* .timestamp { color: white; } */
110
Added:
/* .title { color: white; } */
111
Added:
/* .subtitle { color: lightgray; } */
112
Added:
/* .button { color: white; } */
113
Added:
/* #topnav #hamburger { color: white; } */
114
Added:
/* #topnav #hamburger:hover { color: var(--accent); } */
115
Added:
/* #topnav .button:hover { color: var(--accent); } */
116
Added:
/* #topnav ul a { color: white; } */
117
Added:
/* #topnav ul a:hover { color: var(--accent); } */
118
Added:
/* #org-div-home-and-up, */
119
Added:
/* #org-div-home-and-up a { color: white; } */
120
Added:
/* #org-div-home-and-up a:hover { color: var(--accent); } */
121
Added:
/* #postamble { color: white; } */
122
Added:
/* thead { color: white; } */
123
Added:
#+END_SRC
124
Added:
125
Added:
126
Added:
** Typefaces
127
Added:
128
Added:
In the following section, we specify the fonts used across the
129
Added:
website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
130
Added:
131
Added:
- Public Sans :: A modern, smart sans serif font created by the
132
Added:
[[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
133
Added:
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
134
Added:
type*]]. I use it for page title and subtitle.
135
Added:
- Hack :: A monospace typeface designed for source code. I love its
136
Added:
legible characters and wide coverage, I use it frequently as a
137
Added:
terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
138
Added:
- Monoisome :: An alternative monospace typeface with great support
139
Added:
for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
140
Added:
141
Added:
142
Added:
We use the following fonts for other scripts:
143
Added:
144
Added:
- Cairo :: A simple, sans-serif typeface for Arabic script.
145
Added:
- Jost :: This font has good support for Cyrillic script.
146
Added:
147
Added:
148
Added:
*** Sans
149
Added:
150
Added:
#+NAME: faces-sans
151
Added:
#+BEGIN_SRC css
152
Added:
@font-face {
153
Added:
font-family: "Public Sans";
154
Added:
src: url("fonts/PublicSans-Regular.otf");
155
Added:
}
156
Added:
@font-face {
157
Added:
font-family: "Jost";
158
Added:
src: url("fonts/Jost-Regular.ttf");
159
Added:
}
160
Added:
#+END_SRC
161
Added:
162
Added:
163
Added:
*** Serif
164
Added:
165
Added:
#+NAME: faces-serif
166
Added:
#+BEGIN_SRC css
167
Added:
/* None for now! */
168
Added:
#+END_SRC
169
Added:
170
Added:
171
Added:
*** Monospace
172
Added:
173
Added:
#+NAME: faces-monospace
174
Added:
#+BEGIN_SRC css
175
Added:
@font-face {
176
Added:
font-family: "Hack";
177
Added:
src: url("fonts/Hack-Regular.ttf");
178
Added:
}
179
Added:
@font-face {
180
Added:
font-family: "Monoisome";
181
Added:
src: url("fonts/Monoisome-Regular.ttf");
182
Added:
}
183
Added:
#+END_SRC
184
Added:
185
Added:
186
Added:
*** Assigning fonts to elements
187
Added:
188
Added:
We apply the previously defined font faces to the page elements.
189
Added:
190
Added:
#+NAME: fonts
191
Added:
#+BEGIN_SRC css
192
Added:
#content { font-family: "Public Sans", sans-serif; }
193
Added:
.title,
194
Added:
h1, h2,
195
Added:
h3 { font-family: "Jost", sans-serif; }
196
Added:
pre,
197
Added:
code, .src,
198
Added:
.timestamp, #explainer { font-family: "Hack", monospace; }
199
Added:
/* pre { font-size: 0.8em; line-height: 1em; } */
200
Added:
#+END_SRC
201
Added:
202
Added:
203
Added:
*** Font sizes
204
Added:
205
Added:
#+NAME: font-sizes
206
Added:
#+BEGIN_SRC css
207
Added:
body {
208
Added:
font-size: 11pt;
209
Added:
}
210
Added:
.title {
211
Added:
font-size: 24pt;
212
Added:
}
213
Added:
.subtitle {
214
Added:
font-size: 16pt;
215
Added:
}
216
Added:
h2 {
217
Added:
font-size: 16pt;
218
Added:
}
219
Added:
h3 {
220
Added:
font-size: 14pt;
221
Added:
}
222
Added:
#+END_SRC
223
Added:
224
Added:
225
Added:
* Main content
226
Added:
227
Added:
** All content
228
Added:
229
Added:
The following rules concerns all the content displayed on the page.
230
Added:
231
Added:
#+BEGIN_SRC css
232
Added:
#content {
233
Added:
max-width: 210mm;
234
Added:
min-width: 150mm;
235
Added:
/* height: 297mm; */
236
Added:
margin: auto;
237
Added:
padding: 2cm;
238
Added:
}
239
Added:
#+END_SRC
240
Added:
241
Added:
The following rule concerns all children (not /all/ descendants!) of
242
Added:
the main ~#content~ section, except for the title and topnav sections.
243
Added:
244
Added:
#+BEGIN_SRC css
245
Added:
.abstract, .outline-2 {
246
Added:
line-height: 1.2em;
247
Added:
}
248
Added:
#+END_SRC
249
Added:
250
Added:
251
Added:
** Title and subtitle
252
Added:
253
Added:
#+BEGIN_SRC css
254
Added:
.title {
255
Added:
margin-top: 0;
256
Added:
margin-bottom: 0;
257
Added:
text-align: center;
258
Added:
}
259
Added:
#+END_SRC
260
Added:
261
Added:
262
Added:
** Table of Contents
263
Added:
264
Added:
#+begin_src css
265
Added:
#table-of-contents {
266
Added:
text-align: center;
267
Added:
}
268
Added:
#table-of-contents h2 {
269
Added:
}
270
Added:
#table-of-contents ul {
271
Added:
list-style-type: none;
272
Added:
}
273
Added:
274
Added:
#+end_src
275
Added:
276
Added:
277
Added:
** Abstract
278
Added:
279
Added:
#+BEGIN_SRC css
280
Added:
.abstract {
281
Added:
font-style: italic;
282
Added:
text-align: justify;
283
Added:
max-width: 26em;
284
Added:
margin: auto;
285
Added:
}
286
Added:
#+END_SRC
287
Added:
288
Added:
289
Added:
** Image
290
Added:
291
Added:
#+begin_src css
292
Added:
.figure {
293
Added:
width: 128px;
294
Added:
margin: auto;
295
Added:
}
296
Added:
img {
297
Added:
width: 128px;
298
Added:
border-radius: 64px;
299
Added:
}
300
Added:
#+end_src
301
Added:
302
Added:
303
Added:
** Actions
304
Added:
305
Added:
Actions are only displayed in the web version (cf. [[Printing]] for
306
Added:
inhibition).
307
Added:
308
Added:
#+BEGIN_SRC css
309
Added:
.actions {
310
Added:
display: flex;
311
Added:
flex-wrap: wrap;
312
Added:
margin: 1em 0;
313
Added:
gap: 1em;
314
Added:
}
315
Added:
#+END_SRC
316
Added:
317
Added:
318
Added:
** Main sections
319
Added:
320
Added:
#+BEGIN_SRC css
321
Added:
.outline-2 {
322
Added:
display: grid;
323
Added:
grid-template-columns: 10em auto;
324
Added:
}
325
Added:
h2 {
326
Added:
position: sticky;
327
Added:
top: 0;
328
Added:
max-height: 3em;
329
Added:
margin: 0;
330
Added:
padding: 1rem;
331
Added:
}
332
Added:
.outline-text-2 {
333
Added:
display: none;
334
Added:
}
335
Added:
#+END_SRC
336
Added:
337
Added:
338
Added:
** Subsections
339
Added:
340
Added:
#+BEGIN_SRC css
341
Added:
.outline-3 {
342
Added:
grid-column: 2;
343
Added:
margin: 1rem;
344
Added:
}
345
Added:
h3 {
346
Added:
padding: 1rem;
347
Added:
margin: 0;
348
Added:
}
349
Added:
h3:hover {
350
Added:
cursor: pointer;
351
Added:
}
352
Added:
.outline-text-3 {
353
Added:
/* display: none; */
354
Added:
padding: 0 1rem;
355
Added:
}
356
Added:
#+END_SRC
357
Added:
358
Added:
359
Added:
** Timestamps
360
Added:
361
Added:
<2022-02-14 Mon>--<2022-02-21 Mon>
362
Added:
363
Added:
#+BEGIN_SRC css
364
Added:
.timestamp {
365
Added:
display: inline-block;
366
Added:
padding: 0 0.2em;
367
Added:
border-radius: 8px;
368
Added:
white-space: nowrap;
369
Added:
}
370
Added:
#+END_SRC
371
Added:
372
Added:
373
Added:
** Preformatted text
374
Added:
375
Added:
#+begin_src css
376
Added:
pre {
377
Added:
overflow-x: scroll;
378
Added:
}
379
Added:
#+end_src
380
Added:
381
Added:
382
Added:
* Narrow screens
383
Added:
384
Added:
#+begin_src css
385
Added:
@media only screen and (max-width: 750px) {
386
Added:
#content {
387
Added:
min-width: unset;
388
Added:
padding: 0.5cm;
389
Added:
}
390
Added:
.outline-2 {
391
Added:
display: flex;
392
Added:
flex-direction: column;
393
Added:
}
394
Added:
}
395
Added:
#+end_src
396
Added:
397
Added:
398
Added:
* Printing
399
Added:
400
Added:
The following styling information ensures that the printed version of
401
Added:
the web page renders as accurately as possible on printed media. I am
402
Added:
targeting A4 sheet dimensions.
403
Added:
404
Added:
#+BEGIN_SRC css
405
Added:
@page {
406
Added:
size: A4 portrait;
407
Added:
margin: 2cm;
408
Added:
}
409
Added:
@media print {
410
Added:
body {
411
Added:
padding: 0;
412
Added:
background: none;
413
Added:
}
414
Added:
#content {
415
Added:
padding: 0; /* When printed, padding is controlled by @page margin */
416
Added:
width: 100%;
417
Added:
}
418
Added:
.actions {
419
Added:
display: none;
420
Added:
}
421
Added:
}
422
Added:
#+END_SRC
resources/css-global.org
@@ -0,0 +1,794 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: Global CSS file
4
Added:
#+SUBTITLE: Site-wide styling informations.
5
Added:
#+AUTHOR: Marius Peter
6
Added:
#+DATE: <2022-01-30 Sun>
7
Added:
#+OPTIONS: toc:nil
8
Added:
#+PROPERTY: header-args :tangle global.css
9
Added:
10
Added:
#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, blog.mlnp.fr, and apps.mlnp.fr.
11
Added:
#+KEYWORDS: org-mode emacs blendux mlnp wiki blog apps literate programming css
12
Added:
13
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="global.css" />
14
Added:
#+HTML_HEAD: <link rel="icon" type="image/png" href="resources/favicon.png"/>
15
Added:
#+INCLUDE: topnav.html export html
16
Added:
17
Added:
#+TOC: headlines 2
18
Added:
19
Added:
20
Added:
#+begin_abstract
21
Added:
This page describes the /entire/ website's styling
22
Added:
*information*. After experimenting with =flexbox= and =grid= layouts,
23
Added:
I decided to go with a plain linear document flow. This maximizes
24
Added:
design legibility and the accessibility of affordances. The beginning
25
Added:
of this document contains a placeholder section for test purposes.
26
Added:
#+end_abstract
27
Added:
28
Added:
29
Added:
* First level heading
30
Added:
SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
31
Added:
32
Added:
** Second level heading
33
Added:
<2022-02-18 Fri>
34
Added:
35
Added:
*** Third level heading
36
Added:
<2022-02-18 Fri 12:48>
37
Added:
38
Added:
**** Fourth level heading. This is styled like a list item by default.
39
Added:
40
Added:
- Itemized list.
41
Added:
- This is the second item.
42
Added:
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
43
Added:
44
Added:
| Category | Value |
45
Added:
|----------+-----------------|
46
Added:
| 1 | A first value. |
47
Added:
| 2 | A second value. |
48
Added:
| 3 | A third value! |
49
Added:
50
Added:
51
Added:
* Global definitions
52
Added:
<2022-02-11 Fri>
53
Added:
54
Added:
These styles apply across the entire website, to every element.
55
Added:
56
Added:
#+BEGIN_SRC css
57
Added:
body {
58
Added:
background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
59
Added:
background-attachment: fixed;
60
Added:
margin: 0;
61
Added:
overflow-x: hidden;
62
Added:
}
63
Added:
#+END_SRC
64
Added:
65
Added:
66
Added:
** Colors
67
Added:
68
Added:
Declaring individual one-liner color rules enables efficient searching
69
Added:
for the relevant properties.
70
Added:
71
Added:
72
Added:
*** Variables
73
Added:
74
Added:
These colors variables can be accessed anywhere in the rest of the stylesheet.
75
Added:
76
Added:
#+NAME: colors
77
Added:
#+BEGIN_SRC css
78
Added:
:root {
79
Added:
--main: dodgerblue;
80
Added:
--accent: royalblue;
81
Added:
}
82
Added:
#+END_SRC
83
Added:
84
Added:
85
Added:
*** Background
86
Added:
87
Added:
We assign colors to the page element backgrounds.
88
Added:
89
Added:
#+BEGIN_SRC css
90
Added:
.todo { background: tomato; }
91
Added:
.done { background: forestgreen; }
92
Added:
.timestamp { background: var(--main); }
93
Added:
.title { background: var(--main); }
94
Added:
#topnav { background: var(--main); }
95
Added:
.button { background: var(--accent); }
96
Added:
#topnav #hamburger { background: var(--accent); }
97
Added:
#topnav #hamburger:hover { background: white; }
98
Added:
#topnav #hamburger:hover .line { background: var(--main); }
99
Added:
#topnav .button:hover { background: white; }
100
Added:
#shadow { background: black; }
101
Added:
thead { background: var(--main); }
102
Added:
#topnav ul a:hover { background: white; }
103
Added:
#org-div-home-and-up { background: var(--main); }
104
Added:
#org-div-home-and-up a:hover { background: white; }
105
Added:
#postamble { background: var(--main); }
106
Added:
#outline-container-main-content .outline-3 { background: white; }
107
Added:
#+END_SRC
108
Added:
109
Added:
110
Added:
*** Foreground
111
Added:
112
Added:
#+NAME: foreground
113
Added:
#+BEGIN_SRC css
114
Added:
.todo, .done { color: white; }
115
Added:
.timestamp { color: white; }
116
Added:
.title { color: white; }
117
Added:
.subtitle { color: lightgray; }
118
Added:
.button { color: white; }
119
Added:
#topnav #hamburger { color: white; }
120
Added:
#topnav #hamburger:hover { color: var(--accent); }
121
Added:
#topnav .button:hover { color: var(--accent); }
122
Added:
#topnav ul a { color: white; }
123
Added:
#topnav ul a:hover { color: var(--accent); }
124
Added:
#org-div-home-and-up,
125
Added:
#org-div-home-and-up a { color: white; }
126
Added:
#org-div-home-and-up a:hover { color: var(--accent); }
127
Added:
#postamble { color: white; }
128
Added:
thead { color: white; }
129
Added:
#+END_SRC
130
Added:
131
Added:
132
Added:
** Typefaces
133
Added:
134
Added:
In the following section, we specify the fonts used across the
135
Added:
website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
136
Added:
137
Added:
- Public Sans :: A modern, smart sans serif font created by the
138
Added:
[[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
139
Added:
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
140
Added:
type*]]. I use it for page title and subtitle.
141
Added:
- Hack :: A monospace typeface designed for source code. I love its
142
Added:
legible characters and wide coverage, I use it frequently as a
143
Added:
terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
144
Added:
- Monoisome :: An alternative monospace typeface with great support
145
Added:
for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
146
Added:
147
Added:
148
Added:
We use the following fonts for other scripts:
149
Added:
150
Added:
- Cairo :: A simple, sans-serif typeface for Arabic script.
151
Added:
- Jost :: This font has good support for Cyrillic script.
152
Added:
153
Added:
154
Added:
*** Sans
155
Added:
156
Added:
#+NAME: faces-sans
157
Added:
#+BEGIN_SRC css
158
Added:
@font-face {
159
Added:
font-family: "Public Sans";
160
Added:
src: url("fonts/PublicSans-Regular.otf");
161
Added:
}
162
Added:
@font-face {
163
Added:
font-family: "Jost";
164
Added:
src: url("fonts/Jost-Regular.ttf");
165
Added:
}
166
Added:
@font-face {
167
Added:
font-family: "Cairo";
168
Added:
src: url("fonts/Cairo-Regular.ttf");
169
Added:
}
170
Added:
@font-face {
171
Added:
font-family: "Amiri";
172
Added:
src: url("fonts/Amiri-Regular.ttf");
173
Added:
}
174
Added:
#+END_SRC
175
Added:
176
Added:
177
Added:
*** Serif
178
Added:
179
Added:
#+NAME: faces-serif
180
Added:
#+BEGIN_SRC css
181
Added:
/* None for now! */
182
Added:
#+END_SRC
183
Added:
184
Added:
185
Added:
*** Monospace
186
Added:
187
Added:
#+NAME: faces-monospace
188
Added:
#+BEGIN_SRC css
189
Added:
@font-face {
190
Added:
font-family: "Hack";
191
Added:
src: url("fonts/Hack-Regular.ttf");
192
Added:
}
193
Added:
@font-face {
194
Added:
font-family: "Monoisome";
195
Added:
src: url("fonts/Monoisome-Regular.ttf");
196
Added:
}
197
Added:
#+END_SRC
198
Added:
199
Added:
200
Added:
*** Assigning fonts to elements
201
Added:
202
Added:
We apply the previously defined font faces to the page elements.
203
Added:
204
Added:
#+NAME: fonts
205
Added:
#+BEGIN_SRC css
206
Added:
#content { font-family: "Public Sans", sans-serif; }
207
Added:
.title,
208
Added:
h1, h2,
209
Added:
h3, h4,
210
Added:
#org-div-home-and-up,
211
Added:
#topnav { font-family: "Jost", sans-serif; }
212
Added:
pre,
213
Added:
code, .src,
214
Added:
.timestamp,
215
Added:
#postamble { font-family: "Hack", monospace; }
216
Added:
pre { font-size: 0.8em; line-height: 1em; }
217
Added:
#+END_SRC
218
Added:
219
Added:
220
Added:
** TODO Tab-select styling
221
Added:
222
Added:
Tab-selected content must appear with a wide, contrasted border. This
223
Added:
is an accessiblity concern.
224
Added:
225
Added:
#+BEGIN_SRC css
226
Added:
a:focus {
227
Added:
border: 0.2em solid aquamarine;
228
Added:
}
229
Added:
#+END_SRC
230
Added:
231
Added:
232
Added:
* Homepage
233
Added:
234
Added:
Certains homepage sections are styled uniquely, for visual impact.
235
Added:
236
Added:
#+begin_src css
237
Added:
#main-content, #text-main-content {
238
Added:
display: none;
239
Added:
}
240
Added:
#outline-container-main-content {
241
Added:
display: flex;
242
Added:
flex-direction: row;
243
Added:
flex-wrap: wrap;
244
Added:
margin-top: 1em;
245
Added:
gap: 1em;
246
Added:
}
247
Added:
#outline-container-main-content .outline-3 {
248
Added:
max-width: 12em;
249
Added:
padding: 0 1em;
250
Added:
border-radius: 8px;
251
Added:
border: 3px solid var(--main);
252
Added:
}
253
Added:
#+end_src
254
Added:
255
Added:
256
Added:
* TODO Main content
257
Added:
258
Added:
The following rules concerns all the content displayed on the
259
Added:
page. Most notably, we hide the mobile navigation buttons, which are
260
Added:
hidden to the left and right of the top navigation bar on the desktop
261
Added:
version.
262
Added:
263
Added:
#+BEGIN_SRC css
264
Added:
#content {
265
Added:
max-width: 100%; /* This was set to 60em in Emacs 28.1 */
266
Added:
}
267
Added:
p { text-align: justify; }
268
Added:
#+END_SRC
269
Added:
270
Added:
271
Added:
** Sections
272
Added:
273
Added:
The following rule concerns all children (not /all/ descendants!) of
274
Added:
the main ~#content~ section, except for the title and topnav sections.
275
Added:
276
Added:
#+BEGIN_SRC css
277
Added:
#content > :not(.title, #topnav) {
278
Added:
line-height: 1.5em;
279
Added:
width: 80%;
280
Added:
margin: auto;
281
Added:
}
282
Added:
#+END_SRC
283
Added:
284
Added:
285
Added:
** `Home' and `Up' links
286
Added:
287
Added:
#+BEGIN_SRC css
288
Added:
#org-div-home-and-up {
289
Added:
position: sticky;
290
Added:
top: 0;
291
Added:
z-index: 100;
292
Added:
padding: 0.5em;
293
Added:
font-size: large;
294
Added:
}
295
Added:
#org-div-home-and-up a {
296
Added:
text-decoration: none;
297
Added:
padding: 0.5em;
298
Added:
font-family: "Jost", sans-serif;
299
Added:
}
300
Added:
#+END_SRC
301
Added:
302
Added:
303
Added:
** Title and subtitle
304
Added:
305
Added:
#+BEGIN_SRC css
306
Added:
.title {
307
Added:
margin-top: 0;
308
Added:
margin-bottom: 0;
309
Added:
padding-top: 0.5em;
310
Added:
padding-bottom: 0.5em;
311
Added:
}
312
Added:
#+END_SRC
313
Added:
314
Added:
315
Added:
** Abstract
316
Added:
317
Added:
#+begin_src css
318
Added:
.abstract {
319
Added:
font-style: italic;
320
Added:
}
321
Added:
#+end_src
322
Added:
323
Added:
324
Added:
** Table of contents
325
Added:
326
Added:
The table of contents exported to HTML from Org mode takes the form of
327
Added:
an unordered list. We suppress bullet points that would otherwise
328
Added:
appear before each entry.
329
Added:
330
Added:
#+BEGIN_SRC css
331
Added:
#table-of-contents h2 {
332
Added:
position: revert;
333
Added:
}
334
Added:
#table-of-contents ul {
335
Added:
list-style-type: none;
336
Added:
}
337
Added:
#+END_SRC
338
Added:
339
Added:
340
Added:
** Subsections
341
Added:
342
Added:
#+begin_src css
343
Added:
.outline-2 {
344
Added:
display: grid;
345
Added:
grid-template-columns: 10em auto;
346
Added:
grid-gap: 1em;
347
Added:
}
348
Added:
h2 {
349
Added:
grid-column: 1;
350
Added:
position: sticky;
351
Added:
top: 4rem;
352
Added:
}
353
Added:
#+end_src
354
Added:
355
Added:
356
Added:
** Subsubsections
357
Added:
358
Added:
#+begin_src css
359
Added:
.outline-3 {
360
Added:
grid-column: 2;
361
Added:
}
362
Added:
#+end_src
363
Added:
364
Added:
365
Added:
** Tables
366
Added:
367
Added:
Tables are susceptible to becoming very wide and tall. I choose to
368
Added:
make big tables fit in a predetermined footprint so as not to disrupt
369
Added:
document flow. This ensures we can scroll to the following section
370
Added:
without having to scroll the entire table.
371
Added:
372
Added:
Using the ~block~ display property has the additional benefit of
373
Added:
displaying a black border around the table; this provides an
374
Added:
additional visual cue that we have reached the table's horizontal or
375
Added:
vertical extremity.
376
Added:
377
Added:
#+BEGIN_SRC css
378
Added:
.big-table {
379
Added:
display: block;
380
Added:
max-height: 20em;
381
Added:
max-width: 100%;
382
Added:
overflow: auto;
383
Added:
scrollbar-width: thin;
384
Added:
}
385
Added:
table caption {
386
Added:
margin: 0.5em;
387
Added:
/* background: steelblue; */
388
Added:
}
389
Added:
#+END_SRC
390
Added:
391
Added:
392
Added:
** Images
393
Added:
394
Added:
#+BEGIN_SRC css
395
Added:
.figure img { max-width: 100%; min-width: 30%; }
396
Added:
#+END_SRC
397
Added:
398
Added:
399
Added:
** Workflow states
400
Added:
401
Added:
Here, we define styling for TODO, DONE and other workflow state
402
Added:
keywords.
403
Added:
404
Added:
#+BEGIN_SRC css
405
Added:
.todo, .done {
406
Added:
/* line-height: 1em; */
407
Added:
font-weight: bold;
408
Added:
padding: 0 0.2em;
409
Added:
border-radius: 4px;
410
Added:
display: inline-block;
411
Added:
}
412
Added:
#+END_SRC
413
Added:
414
Added:
415
Added:
** Timestamps
416
Added:
417
Added:
<2022-02-14 Mon>--<2022-02-21 Mon>
418
Added:
419
Added:
#+BEGIN_SRC css
420
Added:
.timestamp {
421
Added:
display: inline-block;
422
Added:
padding: 0 0.2em;
423
Added:
border-radius: 8px;
424
Added:
white-space: nowrap;
425
Added:
}
426
Added:
#+END_SRC
427
Added:
428
Added:
429
Added:
** Anchor links
430
Added:
431
Added:
Because of the sticky header, we require all content that can be
432
Added:
jumped to on the page to appear at an offset below this header.
433
Added:
434
Added:
#+BEGIN_SRC css
435
Added:
h1, h2,
436
Added:
h3, h4,
437
Added:
h5, h6,
438
Added:
#table-of-contents,
439
Added:
table { scroll-margin-top: 4rem; }
440
Added:
#+END_SRC
441
Added:
442
Added:
443
Added:
** Postamble
444
Added:
445
Added:
#+BEGIN_SRC css
446
Added:
#postamble {
447
Added:
width: 18em;
448
Added:
margin: 1em auto;
449
Added:
padding: 1em;
450
Added:
border-radius: 8px;
451
Added:
}
452
Added:
#+END_SRC
453
Added:
454
Added:
455
Added:
* Responsive top navigation bar
456
Added:
457
Added:
On wide screens, the top navigation bar contains links to the other
458
Added:
top-level website pages. On narrow screens, it contains buttons that
459
Added:
act as shortcuts to the website's home, the page's table of contents,
460
Added:
and links to the other top-level website pages which are accessible
461
Added:
via a hamburger menu.
462
Added:
463
Added:
#+NAME: navbar
464
Added:
#+BEGIN_SRC css
465
Added:
#topnav {
466
Added:
z-index: 100;
467
Added:
position: sticky;
468
Added:
top: 0;
469
Added:
}
470
Added:
#+END_SRC
471
Added:
472
Added:
473
Added:
** Components
474
Added:
475
Added:
In this section, we define the appearance of the components contained
476
Added:
inside the top navigation bar.
477
Added:
478
Added:
479
Added:
*** Hamburger menu
480
Added:
481
Added:
As of 2022, hamburger menus are still a contentious topic among UX
482
Added:
designers. It was previously celebrated by mobile designers for its
483
Added:
compact appearance and now universally recognizable function, however,
484
Added:
studies by Google show increased user engagement with interfaces
485
Added:
displaying the possible links or actions as tabs at the bottom of the
486
Added:
interface. I like hamburgers and wanted to challenge my CSS design
487
Added:
skills, so I went with this menu implementation.
488
Added:
489
Added:
In the website's mobile version, the hamburger menu will capture the
490
Added:
top-level navigation links to declutter the top navigation bar.
491
Added:
492
Added:
493
Added:
**** Suppressing the menu checkbox
494
Added:
495
Added:
The checkbox used to toggle the menu is never displayed. We use the
496
Added:
~#hamburger~ and ~#shadow~ labels to toggle the menu instead.
497
Added:
498
Added:
#+BEGIN_SRC css
499
Added:
#menu-toggle { display: none; }
500
Added:
#+END_SRC
501
Added:
502
Added:
503
Added:
**** Design
504
Added:
505
Added:
The hamburger menu is comprised of three ~div~ elements with class
506
Added:
~.line~ stacked on top of each other, with IDs ~#one~, ~#two~, and
507
Added:
~#three~ respectively.
508
Added:
509
Added:
#+BEGIN_SRC css
510
Added:
#topnav #hamburger {
511
Added:
position: absolute;
512
Added:
right: 0;
513
Added:
margin: 0.5em;
514
Added:
padding: 0.5em;
515
Added:
height: 1.5em;
516
Added:
width: 1.5em;
517
Added:
border-radius: 8px;
518
Added:
}
519
Added:
#topnav #hamburger .line {
520
Added:
position: relative;
521
Added:
height: 0.2em;
522
Added:
width: 100%;
523
Added:
margin: 0.2em auto;
524
Added:
background: white;
525
Added:
border-radius: 2px;
526
Added:
}
527
Added:
#+END_SRC
528
Added:
529
Added:
530
Added:
**** Animation
531
Added:
532
Added:
Our juicy hamburger should transform into a cross when activated, and
533
Added:
regain its meaty appearance when deactivated. Modern CSS engines are
534
Added:
powerful enough to animate individual icon components, enabling richer
535
Added:
visuals effects and enhanced affordance cues.
536
Added:
537
Added:
538
Added:
***** Hamburger
539
Added:
540
Added:
#+BEGIN_SRC css
541
Added:
#menu-toggle:not(:checked) ~ #hamburger #one {
542
Added:
transform: translateY(0) rotate(0);
543
Added:
transition: transform 0.2s;
544
Added:
}
545
Added:
#menu-toggle:not(:checked) ~ #hamburger #two {
546
Added:
transition: opacity 0.2s;
547
Added:
opacity: 1;
548
Added:
}
549
Added:
#menu-toggle:not(:checked) ~ #hamburger #three {
550
Added:
transform: translateY(0) rotate(0);
551
Added:
transition: transform 0.2s;
552
Added:
}
553
Added:
554
Added:
#+END_SRC
555
Added:
556
Added:
557
Added:
***** Cross
558
Added:
559
Added:
#+BEGIN_SRC css
560
Added:
#menu-toggle:checked ~ #hamburger #one {
561
Added:
transform: translateY(0.4em) rotate(-45deg);
562
Added:
transition: transform 0.2s;
563
Added:
}
564
Added:
#menu-toggle:checked ~ #hamburger #two {
565
Added:
transition: opacity 0.2s;
566
Added:
opacity: 0;
567
Added:
}
568
Added:
#menu-toggle:checked ~ #hamburger #three {
569
Added:
transform: translateY(-0.4em) rotate(45deg);
570
Added:
transition: transform 0.2s;
571
Added:
}
572
Added:
#+END_SRC
573
Added:
574
Added:
575
Added:
576
Added:
577
Added:
*** Navigation buttons
578
Added:
579
Added:
These buttons appear in the website's narrow version. They present
580
Added:
useful shorcuts to the user, namely links to the homepage and to the
581
Added:
current page's table of contents.
582
Added:
583
Added:
#+BEGIN_SRC css
584
Added:
#buttons {
585
Added:
position: absolute;
586
Added:
margin: 0.5em;
587
Added:
padding: 0.5em 0;
588
Added:
}
589
Added:
.button {
590
Added:
text-decoration: none;
591
Added:
border-radius: 0 8px 8px 0;
592
Added:
padding: 0.5em;
593
Added:
}
594
Added:
#+END_SRC
595
Added:
596
Added:
597
Added:
** Wide screens
598
Added:
599
Added:
600
Added:
*** Top navigation links---wide
601
Added:
602
Added:
On wide screens, top-level links appears as a banner right under the
603
Added:
page title.
604
Added:
605
Added:
#+BEGIN_SRC css
606
Added:
#topnav ul {
607
Added:
display: flex;
608
Added:
flex-direction: row;
609
Added:
justify-content: center;
610
Added:
position: relative;
611
Added:
list-style-type: none;
612
Added:
padding: 0.5em;
613
Added:
margin: 0;
614
Added:
}
615
Added:
#topnav ul a {
616
Added:
padding: 0.5em;
617
Added:
text-decoration: none;
618
Added:
}
619
Added:
#+END_SRC
620
Added:
621
Added:
622
Added:
*** Hide navigation buttons
623
Added:
624
Added:
When the top navigation bar is wide, the navigation buttons are hidden
625
Added:
from the viewport.
626
Added:
627
Added:
#+NAME: wide-hidden-buttons
628
Added:
#+BEGIN_SRC css
629
Added:
#buttons {
630
Added:
transform: translateX(-200%);
631
Added:
}
632
Added:
#+END_SRC
633
Added:
634
Added:
635
Added:
*** Hide hamburger menu
636
Added:
637
Added:
The hamburger menu is tucked out of sight, to the right of the
638
Added:
viewport.
639
Added:
640
Added:
#+BEGIN_SRC css
641
Added:
#hamburger {
642
Added:
transform: translateX(200%);
643
Added:
}
644
Added:
#+END_SRC
645
Added:
646
Added:
647
Added:
** Narrow screens
648
Added:
649
Added:
These styles apply to screens narrower than 500px.
650
Added:
651
Added:
#+BEGIN_SRC css :noweb no-export
652
Added:
@media all and (max-width: 500px) {
653
Added:
<<narrow-topnav>>
654
Added:
<<narrow-buttons>>
655
Added:
<<narrow-hamburger>>
656
Added:
<<narrow-topnav-links>>
657
Added:
<<narrow-topnav-menu-toggle>>
658
Added:
<<narrow-topnav-shadow>>
659
Added:
}
660
Added:
#+END_SRC
661
Added:
662
Added:
663
Added:
*** Top navigation bar
664
Added:
665
Added:
#+NAME: narrow-topnav
666
Added:
#+BEGIN_SRC css :tangle no
667
Added:
#topnav { height: 3.5em; }
668
Added:
#+END_SRC
669
Added:
670
Added:
671
Added:
*** Navigation buttons
672
Added:
673
Added:
On narrow screens, the navigation buttons become visible.
674
Added:
675
Added:
#+NAME: narrow-buttons
676
Added:
#+BEGIN_SRC css :tangle no
677
Added:
#topnav #buttons {
678
Added:
transform: translateX(0);
679
Added:
transition: transform 1s;
680
Added:
}
681
Added:
#+END_SRC
682
Added:
683
Added:
684
Added:
*** Hamburger icon
685
Added:
686
Added:
On narrow screens, the hamburger menu also becomes visible.
687
Added:
688
Added:
#+NAME: narrow-hamburger
689
Added:
#+BEGIN_SRC css :tangle no
690
Added:
#topnav #hamburger {
691
Added:
transform: translateX(0);
692
Added:
transition: transform 1s;
693
Added:
}
694
Added:
#+END_SRC
695
Added:
696
Added:
697
Added:
*** TODO Top navigation links---narrow
698
Added:
699
Added:
The navigation links contained in the top banner are stacked into a
700
Added:
column, their visibility can be toggled thanks to the ~#hamburger~
701
Added:
label.
702
Added:
703
Added:
#+NAME: narrow-topnav-links
704
Added:
#+BEGIN_SRC css :tangle no
705
Added:
#topnav ul {
706
Added:
position: absolute;
707
Added:
flex-direction: column;
708
Added:
background: var(--main);
709
Added:
height: calc(100vh - 3.5em);
710
Added:
top: 3.5em;
711
Added:
padding: 0 0.5em;
712
Added:
justify-content: normal;
713
Added:
overflow: auto;
714
Added:
}
715
Added:
#topnav ul a { display: block; }
716
Added:
717
Added:
#+END_SRC
718
Added:
719
Added:
Toggle appearance of the navigation menu.
720
Added:
721
Added:
#+NAME: narrow-topnav-menu-toggle
722
Added:
#+BEGIN_SRC css :tangle no
723
Added:
#menu-toggle:not(:checked) ~ ul {
724
Added:
transition: transform 0.5s;
725
Added:
transform: translateX(-100%);
726
Added:
}
727
Added:
#menu-toggle:checked ~ ul {
728
Added:
transition: transform 0.5s;
729
Added:
transform: translateX(0);
730
Added:
}
731
Added:
#+END_SRC
732
Added:
733
Added:
734
Added:
*** Narrow shadow
735
Added:
736
Added:
When the navigation menu is open, the area of the interface not
737
Added:
covered by the navigation links should be obscured. This affords a
738
Added:
larger ``quit menu'' clickable area, this is more ergonomic for mobile
739
Added:
users.
740
Added:
741
Added:
#+NAME: narrow-topnav-shadow
742
Added:
#+BEGIN_SRC css :tangle no
743
Added:
#shadow {
744
Added:
display: block;
745
Added:
position: absolute;
746
Added:
height: calc(100vh - 3.5em);
747
Added:
top: 3.5em;
748
Added:
right: 0;
749
Added:
width: 100%;
750
Added:
}
751
Added:
#topnav #menu-toggle:not(:checked) ~ #shadow {
752
Added:
transition: opacity 0.5s;
753
Added:
visibility: hidden;
754
Added:
opacity: 0;
755
Added:
}
756
Added:
#topnav #menu-toggle:checked ~ #shadow {
757
Added:
transition: opacity 0.5s;
758
Added:
visibility: visible;
759
Added:
opacity: 0.5;
760
Added:
}
761
Added:
#+END_SRC
762
Added:
763
Added:
764
Added:
*** Clickable hamburger and shadow
765
Added:
766
Added:
Both the hamburger menu and the shadow cast when the menu is unfolded
767
Added:
should appear clickable to the user.
768
Added:
769
Added:
#+BEGIN_SRC css
770
Added:
#hamburger, #shadow {
771
Added:
cursor: pointer;
772
Added:
}
773
Added:
#+END_SRC
774
Added:
775
Added:
776
Added:
* Narrow content
777
Added:
778
Added:
This section specifies how the entire content appears, as a function
779
Added:
of screen width.
780
Added:
781
Added:
#+BEGIN_SRC css
782
Added:
@media all and (max-width: 500px) {
783
Added:
#outline-container-main-content { flex-direction: column; }
784
Added:
}
785
Added:
@media all and (max-width: 1000px) {
786
Added:
#content > :not(.title, #topnav) { width: 90%; }
787
Added:
.outline-2 {
788
Added:
display: revert;
789
Added:
}
790
Added:
h2 {
791
Added:
position: revert;
792
Added:
}
793
Added:
}
794
Added:
#+END_SRC
resources/css.org
@@ -1,770 +0,0 @@
1
Removed:
# -*- mode: org; -*-
2
Removed:
3
Removed:
#+TITLE: Global CSS file
4
Removed:
#+SUBTITLE: Site-wide styling informations.
5
Removed:
#+AUTHOR: Marius Peter
6
Removed:
#+DATE: <2022-01-30 Sun>
7
Removed:
#+OPTIONS: toc:nil
8
Removed:
#+PROPERTY: header-args :tangle mlnp.css
9
Removed:
10
Removed:
#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, and blog.mlnp.fr.
11
Removed:
#+KEYWORDS: org-mode emacs blendux mlnp literate programming
12
Removed:
13
Removed:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
14
Removed:
#+HTML_HEAD: <link rel="icon" type="image/png" href="resources/favicon.png"/>
15
Removed:
#+INCLUDE: topnav.html export html
16
Removed:
17
Removed:
#+TOC: headlines 2
18
Removed:
19
Removed:
20
Removed:
#+begin_abstract
21
Removed:
This page describes the /entire/ website's styling
22
Removed:
*information*. After experimenting with =flexbox= and =grid= layouts,
23
Removed:
I decided to go with a plain linear document flow. This maximizes
24
Removed:
design legibility and the accessibility of affordances. The beginning
25
Removed:
of this document contains a placeholder section to test
26
Removed:
#+end_abstract
27
Removed:
28
Removed:
29
Removed:
* First level heading
30
Removed:
SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
31
Removed:
32
Removed:
** Second level heading
33
Removed:
<2022-02-18 Fri>
34
Removed:
35
Removed:
*** Third level heading
36
Removed:
<2022-02-18 Fri 12:48>
37
Removed:
38
Removed:
**** Fourth level heading. This is styled like a list item by default.
39
Removed:
40
Removed:
- Itemized list.
41
Removed:
- This is the second item.
42
Removed:
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
43
Removed:
44
Removed:
| Category | Value |
45
Removed:
|----------+-----------------|
46
Removed:
| 1 | A first value. |
47
Removed:
| 2 | A second value. |
48
Removed:
| 3 | A third value! |
49
Removed:
50
Removed:
51
Removed:
* Global definitions
52
Removed:
<2022-02-11 Fri>
53
Removed:
54
Removed:
These styles apply across the entire website, to every element.
55
Removed:
56
Removed:
#+BEGIN_SRC css
57
Removed:
body {
58
Removed:
background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
59
Removed:
background-attachment: fixed;
60
Removed:
margin: 0;
61
Removed:
}
62
Removed:
#+END_SRC
63
Removed:
64
Removed:
65
Removed:
** Colors
66
Removed:
67
Removed:
Declaring individual one-liner color rules enables efficient searching
68
Removed:
for the relevant properties.
69
Removed:
70
Removed:
71
Removed:
*** Variables
72
Removed:
73
Removed:
These colors variables can be accessed anywhere in the rest of the stylesheet.
74
Removed:
75
Removed:
#+NAME: colors
76
Removed:
#+BEGIN_SRC css
77
Removed:
:root {
78
Removed:
--main: dodgerblue;
79
Removed:
--accent: royalblue;
80
Removed:
}
81
Removed:
#+END_SRC
82
Removed:
83
Removed:
84
Removed:
*** Background
85
Removed:
86
Removed:
We assign colors to the page element backgrounds.
87
Removed:
88
Removed:
#+BEGIN_SRC css
89
Removed:
.todo { background: tomato; }
90
Removed:
.done { background: forestgreen; }
91
Removed:
.timestamp { background: var(--main); }
92
Removed:
.title { background: var(--main); }
93
Removed:
#topnav { background: var(--main); }
94
Removed:
.button { background: var(--accent); }
95
Removed:
#topnav #hamburger { background: var(--accent); }
96
Removed:
#topnav #hamburger:hover { background: white; }
97
Removed:
#topnav #hamburger:hover .line { background: var(--main); }
98
Removed:
#topnav .button:hover { background: white; }
99
Removed:
#shadow { background: black; }
100
Removed:
thead { background: var(--main); }
101
Removed:
#topnav ul a:hover { background: white; }
102
Removed:
#org-div-home-and-up { background: var(--main); }
103
Removed:
#org-div-home-and-up a:hover { background: white; }
104
Removed:
#postamble { background: var(--main); }
105
Removed:
#outline-container-main-content .outline-3 { background: white; }
106
Removed:
#+END_SRC
107
Removed:
108
Removed:
109
Removed:
*** Foreground
110
Removed:
111
Removed:
#+NAME: foreground
112
Removed:
#+BEGIN_SRC css
113
Removed:
.todo, .done { color: white; }
114
Removed:
.timestamp { color: white; }
115
Removed:
.title { color: white; }
116
Removed:
.subtitle { color: lightgray; }
117
Removed:
.button { color: white; }
118
Removed:
#topnav #hamburger { color: white; }
119
Removed:
#topnav #hamburger:hover { color: var(--accent); }
120
Removed:
#topnav .button:hover { color: var(--accent); }
121
Removed:
#topnav ul a { color: white; }
122
Removed:
#topnav ul a:hover { color: var(--accent); }
123
Removed:
#org-div-home-and-up,
124
Removed:
#org-div-home-and-up a { color: white; }
125
Removed:
#org-div-home-and-up a:hover { color: var(--accent); }
126
Removed:
#postamble { color: white; }
127
Removed:
thead { color: white; }
128
Removed:
#+END_SRC
129
Removed:
130
Removed:
131
Removed:
** Typefaces
132
Removed:
133
Removed:
In the following section, we specify the fonts used across the
134
Removed:
website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
135
Removed:
136
Removed:
- Public Sans :: A modern, smart sans serif font created by the
137
Removed:
[[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
138
Removed:
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
139
Removed:
type*]]. I use it for page title and subtitle.
140
Removed:
- Hack :: A monospace typeface designed for source code. I love its
141
Removed:
legible characters and wide coverage, I use it frequently as a
142
Removed:
terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
143
Removed:
- Monoisome :: An alternative monospace typeface with great support
144
Removed:
for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
145
Removed:
146
Removed:
147
Removed:
We use the following fonts for other scripts:
148
Removed:
149
Removed:
- Cairo :: A simple, sans-serif typeface for Arabic script.
150
Removed:
- Jost :: This font has good support for Cyrillic script.
151
Removed:
152
Removed:
153
Removed:
*** Sans
154
Removed:
155
Removed:
#+NAME: faces-sans
156
Removed:
#+BEGIN_SRC css
157
Removed:
@font-face {
158
Removed:
font-family: "Public Sans";
159
Removed:
src: url("fonts/PublicSans-Regular.otf");
160
Removed:
}
161
Removed:
@font-face {
162
Removed:
font-family: "Jost";
163
Removed:
src: url("fonts/Jost-Regular.ttf");
164
Removed:
}
165
Removed:
@font-face {
166
Removed:
font-family: "Cairo";
167
Removed:
src: url("fonts/Cairo-Regular.ttf");
168
Removed:
}
169
Removed:
@font-face {
170
Removed:
font-family: "Amiri";
171
Removed:
src: url("fonts/Amiri-Regular.ttf");
172
Removed:
}
173
Removed:
#+END_SRC
174
Removed:
175
Removed:
176
Removed:
*** Serif
177
Removed:
178
Removed:
#+NAME: faces-serif
179
Removed:
#+BEGIN_SRC css
180
Removed:
/* None for now! */
181
Removed:
#+END_SRC
182
Removed:
183
Removed:
184
Removed:
*** Monospace
185
Removed:
186
Removed:
#+NAME: faces-monospace
187
Removed:
#+BEGIN_SRC css
188
Removed:
@font-face {
189
Removed:
font-family: "Hack";
190
Removed:
src: url("fonts/Hack-Regular.ttf");
191
Removed:
}
192
Removed:
@font-face {
193
Removed:
font-family: "Monoisome";
194
Removed:
src: url("fonts/Monoisome-Regular.ttf");
195
Removed:
}
196
Removed:
#+END_SRC
197
Removed:
198
Removed:
199
Removed:
*** Assigning fonts to elements
200
Removed:
201
Removed:
We apply the previously defined font faces to the page elements.
202
Removed:
203
Removed:
#+NAME: fonts
204
Removed:
#+BEGIN_SRC css
205
Removed:
#content { font-family: "Public Sans", sans-serif; }
206
Removed:
.title,
207
Removed:
h1, h2,
208
Removed:
h3, h4,
209
Removed:
#org-div-home-and-up,
210
Removed:
#topnav { font-family: "Jost", sans-serif; }
211
Removed:
pre,
212
Removed:
code, .src,
213
Removed:
.timestamp,
214
Removed:
#postamble { font-family: "Hack", monospace; }
215
Removed:
pre { font-size: 0.8em; line-height: 1em; }
216
Removed:
#+END_SRC
217
Removed:
218
Removed:
219
Removed:
** TODO Tab-select styling
220
Removed:
221
Removed:
Tab-selected content must appear with a wide, contrasted border. This
222
Removed:
is an accessiblity concern.
223
Removed:
224
Removed:
#+BEGIN_SRC css
225
Removed:
a:focus {
226
Removed:
border: 0.2em solid aquamarine;
227
Removed:
}
228
Removed:
#+END_SRC
229
Removed:
230
Removed:
231
Removed:
* Homepage
232
Removed:
233
Removed:
Certains homepage sections are styled uniquely, for visual impact.
234
Removed:
235
Removed:
#+begin_src css
236
Removed:
#main-content, #text-main-content {
237
Removed:
display: none;
238
Removed:
}
239
Removed:
#outline-container-main-content {
240
Removed:
display: flex;
241
Removed:
flex-direction: row;
242
Removed:
flex-wrap: wrap;
243
Removed:
margin-top: 1em;
244
Removed:
gap: 1em;
245
Removed:
}
246
Removed:
#outline-container-main-content .outline-3 {
247
Removed:
max-width: 12em;
248
Removed:
padding: 0 1em;
249
Removed:
border-radius: 8px;
250
Removed:
border: 3px solid var(--main);
251
Removed:
}
252
Removed:
#+end_src
253
Removed:
254
Removed:
255
Removed:
* TODO Main content
256
Removed:
257
Removed:
The following rules concerns all the content displayed on the
258
Removed:
page. Most notably, we hide the mobile navigation buttons, which are
259
Removed:
hidden to the left and right of the top navigation bar on the desktop
260
Removed:
version.
261
Removed:
262
Removed:
#+BEGIN_SRC css
263
Removed:
#content {
264
Removed:
max-width: 100%; /* This was set to 60em in Emacs 28.1 */
265
Removed:
}
266
Removed:
p { text-align: justify; }
267
Removed:
#+END_SRC
268
Removed:
269
Removed:
The following rule concerns all children (not /all/ descendants!) of
270
Removed:
the main ~#content~ section, except for the title and topnav sections.
271
Removed:
272
Removed:
#+BEGIN_SRC css
273
Removed:
274
Removed:
#content > :not(.title, #topnav) {
275
Removed:
line-height: 1.5em;
276
Removed:
width: 60%;
277
Removed:
margin: auto;
278
Removed:
}
279
Removed:
280
Removed:
#+END_SRC
281
Removed:
282
Removed:
283
Removed:
** `Home' and `Up' links
284
Removed:
285
Removed:
#+BEGIN_SRC css
286
Removed:
#org-div-home-and-up {
287
Removed:
position: sticky;
288
Removed:
top: 0;
289
Removed:
z-index: 100;
290
Removed:
padding: 0.5em;
291
Removed:
font-size: large;
292
Removed:
}
293
Removed:
#org-div-home-and-up a {
294
Removed:
text-decoration: none;
295
Removed:
padding: 0.5em;
296
Removed:
font-family: "Jost", sans-serif;
297
Removed:
}
298
Removed:
#+END_SRC
299
Removed:
300
Removed:
301
Removed:
** Title and subtitle
302
Removed:
303
Removed:
#+BEGIN_SRC css
304
Removed:
.title {
305
Removed:
margin-top: 0;
306
Removed:
margin-bottom: 0;
307
Removed:
padding-top: 0.5em;
308
Removed:
padding-bottom: 0.5em;
309
Removed:
}
310
Removed:
#+END_SRC
311
Removed:
312
Removed:
313
Removed:
** Table of contents
314
Removed:
315
Removed:
The table of contents exported to HTML from Org mode takes the form of
316
Removed:
an unordered list. We suppress bullet points that would otherwise
317
Removed:
appear before each entry.
318
Removed:
319
Removed:
#+BEGIN_SRC css
320
Removed:
#table-of-contents ul {
321
Removed:
list-style-type: none;
322
Removed:
}
323
Removed:
#+END_SRC
324
Removed:
325
Removed:
326
Removed:
** Tables
327
Removed:
328
Removed:
Tables are susceptible to becoming very wide and tall. I choose to
329
Removed:
make big tables fit in a predetermined footprint so as not to disrupt
330
Removed:
document flow. This ensures we can scroll to the following section
331
Removed:
without having to scroll the entire table.
332
Removed:
333
Removed:
Using the ~block~ display property has the additional benefit of
334
Removed:
displaying a black border around the table; this provides an
335
Removed:
additional visual cue that we have reached the table's horizontal or
336
Removed:
vertical extremity.
337
Removed:
338
Removed:
#+BEGIN_SRC css
339
Removed:
.big-table {
340
Removed:
display: block;
341
Removed:
max-height: 20em;
342
Removed:
max-width: 100%;
343
Removed:
overflow: auto;
344
Removed:
scrollbar-width: thin;
345
Removed:
}
346
Removed:
table caption {
347
Removed:
margin: 0.5em;
348
Removed:
/* background: steelblue; */
349
Removed:
}
350
Removed:
#+END_SRC
351
Removed:
352
Removed:
353
Removed:
** Images
354
Removed:
355
Removed:
#+BEGIN_SRC css
356
Removed:
.figure img { max-width: 100%; min-width: 30%; }
357
Removed:
#+END_SRC
358
Removed:
359
Removed:
360
Removed:
*** TODO Homepage images
361
Removed:
362
Removed:
This whole section not necessarily needed.
363
Removed:
364
Removed:
**** Hero images
365
Removed:
366
Removed:
#+BEGIN_SRC css
367
Removed:
/* .figure { style max-width: 100%; min-width: 30%; } */
368
Removed:
#+END_SRC
369
Removed:
370
Removed:
371
Removed:
**** Main card images
372
Removed:
373
Removed:
#+BEGIN_SRC css
374
Removed:
/* #outline-container-main-content .outline-3 img { */
375
Removed:
/* max-height: 10em; */
376
Removed:
/* } */
377
Removed:
#+END_SRC
378
Removed:
379
Removed:
380
Removed:
** Workflow states
381
Removed:
382
Removed:
Here, we define styling for TODO, DONE and other workflow state
383
Removed:
keywords.
384
Removed:
385
Removed:
#+BEGIN_SRC css
386
Removed:
.todo, .done {
387
Removed:
/* line-height: 1em; */
388
Removed:
font-weight: bold;
389
Removed:
padding: 0 0.2em;
390
Removed:
border-radius: 4px;
391
Removed:
display: inline-block;
392
Removed:
}
393
Removed:
#+END_SRC
394
Removed:
395
Removed:
396
Removed:
** Timestamps
397
Removed:
398
Removed:
<2022-02-14 Mon>--<2022-02-21 Mon>
399
Removed:
400
Removed:
#+BEGIN_SRC css
401
Removed:
.timestamp {
402
Removed:
display: inline-block;
403
Removed:
padding: 0 0.2em;
404
Removed:
border-radius: 8px;
405
Removed:
white-space: nowrap;
406
Removed:
}
407
Removed:
#+END_SRC
408
Removed:
409
Removed:
410
Removed:
** Anchor links
411
Removed:
412
Removed:
Because of the sticky header, we require all content that can be
413
Removed:
jumped to on the page to appear at an offset below this header.
414
Removed:
415
Removed:
#+BEGIN_SRC css
416
Removed:
h1, h2,
417
Removed:
h3, h4,
418
Removed:
h5, h6,
419
Removed:
#table-of-contents,
420
Removed:
table { scroll-margin-top: 4rem; }
421
Removed:
#+END_SRC
422
Removed:
423
Removed:
424
Removed:
** Postamble
425
Removed:
426
Removed:
#+BEGIN_SRC css
427
Removed:
#postamble {
428
Removed:
width: 18em;
429
Removed:
margin: 1em auto;
430
Removed:
padding: 1em;
431
Removed:
border-radius: 8px;
432
Removed:
}
433
Removed:
#+END_SRC
434
Removed:
435
Removed:
436
Removed:
* Responsive top navigation bar
437
Removed:
438
Removed:
On wide screens, the top navigation bar contains links to the other
439
Removed:
top-level website pages. On narrow screens, it contains buttons that
440
Removed:
act as shortcuts to the website's home, the page's table of contents,
441
Removed:
and links to the other top-level website pages which are accessible
442
Removed:
via a hamburger menu.
443
Removed:
444
Removed:
#+NAME: navbar
445
Removed:
#+BEGIN_SRC css
446
Removed:
#topnav {
447
Removed:
z-index: 100;
448
Removed:
position: sticky;
449
Removed:
top: 0;
450
Removed:
}
451
Removed:
#+END_SRC
452
Removed:
453
Removed:
454
Removed:
** Components
455
Removed:
456
Removed:
In this section, we define the appearance of the components contained
457
Removed:
inside the top navigation bar.
458
Removed:
459
Removed:
460
Removed:
*** Hamburger menu
461
Removed:
462
Removed:
As of 2022, hamburger menus are still a contentious topic among UX
463
Removed:
designers. It was previously celebrated by mobile designers for its
464
Removed:
compact appearance and now universally recognizable function, however,
465
Removed:
studies by Google show increased user engagement with interfaces
466
Removed:
displaying the possible links or actions as tabs at the bottom of the
467
Removed:
interface. I like hamburgers and wanted to challenge my CSS design
468
Removed:
skills, so I went with this menu implementation.
469
Removed:
470
Removed:
In the website's mobile version, the hamburger menu will capture the
471
Removed:
top-level navigation links to declutter the top navigation bar.
472
Removed:
473
Removed:
474
Removed:
**** Suppressing the menu checkbox
475
Removed:
476
Removed:
The checkbox used to toggle the menu is never displayed. We use the
477
Removed:
~#hamburger~ and ~#shadow~ labels to toggle the menu instead.
478
Removed:
479
Removed:
#+BEGIN_SRC css
480
Removed:
#menu-toggle { display: none; }
481
Removed:
#+END_SRC
482
Removed:
483
Removed:
484
Removed:
**** Design
485
Removed:
486
Removed:
The hamburger menu is comprised of three ~div~ elements with class
487
Removed:
~.line~ stacked on top of each other, with IDs ~#one~, ~#two~, and
488
Removed:
~#three~ respectively.
489
Removed:
490
Removed:
#+BEGIN_SRC css
491
Removed:
#topnav #hamburger {
492
Removed:
position: absolute;
493
Removed:
right: 0;
494
Removed:
margin: 0.5em;
495
Removed:
padding: 0.5em;
496
Removed:
height: 1.5em;
497
Removed:
width: 1.5em;
498
Removed:
border-radius: 8px;
499
Removed:
}
500
Removed:
#topnav #hamburger .line {
501
Removed:
position: relative;
502
Removed:
height: 0.2em;
503
Removed:
width: 100%;
504
Removed:
margin: 0.2em auto;
505
Removed:
background: white;
506
Removed:
border-radius: 2px;
507
Removed:
}
508
Removed:
#+END_SRC
509
Removed:
510
Removed:
511
Removed:
**** Animation
512
Removed:
513
Removed:
Our juicy hamburger should transform into a cross when activated, and
514
Removed:
regain its meaty appearance when deactivated. Modern CSS engines are
515
Removed:
powerful enough to animate individual icon components, enabling richer
516
Removed:
visuals effects and enhanced affordance cues.
517
Removed:
518
Removed:
519
Removed:
***** Hamburger
520
Removed:
521
Removed:
#+BEGIN_SRC css
522
Removed:
#menu-toggle:not(:checked) ~ #hamburger #one {
523
Removed:
transform: translateY(0) rotate(0);
524
Removed:
transition: transform 0.2s;
525
Removed:
}
526
Removed:
#menu-toggle:not(:checked) ~ #hamburger #two {
527
Removed:
transition: opacity 0.2s;
528
Removed:
opacity: 1;
529
Removed:
}
530
Removed:
#menu-toggle:not(:checked) ~ #hamburger #three {
531
Removed:
transform: translateY(0) rotate(0);
532
Removed:
transition: transform 0.2s;
533
Removed:
}
534
Removed:
535
Removed:
#+END_SRC
536
Removed:
537
Removed:
538
Removed:
***** Cross
539
Removed:
540
Removed:
#+BEGIN_SRC css
541
Removed:
#menu-toggle:checked ~ #hamburger #one {
542
Removed:
transform: translateY(0.4em) rotate(-45deg);
543
Removed:
transition: transform 0.2s;
544
Removed:
}
545
Removed:
#menu-toggle:checked ~ #hamburger #two {
546
Removed:
transition: opacity 0.2s;
547
Removed:
opacity: 0;
548
Removed:
}
549
Removed:
#menu-toggle:checked ~ #hamburger #three {
550
Removed:
transform: translateY(-0.4em) rotate(45deg);
551
Removed:
transition: transform 0.2s;
552
Removed:
}
553
Removed:
#+END_SRC
554
Removed:
555
Removed:
556
Removed:
557
Removed:
558
Removed:
*** Navigation buttons
559
Removed:
560
Removed:
These buttons appear in the website's narrow version. They present
561
Removed:
useful shorcuts to the user, namely links to the homepage and to the
562
Removed:
current page's table of contents.
563
Removed:
564
Removed:
#+BEGIN_SRC css
565
Removed:
#buttons {
566
Removed:
position: absolute;
567
Removed:
margin: 0.5em;
568
Removed:
padding: 0.5em 0;
569
Removed:
}
570
Removed:
.button {
571
Removed:
text-decoration: none;
572
Removed:
border-radius: 0 8px 8px 0;
573
Removed:
padding: 0.5em;
574
Removed:
}
575
Removed:
#+END_SRC
576
Removed:
577
Removed:
578
Removed:
** Wide screens
579
Removed:
580
Removed:
581
Removed:
*** Top navigation links---wide
582
Removed:
583
Removed:
On wide screens, top-level links appears as a banner right under the
584
Removed:
page title.
585
Removed:
586
Removed:
#+BEGIN_SRC css
587
Removed:
#topnav ul {
588
Removed:
display: flex;
589
Removed:
flex-direction: row;
590
Removed:
justify-content: center;
591
Removed:
position: relative;
592
Removed:
list-style-type: none;
593
Removed:
padding: 0.5em;
594
Removed:
margin: 0;
595
Removed:
}
596
Removed:
#topnav ul a {
597
Removed:
padding: 0.5em;
598
Removed:
text-decoration: none;
599
Removed:
}
600
Removed:
#+END_SRC
601
Removed:
602
Removed:
603
Removed:
*** Hide navigation buttons
604
Removed:
605
Removed:
When the top navigation bar is wide, the navigation buttons are hidden
606
Removed:
from the viewport.
607
Removed:
608
Removed:
#+NAME: wide-hidden-buttons
609
Removed:
#+BEGIN_SRC css
610
Removed:
#buttons {
611
Removed:
transform: translateX(-200%);
612
Removed:
}
613
Removed:
#+END_SRC
614
Removed:
615
Removed:
616
Removed:
*** Hide hamburger menu
617
Removed:
618
Removed:
The hamburger menu is tucked out of sight, to the right of the
619
Removed:
viewport.
620
Removed:
621
Removed:
#+BEGIN_SRC css
622
Removed:
#hamburger {
623
Removed:
transform: translateX(200%);
624
Removed:
}
625
Removed:
#+END_SRC
626
Removed:
627
Removed:
628
Removed:
** Narrow screens
629
Removed:
630
Removed:
These styles apply to screens narrower than 500px.
631
Removed:
632
Removed:
#+BEGIN_SRC css :noweb no-export
633
Removed:
@media all and (max-width: 500px) {
634
Removed:
<<narrow-topnav>>
635
Removed:
<<narrow-buttons>>
636
Removed:
<<narrow-hamburger>>
637
Removed:
<<narrow-topnav-links>>
638
Removed:
<<narrow-topnav-menu-toggle>>
639
Removed:
<<narrow-topnav-shadow>>
640
Removed:
<<narrow-content>>
641
Removed:
}
642
Removed:
#+END_SRC
643
Removed:
644
Removed:
645
Removed:
*** Top navigation bar
646
Removed:
647
Removed:
#+NAME: narrow-topnav
648
Removed:
#+BEGIN_SRC css :tangle no
649
Removed:
#topnav { height: 3.5em; }
650
Removed:
#+END_SRC
651
Removed:
652
Removed:
653
Removed:
*** Navigation buttons
654
Removed:
655
Removed:
On narrow screens, the navigation buttons become visible.
656
Removed:
657
Removed:
#+NAME: narrow-buttons
658
Removed:
#+BEGIN_SRC css :tangle no
659
Removed:
#topnav #buttons {
660
Removed:
transform: translateX(0);
661
Removed:
transition: transform 1s;
662
Removed:
}
663
Removed:
#+END_SRC
664
Removed:
665
Removed:
666
Removed:
*** Hamburger icon
667
Removed:
668
Removed:
On narrow screens, the hamburger menu also becomes visible.
669
Removed:
670
Removed:
#+NAME: narrow-hamburger
671
Removed:
#+BEGIN_SRC css :tangle no
672
Removed:
#topnav #hamburger {
673
Removed:
transform: translateX(0);
674
Removed:
transition: transform 1s;
675
Removed:
}
676
Removed:
#+END_SRC
677
Removed:
678
Removed:
679
Removed:
*** Clickable menu labels
680
Removed:
681
Removed:
Both the hamburger menu and the shadow cast when the menu is unfolded
682
Removed:
should appear clickable to the user.
683
Removed:
684
Removed:
#+BEGIN_SRC css
685
Removed:
#hamburger, #shadow {
686
Removed:
cursor: pointer;
687
Removed:
}
688
Removed:
#+END_SRC
689
Removed:
690
Removed:
691
Removed:
*** TODO Top navigation links---narrow
692
Removed:
693
Removed:
The navigation links contained in the top banner are stacked into a
694
Removed:
column, their visibility can be toggled thanks to the ~#hamburger~
695
Removed:
label.
696
Removed:
697
Removed:
#+NAME: narrow-topnav-links
698
Removed:
#+BEGIN_SRC css :tangle no
699
Removed:
#topnav ul {
700
Removed:
position: absolute;
701
Removed:
flex-direction: column;
702
Removed:
background: var(--main);
703
Removed:
height: calc(100vh - 3.5em);
704
Removed:
top: 3.5em;
705
Removed:
padding: 0 0.5em;
706
Removed:
justify-content: normal;
707
Removed:
overflow: auto;
708
Removed:
}
709
Removed:
#topnav ul a { display: block; }
710
Removed:
711
Removed:
#+END_SRC
712
Removed:
713
Removed:
Toggle appearance of the navigation menu.
714
Removed:
715
Removed:
#+NAME: narrow-topnav-menu-toggle
716
Removed:
#+BEGIN_SRC css :tangle no
717
Removed:
#menu-toggle:not(:checked) ~ ul {
718
Removed:
transition: transform 0.5s;
719
Removed:
transform: translateX(-100%);
720
Removed:
}
721
Removed:
#menu-toggle:checked ~ ul {
722
Removed:
transition: transform 0.5s;
723
Removed:
transform: translateX(0);
724
Removed:
}
725
Removed:
#+END_SRC
726
Removed:
727
Removed:
728
Removed:
When the navigation menu is open, the area of the interface not
729
Removed:
covered by the navigation links should be obscured. This affords a
730
Removed:
larger ``quit'' area, this is more ergonomic for mobile users. This
731
Removed:
732
Removed:
#+NAME: narrow-topnav-shadow
733
Removed:
#+BEGIN_SRC css :tangle no
734
Removed:
#shadow {
735
Removed:
display: block;
736
Removed:
position: absolute;
737
Removed:
height: calc(100vh - 3.5em);
738
Removed:
top: 3.5em;
739
Removed:
right: 0;
740
Removed:
width: 100%;
741
Removed:
}
742
Removed:
#topnav #menu-toggle:not(:checked) ~ #shadow {
743
Removed:
transition: opacity 0.5s;
744
Removed:
visibility: hidden;
745
Removed:
opacity: 0;
746
Removed:
}
747
Removed:
#topnav #menu-toggle:checked ~ #shadow {
748
Removed:
transition: opacity 0.5s;
749
Removed:
visibility: visible;
750
Removed:
opacity: 0.5;
751
Removed:
}
752
Removed:
#+END_SRC
753
Removed:
754
Removed:
755
Removed:
*** Narrow content
756
Removed:
757
Removed:
I'm gonna test the footnotes.[fn:1]
758
Removed:
759
Removed:
#+NAME: narrow-content
760
Removed:
#+BEGIN_SRC css :tangle no
761
Removed:
#content > :not(.title, #topnav) { width: 90%; }
762
Removed:
#outline-container-main-content {
763
Removed:
flex-direction: column;
764
Removed:
}
765
Removed:
#+END_SRC
766
Removed:
767
Removed:
768
Removed:
* Footnotes
769
Removed:
770
Removed:
[fn:1] This footnote is just to test footnote appearance.