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