[Org] Repository for my personal website.
Resources.
Changed files
resources/css.org
@@ -7,20 +7,50 @@
7
7
#+OPTIONS: toc:nil
8
8
#+PROPERTY: header-args :tangle mlnp.css
9
9
10
Added:
#+KEYWORDS: org-mode emacs blendux mlnp literate programming
10
11
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
11
Removed:
#+INCLUDE: topnav.org
12
Removed:
#+TOC: headlines 3
12
Added:
#+TOC: headlines 2
13
13
14
14
15
Removed:
* Global appearance
15
Added:
#+begin_abstract
16
Added:
This page describes the /entire/ website's styling
17
Added:
*information*. After experimenting with =flexbox= and =grid= layouts,
18
Added:
I decided to go with a plain linear document flow. This maximizes
19
Added:
design legibility and the accessibility of affordances. The beginning
20
Added:
of this document contains a placeholder section to test
21
Added:
#+end_abstract
16
22
17
Removed:
These styles apply across the entire =mlnp.fr= website, to every
18
Removed:
element.
19
23
24
Added:
* First level heading
25
Added:
SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
26
Added:
27
Added:
** Second level heading
28
Added:
<2022-02-18 Fri>
29
Added:
30
Added:
*** Third level heading
31
Added:
<2022-02-18 Fri 12:48>
32
Added:
33
Added:
**** Fourth level heading. This is styled like a list item by default.
34
Added:
35
Added:
- Itemized list.
36
Added:
- This is the second item.
37
Added:
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
38
Added:
39
Added:
| Category | Value |
40
Added:
|----------+-----------------|
41
Added:
| 1 | A first value. |
42
Added:
| 2 | A second value. |
43
Added:
| 3 | A third value! |
44
Added:
45
Added:
46
Added:
* Global definitions
47
Added:
<2022-02-11 Fri>
48
Added:
49
Added:
These styles apply across the entire website, to every element.
50
Added:
20
51
#+BEGIN_SRC css
21
52
body {
22
Removed:
font-family: "Public Sans", sans-serif;
23
Removed:
background: linear-gradient(0deg, white 0%, gray 70%);
53
Added:
background: linear-gradient(0deg, white 20%, gray 70%);
24
54
background-attachment: fixed;
25
55
margin: 0;
26
56
}
@@ -29,8 +59,14 @@
29
59
30
60
** Colors
31
61
32
Removed:
These colors can be accessed anywhere in the rest of the stylesheet.
62
Added:
Declaring individual one-liner color rules enables efficient searching
63
Added:
for the relevant properties.
33
64
65
Added:
66
Added:
*** Variables
67
Added:
68
Added:
These colors variables can be accessed anywhere in the rest of the stylesheet.
69
Added:
34
70
#+NAME: colors
35
71
#+BEGIN_SRC css
36
72
:root {
@@ -40,77 +76,234 @@
40
76
#+END_SRC
41
77
42
78
79
Added:
*** Background
80
Added:
81
Added:
We assign colors to the page element backgrounds.
82
Added:
83
Added:
#+BEGIN_SRC css
84
Added:
.todo { background: tomato; }
85
Added:
.done { background: forestgreen; }
86
Added:
.timestamp { background: var(--topnav); }
87
Added:
.title { background: var(--topnav); }
88
Added:
#topnav { background: var(--topnav); }
89
Added:
#home { background: var(--topnav-menu); }
90
Added:
#topnav #hamburger { background: var(--topnav-menu); }
91
Added:
#topnav #hamburger:hover { background: white; }
92
Added:
#topnav #hamburger:hover .line { background: var(--topnav); }
93
Added:
#topnav a:hover { background: white; }
94
Added:
#shadow { background: black; }
95
Added:
#+END_SRC
96
Added:
97
Added:
98
Added:
*** Foreground
99
Added:
100
Added:
#+NAME: foreground
101
Added:
#+BEGIN_SRC css
102
Added:
.todo, .done { color: white; }
103
Added:
.timestamp { color: white; }
104
Added:
.title { color: white; }
105
Added:
.subtitle { color: lightgray; }
106
Added:
#home { color: white; }
107
Added:
#topnav #hamburger { color: white; }
108
Added:
#topnav #hamburger:hover { color: var(--topnav-menu); }
109
Added:
#topnav a:hover { color: var(--topnav-menu); }
110
Added:
#topnav ul a { color: lightgray; }
111
Added:
#+END_SRC
112
Added:
113
Added:
43
114
** TODO Fonts
44
115
45
Removed:
Add @ rules and set
116
Added:
In the following section, we define fonts used across the website. All
117
Added:
font files are hosted on the server in the [[file:fonts/][fonts]] directory.
46
118
47
Removed:
#+NAME: fonts
119
Added:
We use the following fonts:
120
Added:
121
Added:
- Public Sans :: A modern, smart sans serif font created by the
122
Added:
[[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
123
Added:
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
124
Added:
type*]]. I use it for page title and subtitle.
125
Added:
- Hack :: A monospace typeface designed for source code. I love its
126
Added:
legible characters and wide coverage, I use it frequently as a
127
Added:
terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
128
Added:
- Monoisome :: An alternative monospace typeface with great support
129
Added:
for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
130
Added:
131
Added:
#+NAME: font-faces
48
132
#+BEGIN_SRC css
49
Removed:
code, .src {
50
Removed:
font-family: "Hack", sans-serif;
133
Added:
/* Sans serif */
134
Added:
@font-face {
135
Added:
font-family: "Public Sans";
136
Added:
src: url("fonts/PublicSans-Regular.otf");
51
137
}
138
Added:
@font-face {
139
Added:
font-family: "Jost";
140
Added:
src: url("fonts/Jost-Regular.ttf");
141
Added:
}
142
Added:
/* Serif */
143
Added:
@font-face {
144
Added:
font-family: "Crimson Pro";
145
Added:
src: url("fonts/CrimsonPro-Regular.ttf");
146
Added:
}
147
Added:
@font-face {
148
Added:
font-family: "Linux Libertine";
149
Added:
src: url("fonts/LinLibertine_R.ttf");
150
Added:
}
151
Added:
/* Monospace */
152
Added:
@font-face {
153
Added:
font-family: "Hack";
154
Added:
src: url("fonts/Hack-Regular.ttf");
155
Added:
}
156
Added:
@font-face {
157
Added:
font-family: "Monoisome";
158
Added:
src: url("fonts/Monoisome-Regular.ttf");
159
Added:
}
160
Added:
@font-face {
161
Added:
font-family: "Compagnon Medium";
162
Added:
src: url("fonts/Compagnon-Medium.otf") ;
163
Added:
}
164
Added:
@font-face {
165
Added:
font-family: "Hermit";
166
Added:
src: url("fonts/Hermit-Regular.otf");
167
Added:
}
168
Added:
@font-face {
169
Added:
font-family: "Besley";
170
Added:
src: url("fonts/Besley-Book.ttf");
171
Added:
}
52
172
#+END_SRC
53
173
174
Added:
We apply the previously defined font faces to the page elements.
54
175
176
Added:
#+NAME: fonts
177
Added:
#+BEGIN_SRC css
178
Added:
.title { font-family: "Jost", sans-serif; }
179
Added:
#content { font-family: "Public Sans", sans-serif; }
180
Added:
h1, h2,
181
Added:
h3, h4,
182
Added:
#topnav { font-family: "Jost", sans-serif; }
183
Added:
code, .src,
184
Added:
.timestamp,
185
Added:
#postamble { font-family: "Hack", monospace; }
186
Added:
.src { font-size: 0.8em; line-height: 1.2em; }
187
Added:
#+END_SRC
55
188
56
Removed:
** Entire content
57
189
58
Removed:
This rule concerns all content except for the title section and
59
Removed:
postamble.
190
Added:
** TODO Tab-select styling
60
191
192
Added:
Tab-selected content must appear with a wide, contrasted border. This
193
Added:
is an accessiblity concern.
194
Added:
61
195
#+BEGIN_SRC css
62
Removed:
.outline-2, .abstract {
63
Removed:
width: 70%;
64
Removed:
margin-right: auto;
65
Removed:
margin-left: auto;
196
Added:
a:focus {
197
Added:
border: 0.2em solid aquamarine;
66
198
}
67
199
#+END_SRC
68
200
69
201
70
Removed:
** Title and subtitle
202
Added:
** TODO Durations
71
203
204
Added:
205
Added:
206
Added:
* Title and subtitle
207
Added:
72
208
#+BEGIN_SRC css
73
209
.title {
74
Removed:
background: cornflowerblue;
75
Removed:
color: white;
76
210
margin-top: 0;
77
211
padding-top: 0.5em;
78
212
margin-bottom: 0;
79
213
padding-bottom: 0;
214
Added:
position: relative;
215
Added:
z-index: 200;
80
216
}
81
Removed:
.subtitle {
82
Removed:
color: lightgray;
217
Added:
#+END_SRC
218
Added:
219
Added:
220
Added:
* Body text
221
Added:
222
Added:
The following rules concerns all body text. This means most content on
223
Added:
the page, except for the title section and postamble.
224
Added:
225
Added:
#+BEGIN_SRC css
226
Added:
.abstract,
227
Added:
.outline-2,
228
Added:
#table-of-contents,
229
Added:
#list-of-tables {
230
Added:
line-height: 1.5em;
231
Added:
width: 60%;
232
Added:
margin: auto;
83
233
}
234
Added:
p { text-align: justify; }
235
Added:
table { margin: auto; }
84
236
#+END_SRC
85
237
86
238
87
Removed:
** Table of contents
239
Added:
** Workflow states
88
240
241
Added:
Here, we define styling for TODO, DONE and other workflow state
242
Added:
keywords.
243
Added:
89
244
#+BEGIN_SRC css
90
Removed:
#table-of-contents {
91
Removed:
width: 20%;
92
Removed:
/* position: sticky; */
93
Removed:
top: 5em;
245
Added:
.todo, .done {
246
Added:
/* line-height: 1em; */
247
Added:
font-weight: bold;
248
Added:
padding: 0 0.2em;
249
Added:
border-radius: 4px;
94
250
display: inline-block;
95
Removed:
vertical-align: top;
96
251
}
97
Removed:
#text-table-of-contents ul {
252
Added:
#+END_SRC
253
Added:
254
Added:
255
Added:
** Timestamps
256
Added:
257
Added:
<2022-02-14 Mon>--<2022-02-21 Mon>
258
Added:
259
Added:
#+BEGIN_SRC css
260
Added:
.timestamp {
261
Added:
display: inline-block;
262
Added:
/* text-align: start; */
263
Added:
padding: 0 0.2em;
264
Added:
border-radius: 8px;
265
Added:
}
266
Added:
#+END_SRC
267
Added:
268
Added:
269
Added:
** Anchor links
270
Added:
271
Added:
Because of the sticky header, we require all content that can be
272
Added:
jumped to on the page to appear at an offset below this header.
273
Added:
274
Added:
#+BEGIN_SRC css
275
Added:
h1, h2,
276
Added:
h3, h4,
277
Added:
h5, h6,
278
Added:
#table-of-contents,
279
Added:
table { scroll-margin-top: 4em; }
280
Added:
#+END_SRC
281
Added:
282
Added:
283
Added:
* Table of contents
284
Added:
285
Added:
The table of contents exported to HTML from Org mode takes the form of
286
Added:
an unordered list. We suppress bullet points that would otherwise
287
Added:
appear before each entry.
288
Added:
289
Added:
#+BEGIN_SRC css
290
Added:
#table-of-contents ul {
98
291
list-style-type: none;
99
Removed:
padding: 0;
100
292
}
101
293
#+END_SRC
102
294
103
295
104
Removed:
* Top navigation bar
296
Added:
* Responsive top navigation bar
105
297
106
Removed:
The HTML preamble contains a single child: the /navigation bar/. This
107
Removed:
bar contains a link to the homepage, and links to the other top-level
108
Removed:
website pages.
298
Added:
On wide screens, the top navigation bar contains links to the other
299
Added:
top-level website pages. On narrow screens, it contains buttons that
300
Added:
act as shortcuts to the website's home, the page's table of contents,
301
Added:
and links to the other top-level website pages which are accessible
302
Added:
via a hamburger menu.
109
303
110
304
#+NAME: navbar
111
305
#+BEGIN_SRC css
112
306
#topnav {
113
Removed:
background: var(--topnav);
114
307
z-index: 100;
115
308
position: sticky;
116
309
top: 0;
@@ -118,38 +311,174 @@
118
311
#+END_SRC
119
312
120
313
314
Added:
** Components
315
Added:
316
Added:
In this section, we define the appearance of the components contained
317
Added:
inside the top navigation bar.
318
Added:
319
Added:
320
Added:
*** Hamburger menu
321
Added:
322
Added:
As of 2022, hamburger menus are still a contentious topic among UX
323
Added:
designers. It was previously celebrated by mobile designers for its
324
Added:
compact appearance and now universally recognizable function, however,
325
Added:
studies by Google show increased user engagement with interfaces
326
Added:
displaying the possible links or actions as tabs at the bottom of the
327
Added:
interface. I like hamburgers and wanted to challenge my CSS design
328
Added:
skills, so I went with this menu implementation.
329
Added:
330
Added:
In the website's mobile version, the hamburger menu will capture the
331
Added:
top-level navigation links to declutter the top navigation bar.
332
Added:
333
Added:
334
Added:
**** Suppressing the menu checkbox
335
Added:
336
Added:
The checkbox used to toggle the menu is never displayed. We use the
337
Added:
~#hamburger~ and ~#shadow~ labels to toggle the menu instead.
338
Added:
339
Added:
#+BEGIN_SRC css
340
Added:
#menu-toggle { display: none; }
341
Added:
#+END_SRC
342
Added:
343
Added:
344
Added:
**** Design
345
Added:
346
Added:
The hamburger menu is comprised of three ~div~ elements with class
347
Added:
~.line~ stacked on top of each other, with IDs ~#one~, ~#two~, and
348
Added:
~#three~ respectively.
349
Added:
350
Added:
#+BEGIN_SRC css
351
Added:
#hamburger {
352
Added:
position: absolute;
353
Added:
right: 0;
354
Added:
margin: 0.5em;
355
Added:
padding: 0.5em;
356
Added:
height: 1.5em;
357
Added:
width: 1.5em;
358
Added:
border-radius: 8px;
359
Added:
}
360
Added:
#hamburger .line {
361
Added:
position: relative;
362
Added:
height: 0.2em;
363
Added:
width: 100%;
364
Added:
margin: 0.2em auto;
365
Added:
background: white;
366
Added:
border-radius: 2px;
367
Added:
}
368
Added:
#+END_SRC
369
Added:
370
Added:
371
Added:
**** Animation
372
Added:
373
Added:
Our juicy hamburger should transform into a cross when activated, and
374
Added:
regain its meaty appearance when deactivated. Modern CSS engines are
375
Added:
powerful enough to animate individual icon components, enabling richer
376
Added:
visuals effects and enhanced affordance cues.
377
Added:
378
Added:
379
Added:
***** Hamburger
380
Added:
381
Added:
#+BEGIN_SRC css
382
Added:
#menu-toggle:not(:checked) ~ #hamburger #one {
383
Added:
transform: translateY(0) rotate(0);
384
Added:
transition: transform 0.2s;
385
Added:
}
386
Added:
#menu-toggle:not(:checked) ~ #hamburger #two {
387
Added:
transition: opacity 0.2s;
388
Added:
opacity: 1;
389
Added:
}
390
Added:
#menu-toggle:not(:checked) ~ #hamburger #three {
391
Added:
transform: translateY(0) rotate(0);
392
Added:
transition: transform 0.2s;
393
Added:
}
394
Added:
395
Added:
#+END_SRC
396
Added:
397
Added:
398
Added:
***** Cross
399
Added:
400
Added:
#+BEGIN_SRC css
401
Added:
#menu-toggle:checked ~ #hamburger #one {
402
Added:
transform: translateY(0.4em) rotate(-45deg);
403
Added:
transition: transform 0.2s;
404
Added:
}
405
Added:
#menu-toggle:checked ~ #hamburger #two {
406
Added:
transition: opacity 0.2s;
407
Added:
opacity: 0;
408
Added:
}
409
Added:
#menu-toggle:checked ~ #hamburger #three {
410
Added:
transform: translateY(-0.4em) rotate(45deg);
411
Added:
transition: transform 0.2s;
412
Added:
}
413
Added:
#+END_SRC
414
Added:
415
Added:
416
Added:
417
Added:
418
Added:
*** Navigation buttons
419
Added:
420
Added:
These buttons appear in the website's narrow version. They present
421
Added:
useful shorcuts to the user, namely links to the homepage and to the
422
Added:
current page's table of contents.
423
Added:
424
Added:
#+BEGIN_SRC css
425
Added:
#buttons {
426
Added:
position: absolute;
427
Added:
margin: 0.5em;
428
Added:
padding: 0.5em 0;
429
Added:
}
430
Added:
#buttons a {
431
Added:
text-decoration: none;
432
Added:
border-radius: 0 8px 8px 0;
433
Added:
padding: 0.5em;
434
Added:
}
435
Added:
#+END_SRC
436
Added:
437
Added:
121
438
** Wide screens
122
439
440
Added:
441
Added:
*** Top navigation links---wide
442
Added:
443
Added:
On wide screens, top-level links appears as a banner right under the
444
Added:
page title.
445
Added:
123
446
#+BEGIN_SRC css
124
447
#topnav ul {
125
448
display: flex;
126
Removed:
list-style-type: none;
449
Added:
flex-direction: row;
127
450
justify-content: center;
451
Added:
position: relative;
452
Added:
list-style-type: none;
128
453
padding: 0.5em;
129
454
margin: 0;
130
455
}
131
Removed:
#topnav ul a {
132
Removed:
/* flex-grow: 1; */
133
Removed:
/* flex-basis: 0; */
134
Removed:
padding: 0.5em;
135
Removed:
color: lightgray;
136
Removed:
text-align: center;
456
Added:
#topnav ul a { padding: 0.5em; }
457
Added:
#+END_SRC
458
Added:
459
Added:
460
Added:
*** Hide navigation buttons
461
Added:
462
Added:
When the top navigation bar is wide, the navigation buttons are hidden
463
Added:
from the viewport.
464
Added:
465
Added:
#+NAME: wide-hidden-buttons
466
Added:
#+BEGIN_SRC css
467
Added:
#buttons {
468
Added:
transform: translateX(-200%);
137
469
}
138
Removed:
#topnav a:hover {
139
Removed:
background: white;
140
Removed:
color: var(--topnav-menu);
141
Removed:
}
142
470
#+END_SRC
143
471
144
472
145
Removed:
*** Hide home and hamburger icons
473
Added:
*** Hide hamburger menu
146
474
147
Removed:
When the top navigation bar is wide, the hamburger menu is hidden.
475
Added:
The hamburger menu is tucked out of sight, to the right of the
476
Added:
viewport.
148
477
149
Removed:
#+NAME: topnav-wide-hidden
150
478
#+BEGIN_SRC css
151
Removed:
#home { display: none; }
152
Removed:
#topnav label, #hamburger { display: none; }
479
Added:
#hamburger {
480
Added:
transform: translateX(200%);
481
Added:
}
153
482
#+END_SRC
154
483
155
484
@@ -160,89 +489,123 @@
160
489
#+BEGIN_SRC css :noweb no-export
161
490
@media all and (max-width: 500px) {
162
491
<<narrow-topnav>>
163
Removed:
<<narrow-home>>
492
Added:
<<narrow-buttons>>
164
493
<<narrow-hamburger>>
165
494
<<narrow-topnav-links>>
166
Removed:
<<narrow-table-of-contents>>
495
Added:
<<narrow-topnav-menu-toggle>>
496
Added:
<<narrow-topnav-shadow>>
167
497
<<narrow-content>>
168
498
}
169
499
#+END_SRC
170
500
171
501
172
Removed:
*** Narrow top navigation bar
502
Added:
*** Top navigation bar
173
503
174
504
#+NAME: narrow-topnav
175
505
#+BEGIN_SRC css :tangle no
176
Removed:
#topnav {
177
Removed:
padding: 0.5em;
178
Removed:
}
506
Added:
#topnav { height: 3.5em; }
179
507
#+END_SRC
180
508
181
509
510
Added:
*** Navigation buttons
182
511
183
Removed:
*** Narrow home link
512
Added:
On narrow screens, the navigation buttons become visible.
184
513
185
Removed:
#+NAME: narrow-home
514
Added:
#+NAME: narrow-buttons
186
515
#+BEGIN_SRC css :tangle no
187
Removed:
#home {
188
Removed:
display: inline-block;
189
Removed:
background: var(--topnav-menu);
190
Removed:
color: white;
191
Removed:
text-decoration: none;
192
Removed:
border-radius: 0 8px 8px 0;
193
Removed:
padding: 0.5em;
516
Added:
#topnav #buttons {
517
Added:
transform: translateX(0);
518
Added:
transition: transform 1s;
194
519
}
195
520
#+END_SRC
196
521
197
522
198
Removed:
*** Narrow hamburger
523
Added:
*** Hamburger icon
199
524
525
Added:
On narrow screens, the hamburger menu also becomes visible.
526
Added:
200
527
#+NAME: narrow-hamburger
201
528
#+BEGIN_SRC css :tangle no
202
Removed:
#topnav label {
203
Removed:
display: inline-block;
204
Removed:
float: right;
205
Removed:
color: white;
206
Removed:
padding: 0.5em;
207
Removed:
margin: 0;
208
Removed:
background: var(--topnav-menu);
209
Removed:
border-radius: 8px;
529
Added:
#topnav #hamburger {
530
Added:
transform: translateX(0);
531
Added:
transition: transform 1s;
532
Added:
}
533
Added:
#+END_SRC
534
Added:
535
Added:
536
Added:
*** Clickable menu labels
537
Added:
538
Added:
Both the hamburger menu and the shadow cast when the menu is unfolded
539
Added:
should appear clickable to the user.
540
Added:
541
Added:
#+BEGIN_SRC css
542
Added:
#hamburger, #shadow {
210
543
cursor: pointer;
211
544
}
212
Removed:
#topnav label:hover {
213
Removed:
color: var(--topnav-menu);
214
Removed:
background: white;
215
Removed:
}
216
Removed:
#topnav ul { display: none; }
217
Removed:
#topnav input:checked ~ ul {
218
Removed:
display: block;
219
Removed:
width: 100%;
220
Removed:
margin: 0;
221
Removed:
}
222
545
#+END_SRC
223
546
224
547
225
Removed:
*** TODO Narrow top navigation links
548
Added:
*** TODO Top navigation links---narrow
226
549
550
Added:
The navigation links contained in the top banner are stacked into a
551
Added:
column, their visibility can be toggled thanks to the ~#hamburger~
552
Added:
label.
553
Added:
227
554
#+NAME: narrow-topnav-links
228
555
#+BEGIN_SRC css :tangle no
229
556
#topnav ul {
230
Removed:
padding: 0;
557
Added:
position: absolute;
558
Added:
flex-direction: column;
559
Added:
background: var(--topnav);
560
Added:
height: calc(100vh - 4em);
561
Added:
top: 3.5em;
562
Added:
padding: 0 0.5em;
563
Added:
justify-content: normal;
564
Added:
overflow-x: scroll;
231
565
}
232
Removed:
#topnav ul a {
233
Removed:
box-sizing: border-box;
234
Removed:
display: block;
566
Added:
#topnav ul a { display: block; }
567
Added:
568
Added:
#+END_SRC
569
Added:
570
Added:
Toggle appearance of the navigation menu.
571
Added:
572
Added:
#+NAME: narrow-topnav-menu-toggle
573
Added:
#+BEGIN_SRC css :tangle no
574
Added:
#menu-toggle:not(:checked) ~ ul {
575
Added:
transition: transform 0.5s;
576
Added:
transform: translateX(-100%);
235
577
}
578
Added:
#menu-toggle:checked ~ ul {
579
Added:
transition: transform 0.5s;
580
Added:
transform: translateX(0);
581
Added:
}
236
582
#+END_SRC
237
583
238
584
239
Removed:
*** Narrow table of contents
585
Added:
When the navigation menu is open, the area of the interface not
586
Added:
covered by the navigation links should be obscured. This affords a
587
Added:
larger ``quit'' area, this is more ergonomic for mobile users. This
240
588
241
Removed:
#+NAME: narrow-table-of-contents
589
Added:
#+NAME: narrow-topnav-shadow
242
590
#+BEGIN_SRC css :tangle no
243
Removed:
/* #table-of-contents { */
244
Removed:
/* display: none; */
245
Removed:
/* } */
591
Added:
#shadow {
592
Added:
display: block;
593
Added:
position: absolute;
594
Added:
height: calc(100vh - 3.5em);
595
Added:
top: 3.5em;
596
Added:
right: 0;
597
Added:
width: 100%;
598
Added:
}
599
Added:
#topnav #menu-toggle:not(:checked) ~ #shadow {
600
Added:
transition: opacity 0.5s;
601
Added:
visibility: hidden;
602
Added:
opacity: 0;
603
Added:
}
604
Added:
#topnav #menu-toggle:checked ~ #shadow {
605
Added:
transition: opacity 0.5s;
606
Added:
visibility: visible;
607
Added:
opacity: 0.5;
608
Added:
}
246
609
#+END_SRC
247
610
248
611
@@ -250,7 +613,8 @@
250
613
251
614
#+NAME: narrow-content
252
615
#+BEGIN_SRC css :tangle no
253
Removed:
.outline-2 {
254
Removed:
width: 90%;
255
Removed:
}
616
Added:
.abstract,
617
Added:
.outline-2,
618
Added:
#table-of-contents,
619
Added:
#list-of-tables { width: 90%; }
256
620
#+END_SRC
resources/topnav.html
@@ -0,0 +1,24 @@
1
Added:
<nav id="topnav">
2
Added:
<div id="buttons">
3
Added:
<a href="index.html" id="home">Home</a>
4
Added:
<a href="#table-of-contents" id="home">Contents</a>
5
Added:
<!-- <a href="#table-of-contents" id="home">ToC</a> -->
6
Added:
<!-- <a href="#table-of-contents" id="home">ToC</a> -->
7
Added:
</div>
8
Added:
<input type="checkbox" id="menu-toggle"/>
9
Added:
<label for="menu-toggle" id="hamburger">
10
Added:
<div class="line" id="one"></div>
11
Added:
<div class="line" id="two"></div>
12
Added:
<div class="line" id="three"></div>
13
Added:
</label>
14
Added:
<label for="menu-toggle" id="shadow"></label>
15
Added:
<ul class="org-ul">
16
Added:
<li><a href="index.html">Home</a></li>
17
Added:
<li><a href="about.html">About</a></li>
18
Added:
<li><a href="http://blog.mlnp.fr/index.html">Blog</a></li>
19
Added:
<li><a href="http://wiki.mlnp.fr/index.html">Wiki</a></li>
20
Added:
<li><a href="cv.html">Curriculum Vitae</a></li>
21
Added:
<li><a href="publish-mlnp.html">Publish</a></li>
22
Added:
<li><a href="about.html#contact">Contact</a></li>
23
Added:
</ul>
24
Added:
</nav>
resources/topnav.org
@@ -1,6 +0,0 @@
1
Removed:
#+HTML: <nav id="topnav">
2
Removed:
#+HTML: <a href="index.html" id="home"><code>home</code></a>
3
Removed:
#+HTML: <label for="hamburger">☰</label>
4
Removed:
#+HTML: <input type="checkbox" id="hamburger"/>
5
Removed:
#+INCLUDE: topnav-items.org :lines "3-"
6
Removed:
#+HTML: </nav>