[style] Improve spacing and focus styles

Spacing Suggestion: https://tatooine.club/@abnv@fantastic.earth/111650391564264200
Co-Author: Karthik Balakrishnan <karthikb351@gmail.com>
Closes #2
We already have a cursor pointer now to guide users to clickability.
But the styling in @karthikb351's suggestion were too good
to ignore, so instead reuse them for keyboard focus.
This commit is contained in:
Nemo 2023-12-27 10:03:00 +05:30
parent 0bb026114b
commit 0a1833178c
1 changed files with 25 additions and 1 deletions

View File

@ -15,6 +15,13 @@ main {
margin-bottom: 20px;
}
details summary {
cursor: pointer;
padding-bottom: 0.4em;
}
details summary > * {
display: inline;
}
summary>h3, summary>h2 {
display: inline;
font-weight: normal;
@ -196,4 +203,21 @@ mark {
display: inline;
text-decoration: none;
font-style: normal;
}
}
details {
padding-bottom: 0.4em;
}
details summary:focus-visible {
outline: none;
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: #660033;
text-underline-offset: 0.2em;
text-decoration-thickness: 0.1em;
}
details.viewed summary:focus-visible {
text-decoration-color: #66003344;
}