:root {
|
--navWidth: 40vw;
|
@media (min-width: 768px) {
|
--navWidth: 22vw;
|
}
|
}
|
|
nav.glossary-index {
|
position: fixed;
|
top: 50%;
|
transform: translateY(-50%);
|
width: var(--navWidth);
|
right: -8px;
|
height: 60vh;
|
z-index: var(--z-3);
|
|
> ul {
|
--dir: column;
|
--align: flex-start;
|
--justify: flex-start;
|
--gap: 1px;
|
touch-action: pan-y;
|
max-height: 100%;
|
height: 100%;
|
width: 100%;
|
overflow: hidden auto;
|
scroll-behavior: smooth;
|
}
|
li, a {
|
flex: 1;
|
width: 100%;
|
height: max-content;
|
min-height: max(var(--chipchip), max-content);
|
}
|
a {
|
--justify: center;
|
padding: .25rem .5rem;
|
hyphens: auto;
|
background-color: rgba(var(--base),var(--op-45));
|
word-wrap: anywhere;
|
white-space: wrap;
|
}
|
a:hover,
|
a:focus,
|
a.active {
|
background-color: rgba(var(--action-0), var(--op-6));
|
color: var(--action-contrast);
|
}
|
}
|
.glossary dd {
|
margin-left: .5rem;
|
width: calc(100% + .75rem);
|
}
|
.glossary dd,
|
.glossary dt {
|
position: relative;
|
left: 0;
|
transition: margin var(--trans-base),
|
left var(--trans-base),
|
width var(--trans-base);
|
}
|
.glossary dt:target,
|
.glossary dt.active {
|
outline: none;
|
left: -1.5rem;
|
padding: 0;
|
color: rgb(var(--action-0));
|
}
|
.glossary dt:target + dd,
|
.glossary dt.active + dd {
|
left: -1.5rem;
|
}
|
|
main header,
|
dl.glossary {
|
grid-column: full;
|
padding: 0 var(--navWidth) 0 2rem;
|
@media (min-width:768px) {
|
margin-left: auto;
|
max-width: var(--content);
|
margin-right: var(--navWidth);
|
padding-right: var(--btn);
|
}
|
}
|
|
@media (max-width: 768px) {
|
.glossary {
|
h2 {
|
font-size: var(--txt-medium);
|
}
|
p {
|
font-size: var(--txt-x-small);
|
}
|
}
|
.glossary-index {
|
li,a {
|
height: fit-content;
|
}
|
a {
|
font-size: var(--txt-x-small);
|
padding: .25rem;
|
min-height: 2em;
|
}
|
}
|
|
body:has(.glossary) h1 {
|
font-size: var(--txt-xx-large);
|
}
|
}
|
