[Org] Repository for my personal website.
Website styles.
resources/css.org
@@ -7,6 +7,7 @@
7
7
#+OPTIONS: toc:nil
8
8
#+PROPERTY: header-args :tangle mlnp.css
9
9
10
Added:
#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, and blog.mlnp.fr.
10
11
#+KEYWORDS: org-mode emacs blendux mlnp literate programming
11
12
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
12
13
#+TOC: headlines 2
@@ -36,11 +37,11 @@
36
37
- This is the second item.
37
38
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
38
39
39
Removed:
| Category | Value |
40
Removed:
|----------+-----------------|
41
Removed:
| 1 | A first value. |
42
Removed:
| 2 | A second value. |
43
Removed:
| 3 | A third value! |
40
Added:
| Category | Value |
41
Added:
|----------+-----------------|
42
Added:
| 1 | A first value. |
43
Added:
| 2 | A second value. |
44
Added:
| 3 | A third value! |
44
45
45
46
46
47
* Global definitions
@@ -50,7 +51,7 @@
50
51
51
52
#+BEGIN_SRC css
52
53
body {
53
Removed:
background: linear-gradient(0deg, white 20%, slategray 70%);
54
Added:
background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
54
55
background-attachment: fixed;
55
56
margin: 0;
56
57
}
@@ -70,7 +71,7 @@
70
71
#+NAME: colors
71
72
#+BEGIN_SRC css
72
73
:root {
73
Removed:
--topnav: cornflowerblue;
74
Added:
--topnav: dodgerblue;
74
75
--topnav-menu: royalblue;
75
76
}
76
77
#+END_SRC
@@ -92,6 +93,12 @@
92
93
#topnav #hamburger:hover .line { background: var(--topnav); }
93
94
#topnav .button:hover { background: white; }
94
95
#shadow { background: black; }
96
Added:
thead { background: var(--topnav); }
97
Added:
#topnav ul a:hover { background: white; }
98
Added:
#org-div-home-and-up { background: var(--topnav); }
99
Added:
#postamble { background: var(--topnav); }
100
Added:
#outline-container-main-content
101
Added:
.outline-3 { background: var(--topnav); }
95
102
#+END_SRC
96
103
97
104
@@ -107,17 +114,19 @@
107
114
#topnav #hamburger { color: white; }
108
115
#topnav #hamburger:hover { color: var(--topnav-menu); }
109
116
#topnav .button:hover { color: var(--topnav-menu); }
110
Removed:
#topnav ul a { color: lightgray; }
117
Added:
#topnav ul a { color: white; }
118
Added:
#topnav ul a:hover { color: var(--topnav-menu); }
119
Added:
#org-div-home-and-up { color: white; }
120
Added:
#postamble { color: white; }
121
Added:
thead { color: white; }
111
122
#+END_SRC
112
123
113
124
114
Removed:
** TODO Fonts
125
Added:
** Typefaces
115
126
116
Removed:
In the following section, we define fonts used across the website. All
117
Removed:
font files are hosted on the server in the [[file:fonts/][fonts]] directory.
127
Added:
In the following section, we specify the fonts used across the
128
Added:
website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
118
129
119
Removed:
We use the following fonts:
120
Removed:
121
130
- Public Sans :: A modern, smart sans serif font created by the
122
131
[[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
123
132
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
@@ -128,9 +137,17 @@
128
137
- Monoisome :: An alternative monospace typeface with great support
129
138
for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
130
139
131
Removed:
#+NAME: font-faces
140
Added:
141
Added:
We use the following fonts for other scripts:
142
Added:
143
Added:
- Cairo :: A simple, sans-serif typeface for Arabic script.
144
Added:
- Jost :: This font has good support for Cyrillic script.
145
Added:
146
Added:
147
Added:
*** Sans
148
Added:
149
Added:
#+NAME: faces-sans
132
150
#+BEGIN_SRC css
133
Removed:
/* Sans serif */
134
151
@font-face {
135
152
font-family: "Public Sans";
136
153
src: url("fonts/PublicSans-Regular.otf");
@@ -139,16 +156,29 @@
139
156
font-family: "Jost";
140
157
src: url("fonts/Jost-Regular.ttf");
141
158
}
142
Removed:
/* Serif */
143
159
@font-face {
144
Removed:
font-family: "Crimson Pro";
145
Removed:
src: url("fonts/CrimsonPro-Regular.ttf");
160
Added:
font-family: "Cairo";
161
Added:
src: url("fonts/Cairo-Regular.ttf");
146
162
}
147
163
@font-face {
148
Removed:
font-family: "Linux Libertine";
149
Removed:
src: url("fonts/LinLibertine_R.ttf");
164
Added:
font-family: "Amiri";
165
Added:
src: url("fonts/Amiri-Regular.ttf");
150
166
}
151
Removed:
/* Monospace */
167
Added:
#+END_SRC
168
Added:
169
Added:
170
Added:
*** Serif
171
Added:
172
Added:
#+NAME: faces-serif
173
Added:
#+BEGIN_SRC css
174
Added:
/* None for now! */
175
Added:
#+END_SRC
176
Added:
177
Added:
178
Added:
*** Monospace
179
Added:
180
Added:
#+NAME: faces-monospace
181
Added:
#+BEGIN_SRC css
152
182
@font-face {
153
183
font-family: "Hack";
154
184
src: url("fonts/Hack-Regular.ttf");
@@ -157,33 +187,26 @@
157
187
font-family: "Monoisome";
158
188
src: url("fonts/Monoisome-Regular.ttf");
159
189
}
160
Removed:
@font-face {
161
Removed:
font-family: "Compagnon Medium";
162
Removed:
src: url("fonts/Compagnon-Medium.otf") ;
163
Removed:
}
164
Removed:
@font-face {
165
Removed:
font-family: "Hermit";
166
Removed:
src: url("fonts/Hermit-Regular.otf");
167
Removed:
}
168
Removed:
@font-face {
169
Removed:
font-family: "Besley";
170
Removed:
src: url("fonts/Besley-Book.ttf");
171
Removed:
}
172
190
#+END_SRC
173
191
192
Added:
193
Added:
*** Assigning fonts to elements
194
Added:
174
195
We apply the previously defined font faces to the page elements.
175
196
176
197
#+NAME: fonts
177
198
#+BEGIN_SRC css
178
Removed:
.title { font-family: "Jost", sans-serif; }
179
199
#content { font-family: "Public Sans", sans-serif; }
200
Added:
.title,
180
201
h1, h2,
181
202
h3, h4,
203
Added:
#org-div-home-and-up,
182
204
#topnav { font-family: "Jost", sans-serif; }
205
Added:
pre,
183
206
code, .src,
184
207
.timestamp,
185
208
#postamble { font-family: "Hack", monospace; }
186
Removed:
.src { font-size: 0.8em; line-height: 1.2em; }
209
Added:
pre { font-size: 0.8em; line-height: 1em; }
187
210
#+END_SRC
188
211
189
212
@@ -199,43 +222,129 @@
199
222
#+END_SRC
200
223
201
224
202
Removed:
** TODO Durations
225
Added:
* Homepage
203
226
227
Added:
Certains homepage sections are styled uniquely, for visual impact.
204
228
229
Added:
#+begin_src css
230
Added:
#main-content, #text-main-content {
231
Added:
display: none;
232
Added:
}
233
Added:
#outline-container-main-content {
234
Added:
display: flex;
235
Added:
flex-direction: row;
236
Added:
flex-wrap: wrap;
237
Added:
margin-top: 1em;
238
Added:
gap: 1em;
239
Added:
}
240
Added:
#outline-container-main-content .outline-3 {
241
Added:
max-width: 12em;
242
Added:
padding: 0 1em;
243
Added:
border-radius: 8px;
244
Added:
}
245
Added:
#+end_src
205
246
206
Removed:
* Title and subtitle
207
247
248
Added:
* Main content
249
Added:
250
Added:
The following rule concerns all the content displayed on the page.
251
Added:
252
Added:
It concerns all children (not all descendants!) of the main ~#content~
253
Added:
section, except for the title and topnav sections.
254
Added:
208
255
#+BEGIN_SRC css
256
Added:
#content > :not(.title, #topnav) {
257
Added:
line-height: 1.5em;
258
Added:
width: 60%;
259
Added:
margin: auto;
260
Added:
}
261
Added:
p { text-align: justify; }
262
Added:
#+END_SRC
263
Added:
264
Added:
265
Added:
** TODO `Home' and `Up' links
266
Added:
267
Added:
#+BEGIN_SRC css
268
Added:
#org-div-home-and-up {}
269
Added:
#+END_SRC
270
Added:
271
Added:
272
Added:
** Title and subtitle
273
Added:
274
Added:
#+BEGIN_SRC css
209
275
.title {
210
276
margin-top: 0;
211
Removed:
padding-top: 0.5em;
212
277
margin-bottom: 0;
213
Removed:
padding-bottom: 0;
214
Removed:
position: relative;
215
Removed:
z-index: 200;
278
Added:
padding-top: 0.5em;
279
Added:
padding-bottom: 0.5em;
216
280
}
217
281
#+END_SRC
218
282
219
283
220
Removed:
* Body text
284
Added:
** Table of contents
221
285
222
Removed:
The following rules concerns all body text. This means most content on
223
Removed:
the page, except for the title section and postamble.
286
Added:
The table of contents exported to HTML from Org mode takes the form of
287
Added:
an unordered list. We suppress bullet points that would otherwise
288
Added:
appear before each entry.
224
289
225
290
#+BEGIN_SRC css
226
Removed:
.abstract,
227
Removed:
.outline-2,
228
Removed:
#table-of-contents,
229
Removed:
#list-of-tables {
230
Removed:
line-height: 1.5em;
231
Removed:
width: 60%;
232
Removed:
margin: auto;
291
Added:
#table-of-contents ul {
292
Added:
list-style-type: none;
233
293
}
234
Removed:
p { text-align: justify; }
235
Removed:
table { margin: auto; }
236
294
#+END_SRC
237
295
238
296
297
Added:
** Tables
298
Added:
299
Added:
Tables are susceptible to becoming very wide and tall. I choose to
300
Added:
make big tables fit in a predetermined footprint so as not to disrupt
301
Added:
document flow. This ensures we can scroll to the following section
302
Added:
without having to scroll the entire table.
303
Added:
304
Added:
Using the ~block~ display property has the additional benefit of
305
Added:
displaying a black border around the table; this provides an
306
Added:
additional visual cue that we have reached the table's horizontal or
307
Added:
vertical extremity.
308
Added:
309
Added:
#+BEGIN_SRC css
310
Added:
.big-table {
311
Added:
display: block;
312
Added:
max-height: 20em;
313
Added:
max-width: 100%;
314
Added:
overflow: auto;
315
Added:
scrollbar-width: thin;
316
Added:
}
317
Added:
table caption {
318
Added:
margin: 0.5em;
319
Added:
/* background: steelblue; */
320
Added:
}
321
Added:
#+END_SRC
322
Added:
323
Added:
I also want table headers to stick to the top of the table. This
324
Added:
serves as a useful reminder of the
325
Added:
326
Added:
#+BEGIN_SRC css
327
Added:
thead {
328
Added:
position: sticky;
329
Added:
top: 0;
330
Added:
}
331
Added:
#+END_SRC
332
Added:
333
Added:
334
Added:
** Images
335
Added:
336
Added:
#+BEGIN_SRC css
337
Added:
.figure img { max-width: 100%; min-width: 30%; }
338
Added:
#+END_SRC
339
Added:
340
Added:
341
Added:
*** TODO Hero images
342
Added:
343
Added:
#+BEGIN_SRC css
344
Added:
/* .figure { style max-width: 100%; min-width: 30%; } */
345
Added:
#+END_SRC
346
Added:
347
Added:
239
348
** Workflow states
240
349
241
350
Here, we define styling for TODO, DONE and other workflow state
@@ -259,9 +368,9 @@
259
368
#+BEGIN_SRC css
260
369
.timestamp {
261
370
display: inline-block;
262
Removed:
/* text-align: start; */
263
371
padding: 0 0.2em;
264
372
border-radius: 8px;
373
Added:
white-space: nowrap;
265
374
}
266
375
#+END_SRC
267
376
@@ -276,19 +385,18 @@
276
385
h3, h4,
277
386
h5, h6,
278
387
#table-of-contents,
279
Removed:
table { scroll-margin-top: 4em; }
388
Added:
table { scroll-margin-top: 4rem; }
280
389
#+END_SRC
281
390
282
391
283
Removed:
* Table of contents
392
Added:
** Postamble
284
393
285
Removed:
The table of contents exported to HTML from Org mode takes the form of
286
Removed:
an unordered list. We suppress bullet points that would otherwise
287
Removed:
appear before each entry.
288
Removed:
289
394
#+BEGIN_SRC css
290
Removed:
#table-of-contents ul {
291
Removed:
list-style-type: none;
395
Added:
#postamble {
396
Added:
width: 18em;
397
Added:
margin: 1em auto;
398
Added:
padding: 1em;
399
Added:
border-radius: 8px;
292
400
}
293
401
#+END_SRC
294
402
@@ -348,7 +456,7 @@
348
456
~#three~ respectively.
349
457
350
458
#+BEGIN_SRC css
351
Removed:
#hamburger {
459
Added:
#topnav #hamburger {
352
460
position: absolute;
353
461
right: 0;
354
462
margin: 0.5em;
@@ -357,7 +465,7 @@
357
465
width: 1.5em;
358
466
border-radius: 8px;
359
467
}
360
Removed:
#hamburger .line {
468
Added:
#topnav #hamburger .line {
361
469
position: relative;
362
470
height: 0.2em;
363
471
width: 100%;
@@ -453,7 +561,10 @@
453
561
padding: 0.5em;
454
562
margin: 0;
455
563
}
456
Removed:
#topnav ul a { padding: 0.5em; }
564
Added:
#topnav ul a {
565
Added:
padding: 0.5em;
566
Added:
text-decoration: none;
567
Added:
}
457
568
#+END_SRC
458
569
459
570
@@ -611,10 +722,17 @@
611
722
612
723
*** Narrow content
613
724
725
Added:
I'm gonna test the footnotes.[fn:1]
726
Added:
614
727
#+NAME: narrow-content
615
728
#+BEGIN_SRC css :tangle no
616
Removed:
.abstract,
617
Removed:
.outline-2,
618
Removed:
#table-of-contents,
619
Removed:
#list-of-tables { width: 90%; }
729
Added:
#content > :not(.title, #topnav) { width: 90%; }
730
Added:
#outline-container-main-content {
731
Added:
flex-direction: column;
732
Added:
}
620
733
#+END_SRC
734
Added:
735
Added:
736
Added:
* Footnotes
737
Added:
738
Added:
[fn:1] This footnote is just to test footnote appearance.