From 59f757a79065693344a60cd48c4f81303be05433 Mon Sep 17 00:00:00 2001 From: PLanCompS <18308236+pdmosses@users.noreply.github.com> Date: Tue, 29 Sep 2020 17:13:13 +0200 Subject: [PATCH] Fix list alignment Resolve #420 - Remove `margin-top` for the first child in various list items, to improve alignment. - Add examples of lists to `docs/tests/styling`. --- _sass/content.scss | 35 ++++++++++++++++ docs/tests/styling/dl.md | 83 +++++++++++++++++++++++++++++++++++++ docs/tests/styling/index.md | 8 ++++ docs/tests/styling/ol.md | 65 +++++++++++++++++++++++++++++ docs/tests/styling/ul.md | 65 +++++++++++++++++++++++++++++ 5 files changed, 256 insertions(+) create mode 100644 docs/tests/styling/dl.md create mode 100644 docs/tests/styling/index.md create mode 100644 docs/tests/styling/ol.md create mode 100644 docs/tests/styling/ul.md diff --git a/_sass/content.scss b/_sass/content.scss index bc906ed..96cddc8 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -154,6 +154,41 @@ visibility: hidden; } } + + dd { + blockquote, + div, + dl, + dt, + h1, + h2, + h3, + h4, + h5, + h6, + li, + ol, + p, + pre, + table, + ul, + .table-wrapper { + &:first-child { + margin-top: 0; + } + } + } + + dd, + ol, + ul { + dl:first-child { + dt:first-child, + dd:nth-child(2) { + margin-top: 0; + } + } + } .anchor-heading:hover, h1:hover > .anchor-heading, diff --git a/docs/tests/styling/dl.md b/docs/tests/styling/dl.md new file mode 100644 index 0000000..49dc034 --- /dev/null +++ b/docs/tests/styling/dl.md @@ -0,0 +1,83 @@ +--- +layout: default +title: Description lists +parent: Styling +grand_parent: Tests +--- + +# Description lists + +The first child element of each `dd` element in a `dl` list should be aligned with the preceding `dt` element in the following examples. + +term + +: paragraph text + + paragraph text + +term + +: ### Header + + paragraph text + +term + +: > block quote + + paragraph text + +term + +: ```sh + fenced code block + ``` + + paragraph text + +term + +: + unordered list item + + unordered list item + + paragraph text + +term + +: 1. ordered list item + 2. ordered list item + + paragraph text + +term + +: sub-term + : sub-description + + sub-term + : sub-description + + paragraph text + +term + +: |-----------------+------------+-----------------+----------------| + | Default aligned |Left aligned| Center aligned | Right aligned | + |-----------------|:-----------|:---------------:|---------------:| + | First body part |Second cell | Third cell | fourth cell | + | Second line |foo | **strong** | baz | + | Third line |quux | baz | bar | + |-----------------+------------+-----------------+----------------| + | Second body | | | | + | 2 line | | | | + |=================+============+=================+================| + | Footer row | | | | + |-----------------+------------+-----------------+----------------| + + paragraph text + +term + +: *** + + paragraph text diff --git a/docs/tests/styling/index.md b/docs/tests/styling/index.md new file mode 100644 index 0000000..12782be --- /dev/null +++ b/docs/tests/styling/index.md @@ -0,0 +1,8 @@ +--- +layout: default +title: Styling +parent: Tests +has_children: true +--- + +# Styling diff --git a/docs/tests/styling/ol.md b/docs/tests/styling/ol.md new file mode 100644 index 0000000..6e1468d --- /dev/null +++ b/docs/tests/styling/ol.md @@ -0,0 +1,65 @@ +--- +layout: default +title: Ordered lists +parent: Styling +grand_parent: Tests +--- + +# Ordered lists + +The first child element of each `li` element in an `ol` list should be aligned with the preceding label in the following examples. + +1. paragraph text + + paragraph text + +1. ### Header + + paragraph text + +1. > block quote + + paragraph text + +1. ```sh + fenced code block + ``` + + paragraph text + +1. + unordered list item + + unordered list item + + paragraph text + +1. 1. ordered list item + 2. ordered list item + + paragraph text + +1. term + : description + + term + : description + + paragraph text + +1. |-----------------+------------+-----------------+----------------| + | Default aligned |Left aligned| Center aligned | Right aligned | + |-----------------|:-----------|:---------------:|---------------:| + | First body part |Second cell | Third cell | fourth cell | + | Second line |foo | **strong** | baz | + | Third line |quux | baz | bar | + |-----------------+------------+-----------------+----------------| + | Second body | | | | + | 2 line | | | | + |=================+============+=================+================| + | Footer row | | | | + |-----------------+------------+-----------------+----------------| + + paragraph text + +1. *** + + paragraph text diff --git a/docs/tests/styling/ul.md b/docs/tests/styling/ul.md new file mode 100644 index 0000000..070b41a --- /dev/null +++ b/docs/tests/styling/ul.md @@ -0,0 +1,65 @@ +--- +layout: default +title: Unordered lists +parent: Styling +grand_parent: Tests +--- + +# Unordered lists + +The first child element of each `li` element in a `ul` list should be aligned with the preceding bullet in the following examples. + +- paragraph text + + paragraph text + +- ### Header + + paragraph text + +- > block quote + + paragraph text + +- ```sh + fenced code block + ``` + + paragraph text + +- + unordered list item + + unordered list item + + paragraph text + +- 1. ordered list item + 2. ordered list item + + paragraph text + +- term + : description + + term + : description + + paragraph text + +- |-----------------+------------+-----------------+----------------| + | Default aligned |Left aligned| Center aligned | Right aligned | + |-----------------|:-----------|:---------------:|---------------:| + | First body part |Second cell | Third cell | fourth cell | + | Second line |foo | **strong** | baz | + | Third line |quux | baz | bar | + |-----------------+------------+-----------------+----------------| + | Second body | | | | + | 2 line | | | | + |=================+============+=================+================| + | Footer row | | | | + |-----------------+------------+-----------------+----------------| + + paragraph text + +- *** + + paragraph text