improve target styling

This commit is contained in:
Theis Pieter Hollebeek 2025-10-14 15:17:26 +02:00
parent 809c272bd8
commit ffe08fbd1e
2 changed files with 24 additions and 8 deletions

View File

@ -49,7 +49,7 @@ Represents JavaScript's
Example: Example:
``` ```javascript
"Enter": Enter was pressed. "Enter": Enter was pressed.
"b": Lowercase 'b' was pressed. "b": Lowercase 'b' was pressed.
"B": Uppercase 'B' was pressed (i.e. Shift + B) "B": Uppercase 'B' was pressed (i.e. Shift + B)

30
docs/static/style.css vendored
View File

@ -44,6 +44,7 @@ a {
text-decoration-color: var(--clr-brand); text-decoration-color: var(--clr-brand);
} }
ul code,
p code { p code {
background-color: #1d2021; background-color: #1d2021;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@ -78,12 +79,6 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
h2 {
position: sticky;
top: 0;
z-index: 10;
}
table-of-contents h2 { table-of-contents h2 {
position: initial; position: initial;
} }
@ -102,7 +97,7 @@ table-of-contents ul:first-of-type {
margin: 0; margin: 0;
} }
table-of-contents li: { table-of-contents li {
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
@ -117,3 +112,24 @@ table-of-contents h2 {
h3 { h3 {
font-size: 1.4em; font-size: 1.4em;
} }
:target {
animation: targetflash 2.5s;
}
@keyframes targetflash {
0% {
color: inherit;
scale: 100%;
}
20% {
color: var(--clr-brand);
scale: 110%;
}
100% {
color: inherit;
scale: 100%;
}
}