/*!************************************************************************************************************************************************************************************************************************************************!*\
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/glossary/style.scss ***!
|
\************************************************************************************************************************************************************************************************************************************************/
|
:root {
|
--navWidth: 40vw;
|
}
|
@media (min-width: 768px) {
|
:root {
|
--navWidth: 22vw;
|
}
|
}
|
nav.glossary-index {
|
position: fixed;
|
top: 50%;
|
transform: translateY(-50%);
|
width: var(--navWidth);
|
left: -8px;
|
height: 60vh;
|
z-index: var(--z-3);
|
}
|
nav.glossary-index > 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;
|
}
|
nav.glossary-index li, nav.glossary-index a {
|
flex: 1;
|
width: 100%;
|
height: -moz-max-content;
|
height: max-content;
|
min-height: max(var(--chipchip), -moz-max-content);
|
min-height: max(var(--chipchip), max-content);
|
}
|
nav.glossary-index a {
|
--justify: center;
|
padding: 0.25rem 0.5rem;
|
hyphens: auto;
|
background-color: rgba(var(--base), var(--op-45));
|
word-wrap: anywhere;
|
white-space: wrap;
|
}
|
nav.glossary-index a:hover,
|
nav.glossary-index a:focus,
|
nav.glossary-index a.active {
|
background-color: rgba(var(--action-0), var(--op-6));
|
color: var(--action-contrast);
|
}
|
.glossary dd {
|
margin-right: 0.5rem;
|
width: calc(100% + 0.75rem);
|
}
|
.glossary dd,
|
.glossary dt {
|
position: relative;
|
right: 0;
|
transition: margin var(--trans-base), right var(--trans-base), width var(--trans-base);
|
}
|
.glossary dt:target,
|
.glossary dt.active {
|
outline: none;
|
right: -1.5rem;
|
padding: 0;
|
color: rgb(var(--action-0));
|
}
|
.glossary dt:target + dd,
|
.glossary dt.active + dd {
|
right: -1.5rem;
|
}
|
main header,
|
dl.glossary {
|
grid-column: full;
|
padding: 0 2rem 0 var(--navWidth);
|
}
|
@media (min-width: 768px) {
|
main header,
|
dl.glossary {
|
margin-right: auto;
|
max-width: var(--content);
|
margin-left: var(--navWidth);
|
padding-left: var(--btn);
|
}
|
}
|
@media (max-width: 768px) {
|
.glossary h2 {
|
font-size: var(--txt-medium);
|
}
|
.glossary p {
|
font-size: var(--txt-x-small);
|
}
|
.glossary-index li, .glossary-index a {
|
height: -moz-fit-content;
|
height: fit-content;
|
}
|
.glossary-index a {
|
font-size: var(--txt-x-small);
|
padding: 0.25rem;
|
min-height: 2em;
|
}
|
body:has(.glossary) h1 {
|
font-size: var(--txt-xx-large);
|
}
|
}
|
