thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-02 18:46:38 -05:00
Code Issues Projects Releases Wiki Activity

Adjust dl layout

Browse Source 
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 { 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 {

31
docs/index-test.md
View File

@ -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.
``` ```