=CustomBlocks.php overhaul relatively complete. Also refactored the gallery...

Jake Vanderwerf

5 days ago 75a097a018a0090f5902758353c578fce4aa2a25

 src/glossary/style.scss

New file
@@ -0,0 +1,109 @@
: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);
   }
}