details styling for docs page

This commit is contained in:
madrilene 2024-02-07 11:52:31 +01:00
parent 80c71f6c2b
commit 5bb401b56c

View file

@ -1,5 +1,13 @@
details > * + * {
margin-block-start: var(--flow-space, 1em);
}
details > p:last-child {
margin-block-end: var(--space-l-xl);
}
summary {
grid-column: content;
grid-column: content;
}
summary {
@ -9,24 +17,23 @@ summary {
gap: 0 1ch;
cursor: pointer;
list-style: none;
font-weight: bold;
font-size: var(--size-step-1);
font-weight: bold;
font-size: var(--size-step-1);
}
summary:hover,
summary:focus-visible {
color: var(--color-primary-shade);
color: var(--color-primary);
}
summary::before {
content: '+';
display: block;
color: var(--color-primary);
font-family: var(--font-mono);
font-size: var(--size-step-0);
font-weight: normal;
font-family: var(--font-mono);
font-size: var(--size-step-0);
font-weight: normal;
line-height: 0.5;
margin-inline-start: -2ch;
transform: scale(1.4);
transform-origin: right bottom;
}
@ -43,5 +50,9 @@ summary::marker {
}
summary + * {
margin-block-start: var(--space-xs)
}
margin-block-start: var(--space-s-m);
}
details > * + * {
margin-inline-start: 2ch;
}