thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adjust dl layout 

Works for description lists with multiple `dt` and `dd` elements.
This commit is contained in:
PLanCompS 2020-08-03 17:38:48 +02:00
parent 31b99a2a9b
commit 9fca3861ce
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_sass/content.scss
View File

@ -109,7 +109,7 @@
dl {
display: grid;
grid-template-columns: max-content 1fr;
grid-template: auto / 10em 1fr;
}
dt,
@ -118,16 +118,18 @@
}
dt {
grid-column: 1;
text-align: right;
font-weight: 500;
&::after {
content: ":";
}
}
dd {
grid-column: 2;
margin-left: 1em;
font-weight: 500;
margin-bottom: 0;
}
.anchor-heading {

31
docs/index-test.md
View File

@ -140,6 +140,37 @@ end
<dd>Green</dd>
</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.
```