fix: Update lists with empty lines in between items

With a new dunbar update, unordered/ordered lists specify a possible
empty line between all list items (instead of being simple aliases for
bulleted/numbered list).

10 files changed, 67 insertions, 61 deletions

diff --git a/src/accessibility.du b/src/accessibility.du
index b31d121..d9356cd 100644
--- a/src/accessibility.du
+++ b/src/accessibility.du
@@ -27,11 +27,14 @@ I've watched [url https://www.youtube.com/watch?v=9xXBYcWgCHA Seren Davies' talk
 
 =[However]=, I've still implemented those icons with accessibility in mind:
 
-.bulleted
+:unordered
 - Navigation is done with text entries in the sidebar, not icons.
+
 - Buttons for other functionalities use text to reference their action, rather than (only) an "image", most of the time.
   The only mission-critical one that isn't represented with text is the sidebar folding and expanding button, right next to "Home".
   But it is mapped to the standard up and down pointing triangle characters, so it should still be useable.
+
 - Icons that aren't decorative are "mapped" to their closest standard Unicode symbol, so even without the font, their purpose should be fairly understandable.
   Furthermore, I make sure those Unicode symbols have been standardised since at least 1999.
+
 - My font has only the icons I use, and compared to the SVG equivalent setup, it takes up roughly a third of the size.
