mirror of
https://github.com/thangisme/notes.git
synced 2024-09-07 05:34:19 -04:00
Adjust dl layout
Works for description lists with multiple `dt` and `dd` elements.
This commit is contained in:
parent
31b99a2a9b
commit
9fca3861ce
@ -109,7 +109,7 @@
|
|||||||
|
|
||||||
dl {
|
dl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: max-content 1fr;
|
grid-template: auto / 10em 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
dt,
|
dt,
|
||||||
@ -118,16 +118,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
dt {
|
dt {
|
||||||
|
grid-column: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
font-weight: 500;
|
||||||
&::after {
|
&::after {
|
||||||
content: ":";
|
content: ":";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
|
grid-column: 2;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
font-weight: 500;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anchor-heading {
|
.anchor-heading {
|
||||||
|
@ -140,6 +140,37 @@ end
|
|||||||
<dd>Green</dd>
|
<dd>Green</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
|
#### Multiple description terms and values
|
||||||
|
|
||||||
|
Term
|
||||||
|
: Brief description of Term
|
||||||
|
|
||||||
|
Longer Term
|
||||||
|
: Longer description of Term,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
Term
|
||||||
|
: First description of Term,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
: Second description of Term,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
Term1
|
||||||
|
Term2
|
||||||
|
: Single description of Term1 and Term2,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
Term1
|
||||||
|
Term2
|
||||||
|
: First description of Term1 and Term2,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
: Second description of Term1 and Term2,
|
||||||
|
possibly more than one line
|
||||||
|
|
||||||
|
### More code
|
||||||
|
|
||||||
```
|
```
|
||||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||||
```
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user