diff --git a/src/slides/demo/index.du b/src/slides/demo/index.du
index f9dc241..fe71321 100644
--- a/src/slides/demo/index.du
+++ b/src/slides/demo/index.du
@@ -68,16 +68,13 @@ An easy example is the image of the Great Britain flag (part of [url https://git
 
 ## Why?
 
-:bulleted
--
-.p Programs like Microsoft PowerPoint and LibreOffice Impress have very poor compatibility, between programs, versions, languages and even operating systems.
+:unordered
+- Programs like Microsoft PowerPoint and LibreOffice Impress have very poor compatibility, between programs, versions, languages and even operating systems.
   A web-based solution is significantly more consistent and flexible.
 
--
-.p Ideally, the system would be made well enough that creating a presentation would be significantly faster than with one of those.
+- Ideally, the system would be made well enough that creating a presentation would be significantly faster than with one of those.
 
--
-.p Making my own system means I can tailor it to my needs and preferences.
+- Making my own system means I can tailor it to my needs and preferences.
   Looking around other [url https://gist.github.com/vasilisvg/1611562 HTML-based presentation tools]:
 
   .bulleted
@@ -149,7 +146,7 @@ Maybe this should be changed?
 The source Markdown for the predvious slide is:
 
 ```dunbar
-'snippet 114 145 ./index.du
+'snippet 111 142 ./index.du
 
 
 :middle_slide
@@ -185,7 +182,7 @@ The source Markdown for the predvious slide is:
 The source Markdown for the predvious slide is:
 
 ```dunbar
-'snippet 155 181 ./index.du
+'snippet 152 178 ./index.du
 
 
 :slide27
diff --git a/src/slides/linuxgraphy-by-strabo/index.du b/src/slides/linuxgraphy-by-strabo/index.du
index a203bbb..1e7dfb1 100644
--- a/src/slides/linuxgraphy-by-strabo/index.du
+++ b/src/slides/linuxgraphy-by-strabo/index.du
@@ -64,6 +64,7 @@
 		1. Shell
 		2. UNIX-style file system
 		2. Kernel
+
 	[$br2]
 
 	3. Linux from the inside
@@ -212,14 +213,14 @@ In the beginning, programming was done mostly by [url https://en.wikipedia.org/w
 .p
 Ignoring [url https://unix.stackexchange.com/questions/14368/difference-between-posix-single-unix-specification-and-open-group-base-specifi/14415 standards] and [url https://unix.stackexchange.com/questions/87686/what-makes-an-operating-system-unix-like specifications], in my opinion, from the point of a user, a UNIX-like OS has the following components:
 
-[$br4]
+[$br2]
 
 .ordered
 1. =[shell]=: A programmable replaceable command-line interpreter, with utilities for managing the whole system and support for pipelines and I/O redirection
 2. =[UNIX-style file system]=: [url https://en.wikipedia.org/wiki/Unix_filesystem Filesystem] as a single rooted tree, objects (nodes) in the file system are [url https://en.wikipedia.org/wiki/Inode inodes] and an inode can be [url https://en.wikipedia.org/wiki/Unix_file_types (at least)] either a regular file, directory or devices. Permissions per users and group.
 3. =[kernel]=: Program that manages all communication and operations between the hardware and software
 
-[$br4]
+[$br2]
 
 .font18 *[For now we'll generally just look over some of the common stuff and go into detail later, while in Linux.]*
 
@@ -518,7 +519,7 @@ All process information is stored in a data structure, called a *[process contro
 Not to be confused with a [url https://en.wikipedia.org/wiki/Printed_circuit_board printed circuit board]!\n
 A PCB's data can be split into three categories:
 
-.ordered
+.numbered
 1. =[Process identification]= - the ID of the process itself, of it's parent process, of it's owner (user), etc.
 2. =[Process state]= - as described, the processor state, etc.\n
    On a context switch, values in registers are put into the stopped PCB and then are loaded from the running PCB.
diff --git a/src/styles.css b/src/styles.css
index 8721bbc..2d63ef8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -95,6 +95,13 @@ body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
 
 nav, article { background-color: var(--bg-color); }
 
+  /* Lists with line-separated items (ORDERED_LIST, UNORDERED_LIST) */
+li > div:only-child,
+li > div:only-child > img {
+  display: block;
+  margin: 1em 0em;
+}
+
 /*## Wrapper ##*/
 
 #content-wrapper {
diff --git a/src/tutorials/disable-sticky-keys-popup/index.du b/src/tutorials/disable-sticky-keys-popup/index.du
index 414419e..4826ea7 100644
--- a/src/tutorials/disable-sticky-keys-popup/index.du
+++ b/src/tutorials/disable-sticky-keys-popup/index.du
@@ -7,21 +7,25 @@
 
 We've all been there: you're playing a game and after pressing `[Shift]` multiple times, you get a popup about "Sticky Keys", similar to this one:
 
-[image ./img/windows-sticky-keys-prompt.png ]
+[image ./img/windows-sticky-keys-prompt.png]
 
 This is how to stop the popup from showing up ever again:
 
-:numbered
+:ordered
 1. Press =[Windows key + R]=, type in `[control access.cpl]`, and then press =[OK]=
-   .p [image ./img/windows-run-control-access.png]
+
+   [image ./img/windows-run-control-access.png]
 
 2. Inside the opened up window, press =[Make the keyboard easier to use]=
-   .p [image ./img/windows-make-keyboard-highlighted.png]
+
+   [image ./img/windows-make-keyboard-highlighted.png]
 
 3. After that, press =[Set up Sticky Keys]=
-   .p [image ./img/windows-sticky-keys-highlighted.png]
+
+   [image ./img/windows-sticky-keys-highlighted.png]
 
 4. Uncheck the =[Turn on Sticky Keys when SHIFT is pressed five times]=
-   .p [image ./img/windows-sticky-keys-disable.png]
+
+   [image ./img/windows-sticky-keys-disable.png]
 
 5. Finally, press =[OK]= and close the window
diff --git a/src/tutorials/export-skype/index.du b/src/tutorials/export-skype/index.du
index aa404b6..b9046b2 100644
--- a/src/tutorials/export-skype/index.du
+++ b/src/tutorials/export-skype/index.du
@@ -17,31 +17,31 @@ Continue reading for the required steps on doing it.
 
 ## Downloading files
 
-:numbered
+:ordered
 1. Open [url https://secure.skype.com/en/data-export secure.skype.com/en/data-export]
-   .p
-   .bulleted
+
+   .unordered
    - You could be asked to sign in.
      After signing in you'll need to *[open the link again]*, since you would be redirected to the wrong place.
 
 2. After opening the link you should be greeted by something like this.
    Check the two checkboxes next to =[Conversations]= and =[Files]= *[(pointed to by the red arrows)]*.
 
-   .p [image ./img/initial-screen.png ]
+   [image ./img/initial-screen.png]
 
 3. Press =[Submit request]=.
    After being greeted by this screen, press =[Continue]=.
 
-   .p [image ./img/export-prepared.png ]
+   [image ./img/export-prepared.png]
 
    .bulleted
    - You should now see an =[Available exports]= section near the top of the page.
      The status will be =[Pending]=.
-     .p [image ./img/available-exports.png ]
+     .p [image ./img/available-exports.png]
 
 5. Reload the page after a bit of time. When your export is ready, you'll find a =[Download]= button next to it, click it.
 
-   .p [image ./img/download-button.png ]
+   [image ./img/download-button.png]
 
 
 Your export will be downloaded as a `[.tar]` archive file.
@@ -49,7 +49,7 @@ You'll need an archiver utility to extract the files, something like [url https:
 
 ## Viewing your export - Official Tool
 
-:numbered
+:ordered
 1. Extract your archive
 
 2. Open the [url https://go.skype.com/skype-parser Skype Parser Download], which will prompt you to save `[skype-parser.zip]`
@@ -57,14 +57,14 @@ You'll need an archiver utility to extract the files, something like [url https:
 3. Extract `[skype-parser.zip]`
 
 4. Inside the `[skype-parser]` folder, open `[index.html]` (it might be named just `[index]`). You'll be greeted by this page in your browser:
-   .p [image ./img/default-skype-parser-index.png ]
+   [image ./img/default-skype-parser-index.png]
 
 5. Click the `[Choose File]` option and select the `[messages.json]` (it might be named just `[messages]`) file from your export.
-  .p [image ./img/choose-file.png ]
+   [image ./img/choose-file.png]
 
 6. Press the `[Load]` button right below, and you're done.
    On the left side you have your conversations, and when opening one, your messages will be displayed to the right (just like in Skype itself)
-   .p [image ./img/archived-conversations-skype-default.png ]
+   [image ./img/archived-conversations-skype-default.png]
 
 
 There is only one issue with this method - the official tool is somewhat broken.
@@ -77,10 +77,10 @@ The fix is using an alternative to the official tool.
 [url https://github.com/ArtemVeremienko ArtemVeremienko] is a GitHub user that took the official parser and fixed it.
 Their source code can be found over at [url https://github.com/ArtemVeremienko/skype-parser github.com/ArtemVeremienko/skype-parser].
 
-:numbered
+:ordered
 1. Go to the [url https://github.com/ArtemVeremienko/skype-parser/releases/latest latest release of his skype-parser] and download `[skype-parser.zip]`
 
-   .p [image ./img/github-skype-parser-download.png ]
+   [image ./img/github-skype-parser-download.png]
 
 2. Extract all of the files.
    They'll be in the same folder as the `[skype-parser.zip]` file, so find the `[index.html]` file and open it.
diff --git a/src/tutorials/fix-no-frame-buffer-plan9/index.du b/src/tutorials/fix-no-frame-buffer-plan9/index.du
index bce1cd9..4e9c877 100644
--- a/src/tutorials/fix-no-frame-buffer-plan9/index.du
+++ b/src/tutorials/fix-no-frame-buffer-plan9/index.du
@@ -12,7 +12,7 @@ aux/vga: inportl(0xc100): permission denied
 rio: can't open display: initdisplay: /dev/draw/new: no frame buffer
 init: rc exit status: rio 31: display open
 
-[image ./img/boot-prompt-no-frame-buffer-error.png ]
+[image ./img/boot-prompt-no-frame-buffer-error.png]
 
 For some reason, on certain configurations, the `[xga]` (`[vga]`) monitor type does not work when booting into Plan 9, even though it works fine during install. The fix is to adjust monitor settings to `[vesa]`:
 
@@ -24,7 +24,7 @@ aux/vga -m vesa -l
 
    You should get a cursor and a cleared prompt.
 
-   .p [image ./img/manual-prompt.png ]
+   [image ./img/manual-prompt.png]
 
 2. In this "new" shell prompt, enter
 
@@ -33,9 +33,8 @@ rio
 
    You should now get a grey background with the cursor in it.
 
-   .p [image ./img/manual-rio.png ]
+   [image ./img/manual-rio.png]
 
-   .p
    .bulleted
    - You are now in a graphical environment, so technically you can stop here. The other steps are for configuring it so you wont ever have that problem again.
 
@@ -51,9 +50,8 @@ sam /n/9fat/plan9.ini
 
    this is the configuration file we will be changing.
 
-   .p [image ./img/rio-9fat-commands.png ]
+   [image ./img/rio-9fat-commands.png]
 
-   .p
    .bulleted
    - How to make a window: right click, hold, hover over "New" and release the right click. Now right click somewhere in the top left, hold, drag to somewhere in bottom right, release.
 
@@ -71,8 +69,7 @@ b /n/9fat/plan9.ini
 
    and click the green-backgrounded box again. We're almost done here, enter `[w]`, wait a bit, and finally enter `[q]`.
 
-   :p
-   :bulleted
+   :unordered
    - If you want to check whether the file was properly saved, feel free to run
 
      ```
@@ -80,15 +77,14 @@ cat /n/9fat/plan9.ini
 
      and check that monitor is equal to vesa (you can scroll with the arrow keys, or with left and right mouse buttons, acting as up and down).
 
-     .p [image ./img/rio-plan9ini-cat.png ]
+     [image ./img/rio-plan9ini-cat.png]
 
    - The first command opens the `[plan9.ini]` file for editing, and the second command, finds every line that contains `[xga]` (there should probably be only one) and on each matching line replaces `[xga]` with `[vesa]`. Refer to the [url https://p9f.org/sys/doc/sam/sam.html docs] for more information.
 
 
-
 5. That's it, all we have to do is halt our file system with `[fshalt]` (or type out the command in the [url https://9p.io/wiki/plan9/Installing_Plan_9_on_Qemu/ Qemu installation guide]) and Force Reset the virtual machine.
 
 
 The next time you boot into Plan 9 and into your user, the graphical environment should load fine. Enjoy Plan 9!
 
-[image ./img/rio-default-login.png ]
+[image ./img/rio-default-login.png]
diff --git a/src/tutorials/how-to-encrypt-email/index.du b/src/tutorials/how-to-encrypt-email/index.du
index f5cb9ca..403bde9 100644
--- a/src/tutorials/how-to-encrypt-email/index.du
+++ b/src/tutorials/how-to-encrypt-email/index.du
@@ -6,11 +6,11 @@
 [$pagenav]
 
 :contents
-:ordered
+:numbered
 1. [url #getting-keys Getting keys]
-   :ordered
+   :numbered
    1. [url #pgp PGP]
-      .ordered
+      .numbered
       1. [url #pgptool.org pgptool.org]
       2. [url #gnu-privacy-guard GNU Privacy Guard]
 
diff --git a/src/tutorials/how-to-use-jira/cards.du b/src/tutorials/how-to-use-jira/cards.du
index a73a152..68ca2d6 100644
--- a/src/tutorials/how-to-use-jira/cards.du
+++ b/src/tutorials/how-to-use-jira/cards.du
@@ -32,16 +32,15 @@ Each card has the following properties:
 
 [image ./img/fields-cards.png]
 
-:bulleted
+:unordered
 - =[Project]= - the [url ./projects.html project] this card is stored in
 
-  .p [image ./img/project-create-card.png]
+  [image ./img/project-create-card.png]
 
 - =[Issue type]= - the basic purpose of an issue (Improvement, Bug, ...)
 
-  .p [image ./img/issue-types.png]
+  [image ./img/issue-types.png]
 
-  :p
   :bulleted
   - [image ./img/story-type.png Story] - functionality or feature expressed as a goal, something like "As a user, I want to be able to pay for my order via PayPal"
 
@@ -54,30 +53,29 @@ Each card has the following properties:
   - [image ./img/sub-task-type.png Sub-task] - an issue that is directly connected to another issue. This is used for when a given issue needs to be broken down into separate even smaller issues.
 
 
-
 - =[Summary]= - a (required) brief explanation of the issue
 
-  .p [image ./img/summary-create-card.png]
+  [image ./img/summary-create-card.png]
 
 - =[Description]= - detailed explanation of the issue
 
-  .p [image ./img/description-create-card.png]
+  [image ./img/description-create-card.png]
 
 - =[Reporter]= - person who created the issue
 
-  .p [image ./img/reporter-create-card.png]
+  [image ./img/reporter-create-card.png]
 
 - =[Assignee]= - person who will work on the issue
 
-  .p [image ./img/assignee-create-card.png]
+  [image ./img/assignee-create-card.png]
 
 - =[Labels]= - tags with which you can organise even more the issue
 
-  .p [image ./img/label-create-card.png]
+  [image ./img/label-create-card.png]
 
 - =[Epic link]= - link of issue with type Epic
 
-  .p [image ./img/epic-link-create-card.png]
+  [image ./img/epic-link-create-card.png]
 
 
 ## Creating
diff --git a/src/tutorials/how-to-use-jira/projects.du b/src/tutorials/how-to-use-jira/projects.du
index 277e108..4ecccd2 100644
--- a/src/tutorials/how-to-use-jira/projects.du
+++ b/src/tutorials/how-to-use-jira/projects.du
@@ -101,18 +101,18 @@ Once you've made your choice, you will be met with three options:
 
 [image ./img/board-from.png]
 
-:bulleted
+:unordered
 - =[Board created with new Software project]= - creates a new project with a new board (has the name of the project).
 
-  .p [image ./img/npb.png]
+  [image ./img/npb.png]
 
 - =[Board from existing project]= - creates a board that gets the filter from another project
 
-  .p [image ./img/ntb.png]
+  [image ./img/ntb.png]
 
 - =[Board from an existing Saved Filter]= - as it says, you add to the project (indicated in the `[Location]` field) a board based on a saved filter
 
-  .p [image ./img/ntb-filter.png]
+  [image ./img/ntb-filter.png]
 
 
 ## Backlog